:root {
  color-scheme: light;
  --ground: #e8e0d1;
  --paper: #f7f0e2;
  --paper-bright: #fffaf0;
  --ink: #20251f;
  --muted: #6f7067;
  --line: #242821;
  --soft: #c7bdad;
  --signal: #b52f4d;
  --leaf: #315d4b;
  --shadow: 4px 4px 0 var(--line);
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.33), transparent 24rem),
    linear-gradient(rgba(32,37,31,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,37,31,.024) 1px, transparent 1px),
    var(--ground);
  background-size: auto, 24px 24px, 24px 24px, auto;
}
button, input, select { font: inherit; }
button, select, input, summary, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #27786b;
  outline-offset: 3px;
}
a { color: #24584d; text-underline-offset: .16em; }
button {
  min-width: 44px;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  padding: .64rem .72rem;
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 2px 2px 0 var(--line);
  cursor: pointer;
  font: 760 .69rem/1 var(--mono);
  letter-spacing: .01em;
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}
button:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--line); }
button:active { transform: translate(1px,1px); box-shadow: none; }
button.primary { color: #fff9ed; background: var(--ink); }
select {
  width: 100%; min-height: 44px; border: 1.5px solid var(--line); border-radius: 0;
  padding: .62rem; color: var(--ink); background: var(--paper-bright);
}
input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--signal); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width:min(1180px,calc(100% - 18px)); margin:0 auto; padding-bottom:72px; }
.eyebrow { margin:0; color:var(--muted); font:800 .59rem/1.25 var(--mono); letter-spacing:.075em; text-transform:uppercase; }
.hero { display:flex; min-height:64px; align-items:end; justify-content:space-between; gap:14px; padding:0 2px 9px; }
.hero h1 { margin:3px 0 0; font:760 clamp(2.35rem,13vw,6rem)/.79 var(--pg-font-ui); letter-spacing:-.072em; }
.hero-note { max-width:31ch; margin:0; color:var(--muted); font:italic .78rem/1.3 var(--serif); text-align:right; }
.workspace { display:grid; gap:12px; }
.stage-column { min-width:0; }
.stage {
  position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:2px solid var(--line);
  background:#f4eedf; box-shadow:var(--shadow); touch-action: none; isolation:isolate;
  transition: aspect-ratio .24s ease, background .2s ease;
}
.stage[data-format="portrait"] { aspect-ratio:4/5; }
.stage[data-format="landscape"] { aspect-ratio:8/5; }
#artwork { display:block; width:100%; height:100%; }
.stage-grain {
  position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.gesture-guide { position:absolute; left:50%; bottom:45px; display:flex; align-items:center; gap:8px; color:rgba(30,37,31,.68); transform:translateX(-50%); pointer-events:none; white-space:nowrap; transition:opacity .2s ease; }
.gesture-guide span { display:block; width:58px; height:16px; border-bottom:1.5px dashed currentColor; border-radius:50%; transform:rotate(-8deg); }
.gesture-guide b { font:700 .56rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.stage[data-touched="true"] .gesture-guide { opacity:0; }
.stage-meta { position:absolute; inset:auto 7px 7px; display:flex; justify-content:space-between; gap:10px; color:rgba(31,37,31,.64); font:700 .52rem/1 var(--mono); text-transform:uppercase; pointer-events:none; }
.stage[data-flash="true"]::after { content:""; position:absolute; inset:0; background:#fff9ed; animation:paper-flash .26s ease-out both; pointer-events:none; }
@keyframes paper-flash { from { opacity:.78; } to { opacity:0; } }
.grammar-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:8px; border:2px solid var(--line); background:var(--paper); box-shadow:var(--shadow); }
.grammar-tabs button { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; gap:2px 7px; min-width:0; border:0; box-shadow:none; padding:.56rem .46rem; text-align:left; background:transparent; }
.grammar-tabs button + button { border-left:1.5px solid var(--line); }
.grammar-tabs button[aria-selected="true"] { color:#fff8eb; background:var(--ink); }
.grammar-tabs button > span { grid-row:1/span 2; color:var(--signal); font:800 .55rem/1 var(--mono); }
.grammar-tabs b { font:780 .68rem/1 var(--pg-font-ui); }
.grammar-tabs small { overflow:hidden; opacity:.68; font:400 .54rem/1 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.gesture-copy { min-height:42px; margin:8px 0 0; border-left:3px solid var(--signal); padding:7px 9px; color:var(--muted); background:rgba(247,240,226,.82); font:400 .73rem/1.35 var(--serif); }
.gesture-copy b { color:var(--ink); }
.action-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.action-row button { min-width:0; padding-left:.3rem; padding-right:.3rem; }
.controls { display:none; overflow:hidden; }
.controls[data-open="true"] { display:block; }
.controls-body { padding:12px; }
.controls-body > header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.controls-body h2 { margin:3px 0 0; font-size:1.15rem; letter-spacing:-.035em; }
.field, .control-grid label, .output-row label { display:grid; gap:5px; color:var(--muted); font:760 .61rem/1 var(--mono); }
.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.control-grid output { justify-self:end; margin-top:-1em; color:var(--ink); }
.toggle-row { display:flex; min-height:44px; align-items:center; gap:8px; margin-top:9px; color:var(--muted); font:750 .62rem/1 var(--mono); }
.toggle-row input { width:22px; height:22px; }
.color-press { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0; border:1px solid var(--soft); padding:9px; }
.color-press legend { padding:0 5px; color:var(--muted); font:800 .59rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.color-press label { display:grid; grid-template-columns:1fr 44px; align-items:center; min-height:38px; color:var(--muted); font:730 .6rem/1 var(--mono); }
.color-press input { width:44px; height:32px; border:0; padding:0; background:transparent; }
.output-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.secondary-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.secondary-row button { box-shadow:none; }
.herbarium { margin-top:46px; }
.herbarium > header { display:flex; align-items:end; justify-content:space-between; gap:14px; border-bottom:2px solid var(--line); padding-bottom:9px; }
.herbarium h2 { margin:4px 0 0; font:760 clamp(1.85rem,10vw,4.2rem)/.86 var(--pg-font-ui); letter-spacing:-.06em; }
#log-count { margin:0; color:var(--muted); font:750 .65rem/1 var(--mono); }
.creation-log { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,70vw); gap:12px; overflow-x:auto; padding:14px 4px 10px 0; scroll-snap-type:x mandatory; scrollbar-color:var(--line) transparent; }
.empty-log { grid-column:1; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; min-height:122px; border:1.5px dashed var(--soft); padding:14px; color:var(--muted); background:rgba(247,240,226,.46); }
.empty-log span { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--soft); border-radius:50%; font-size:1.2rem; }
.empty-log p { margin:0; font:400 .78rem/1.4 var(--serif); }
.plate-card { position:relative; scroll-snap-align:start; border:1.5px solid var(--line); background:var(--paper); box-shadow:3px 3px 0 var(--line); }
.plate-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-bottom:1.5px solid var(--line); background:#eee5d5; }
.plate-card-body { display:grid; gap:6px; padding:9px; }
.plate-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font:700 .55rem/1 var(--mono); text-transform:uppercase; }
.plate-card h3 { margin:0; font-size:.86rem; letter-spacing:-.02em; }
.plate-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:5px; }
.plate-actions button { min-height:38px; padding:.45rem; box-shadow:none; font-size:.58rem; }
.proof-strip { display:grid; margin-top:42px; border:1.5px solid var(--line); background:rgba(247,240,226,.78); }
.proof-strip div { display:grid; gap:4px; padding:10px; }
.proof-strip div + div { border-top:1px solid var(--soft); }
.proof-strip span { color:var(--muted); font:700 .56rem/1 var(--mono); text-transform:uppercase; }
.proof-strip b { font:400 .8rem/1.25 var(--serif); }
.decision-journal { margin-top:34px; overflow:hidden; }
.decision-journal > summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; min-height:52px; padding:10px 12px; cursor:pointer; list-style:none; font:800 .72rem/1.2 var(--mono); }
.decision-journal > summary::-webkit-details-marker { display:none; }
.decision-journal > summary::after { content:"+"; grid-column:2; grid-row:1/span 2; font-size:1.2rem; }
.decision-journal[open] > summary::after { content:"−"; }
.decision-journal > summary small { color:var(--muted); font:400 .58rem/1.2 var(--mono); }
.journal-grid { display:grid; gap:20px; border-top:2px solid var(--line); padding:16px; background:var(--paper); }
.journal-grid h2 { margin:5px 0 0; font-size:clamp(1.6rem,7vw,3rem); line-height:.93; letter-spacing:-.05em; }
.journal-grid h3 { margin:0; font-size:.92rem; }
.journal-grid p { margin:7px 0 0; color:#555d54; font:400 .85rem/1.5 var(--serif); }
.toast { position:fixed; left:50%; bottom:18px; z-index:1200; max-width:calc(100% - 24px); border:1.5px solid var(--line); padding:10px 13px; color:#fff8ec; background:var(--ink); box-shadow:3px 3px 0 var(--signal); transform:translateX(-50%); font:750 .65rem/1.2 var(--mono); }
.noscript { margin:20px; border:2px solid var(--line); padding:12px; background:var(--paper); }
@media (min-width:760px) {
  .shell { width:min(1180px,calc(100% - 36px)); }
  .hero { min-height:100px; padding-bottom:14px; }
  .hero-note { font-size:.92rem; }
  .workspace { grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); align-items:start; gap:18px; }
  .controls, .controls[data-open="true"] { display:block; position:sticky; top:58px; }
  #toggle-controls, .close-controls { display:none; }
  .stage-column { min-width:0; }
  .creation-log { grid-auto-columns:260px; }
  .proof-strip { grid-template-columns:repeat(3,1fr); }
  .proof-strip div + div { border-top:0; border-left:1px solid var(--soft); }
  .journal-grid { grid-template-columns:1fr 1fr; padding:22px; }
  .journal-grid section:first-child, .journal-grid section:last-child { grid-column:1/-1; }
}
@media (max-width:430px) {
  .hero-note { display:none; }
  .hero { min-height:55px; }
  .grammar-tabs small { display:none; }
  .grammar-tabs button { grid-template-columns:auto 1fr; grid-template-rows:1fr; }
  .grammar-tabs button > span { grid-row:1; }
  .action-row button { font-size:.59rem; }
}
@media (max-width:350px) {
  .shell { width:calc(100% - 14px); }
  .control-grid { grid-template-columns:1fr; }
  .action-row button { font-size:.54rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:0s !important; transition-duration:0s !important; }
}