:root{
 /* Page colours are the site's light/dark tokens (--site-*, from the frame's frame.css).
    The dark field and its food and forager colours are the piece's own.
    4px spacing base / type roles adopted from pg-ui-craft foundations. */
 --paper:var(--site-bg);--ink:var(--site-ink);--muted:var(--site-muted);--accent:var(--site-accent);--line:var(--site-rule);
 --panel:var(--site-card);--dark:#19262c;--light:#ece6da;--food:#85965e;--agent:#f5c779;
 --space:.25rem;--xs:.75rem;--sm:.875rem;--base:1rem;--lg:1.25rem;--xl:1.5rem;--h3:2.25rem;--h2:3rem;--h1:4.5rem;
 --body:1.5;--tight:1.1;--radius:.375rem;--thin:1px;--thick:2px;--focus:3px;
 --serif:Georgia,'Times New Roman',serif;--sans:'Segoe UI',system-ui,sans-serif;--mono:Consolas,monospace;
 --page:80rem;--gutter:2rem;--diagram:32rem;--nav-height:4rem;
}
:root[data-theme="dark"]{--dark:var(--site-card)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:var(--base)/var(--body) var(--sans)}
.home-hero>*,.museum>*,.field-layout>*,.revision-layout>*,.notebook>*{min-width:0}input[type=checkbox]{width:auto;margin:0}label:has(input[type=checkbox]){min-height:calc(var(--space)*11)}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}
button{min-height:calc(var(--space)*11);padding:calc(var(--space)*2) calc(var(--space)*4);border:var(--thin) solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:var(--space)}a{color:var(--accent);text-underline-offset:var(--space)}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:var(--h1);line-height:var(--tight)}h2,.intro h1{font-size:var(--h2);line-height:var(--tight)}h3,.object-copy h2{font-size:var(--h3);line-height:var(--tight)}
p+p{margin-top:calc(var(--space)*4)}.muted{color:var(--muted)}.eyebrow{font-size:var(--xs);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:600}.mono{font-family:var(--mono)}
.wrap{max-width:var(--page);padding:0 var(--gutter);margin:auto}.top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--space)*6) 0;border-bottom:var(--thin) solid var(--line);gap:calc(var(--space)*4)}
.brand{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:.08em;font-size:var(--sm)}.top small{color:var(--muted)}
nav{display:flex;gap:calc(var(--space)*6);overflow-x:auto;min-height:var(--nav-height);align-items:stretch;border-bottom:var(--thin) solid var(--line)}nav a{display:flex;align-items:center;gap:calc(var(--space)*2);white-space:nowrap;text-decoration:none;color:var(--muted);border-bottom:var(--thick) solid transparent;padding:calc(var(--space)*3) 0;font-size:var(--sm)}nav a[aria-current=page]{color:var(--ink);border-color:var(--accent)}nav span{font:var(--xs) var(--mono);color:var(--accent)}
main{padding:calc(var(--space)*12) 0 calc(var(--space)*16)}[hidden]{display:none!important}.intro{max-width:44rem;margin-bottom:calc(var(--space)*10)}.intro h2,.intro h1{margin:calc(var(--space)*3) 0 calc(var(--space)*4)}.intro>p:last-child{color:var(--muted);font-size:var(--lg)}
.home-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(var(--space)*12);align-items:center;min-height:30rem}.home-hero h1{margin:calc(var(--space)*4) 0 calc(var(--space)*6)}.home-hero p{max-width:32rem}.home-art{width:100%;color:var(--ink)}
.contents{margin-top:calc(var(--space)*10);border-top:var(--thin) solid var(--line)}.contents a{display:grid;grid-template-columns:3rem 1fr 1fr auto;align-items:center;gap:calc(var(--space)*4);padding:calc(var(--space)*5) 0;border-bottom:var(--thin) solid var(--line);color:var(--ink);text-decoration:none}.contents a:hover strong{color:var(--accent)}.contents strong{font-family:var(--serif);font-size:var(--xl);font-weight:400}.contents em{font-style:normal;font-size:var(--sm);color:var(--muted)}
.museum{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(var(--space)*12);align-items:center}.object-stage{background:var(--panel);border:var(--thin) solid var(--line);position:relative}.object-stage svg{width:100%;display:block;aspect-ratio:1}.object-stage .plate{position:absolute;bottom:calc(var(--space)*6);left:calc(var(--space)*6);font:var(--xs) var(--mono);color:var(--muted)}.object-copy h3,.object-copy h2{margin:calc(var(--space)*3) 0 calc(var(--space)*5)}.object-copy .material{font-size:var(--sm);color:var(--muted);border-bottom:var(--thin) solid var(--line);padding-bottom:calc(var(--space)*4);margin-bottom:calc(var(--space)*5)}.object-copy blockquote{font-family:var(--serif);font-size:var(--xl);margin:calc(var(--space)*6) 0;color:var(--accent)}
.row{display:flex;gap:calc(var(--space)*3);align-items:center;flex-wrap:wrap}.museum-controls{display:flex;justify-content:space-between;gap:calc(var(--space)*4);margin-top:calc(var(--space)*6);align-items:center}.object-picker{display:flex;gap:calc(var(--space)*2);flex-wrap:wrap}.object-picker button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.footnote{font-size:var(--sm);color:var(--muted);margin-top:calc(var(--space)*6)}.field-layout{display:grid;grid-template-columns:1fr 18rem;gap:calc(var(--space)*8);align-items:start}.canvas-shell{background:var(--dark);padding:calc(var(--space)*4);border-radius:var(--radius);color:var(--light)}canvas{display:block;width:100%;height:auto}.field-legend{display:flex;gap:calc(var(--space)*6);padding:calc(var(--space)*3) 0 0;font-size:var(--xs)}.field-legend i{display:inline-block;width:calc(var(--space)*2);height:calc(var(--space)*2);margin-right:calc(var(--space)*2);background:var(--food)}.field-legend i.creature{background:var(--agent);border-radius:50%}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*6);margin-bottom:calc(var(--space)*6)}.stats dt{font-size:var(--sm);color:var(--muted)}.stats dd{font:var(--h3) var(--mono);margin:0}.control-stack{display:grid;gap:calc(var(--space)*4)}label{display:block;font-size:var(--sm)}label input,label select{margin-top:calc(var(--space)*2);width:100%}input[type=number],select{padding:calc(var(--space)*2) calc(var(--space)*3);background:var(--panel);border:var(--thin) solid var(--line);border-radius:var(--radius);color:var(--ink);min-height:calc(var(--space)*11)}input[type=range]{accent-color:var(--accent);min-height:calc(var(--space)*8)}details{margin-top:calc(var(--space)*6);border-top:var(--thin) solid var(--line);padding-top:calc(var(--space)*4)}summary{font-weight:600;min-height:calc(var(--space)*11)}details p,details ul{font-size:var(--sm);max-width:64rem}details ul{padding-left:calc(var(--space)*5)}details li+li{margin-top:calc(var(--space)*2)}
.chart{background:var(--panel);border:var(--thin) solid var(--line);margin-top:calc(var(--space)*4)}table{width:100%;border-collapse:collapse;font-size:var(--sm)}th,td{padding:calc(var(--space)*3);text-align:left;border-bottom:var(--thin) solid var(--line)}th{font-weight:600}.table-scroll{overflow:auto}.notice{padding:calc(var(--space)*3) 0;color:var(--accent);font-size:var(--sm);min-height:calc(var(--space)*12)}
.revision-layout{display:grid;grid-template-columns:15rem 1fr;gap:calc(var(--space)*10)}.revision-list{display:flex;flex-direction:column;gap:calc(var(--space)*2)}.revision-list button{text-align:left;background:transparent}.revision-list button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.revision-list small{display:block;opacity:.8}.document{background:var(--panel);border:var(--thin) solid var(--line);padding:calc(var(--space)*10);font-family:var(--mono);min-height:40rem}.document header{border-bottom:var(--thick) solid var(--ink);padding-bottom:calc(var(--space)*6);margin-bottom:calc(var(--space)*6)}.document header strong{font-size:var(--xl);display:block}.doc-row{display:grid;grid-template-columns:11rem 1fr;gap:calc(var(--space)*4);padding:calc(var(--space)*3) 0;border-bottom:var(--thin) solid var(--line);font-size:var(--sm)}.doc-row dt{color:var(--muted)}.doc-row dd{margin:0;white-space:pre-line}.doc-row.changed{border-left:var(--focus) solid var(--accent);padding-left:calc(var(--space)*3)}.document .stamp{margin-top:calc(var(--space)*8);border:var(--thick) solid var(--accent);padding:calc(var(--space)*3);display:inline-block;color:var(--accent);font-size:var(--sm)}.revision-controls{margin-top:calc(var(--space)*5);justify-content:space-between}.story-note{font-size:var(--sm);color:var(--muted);margin-bottom:calc(var(--space)*4)}
.notebook{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*10)}.formula{font:var(--h1)/var(--tight) var(--serif);margin:calc(var(--space)*6) 0}.claim{font:var(--xl)/var(--body) var(--serif);max-width:30rem}.trial-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(var(--space)*2);min-height:18rem;align-content:start}.number-tile{min-height:calc(var(--space)*11);padding:calc(var(--space)*2);font:var(--xs) var(--mono);border:var(--thin) solid var(--line);border-radius:var(--radius);background:var(--panel);text-align:center}.number-tile.fail{background:var(--accent);color:var(--paper);border-color:var(--accent)}.number-tile small{display:block;color:var(--muted)}.number-tile.fail small{color:var(--paper)}.result{margin-top:calc(var(--space)*6);padding:calc(var(--space)*6);border-left:var(--focus) solid var(--accent);background:var(--panel)}.result strong{display:block;font-size:var(--xl);margin-bottom:calc(var(--space)*2)}.attempts{margin-top:calc(var(--space)*10);max-width:50rem}.attempts article{padding:calc(var(--space)*5) 0;border-bottom:var(--thin) solid var(--line)}.attempts h3{font:600 var(--base) var(--sans);margin-bottom:calc(var(--space)*2)}
.instrument-header{display:flex;justify-content:space-between;gap:calc(var(--space)*6);align-items:end;margin-bottom:calc(var(--space)*6)}.instrument-header h2{margin:calc(var(--space)*3) 0}.instrument-header p{max-width:38rem}.instrument{background:var(--dark);border-radius:var(--radius);padding:calc(var(--space)*6)}#sound-canvas{touch-action:none;cursor:crosshair}.sound-controls{display:flex;justify-content:space-between;gap:calc(var(--space)*4);flex-wrap:wrap;margin:calc(var(--space)*6) 0}.pitch-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space)*8);padding:calc(var(--space)*6) 0;border-top:var(--thin) solid var(--line)}.hint{font-size:var(--sm);color:var(--muted)}.sound-info{display:flex;justify-content:space-between;gap:calc(var(--space)*4);color:var(--light);font:var(--xs) var(--mono);padding-top:calc(var(--space)*4)}
footer{border-top:var(--thin) solid var(--line);padding:calc(var(--space)*6) 0;color:var(--muted);font-size:var(--xs);display:flex;justify-content:space-between;gap:calc(var(--space)*4)}.skip{position:absolute;left:var(--gutter);top:-10rem;background:var(--panel);padding:calc(var(--space)*3);z-index:5}.skip:focus{top:var(--space)}
@media(max-width:900px){:root{--h1:3rem;--h2:2.25rem;--gutter:1.5rem}.home-hero,.museum,.notebook{gap:calc(var(--space)*8)}.field-layout{grid-template-columns:1fr}.field-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*8)}.revision-layout{grid-template-columns:12rem 1fr;gap:calc(var(--space)*5)}.document{padding:calc(var(--space)*6)}.doc-row{grid-template-columns:1fr;gap:var(--space)}}
@media(max-width:640px){:root{--gutter:1rem}.top{padding:calc(var(--space)*4) 0}.top small{display:none}nav{gap:calc(var(--space)*5)}main{padding-top:calc(var(--space)*8)}.home-hero,.museum,.notebook,.revision-layout{grid-template-columns:1fr}.home-hero{min-height:0}.home-art{max-height:20rem}.contents a{grid-template-columns:2rem 1fr auto}.contents em{display:none}.intro{margin-bottom:calc(var(--space)*6)}.museum-controls{align-items:start;flex-direction:column}.field-layout aside{display:block}.revision-list{flex-direction:row;overflow-x:auto}.revision-list button{flex-shrink:0}.revision-list small{display:none}.document{min-height:0;padding:calc(var(--space)*5)}.instrument-header{display:block}.instrument{padding:calc(var(--space)*3)}.pitch-controls{gap:calc(var(--space)*3)}.trial-grid{grid-template-columns:repeat(6,1fr)}.formula{font-size:var(--h2)}footer{flex-direction:column}.sound-info{font-size:var(--xs)}.object-copy h3,.object-copy h2{font-size:var(--h2)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}