/* The introductory laboratory keeps the retained fonts, brand and license scope. */
body.lab{background:#f7f5f1;color:#292529}
.lab main{max-width:1120px;padding:18px 28px 50px;margin:auto}
.lab .site-head{max-width:1180px;margin:auto}
.lab .site-title p{max-width:600px}
.lab-nav{max-width:1120px;margin:auto;padding:8px 28px;display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #ddd7d1}
.lab-nav a{padding:12px 15px;border-radius:6px;text-decoration:none;color:#641326;min-height:44px;font-weight:600}
.lab-nav a:hover,.lab-nav a:focus-visible{background:#ede4e5}
.lab-intro{max-width:900px;margin-bottom:20px}
.lab-intro h2{font-size:clamp(29px,3vw,35px);line-height:1.15;margin:5px 0 8px}
.lab-intro p{font-size:17px;line-height:1.4;margin:6px 0}
.lab .eyebrow{color:#751a2c;font-size:13px;letter-spacing:.05em;font-weight:650}
.lab-section{scroll-margin-top:20px;margin:0 0 30px;padding:24px;border:1px solid #ded8d1;border-radius:12px;background:#fff}
.lab-section h3{font-size:27px;margin:0 0 10px;line-height:1.2}
.lab-section h4{font-size:21px;margin:0 0 8px}
.lab-section p{line-height:1.5;margin:8px 0 14px}
.lab .btn{min-height:44px;min-width:44px;white-space:normal;line-height:1.25;touch-action:manipulation}
.lab button[aria-pressed=true]{border-color:#751a2c;background:#f4e8eb;color:#641326;box-shadow:inset 0 0 0 1px #751a2c}
/* style.css darkens a pressed .btn on hover; here the pressed face is light, so keep its dark text readable. */
.lab button[aria-pressed=true]:hover:not(:disabled){background:#ead7dc;color:#641326}
.lab button:focus-visible,.lab a:focus-visible,.lab select:focus-visible,.lab input:focus-visible,.lab summary:focus-visible{outline:3px solid #176995;outline-offset:3px}
.lab-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0}
.lab-toolbar label,.lab-toolbar span{font-size:16px}
.lab select,.lab input{min-height:44px;border:1px solid #aaa2a2;border-radius:6px;background:#fff;padding:9px 12px;color:inherit;font:inherit;max-width:100%}
.lab select{cursor:pointer}
.lab-count{padding:12px 16px;border-left:4px solid #751a2c;background:#f6f0f0;font-size:18px;margin:12px 0 18px;line-height:1.45}
.lab-count b{color:#671426}
.pattern-rules{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.pattern-rule{display:flex;gap:14px;align-items:center;padding:9px 14px;background:#f8f5f2;border:1px solid #e4ddd5;border-radius:8px}
.pattern-rule svg{width:110px;height:90px;flex:none}
.rule-rank{fill:#3f2a33;font-family:Inter,sans-serif;font-size:17px;font-weight:650}
.pattern-rule p{font-size:16px;margin:0;line-height:1.4}
.pattern-rule strong{display:block;margin-bottom:3px;font-size:18px}
.pattern-rule small{display:block;color:#5b5157;margin-top:5px}
.case-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:14px 0 24px}
.case-card{padding:9px 6px;background:#fff;border:1px solid #d5d0ca;border-radius:8px;color:inherit;cursor:pointer;min-height:146px;font:inherit}
.case-card svg{width:100%;height:80px;display:block}
.case-card .case-values{display:block;font-size:20px;letter-spacing:.1em;font-weight:600;line-height:1.35}
.case-card .case-status{display:block;font-size:13px;margin-top:4px;line-height:1.3}
.case-card.rejected{background:#faf8f6}
.lab-inspector{border-top:1px solid #ded8d1;padding-top:22px;margin-top:8px;scroll-margin-top:20px}
.entry-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:12px 0 10px}
.entry-row label{display:flex;flex-direction:column;gap:5px;flex:1;min-width:190px;max-width:420px;font-weight:550}
.entry-row input{width:100%;font-size:20px;letter-spacing:.12em}
.input-help{font-size:14px;color:#645b61}
.input-error{color:#931f2b;min-height:50px;font-weight:550;margin:5px 0!important}
.input-error:empty{visibility:hidden}
.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 15px}
.inspector-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.inspector-grid>div,.cut-editor>div,.polygon-grid>*{min-width:0}
.lab-plot{display:block;width:100%;height:auto;max-height:280px}
.plot-grid{stroke:#e1ddd9;stroke-width:1}
.plot-axis{stroke:#8e8388;stroke-width:1.3}
.plot-line{stroke:#b0a7a8;stroke-width:2;fill:none}
.plot-picked{stroke:#751a2c;stroke-width:3;fill:none}
.plot-dot{fill:#6d5962;stroke:white;stroke-width:2}
.plot-dot.selected{fill:#751a2c}
.plot-dot.muted{fill:#c2b8bc}
.plot-value{fill:white;font-family:Inter,sans-serif;font-size:16px;font-weight:600;text-anchor:middle}
.plot-label{fill:#53494f;font-family:Inter,sans-serif;font-size:13px}
.plot-axis-name{fill:#3f363b;font-family:var(--serif);font-style:italic;font-size:19px}
.plot-axis-sub{font-style:normal;font-size:13px}
/* Tick and axis labels carry the referents (position, value, u-coordinate): keep them at least ~13 px on a 390 px phone. */
.lab-plot .plot-label{font-size:16px}
.polygon-plot .plot-label{font-size:14px}
.vertex-label{fill:#5a1222;font-family:Inter,sans-serif;font-size:14px;font-weight:650;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.mini-dot{fill:#751a2c}
.mini-line{stroke:#917b84;stroke-width:1.6;fill:none}
.lab-legend{font-size:14px!important;color:#60535c;text-align:center;margin:4px 0 8px!important}
.swap-row{display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap}
.swap-row .btn{font-size:14px;padding:6px 9px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:1px}
.swap-row .btn small{font-size:12px;color:#5b5157;font-weight:400}
.lab-summary{min-height:100px;background:#f5f1ec;border-radius:6px;padding:12px 14px;line-height:1.5;margin:0 0 14px}
.lab-summary b{color:#641326}
.triple-control label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.triple-control select{width:100%}
.rank-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:14px 0 8px;font-family:Inter,sans-serif;font-size:15px}
.rank-table th,.rank-table td{padding:9px 5px;border-bottom:1px solid #ded8d1;text-align:center}
.rank-table th:first-child{width:37%;text-align:left;font-weight:500;color:#665761}
.rank-table tr:last-child td{color:#751a2c;font-weight:650;font-size:19px}
.triple-result{min-height:125px;font-size:16px;line-height:1.5;margin:10px 0}
.lab details{margin:16px 0 0;border-top:1px solid #e3ddd7;padding-top:10px}
.lab summary{cursor:pointer;padding:10px 0;min-height:44px;color:#641326;font-weight:600}
.triple-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.triple-item{min-height:44px;text-align:left;padding:9px 12px;border:1px solid #ddd6ce;border-radius:6px;background:#fff;font:inherit;cursor:pointer;font-size:14px}
.triple-item strong{display:block;color:#751a2c;font-size:16px}
.lab-linked{margin-top:12px!important;font-size:16px}
.cut-editor{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:18px 0}
.position-row{display:flex;gap:6px;justify-content:center;margin:12px 0}
.position-slot{display:flex;flex-direction:column;text-align:center;flex:1;max-width:70px;min-width:0;padding:8px 4px;border:1px solid #ddd2c9;border-radius:6px;background:#faf8f5}
.position-slot small{font-size:11px;color:#645962;white-space:nowrap}
.position-slot b{font-size:21px}
.cut-buttons{display:flex;gap:8px;flex-wrap:wrap}
.cut-buttons .btn{flex:1;min-width:80px;font-size:14px}
#cut-result{min-height:60px}
.blocks-row{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0;flex-wrap:wrap;min-height:80px}
.value-block{border:1px solid #9b6e7a;background:#f6edf0;border-radius:7px;padding:10px 12px;display:inline-flex;gap:12px;align-items:center;font-family:Inter,sans-serif}
.value-block b{font-size:24px;color:#6b182b}
.value-block b+b{margin-left:.35em}
.value-block small{font-size:13px;display:block;color:#65555e}
.allocation-list{margin:12px 0;padding-left:20px;font-size:15px;line-height:1.5;min-height:150px}
.allocation-list[data-size="3"]{min-height:120px}
.allocation-list[data-size="5"]{min-height:185px}
.allocation-list li{margin-bottom:7px}
.dictionary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dictionary-case{border:1px solid #d9d2cc;border-radius:7px;background:#fff;padding:10px 12px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;min-height:62px}
.dictionary-case b{color:#671426;font-size:19px;letter-spacing:.06em}
.dictionary-case small{font-size:13px;display:block;margin-top:3px;color:#63555f}
.dictionary-case svg{height:48px;width:100%}
.dictionary-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 4px}
.dictionary-echo{flex:1 1 320px;margin:0!important;font-size:15px;line-height:1.45}
.dictionary-echo b{color:#671426}
.theorem{border-left:3px solid #751a2c;background:#f7f3ef;padding:14px 18px;margin:20px 0}
.theorem p{margin:5px 0 10px}
.theorem .math{display:inline-block;max-width:100%}
/* One list of children: on wide screens the figure sits in the right column beside the controls; on phones the
   DOM order puts it right after the vertex buttons, so a choice and its picture stay on one screen. */
.polygon-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto) 1fr;column-gap:22px;align-items:start;margin-top:18px}
.polygon-grid>*{grid-column:1}
.polygon-grid>.polygon-figure{grid-column:2;grid-row:1/span 6}
.polygon-grid>.lab-toolbar{margin:4px 0 0}
.vertex-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.vertex-buttons .btn{flex:1 1 0;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px}
.vertex-buttons .btn b{font-size:16px;letter-spacing:.04em}
.vertex-buttons .btn small{font-size:12px;color:#5b5157;font-weight:400;line-height:1.2}
.vertex-buttons .btn[aria-pressed=true] small{color:#641326}
.polygon-plot{display:block;width:100%;height:auto;max-height:340px}
.poly-fill{fill:#f6e7ec;stroke:#751a2c;stroke-width:2}
.lattice-dot{fill:#70616a;stroke:white;stroke-width:1.5}
.lattice-dot.interior{fill:#176995;stroke:#fff}
.lattice-dot.boundary{fill:#fff;stroke:#70616a;stroke-width:2}
.lattice-dot.vertex{fill:#751a2c}
.vertex-ring{fill:none;stroke:#292529;stroke-width:3}
.polygon-note{font-size:15px;line-height:1.5;min-height:55px}
.lattice-list{font-family:Inter,sans-serif;font-size:14px;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lattice-list span{padding:7px 9px;background:#f5f0eb;border-radius:4px}
.bridge-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.bridge-links a{display:block;padding:14px;border:1px solid #c6b9bc;border-radius:7px;color:#65172a;text-decoration:none;line-height:1.5;min-height:80px}
.bridge-links strong{display:block;font-size:18px}
.lab-section h3[tabindex="-1"]:focus{outline:none}
.lab-section h3[tabindex="-1"]:focus-visible{outline:3px solid #176995;outline-offset:4px}
.lab-nav a.lab-next{margin-left:auto;border:1px solid #c6b9bc}
.cube-next{margin-top:22px;padding-top:16px;border-top:1px solid #e3ddd7}
.cube-next p{margin:6px 0 12px}
.cube-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cube-links a{display:block;padding:14px;border:1px solid #c6b9bc;border-radius:7px;color:#65172a;text-decoration:none;line-height:1.45;min-height:80px}
.cube-links a:hover,.bridge-links a:hover{background:#faf4f5}
.cube-links strong{display:block;font-size:18px;margin-bottom:2px}
.cube-links small{display:block;margin-top:6px;font-size:14px;color:#5b5157;line-height:1.4}
.lab-footer{max-width:1120px;margin:auto}
.lab .source-note{max-width:1120px}
.lab .scope{font-size:16px;padding:16px;background:#f3eeee;border-radius:7px;line-height:1.55}
.lab .visually-hidden{min-width:0!important;max-width:1px!important;width:1px!important;left:0!important}
.lab .source-note p{line-height:1.5}
@media(min-width:900px){.case-grid[data-size="3"]{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:800px){.case-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bridge-links{grid-template-columns:1fr 1fr}.inspector-grid,.cut-editor,.polygon-grid{grid-template-columns:1fr}.polygon-grid{grid-template-rows:none}.polygon-grid>.polygon-figure{grid-column:1;grid-row:auto;margin:4px 0 6px}.lab-plot{max-height:250px}.polygon-plot{max-height:330px}}
@media(max-width:520px){.lab main{padding:20px 12px 30px}.lab .site-head{padding:16px 14px}.lab .site-title h1{font-size:23px}.lab .site-title p{font-size:13px}.lab-nav{padding:5px 10px;gap:2px}.lab-nav a{padding:10px;font-size:14px}.lab-intro p{font-size:17px}.lab-section{padding:18px 14px;margin-bottom:22px}.lab-section h3{font-size:24px}.pattern-rules{gap:8px}.pattern-rule{display:block;padding:10px;text-align:center}.pattern-rule svg{width:100px;height:82px;display:block;margin:0 auto 6px}.pattern-rule p{font-size:14px}.pattern-rule strong{font-size:17px}.pattern-rule small{font-size:12px}.case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.case-card{min-height:128px;padding:7px 4px}.case-card svg{height:67px}.case-card .case-values{font-size:18px}.case-card .case-status{font-size:12px}.lab-toolbar{gap:8px}.lab-toolbar label{width:100%}.entry-row label{max-width:none;min-width:0;width:100%;flex-basis:100%}.entry-row .btn{flex:1}.preset-row .btn{font-size:14px}.rank-table{font-size:14px}.rank-table th:first-child{width:43%}.rank-table th,.rank-table td{padding:8px 3px}.triple-list,.dictionary{grid-template-columns:1fr}.dictionary-case{grid-template-columns:1fr 1fr}.cut-buttons{gap:6px}.cut-buttons .btn{font-size:13px;padding:8px;min-width:80px}.value-block{gap:9px;padding:9px}.value-block b{font-size:22px}.bridge-links{grid-template-columns:1fr 1fr;gap:8px}.bridge-links a{padding:11px;font-size:14px}.bridge-links strong{font-size:17px}.lab .source-note{padding:18px 14px}.theorem{padding:12px}.theorem .katex{font-size:1em}}
@media(prefers-reduced-motion:reduce){.lab *{scroll-behavior:auto!important}}
@media(max-width:520px){#enum-size,#enum-filter{font-size:16px;padding:8px 6px}.pattern-rule svg{height:82px;width:100px}.dictionary-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dictionary-case b{overflow-wrap:anywhere}#cut-result{min-height:90px}}
@media(max-width:800px){.cube-links{grid-template-columns:1fr}.cube-links a{min-height:0}}
@media(max-width:520px){.bridge-links{grid-template-columns:1fr}.bridge-links a{min-height:0}.cube-links a{padding:11px}.cube-links strong{font-size:17px}.lab-nav a.lab-next{margin-left:0}}
/* Phones: the five nav links fit in two rows (measured at 390 px). */
@media(max-width:520px){.lab-nav{padding:5px 8px}.lab-nav a{padding:10px 6px}}
.deficit-table tr:last-child td{color:inherit;font-weight:inherit;font-size:inherit}
/* Scientific notes page (notes.html loads this file for the rules below; body.notes-page). */
.notes-page .scientific-notes h3{scroll-margin-top:12px}
.notes-page .scientific-notes h4{font-size:19px;margin:24px 0 4px;color:#591321}
.notes-toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:16px 0 4px!important;padding:0!important;list-style:none}
.notes-toc li{margin:0!important}
.notes-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid #d9bcc3;border-radius:6px;text-decoration:none;font-size:15px;background:#fff}
.notes-toc a:hover{background:#f5ecee}
.notes-results{list-style:none;padding-left:0!important;margin:4px 0 8px!important}
.notes-results>li{padding:10px 0 12px;border-top:1px solid #e6e9eb}
.notes-results>li+li{margin-top:0!important}
.notes-results p{margin:0}
.notes-results p+p{margin-top:4px}
.notes-results b{color:#591321}
.notes-src{font-size:14px;color:#536070;white-space:nowrap}
.notes-kind{display:inline-block;font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;border-radius:4px;border:1px solid currentColor;margin:0 4px;vertical-align:1px}
.notes-kind.proof{color:#246c63}
.notes-kind.calc{color:#3d6a96}
.notes-kind.cert{color:#8a4a10}
.notes-kind.open{color:#a32f3c}
.notes-explore{font-size:16px}
.notes-lines{margin:6px 0 0!important;padding-left:1.2em!important;font-size:16px}
.notes-lines li+li{margin-top:3px!important}
.notes-id{font-family:'Latin Modern Mono',Consolas,monospace;font-size:14px;color:#4a5562;background:#efede9;padding:0 5px;border-radius:4px;white-space:nowrap}
@media(max-width:520px){.notes-page .scientific-notes{font-size:17px;padding:20px 16px 26px}.notes-page .scientific-notes h2{font-size:26px}.notes-toc a{font-size:14px;padding:0 10px}}
/* Phones: style.css hides the header links at <= 640 px; here they wrap onto a second header row so the notes
   page can lead back to the laboratory and the investigation, and the laboratory to the notes. */
@media(max-width:640px){.lab .site-head,.notes-page .site-head{flex-wrap:wrap;row-gap:0}.lab .site-links,.notes-page .site-links{display:flex;flex-wrap:wrap;flex-basis:100%;margin-left:0;gap:0 18px}.lab .site-links a,.notes-page .site-links a{font-size:14px}}
.notes-kind.comp{color:#5a4a8a}
.theorem p+p{margin-top:6px}
.vb-short{display:none}
/* Phones: the five point buttons in one row (set notation), the dilation label beside its select, a slightly
   shorter figure: the choice, the picture and the table, or the select, the picture and the count, share a screen. */
@media(max-width:520px){.vertex-buttons{flex-wrap:nowrap;gap:5px}.vertex-buttons .btn{min-width:0;padding:5px 2px}.vertex-buttons .btn b{font-size:15px;letter-spacing:0}.vb-long{display:none}.vb-short{display:inline}.polygon-grid>.lab-toolbar label{width:auto}.polygon-plot{max-height:300px}.polygon-figure .lab-legend{margin:2px 0 6px!important}}
/* Phones: the longest triple option (“Positions 4, 5, 6 → pattern 132, forbidden”) fits the select at 16 px
   (iOS zooms the page when a control under 16 px takes the focus; every lab field and select stays at 16 px or more). */
@media(max-width:520px){#triple-select{font-size:16px;padding:9px 6px}}
/* Phones: the dictionary cards give the cut label and the blocks most of the width (the glyph keeps 76 px). */
@media(max-width:520px){.dictionary-case{grid-template-columns:minmax(0,1fr) 76px}}
/* Undo / Redo for sections 2 and 3 (section 1 keeps them in its preset row): under the cut toggles, and above the
   point buttons, so that on phones the dilation select, the figure and the count still share a screen. Touch
   screens have no Ctrl+Z, so the intro's keyboard sentence is hidden there. */
.history-row{display:flex;flex-wrap:wrap;gap:4px 8px;margin:8px 0 0}
@media(hover:none) and (pointer:coarse){.key-hint{display:none}}