@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/dm-sans-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/fraunces-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/fraunces-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tokens. Text colours are checked against the paper (#f7f4ec) and the stage (#eeeee3):
   --muted and --faint both stay above 4.5:1 on either. The orange fill is for paper and dots, never for text. */
:root{
 --paper:#f7f4ec;--card:#fbf9f3;--stage:#eeeee3;--soft:#edeee3;--tint:#eeefe4;
 --ink:#313b34;--muted:#5f6858;--faint:#636d5d;--line:#dedfd1;--line-strong:#cfd3c1;
 --green:#416754;--green-dark:#345744;--green-shade:#304e40;--sage:#92a775;
 --orange:#d77e4c;--orange-ink:#9f552b;--focus:#b8612f;
 --serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--header-h:112px;
 --cjk:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Noto Sans SC','Source Han Sans SC','Microsoft YaHei',sans-serif;
 color:var(--ink);background:var(--paper);font-family:var(--sans);font-synthesis:none;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
/* The Latin fonts carry no Chinese glyphs: Chinese falls through to a system sans that sits evenly beside DM Sans. */
:lang(zh){font-family:'DM Sans',var(--cjk);font-size:.95em;letter-spacing:.04em;font-synthesis:none}

*{box-sizing:border-box}
body{margin:0}
/* The whole page sits on one sheet: a seamless tile of paper tooth and washi fibres (scripts/make-paper-grain.mjs) over
   everything, the folding paper included. Plain alpha, no blend mode, so it costs nothing while the paper animates;
   it never takes a click. --grain scales it (1 = the strength baked into the tile). An open dialog sits in the top
   layer, above the page's sheet, so it lays its own over the whole screen. */
body::after,dialog[open]::after{content:'';position:fixed;inset:0;z-index:15;pointer-events:none;background:url(./paper-grain.png) 0 0/192px 192px;opacity:var(--grain,.6)}
@media(forced-colors:active),print{body::after,dialog[open]::after{content:none}}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{cursor:default;opacity:.55}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
#main:focus{outline:none}
#main:focus-visible,#main.focus-ring:focus{outline:3px solid var(--focus);outline-offset:-3px;border-radius:4px}
#main.quiet-focus:focus-visible,.quiet-focus.quiet-focus:focus-visible{outline:none}
button,a{touch-action:manipulation}
[hidden]{display:none!important}
h1,h2,h3,p{margin-top:0}
.arrow{display:inline-block;transition:transform .2s}

/* Header */
.site-header{max-width:1480px;margin:auto;height:var(--header-h);padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px}
.brand svg{width:38px;height:38px;transform:rotate(-7deg);flex-shrink:0}
.brand>span{font-family:var(--serif);font-size:23px;line-height:1.15;letter-spacing:-.6px;white-space:nowrap}
.brand small{font:600 9px var(--sans);letter-spacing:1.8px;display:block;margin-top:7px;color:var(--muted)}
.site-header nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}
.text-button{padding:12px 0;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:7px;line-height:1.3;text-align:left}
.text-button span{margin:0}
.text-button:hover,.workshop-link:hover{color:var(--orange-ink)}
.workshop-link{display:inline-flex;align-items:center;gap:5px;min-height:44px}

/* Hero */
.welcome{max-width:1480px;margin:auto;padding:46px 5.2% 0;display:grid;grid-template-columns:43% 57%;position:relative;min-height:calc(100svh - 198px)}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0 0 24px;color:var(--ink)}
.eyebrow>span{width:7px;height:7px;background:var(--sage);border-radius:50%}
.hero-copy{position:relative;z-index:1;padding-top:20px}
.hero-copy h1{font-family:var(--serif);font-size:clamp(54px,5.8vw,87px);font-weight:400;line-height:1.07;letter-spacing:-.04em;margin-bottom:28px}
.hero-copy h1 em{font-weight:400;color:var(--green)}
.intro{font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:30px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.primary,.quiet{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:50px;padding:15px 26px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.3;transition:transform .2s,background .2s,border-color .2s}
.primary{background:var(--green);color:#fffdf3;box-shadow:0 3px 0 var(--green-shade)}
.primary:hover{background:var(--green-dark)}
.primary:hover .arrow,.choice:hover .choice-arrow{transform:translateX(3px)}
.quiet{background:transparent;border:1px solid var(--line-strong)}
.quiet:hover{background:var(--soft);border-color:#b9c2ab}
.hero-actions button:disabled{opacity:.55;cursor:progress}
.hero-note{font-size:13px;color:var(--muted);margin-top:22px}
.hero-loading{margin:14px 0 0;font-size:13px;color:var(--muted)}
.hero-slow{display:block;opacity:0;animation:hero-slow-reveal .01s 20s forwards}
@keyframes hero-slow-reveal{to{opacity:1}}
.hero-art{align-self:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:12px 0 0}
.opening-square{width:min(78%,480px);height:auto;display:block}
.art-caption{font-family:var(--serif);font-size:15px;font-style:italic;margin:6px 0 0;transform:rotate(-5deg);color:var(--muted)}
.art-caption span{font-style:normal;font-size:25px;padding-right:7px;color:var(--sage)}
.welcome-bottom{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:26px;margin:56px 0 36px;border-top:1px solid var(--line);padding-top:30px;font-size:14px;color:var(--muted)}
.welcome-bottom p{margin:0;white-space:nowrap}
.small-number{font-family:var(--serif);font-style:italic;color:var(--orange-ink);margin-right:9px}
.trail-dots{letter-spacing:4px;color:#bfc2b0}

/* Footer: three items share one baseline */
.site-footer{max-width:1480px;margin:0 auto;padding:18px 5.2% 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:var(--muted)}
.site-footer a,.site-footer .footer-credits{min-height:44px;display:inline-flex;align-items:center}
.site-footer a:hover,.site-footer .footer-credits:hover{text-decoration:underline;text-underline-offset:3px;color:inherit}
.site-footer .footer-credits{padding:0;font-size:inherit;color:inherit}

/* Workspace */
.workspace{max-width:1300px;margin:auto;padding:20px 5.2% 0}
.workspace-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.workspace-heading .eyebrow{margin-bottom:10px}
.workspace-heading h1{font:400 36px/1.15 var(--serif);letter-spacing:-.025em;margin:0}
.workspace-heading>.text-button{white-space:nowrap}
.adventure-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:52px;align-items:start}

/* The paper stage: a cutting mat with a faint dot grid */
.paper-stage{background:var(--stage);border:1px solid #e3e4d8;border-radius:16px;position:relative;min-height:380px;background-image:radial-gradient(#9ca38c2b .8px,transparent .8px);background-size:22px 22px;overflow:hidden}
.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;position:absolute;left:24px;right:16px;z-index:1;font-size:12px;color:var(--faint);gap:10px;pointer-events:none}
.stage-top button,.stage-bottom button{pointer-events:auto}
.stage-top{top:10px}
.stage-bottom{bottom:14px}
.stage-top>span{letter-spacing:1.4px;text-transform:uppercase;font-size:11px;font-weight:600}
.compass{font-size:11px;white-space:nowrap;letter-spacing:.5px}
.paper-stage svg{display:block;width:100%;max-height:470px;min-height:330px}
.icon-button{width:44px;height:44px;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;font-size:19px;flex-shrink:0;transition:background .2s}
.icon-button:hover{background:#dde0cf}
.motion-controls{display:flex;align-items:center;gap:12px;padding-top:10px}
.motion-controls input{flex:1;min-width:0;accent-color:var(--green);height:28px}
.motion-controls>span{font-size:12px;color:var(--faint);width:36px;text-align:right;font-variant-numeric:tabular-nums}

/* Look around: one quiet toggle; the nine view buttons stay tucked away until asked for */
.look-row{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.look-row .text-button{font-size:13px;color:var(--muted)}
.look-row .text-button:hover{color:var(--orange-ink)}
.look-toggle .chevron{font-size:10px;transition:transform .2s}
.look-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
#view-reset:disabled{display:none}
.view-controls{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;padding:4px 0 2px;border-top:1px dashed var(--line)}
.view-controls .text-button{font-size:13px}
.view-controls button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.view-note{font-size:13px;line-height:1.5;color:var(--muted);margin:2px 0 4px}
.view-note:empty{display:none}
#paper-view{touch-action:pan-y;cursor:grab;border-radius:12px}
#paper-view.orbit-enabled{touch-action:none}
#paper-view.orbiting{cursor:grabbing;user-select:none}
#paper-view:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Trail */
.trail-heading{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:4px;border-top:1px solid var(--line);font-size:11px;font-weight:600;text-transform:uppercase;color:var(--faint);letter-spacing:1.4px}
.trail-heading .text-button{font-size:13px;font-weight:400;padding:5px 0;letter-spacing:0;text-transform:none;color:var(--green)}
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:0;padding:4px 4px 6px;list-style:none;min-height:48px;cursor:default}
.trail-node{display:flex;align-items:center;white-space:nowrap;font-size:12px;cursor:default}
.trail-node span{display:inline-block;min-width:1.4em;text-align:center;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.trail-node.current span{color:var(--green);font-weight:700}
.trail-node small{margin-left:8px;color:var(--muted);font-size:12px}

/* Instruction panel */
.instruction-panel{padding:18px 0 10px}
.panel-label,.step-count{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--faint);margin-bottom:14px}
.move-goal{font:italic 16px/1.45 var(--serif);color:var(--muted);margin:-4px 0 12px}
.move-goal-label{font-style:normal;font-weight:600}
.instruction-panel h2{font:400 32px/1.15 var(--serif);letter-spacing:-.02em;margin-bottom:16px;text-wrap:balance}
.instruction-panel .instruction{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:18px;max-width:34em}
.instruction-panel .primary{width:100%;margin-top:16px}
.instruction-panel>.quiet,.instruction-actions>.quiet{width:100%;margin-top:10px}
.choice{display:flex;text-align:left;align-items:center;width:100%;padding:10px 14px 10px 10px;border:1px solid #daddce;border-radius:10px;margin-bottom:10px;gap:14px;min-height:72px;background:var(--card);transition:border-color .2s,transform .2s,box-shadow .2s}
.choice:hover{border-color:#96aa91;transform:translateX(3px);box-shadow:0 2px 10px #3a4a3a0d}
.choice:disabled{transform:none}
.choice .mini-paper{width:64px;flex-shrink:0;background:var(--stage);border-radius:6px;height:54px;overflow:hidden}
.mini-paper svg{width:100%;height:100%;transform:scale(1.13)}
.choice strong{font-size:15px;font-weight:500;display:block;line-height:1.4;color:var(--ink)}
.choice-meta,.choice-view-note{display:block;font-size:12px;font-weight:400;color:var(--faint);margin-top:3px;letter-spacing:.1px}
.choice .choice-arrow{margin-left:auto;color:var(--green);padding-left:6px;font-size:16px;transition:transform .2s}
.more-choices{margin:0}
.show-more{width:100%;min-height:44px;padding:10px;font-size:14px;color:var(--green);border-radius:8px;margin:2px 0 8px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#a7b69f}
.show-more:hover{background:var(--soft)}
.random-choice{width:100%;min-height:48px;padding:12px;font-size:14px;margin-top:8px;color:var(--green);border:1px dashed #b3bea6;border-radius:8px;transition:background .2s}
.random-choice:hover{background:var(--soft)}
.tip{font-size:14px;line-height:1.65;color:var(--muted);padding:13px 16px;border-left:2px solid #c7cfb6;background:var(--tint);border-radius:0 6px 6px 0;margin:18px 0}
.help-link{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a7b69f;padding:10px 0;min-height:44px;font-size:14px}
.help-link:hover{color:var(--orange-ink)}
.workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:28px;padding:8px 0}
.workspace-footer>span{font:italic 14px var(--serif);color:var(--muted);text-align:center}
.workspace-footer .text-button{font-size:14px}

/* Paper colour */
.palette-row{display:flex;gap:10px;margin:18px 0;min-width:0}
.swatch{width:44px;height:44px;background:var(--swatch);border-radius:50%;border:5px solid var(--paper);outline:2px solid transparent;outline-offset:-1px;box-shadow:0 1px 3px #0002;transition:transform .15s}
.swatch[data-value="cream"]{box-shadow:inset 0 0 0 1.5px #c4b9a4,0 1px 3px #0002}
.swatch:hover{transform:scale(1.06)}
.swatch[aria-pressed=true]{outline-color:var(--green)}
.paper-option{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin:12px 0;min-height:32px;cursor:pointer}
/* The box drawn is 18 px; a transparent 3 px border makes the tap target 24 px (the native control paints its whole box).
   It takes the room the native 18 px box with its default margins took. */
.paper-option input{appearance:none;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;margin:0 0 0 1px;border:3px solid transparent;border-radius:6px;background:#fff padding-box;box-shadow:inset 0 0 0 1px #767676;cursor:pointer}
.paper-option input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.4 7.4 12.6 14 5.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat padding-box,var(--green) padding-box;box-shadow:none}
/* Forced colours repaint the green fill but keep the white tick image, so the ticked box would look empty: draw the native one. */
@media(forced-colors:active){.paper-option input,.paper-option input:checked{appearance:auto;background:none;border-color:transparent;box-shadow:none}}
.paper-setup{padding:0 0 10px;min-width:0;max-width:100%}
.palette-field{display:flex;align-items:center;gap:14px;width:100%;min-width:0;margin:6px 0}
.palette-label{flex:none;width:44px;font-size:14px;color:var(--muted)}
.palette-field .palette-row{margin:0;flex:1;min-width:0;flex-wrap:nowrap}
/* Six circles share the column. They stay 44px where the row is wide, and shrink together where five used to be the fit. */
.palette-field .swatch{flex:1 1 0;width:auto;max-width:44px;height:auto;aspect-ratio:1;min-width:0}

/* Discovery */
.badge{font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--green);background:#e4ead8;border-radius:100px;padding:6px 12px;display:inline-block;margin-bottom:16px}
.instruction-panel .badge+h2{font-size:40px;margin-bottom:12px}
.celebration{font:400 50px var(--serif);color:var(--orange);margin-bottom:8px}
.finish-actions{display:flex;gap:10px;margin-top:10px}
.finish-actions .quiet{flex:1;padding:13px 12px;font-size:14px}
.continue-folding{margin:22px 0 6px;padding-top:4px;border-top:1px solid var(--line)}
.teaching-view-change{border:1px solid #bdc6b0;border-radius:10px;padding:16px;margin-bottom:22px;background:var(--tint)}
.teaching-view-change p{font-size:14px;line-height:1.7;color:var(--muted)}
.teaching-view-change .quiet{width:100%;margin-top:8px}
.teaching-view-change .help-link{margin-top:6px}

/* Toast and dialogs */
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 21px;border-radius:9px;background:var(--ink);color:#fffdf4;font-size:14px;z-index:10;max-width:90vw;box-shadow:0 4px 25px #0002}
dialog{background:var(--paper);color:var(--ink);border:1px solid #d5d9c7;border-radius:18px;padding:40px;width:min(680px,calc(100% - 30px));max-height:88svh;box-shadow:0 30px 90px #26382730}
dialog::backdrop{background:#27382d65;backdrop-filter:blur(5px)}
.modal-close{position:absolute;top:12px;right:12px}
.modal-title,dialog h2{font:400 34px/1.15 var(--serif);margin:0 0 16px;letter-spacing:-.02em;padding-right:30px}
dialog p,dialog li{font-size:15px;line-height:1.7;color:var(--muted)}
dialog h3{font-size:15px;font-weight:600;margin:26px 0 8px}
dialog a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a7b69f}
dialog a:hover{color:var(--orange-ink)}
dialog>#modal-content>.primary,dialog>#modal-content>.quiet{margin-top:10px}
.dialog-actions{display:flex;gap:10px;margin-top:24px}
.dialog-actions>*{flex:1}
.credit-list{margin:0 0 16px;padding-left:20px}
.credit-list li{margin:4px 0}
.cut-preview svg{display:block;width:100%;height:220px;margin:12px auto}

/* Collection */
.atlas-lead{margin-bottom:6px}
.atlas-tally{list-style:none;padding:0;margin:14px 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.atlas-tally li{font-size:13px;line-height:1;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 11px;background:var(--card)}
.atlas-tally li b{font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.atlas-tally li.none{color:var(--faint);background:transparent}
.atlas-search{width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:8px;background:#fffdf6;margin:4px 0 20px;font-size:15px}
.atlas-search::placeholder{color:var(--faint)}
.atlas-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.model-card{text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;padding:0 0 16px;transition:border-color .2s,transform .2s}
.model-card:hover{border-color:#839e7e;transform:translateY(-2px)}
.model-card .model-image{height:160px;background:var(--stage);padding:10px}
.model-card svg{width:100%;height:100%}
.model-card strong,.model-card small{display:block;margin:12px 16px 0}
.model-card strong{font:400 21px/1.2 var(--serif)}
.model-card small{font-size:12px;line-height:1.5;color:var(--faint);margin-top:4px}
.empty{grid-column:1/-1;font-size:15px}
.atlas-empty{grid-column:1/-1;text-align:center;padding:30px 20px 10px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--card)}
.atlas-empty p{margin-bottom:18px}
.atlas-empty svg{width:54px;height:54px;margin:0 auto 14px;display:block;transform:rotate(-7deg)}
.share-input{width:100%;padding:12px 14px;font-size:13px;border:1px solid var(--line-strong);border-radius:8px;background:#fffdf5;color:var(--muted)}

/* Branch map */
.tree-frame{margin:22px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--stage)}
.tree-map{--row:64px;--axis:52px;--dot:118px;list-style:none;margin:0;padding:14px 0;font-size:15px;line-height:1.45}
.tree-map li{position:relative;display:flex;align-items:center;min-height:var(--row);padding:6px 14px 6px calc(var(--axis) + 22px)}
.tree-map li:before,.tree-map li:after{content:'';position:absolute;pointer-events:none}
.tree-map li:before{z-index:1;left:calc(var(--axis) - 7px);top:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:var(--green)}
.tree-map li:after{left:var(--axis);top:0;bottom:0;width:1px;background:var(--green)}
.tree-map li:first-child:after{top:50%}
.tree-map li:last-child:after{bottom:50%}
.tree-map .tree-node{color:var(--muted)}
.tree-map .tree-here{color:var(--ink);font-weight:600}
.tree-map .tree-here:before{left:calc(var(--axis) - 10px);top:calc(50% - 10px);width:20px;height:20px;box-shadow:0 0 0 4px #41675426}
.tree-map .tree-here:not(:last-child):after{background:linear-gradient(var(--green) 50%,var(--orange) 50%)}
.tree-map .tree-move{min-height:52px;padding:0}
.tree-map .tree-move:before{left:calc(var(--dot) - 7px);background:var(--orange)}
.tree-map .tree-move:after{background:var(--orange)}
.tree-map [role=button]{flex:1;align-self:stretch;display:flex;align-items:center;min-width:0;padding:6px 14px 6px calc(var(--dot) + 20px);overflow-wrap:anywhere;border-radius:6px;cursor:pointer}
.tree-map [role=button]:before{content:'';position:absolute;left:var(--axis);top:50%;width:calc(var(--dot) - var(--axis) - 7px);height:1px;background:var(--orange);pointer-events:none}
.tree-map [role=button]:hover{color:var(--orange-ink)}
.tree-map [role=button]:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.tree-key{font-size:13px!important;color:var(--green)!important}
.tree-key span{color:var(--orange-ink)}

.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:10px;left:10px;background:#fff;padding:10px 14px;border-radius:6px;z-index:20}
.noscript{padding:40px;text-align:center}

/* Folding basics: one card at a time, each with a small live demo on the same dotted stage as the lessons */
.hero-basics{font-size:14px;color:var(--muted);margin:2px 0 0}
.hero-basics .help-link{padding:10px 2px}
.first-timer .help-link{padding:0;min-height:0}
.basics-progress{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--faint);margin:-4px 0 4px}
.basics-bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.basics-bar>span{display:block;height:100%;background:var(--sage);border-radius:4px}
.basics-contents{margin:0 0 14px}
.basics-contents summary{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a7b69f}
.basics-contents summary:hover{color:var(--orange-ink)}
.basics-contents ol{list-style:none;margin:4px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.basics-jump{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 4px;text-align:left;font-size:14px;color:var(--muted);border-radius:6px}
.basics-jump:hover{background:var(--soft);color:var(--ink)}
.basics-jump[aria-current]{color:var(--ink);font-weight:600}
.basics-number{font:italic 15px var(--serif);color:var(--orange-ink);width:1.3em;text-align:right;flex-shrink:0}
.basics-stage{background:var(--stage);border:1px solid #e3e4d8;border-radius:14px;background-image:radial-gradient(#9ca38c2b .8px,transparent .8px);background-size:22px 22px;padding:10px 12px 4px}
.basics-demo svg{display:block;width:100%;height:230px}
.basics-demo-still{display:flex;align-items:center;justify-content:center;gap:4px}
.basics-still{margin:0;flex:1;min-width:0;text-align:center}
.basics-still svg{height:160px}
.basics-still figcaption{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.basics-still-arrow{color:var(--faint);font-size:18px}
.basics-demo-empty{display:none}
.basics-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.basics-caption{font:italic 14px/1.45 var(--serif);color:var(--muted)}
.basics-toggle{font-size:15px;color:var(--muted)}
.basics-labels{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:18px 0 0}
.basics-labels span{border:1px solid var(--line-strong);border-radius:100px;padding:3px 10px;letter-spacing:1.2px;color:var(--muted);background:var(--card)}
dialog .basics-card h3{font:400 26px/1.2 var(--serif);letter-spacing:-.01em;margin:14px 0 8px;outline:none}
dialog .basics-lead{color:var(--ink);margin-bottom:8px}
.basics-points{margin:0;padding-left:1.2em}
dialog .basics-points li{margin:4px 0;padding-left:2px}
.basics-points li::marker{color:var(--sage)}
.basics-actions{margin-top:22px}
.basics-actions .quiet{flex:0 0 auto;padding-left:22px;padding-right:22px}
.basics-pointer{padding:6px 16px 14px;border-left:2px solid #c7cfb6;background:var(--tint);border-radius:0 6px 6px 0;margin:22px 0 14px}
dialog .basics-pointer p{font-size:14px;margin:8px 0 10px}
.basics-pointer .quiet{min-height:44px;padding:10px 16px;background:var(--card)}

@media(min-width:1500px){
 .welcome{padding-top:60px}.hero-copy{padding-top:0}
}
@media(max-width:1000px){
 :root{--header-h:96px}.site-header nav{gap:24px}
 .welcome{padding-top:35px;grid-template-columns:46% 54%;min-height:auto}
 .hero-copy h1{font-size:65px}
 .intro{font-size:15px}
 .hero-actions{gap:8px}
 .primary,.quiet{padding:15px 20px}
 .adventure-grid{gap:32px;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr)}
 .workspace-heading h1{font-size:30px}
 .instruction-panel{padding-top:12px}
 .instruction-panel h2{font-size:28px}
}
/* A laptop screen is short: the paper and the primary button share the viewport, and the button stays put between steps.
   The lock starts only when the column can still keep the stage’s 330px square. Shorter landscape screens keep that square and scroll the page. */
@media(min-width:721px) and (min-height:734px) and (max-height:860px){
 :root{--header-h:84px}
 body:has(#workspace:not([hidden])) .site-footer{display:none}
 .workspace{height:calc(100svh - var(--header-h));display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:8px}
 .workspace-heading{flex:none;margin-bottom:12px}
 .workspace-heading h1{font-size:30px}
 .adventure-grid{flex:1 1 auto;min-height:0;align-items:stretch}
 .paper-column{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .paper-stage{flex:1 1 auto;min-height:332px;display:flex;flex-direction:column}
 #paper-view{flex:1 1 auto;min-height:330px;display:flex;align-items:center}
 .paper-stage svg{min-height:330px;max-height:none;height:100%}
 .workspace:not(.is-fork) .instruction-panel{min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;padding-top:0}
 .workspace:not(.is-fork) .instruction-body{flex:1 1 auto;min-height:0;overflow:auto}
 .instruction-actions{flex:none;padding:4px 10px 10px}
 .instruction-panel h2{margin-bottom:12px}
 .instruction-panel .instruction{line-height:1.6;margin-bottom:10px}
 .instruction-panel .tip{margin:12px 0;padding:10px 14px}
 .instruction-panel .primary{margin-top:10px}
 .workspace-footer{flex:none;margin-top:8px}
}
@media(max-width:720px){
 :root{--header-h:84px}
 .site-header{padding:0 5%;gap:10px}
 .brand{gap:10px}
 .brand>span{font-size:20px;line-height:1.05;white-space:normal}
 .brand svg{width:30px;height:30px}
 .brand small{font-size:8px;letter-spacing:1.4px;margin-top:5px;white-space:nowrap}
 .site-header nav{gap:14px;flex-shrink:0}
 .site-header nav .text-button{font-size:13px;white-space:nowrap}
 .site-header .workshop-link{display:none}
 .welcome{display:flex;flex-direction:column;padding:24px 7% 0}
 .hero-copy{padding-top:0}
 .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:18px}
 .hero-copy h1{font-size:60px;line-height:1.04;letter-spacing:-.035em;margin-bottom:22px}
 .intro{font-size:16px;line-height:1.65;margin-bottom:24px}
 .hero-actions{gap:10px}
 .hero-actions .primary,.hero-actions .quiet{flex:1 1 140px;padding:14px 18px;font-size:15px}
 .hero-note{font-size:13px;margin-top:16px}
 .hero-art{margin-top:18px}
 .opening-square{width:min(70vw,280px)}
 .art-caption{font-size:13px}
 /* The three steps become a tidy row of stacked numbers and labels. */
 .welcome-bottom{margin:30px 0 4px;padding-top:22px;gap:8px;font-size:13px;justify-content:space-between;align-items:flex-start}
 .welcome-bottom p{white-space:normal;flex:1;text-align:center;line-height:1.35}
 .welcome-bottom .small-number{display:block;margin:0 0 4px;font-size:15px}
 .trail-dots{display:none}
 .site-footer{padding:14px 7% 20px;font-size:12px;flex-wrap:wrap;gap:0 20px}
 .site-footer>span{display:none}
 .workspace{padding:14px 6% 0}
 /* On a phone the Fresh paper button shares the eyebrow's row, so the title can use the whole width and wrap less. */
 .workspace-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:12px;gap:0 12px}
 .workspace-heading>div{display:contents}
 .workspace-heading .eyebrow{grid-column:1;grid-row:1;margin-bottom:0}
 .workspace-heading h1{grid-column:1/-1;grid-row:2;font-size:28px;margin-top:4px}
 .workspace-heading>.text-button{grid-column:2;grid-row:1;font-size:14px;margin-top:0}
 .adventure-grid{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .look-row{margin-top:0}
 .trail-heading{margin-top:8px}
 .trail{min-height:40px}
 .paper-column{min-width:0;container-type:inline-size}
 .paper-stage{min-height:300px}
 .paper-stage svg{max-height:360px;min-height:300px}
 .stage-top,.stage-bottom{left:16px;right:8px}
 .stage-top{top:4px}
 .stage-bottom{bottom:10px}
 .instruction-panel{padding-top:0}
 .instruction-panel h2{font-size:28px;margin-bottom:12px}
 .instruction-panel .badge+h2{font-size:36px}
 .instruction-panel .instruction{font-size:16px;line-height:1.65;margin-bottom:8px}
 .panel-label,.step-count{margin-bottom:10px}
 .choice{padding:8px 12px 8px 8px;min-height:68px;gap:12px}
 .choice .mini-paper{width:58px;height:50px}
 .motion-controls{padding-top:6px;gap:8px}
 /* Opening tips sit above the first choice. Tight margins keep that choice inside a 1200px-tall phone. */
 .tip{margin:6px 0;font-size:14px}
 .instruction-panel .primary{margin-top:8px}
 .workspace-footer{flex-wrap:wrap;gap:0 12px;margin-top:18px;padding:4px 0 10px}
 .workspace-footer>span{order:3;width:100%;margin-top:4px;font-size:14px}
 .paper-setup{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
 .paper-setup .palette-row{margin:0}
 .palette-field{flex-wrap:nowrap;row-gap:6px;min-width:0}
 .palette-field .palette-row{flex:1;min-width:0;flex-wrap:nowrap}
 .paper-setup .paper-option{margin:6px 0}
 .paper-setup .tip{width:100%}
 /* Six colours stay on one line so the first fold stays on a tall phone. The dialog uses the same single line. */
 .instruction-panel .palette-field{gap:8px;margin:2px 0}
 .instruction-panel .palette-label{width:38px;font-size:13px}
 .instruction-panel .palette-field .palette-row{gap:6px}
 .instruction-panel .swatch{max-width:36px;border-width:4px}
 dialog .swatch{border-width:4px}
 .instruction-panel .paper-setup{padding-bottom:2px}
 .instruction-panel .paper-option{margin:2px 0 4px}
 dialog{padding:30px 22px 24px}
 .modal-title,dialog h2{font-size:30px}
 .atlas-grid{gap:10px}
 .model-card .model-image{height:128px;padding:8px}
 .model-card strong{font-size:18px;margin:10px 12px 0}
 .model-card small{margin:4px 12px 0}
 .dialog-actions{flex-wrap:wrap}
 .dialog-actions>*{min-width:130px}
 .tree-map{--row:52px;--axis:26px;--dot:62px}
 .basics-contents ol{grid-template-columns:1fr}
 .basics-demo svg{height:190px}
 .basics-still svg{height:120px}
 dialog .basics-card h3{font-size:23px}
 .basics-actions{flex-wrap:nowrap}
 .basics-actions>.quiet{min-width:0}
 .basics-actions>.primary{min-width:0;padding-left:16px;padding-right:16px}
}
/* A narrow phone shortens the two nav labels so the header stays one line on every page. */
.nav-short{display:none}
@media(max-width:400px){.site-header nav .nav-long{display:none}.site-header nav .nav-short{display:inline}}
@media(max-width:374px){.hero-copy h1{font-size:50px;letter-spacing:-.03em}.site-header nav{flex-shrink:0;gap:12px}}
/* A landscape phone is wide enough for the side-by-side hero and too short for its type.
   Keep “Let’s fold” on the first screen. The steps under the hero may scroll. */
@media(orientation:landscape) and (max-height:500px) and (max-width:1023px){
 body:has(#welcome:not([hidden])){--header-h:52px}
 body:has(#welcome:not([hidden])) .brand small{display:none}
 body:has(#welcome:not([hidden])) .brand>span{font-size:18px;line-height:1.05}
 body:has(#welcome:not([hidden])) .brand svg{width:28px;height:28px}
 body:has(#welcome:not([hidden])) .site-header nav{gap:16px}
 body:has(#welcome:not([hidden])) .site-header nav .text-button,
 body:has(#welcome:not([hidden])) .workshop-link{min-height:44px;padding:6px 0;font-size:13px}
 .welcome{display:grid;grid-template-columns:46% 54%;padding:4px 5.2% 0;min-height:0;align-items:center}
 .hero-copy{padding-top:0}
 .welcome .eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:6px}
 .hero-copy h1{font-size:clamp(32px,4.6vw,44px);line-height:1.02;letter-spacing:-.03em;margin-bottom:8px}
 .hero-copy h1 em{white-space:nowrap}
 .welcome .intro{font-size:13px;line-height:1.35;margin-bottom:10px}
 .welcome .hero-actions{gap:8px}
 .welcome .hero-actions .primary,.welcome .hero-actions .quiet{flex:0 1 auto;min-height:44px;padding:8px 14px;font-size:14px}
 .welcome .hero-basics,.welcome .hero-basics .help-link{font-size:13px}
 .welcome .hero-art{margin:0;align-self:start;min-width:0}
 .welcome .hero-art>:is(img,svg){width:100%;max-height:calc(100svh - var(--header-h) - 64px);object-fit:contain}
 .welcome .hero-note{margin-top:8px}
}
/* The confirm button keeps one screen position where the column has room: the words above it scroll, and a short laptop keeps a 330px square fully on screen.
   A short landscape screen cannot dock that button without collapsing the square and the step text, so the page scrolls and the paper stays the column’s real square. */
@media(min-width:721px) and (min-height:861px){
 body:has(#workspace:not([hidden])) .site-footer{display:none}
 body:has(#workspace:not([hidden])) .workspace{height:calc(100svh - var(--header-h));display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:8px}
 body:has(#workspace:not([hidden])) .workspace-heading{flex:none}
 body:has(#workspace:not([hidden])) .adventure-grid{flex:1 1 auto;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
 body:has(#workspace:not([hidden])) .paper-column{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:has(#workspace:not([hidden])) .paper-stage{flex:1 1 auto;min-height:332px;display:flex;flex-direction:column}
 body:has(#workspace:not([hidden])) #paper-view{flex:1 1 auto;min-height:330px;display:flex;align-items:center}
 body:has(#workspace:not([hidden])) .paper-stage svg{min-height:330px;max-height:none;height:100%}
 body:has(#workspace:not([hidden])) .instruction-panel{min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
 body:has(#workspace:not([hidden])) .instruction-body{flex:1 1 auto;min-height:0;overflow:auto}
 body:has(#workspace:not([hidden])) .instruction-actions{flex:none;padding:4px 10px 10px}
 body:has(#workspace:not([hidden])) .workspace-footer{flex:none}
}
/* The confirm is the first control in the bottom row. A fold also has “Unfold this move and choose again” under it.
   A post-cut step has only the confirm, so the row keeps a matching second place and the confirm does not drop. */
@media(min-width:721px) and (min-height:734px){
 body:has(#workspace:not([hidden])) .instruction-panel .instruction-actions{display:flex;flex-direction:column}
 body:has(#workspace:not([hidden])) .instruction-panel .instruction-actions::after{content:"Unfold this move and choose again";visibility:hidden;box-sizing:border-box;display:block;flex:none;width:100%;min-height:48px;margin-top:8px;padding:12px;font-size:14px;line-height:normal;border:1px solid transparent;border-radius:8px}
 body:has(#workspace:not([hidden])) .instruction-panel .instruction-actions:has(:nth-child(2))::after{content:none;display:none;min-height:0;margin:0;padding:0;border:0}
}
@media(min-width:721px) and (max-height:733px){
 body:has(#workspace:not([hidden])){--header-h:72px}
 body:has(#workspace:not([hidden])) .workspace{height:auto;overflow:visible;padding-top:6px;padding-bottom:16px}
 body:has(#workspace:not([hidden])) .workspace-heading{margin-bottom:6px}
 body:has(#workspace:not([hidden])) .workspace-heading .eyebrow{margin-bottom:4px}
 body:has(#workspace:not([hidden])) .workspace-heading h1{font-size:22px}
 body:has(#workspace:not([hidden])) .adventure-grid{align-items:start}
 body:has(#workspace:not([hidden])) .paper-column{overflow:visible}
 body:has(#workspace:not([hidden])) .paper-stage{width:100%;aspect-ratio:1;height:auto;min-height:300px}
 body:has(#workspace:not([hidden])) #paper-view{height:100%}
 body:has(#workspace:not([hidden])) .paper-stage svg{width:100%;height:100%;aspect-ratio:1;min-height:300px;max-height:none}
 body:has(#workspace:not([hidden])) .instruction-panel{height:auto;overflow:visible;padding-top:0}
 body:has(#workspace:not([hidden])) .instruction-body{overflow:visible}
}
/* A narrow lesson scrolls the page. A fixed phone panel never held a fold, because the instruction overflowed it. The page already shows the choices, the footer and the crease note.
   A column wider than the 360px drawing uses that drawing’s height, so the caption stays with the paper. A narrower column keeps a square stage. */
@media(max-width:720px){
 body:has(#workspace:not([hidden])) .workspace{height:auto;display:block;overflow:visible;padding-bottom:16px}
 body:has(#workspace:not([hidden])) .adventure-grid{flex:none;height:auto;overflow:visible}
 body:has(#workspace:not([hidden])) .paper-column{flex:none;height:auto;min-height:auto;overflow:visible}
 body:has(#workspace:not([hidden])) .instruction-panel{flex:none;height:auto;overflow:visible}
 body:has(#workspace:not([hidden])) .instruction-body{flex:none;overflow:visible}
 body:has(#workspace:not([hidden])) .instruction-actions{padding:4px 10px 10px}
}
/* The folding loop on a phone: the paper, then the step's words, then Look around and the trail (app.js moves the panel under the
   slider so Tab and a screen reader follow the same order). The step's button and its way back, a cut's buttons, or a lesson's one
   next fold sit in a bar at the bottom of the screen, so the next action is under the thumb and nothing needs scrolling between
   folds. A long instruction still scrolls the page; the scroll padding keeps a focused line clear of the bar.
   The header and title take one quiet line each, as on a fork. A finished model's choices stay in the page: the loop has ended
   there, and four buttons would make a heavy bar. A branch page shortens the paper so its choices fit under it.
   A small portrait tablet (600 to 720px wide) has the same single column, so it gets the bar too.
   A landscape phone is too short for the paper and a bar, so it keeps the scrolling page. */
@media(max-width:720px) and (min-height:521px){
 body:has(#workspace:not(.is-fork):not([hidden])) .site-header{height:auto;min-height:0;padding:4px 12px 2px}
 body:has(#workspace:not(.is-fork):not([hidden])) .brand small{display:none}
 body:has(#workspace:not(.is-fork):not([hidden])) .brand svg{width:26px;height:26px}
 body:has(#workspace:not(.is-fork):not([hidden])) .brand>span{font-size:16px;line-height:1.05}
 body:has(#workspace:not(.is-fork):not([hidden])) .site-header nav{gap:12px}
 body:has(#workspace:not(.is-fork):not([hidden])) .site-header nav .text-button{min-height:36px;padding:2px 0;font-size:13px}
 #workspace:not(.is-fork){padding-top:2px}
 #workspace:not(.is-fork) .workspace-heading{margin-bottom:8px}
 #workspace:not(.is-fork) .workspace-heading .eyebrow{display:none}
 #workspace:not(.is-fork) .workspace-heading h1{grid-row:1;grid-column:1;margin:0;font-size:22px;line-height:1.15}
 /* A size container would hold the fixed bar inside the column, so the column squares its stage by the screen width instead
    (a 409px screen gives the 360px column of the container query below). */
 body:has(#workspace:not(.is-fork):not([hidden])) .paper-column{container-type:normal}
 @media(max-width:409px){
  #workspace:not(.is-fork) .paper-stage{width:100%;aspect-ratio:1;height:auto;min-height:300px}
  #workspace:not(.is-fork) #paper-view{height:100%}
  #workspace:not(.is-fork) .paper-stage svg{width:100%;height:100%;aspect-ratio:1;min-height:300px;max-height:360px}
  #workspace:not(.is-fork) .stage-bottom{bottom:8px}
 }
 #workspace:not(.is-fork) .instruction-panel{padding-top:12px}
 #workspace:not(.is-fork) .look-row{margin-top:6px}
 #workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-flow:row wrap;justify-content:center;gap:0 16px;margin:0;padding:10px calc(6% + 8px) calc(6px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 18px #3a4a3a0f}
 :is(#workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions) :is(.primary,.choice){flex:1 0 100%;margin:0}
 :is(#workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions) :is(.quiet,.random-choice){flex:0 1 auto;width:auto;min-height:44px;margin:0;padding:8px 4px;border:none;background:none;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#a7b69f}
 html:has(#workspace:not(.is-fork):not([hidden]) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork):not([hidden]) #instruction-panel .next-actions){scroll-padding-bottom:calc(152px + env(safe-area-inset-bottom))}
 body:has(#workspace:not(.is-fork):not([hidden]) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork):not([hidden]) #instruction-panel .next-actions){padding-bottom:calc(144px + env(safe-area-inset-bottom))}
 body:has(#workspace:not(.is-fork):not([hidden]) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork):not([hidden]) #instruction-panel .next-actions) .toast{bottom:calc(156px + env(safe-area-inset-bottom))}
 /* A branch: a shorter paper and closer cards, so the folds, Finish and Pick a fold for me share the first screen. */
 #workspace:not(.is-fork):has(.branch-label) .paper-stage{aspect-ratio:auto;height:clamp(168px,26svh,240px);min-height:0}
 #workspace:not(.is-fork):has(.branch-label) #paper-view{height:100%;box-sizing:border-box;padding:30px 0 28px}
 #workspace:not(.is-fork):has(.branch-label) .paper-stage svg{height:100%;min-height:0;max-height:none;aspect-ratio:auto}
 #workspace:not(.is-fork):has(.branch-label) .instruction-panel h2{font-size:24px;margin-bottom:6px}
 #workspace:not(.is-fork):has(.branch-label) .instruction-panel .instruction{font-size:15px;line-height:1.5}
 #workspace:not(.is-fork):has(.branch-label) .panel-label{margin-bottom:6px}
 #workspace:not(.is-fork):has(.branch-label) .choice{min-height:56px;padding:6px 10px 6px 6px;margin-bottom:6px}
 #workspace:not(.is-fork):has(.branch-label) .choice .mini-paper{width:52px;height:44px}
 #workspace:not(.is-fork):has(.branch-label) .random-choice{min-height:44px;padding:8px;margin-top:2px}
}
/* A short phone keeps the first lines of a long step above the bar: a smaller title, closer rows and a slimmer bar. */
@media(max-width:720px) and (min-height:521px) and (max-height:800px){
 #workspace:not(.is-fork) .instruction-panel{padding-top:6px}
 #workspace:not(.is-fork) .panel-label,#workspace:not(.is-fork) .step-count{margin-bottom:6px}
 #workspace:not(.is-fork) .motion-controls{padding-top:0}
 #workspace:not(.is-fork) .instruction-panel h2{font-size:22px;margin-bottom:6px}
 #workspace:not(.is-fork) .move-goal{margin:-2px 0 4px;font-size:14px;line-height:1.35}
 #workspace:not(.is-fork) .instruction-panel .instruction{line-height:1.55}
 #workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions{padding-top:8px}
 :is(#workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions) .primary{min-height:46px;padding-top:10px;padding-bottom:10px}
 :is(#workspace:not(.is-fork) #instruction-panel>.instruction-actions:has([data-action="confirm"],[data-action="match-view"],[data-action="terminal-confirm"],[data-action="cut"]),#workspace:not(.is-fork) #instruction-panel .next-actions) :is(.quiet,.random-choice){min-height:40px;padding-top:6px;padding-bottom:6px}
 #workspace:not(.is-fork):has(.branch-label) .instruction-panel h2{font-size:22px}
}
/* A phone dialog keeps its buttons in view: they stay at the foot of the dialog while the words scroll above them. */
@media(max-width:720px) and (min-height:521px){
 dialog[open]{overflow:auto;padding-bottom:0}
 #modal-content{padding-bottom:20px}
 #modal-content>.dialog-actions:last-child{position:sticky;bottom:20px;z-index:1;background:var(--paper);box-shadow:0 20px 0 8px var(--paper),0 -12px 12px -2px var(--paper)}
 #modal-content>.primary:last-child{position:sticky;bottom:20px;z-index:1;box-shadow:0 20px 0 8px var(--paper),0 -12px 12px -2px var(--paper)}
 #modal-content>.dialog-actions:last-child{padding-top:10px}
}
/* Square only while the column is no wider than the drawing. Wider than that, the height cap above already sizes the stage. */
@container(max-width:360px){
 .paper-stage{width:100%;aspect-ratio:1;height:auto;min-height:300px}
 #paper-view{height:100%}
 .paper-stage svg{width:100%;height:100%;aspect-ratio:1;min-height:300px;max-height:360px}
 /* The square drawing meets the caption about 2px sooner than an unsquared stage. */
 .stage-bottom{bottom:8px}
}
/* A short landscape dialog keeps its confirm in the first view. The button sits in the dialog padding so the words can scroll behind it.
   The rule applies to an open dialog, so a closed one stays display:none and out of the page. */
@media(max-height:520px){
 dialog[open]{max-height:calc(100svh - 12px);padding:16px 16px 12px;overflow:hidden;display:flex;flex-direction:column}
 #modal-content{overflow:auto;min-height:0;padding-bottom:64px}
 #modal-content>.primary{position:absolute;left:16px;right:16px;bottom:12px;margin:0;background:var(--green);color:#fffdf3}
 #modal-content>.dialog-actions{position:absolute;left:16px;right:16px;bottom:12px;margin:0;background:var(--paper)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Fork choice. Same cream page as a lesson: the current paper in the stage, next folds evenly around one hairline. */
.workspace.is-fork{background:var(--paper);color:var(--ink)}
.workspace.is-fork .paper-option{min-height:44px;padding-block:8px}
.workspace.is-fork .paper-stage{min-height:0;overflow:visible}
.workspace.is-fork #paper-view{display:none}
.workspace.is-fork .paper-stage svg{min-height:0;max-height:none;height:100%;width:100%}
.workspace.is-fork .stage-top,.workspace.is-fork .stage-bottom{position:static;pointer-events:auto;padding:6px 16px 8px 24px}
.workspace.is-fork .stage-bottom{padding:8px 0 0}
.workspace.is-fork .paper-column,.workspace.is-fork .instruction-panel{overflow:visible;height:auto}
.workspace.is-fork{overflow:visible;height:auto}
#fold-mount:empty{display:none}
.fork-copy{display:flex;flex-direction:column;gap:14px;max-width:36em}
.fold-kicker{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin:0}
.workspace.is-fork .instruction-panel h2{margin-bottom:0}
.fold-lead{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.fold-random{align-self:flex-start;min-height:48px;padding:12px 22px;border:1px dashed #b3bea6;border-radius:8px;background:transparent;color:var(--green);font-size:14px;font-weight:600}
@media(hover:hover) and (pointer:fine){.fold-random:hover{background:var(--soft);color:var(--green)}}
.fold-lead-below,.fold-lead-beside,.fold-palette-label{display:none}
/* One switch for the ring. The grid is the other value, so the two layouts cannot drift apart. */
@property --fork-ring{syntax:"yes | no";inherits:true;initial-value:no}
:root{--fork-ring:no;container-name:fork;container-type:style}
@media(min-width:1024px) and (min-height:768px) and (hover:hover) and (pointer:fine),(min-width:1240px) and (min-height:720px) and (hover:hover) and (pointer:fine){:root{--fork-ring:yes}}
.fold-ring{position:relative;width:calc(var(--ring) * 2 + var(--opt));max-width:100%;margin-inline:auto}
.fold-orbit{position:relative;width:calc(var(--ring) * 2 + var(--opt));height:calc(var(--ring) * 2 + var(--opt))}
.fold-center{position:absolute;left:50%;top:50%;width:68px;height:68px;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.fold-center svg{display:block;width:100%;height:100%}
.fold-hairline{position:absolute;left:50%;top:50%;width:calc(var(--ring) * 2);height:calc(var(--ring) * 2);transform:translate(-50%,-50%);border:1px solid var(--faint);border-radius:50%;pointer-events:none}
.fold-options{position:static}
.fold-ring .fold-option{position:absolute;width:var(--opt);height:var(--opt);min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--faint);border-radius:50%;background:var(--card);box-shadow:none;display:grid;place-items:center;overflow:hidden;left:calc(50% + cos(var(--a)) * var(--ring) - var(--opt) / 2);top:calc(50% + sin(var(--a)) * var(--ring) - var(--opt) / 2)}
.fold-option-paper{display:block;width:var(--paper);height:var(--paper);overflow:hidden;border-radius:0;animation:fold-in .7s ease both;animation-delay:calc(var(--i) * 40ms)}
.fold-option-paper svg{display:block;width:100%;height:100%;overflow:hidden}
.fold-option-name,.fold-option-hint,.fold-option-meta{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fold-caption{width:100%;height:1.35em;margin:12px auto 0;max-width:26em;text-align:center;text-wrap:balance;color:var(--ink);font:italic 16px/1.35 var(--serif);letter-spacing:-.02em}
@keyframes fold-in{from{opacity:0}to{opacity:1}}
.fold-option.is-picked{z-index:2}
.workspace.fork-again .fold-option-paper{animation:none}
/* Named grid: the sheet you are holding is the stage, setup sits under it, then the folds in even rows. */
@container fork style(--fork-ring: no){
 body:has(#workspace.is-fork:not([hidden])) .site-header{height:64px}
 .fold-lead-around{display:none}
 .fold-lead-below{display:block}
 .fold-palette-label{display:block;margin:0;color:var(--ink);font-family:var(--serif);font-size:22px;line-height:1.15;letter-spacing:-.02em}
 .fold-caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
 .fold-hairline{display:none}
 .fold-ring{width:100%;max-width:none}
 .fold-orbit{width:100%;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
 .fold-center{position:static;transform:none;width:min(100%,var(--fork-sheet,220px));aspect-ratio:1;height:auto;margin:4px auto;padding:8px;background:transparent;border:none;border-radius:0;display:grid;place-items:center}
 .workspace.is-fork .fold-center svg{width:100%;height:100%}
 .fold-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;background:transparent;order:0}
 .fold-row{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:8px;width:100%;justify-content:center}
 .fold-options .fold-option{position:static;left:auto;top:auto;width:auto;height:auto;min-width:0;min-height:44px;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:8px 8px 10px;overflow:visible;text-align:center}
 .fold-options .fold-option:hover{transform:none;box-shadow:none;background:var(--card);border-color:var(--line)}
 .fold-option-paper{width:52px;height:52px;flex:none;align-self:center}
 .fold-option-name,.fold-option-hint,.fold-option-meta{position:static;width:auto;min-width:0;max-height:none;min-height:0;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;overflow-wrap:break-word;text-wrap:pretty;border:0}
 .fold-option-name{color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.01em;line-height:1.25;text-align:center}
 .fold-option-hint{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:1.25;text-align:center}
 .fold-option-meta{display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.25;text-align:center;letter-spacing:.01em}
 .workspace.is-fork{--fork-sheet:clamp(140px,24svh,200px)}
 .workspace.is-fork .paper-column{display:contents}
 .workspace.is-fork .paper-stage{order:-3;width:100%;min-height:0;background:var(--stage);border:1px solid #e3e4d8;border-radius:16px;background-image:radial-gradient(#9ca38c2b .8px,transparent .8px);background-size:22px 22px;display:flex;flex-direction:column;align-items:stretch;padding:46px 12px 16px;overflow:visible;position:relative}
 .workspace.is-fork .stage-top .icon-button{width:36px;height:36px;font-size:16px}
 .workspace.is-fork .stage-top,.workspace.is-fork .stage-bottom{position:absolute;left:12px;right:8px;height:auto;padding:0;pointer-events:none;overflow:visible;z-index:1}
 .workspace.is-fork .stage-top{top:6px}
 .workspace.is-fork .stage-bottom{bottom:6px;top:auto}
 .workspace.is-fork .stage-top>span{white-space:normal;letter-spacing:.04em;line-height:1.25;text-wrap:balance;flex:1 1 auto;min-width:0}
 .workspace.is-fork .stage-bottom{padding-top:2px}
 .workspace.is-fork .look-row,.workspace.is-fork .view-controls,.workspace.is-fork .view-note,.workspace.is-fork .trail-heading,.workspace.is-fork .trail,.workspace.is-fork .motion-controls{order:2;width:100%}
 .workspace.is-fork .adventure-grid{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 .workspace.is-fork .instruction-panel,.workspace.is-fork .fork-copy{display:contents}
 .workspace.is-fork .fold-kicker,.workspace.is-fork .instruction-panel h2,.workspace.is-fork .fold-lead{order:-4}
 .workspace.is-fork .fold-setup,.workspace.is-fork .fold-palette-label,.workspace.is-fork .paper-setup,.workspace.is-fork .first-timer{order:-2}
 .workspace.is-fork .fold-random{order:-1;align-self:flex-start}
 .workspace.is-fork .paper-setup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;width:100%}
 .workspace.is-fork .paper-setup .palette-row{margin:0;flex-wrap:nowrap}
 .workspace.is-fork .paper-setup,.workspace.is-fork .fold-setup,.workspace.is-fork .first-timer{min-width:0}
 .workspace.is-fork .paper-setup .paper-option{margin:0}
 .workspace.is-fork .fold-setup{margin:0}
 .workspace.is-fork .first-timer{margin:0;width:100%}
 .workspace.is-fork .workspace-heading{margin-bottom:6px}
 .workspace.is-fork .workspace-heading .eyebrow{margin-bottom:2px}
 .workspace.is-fork .workspace-heading h1{font-size:26px;line-height:1.1}
 .workspace.is-fork .instruction-panel h2{font-size:28px;line-height:1.15;margin:0}
 .workspace.is-fork .fold-lead{font-size:15px;line-height:1.4}
 /* A short wide window cannot stack the sheet, the setup and a fold. The sheet and the setup stay on the left; the first folds start beside them. */
 .workspace.is-fork-beside{--fork-sheet:clamp(112px,28svh,140px)}
 .workspace.is-fork-beside .workspace-heading{display:flex;justify-content:flex-end;align-items:center;margin:0 0 4px}
 .workspace.is-fork-beside .workspace-heading h1,.workspace.is-fork-beside .workspace-heading .eyebrow,.workspace.is-fork-beside .fold-kicker{display:none}
 body:has(#workspace.is-fork-beside) .site-header{height:52px}
 .workspace.is-fork-beside .adventure-grid{display:grid;grid-template-columns:minmax(140px,172px) minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start}
 .workspace.is-fork-beside .instruction-panel h2{font-size:20px;line-height:1.1}
 .workspace.is-fork-beside .fold-lead{font-size:13px;line-height:1.25}
 .workspace.is-fork-beside .fold-lead-below{display:none}
 .workspace.is-fork-beside .fold-lead-beside{display:block}
 .workspace.is-fork-beside .instruction-panel h2,.workspace.is-fork-beside .fold-lead{grid-column:1/-1}
 .workspace.is-fork-beside .fork-side{grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:8px;min-width:0}
 .workspace.is-fork-beside .fork-choices{grid-column:2;grid-row:3;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
 .workspace.is-fork-beside .fork-side .paper-stage{width:100%;padding:36px 8px 12px}
 .workspace.is-fork-beside .fork-choices{gap:8px}
 .workspace.is-fork-beside .fold-orbit{padding-bottom:8px}
 .workspace.is-fork-beside .fold-random{margin:0}
 .workspace.is-fork-beside .fold-options .fold-option{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:4px;row-gap:1px;align-items:start;padding:4px;text-align:left}
 .workspace.is-fork-beside .fold-option-paper{grid-column:1;grid-row:1;align-self:center;width:44px;height:44px}
 .workspace.is-fork-beside .fold-option-name{grid-column:2;grid-row:1;align-self:start;text-align:left}
 .workspace.is-fork-beside .fold-option-hint,.workspace.is-fork-beside .fold-option-meta{grid-column:1/-1;text-align:left}
 .workspace.is-fork-beside .fold-option-name,.workspace.is-fork-beside .fold-option-hint{font-size:11px;line-height:1.1}
 .workspace.is-fork-beside .fold-option-meta{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-size:11px;line-height:1.1}
 .workspace.is-fork-beside .fold-options{gap:2px}
 @media(max-height:540px) and (min-width:560px){
  .workspace.is-fork-beside{--fork-sheet:100px}
  .workspace.is-fork-beside .adventure-grid{grid-template-columns:minmax(108px,120px) minmax(0,1fr);column-gap:8px}
  .workspace.is-fork-beside .fork-side .paper-stage{padding:48px 6px 8px}
  .workspace.is-fork-beside .fold-options{gap:0}
  body:has(#workspace.is-fork-beside:not([hidden])) .site-header{height:48px}
  .workspace.is-fork-beside .workspace-heading .text-button{min-height:32px;padding-top:0;padding-bottom:0}
  .workspace.is-fork-beside .instruction-panel h2{font-size:16px;line-height:1.05}
  .workspace.is-fork-beside .fold-lead{font-size:12px;line-height:1.2}
  .workspace.is-fork-beside .fork-side .stage-top{display:block}
  .workspace.is-fork-beside .fork-side .stage-top .icon-button{position:absolute;top:0;right:0;width:28px;height:28px}
  .workspace.is-fork-beside .stage-top>span{display:block;width:auto;padding-right:30px;font-size:9px;letter-spacing:0;line-height:1.2;text-wrap:balance}
 }
 @media(max-height:820px) and (min-width:720px){
  .workspace.is-fork .workspace-heading h1,.workspace.is-fork .workspace-heading .eyebrow{display:none}
  .workspace.is-fork .workspace-heading{display:flex;justify-content:flex-end;align-items:center;margin-bottom:2px}
  .workspace.is-fork{--fork-sheet:clamp(112px,18svh,148px)}
  .workspace.is-fork .paper-stage{padding-top:32px;padding-bottom:12px}
  .workspace.is-fork .first-timer{margin:0;padding:6px 10px}
  .workspace.is-fork .fold-random{min-height:40px;padding:8px 16px}
 }
 @media(max-width:460px){
  .workspace.is-fork{--fork-sheet:clamp(128px,24svh,168px)}
  .workspace.is-fork .adventure-grid{gap:6px}
  .workspace.is-fork .workspace-heading{margin-bottom:2px}
  .workspace.is-fork .workspace-heading .eyebrow{display:none}
  .workspace.is-fork .workspace-heading h1{font-size:20px;line-height:1.05}
  .workspace.is-fork .instruction-panel h2{font-size:24px}
  .workspace.is-fork .fold-lead{font-size:14px;line-height:1.35}
  .workspace.is-fork .fold-setup{font-size:14px;line-height:1.35}
  .workspace.is-fork .first-timer{padding:8px 12px;font-size:13px;line-height:1.35}
  .fold-palette-label{font-size:20px}
  .fold-option-paper{width:44px;height:44px}
  .fold-option-name{font-size:13px}
 }
 @media(max-width:540px) and (max-height:920px){
  body:has(#workspace.is-fork:not([hidden])) .site-header{height:auto;padding-top:4px;padding-bottom:2px}
  body:has(#workspace.is-fork:not([hidden])) .brand small{display:none}
  .workspace.is-fork .fold-kicker{display:none}
  .workspace.is-fork .workspace-heading h1,.workspace.is-fork .workspace-heading .eyebrow{display:none}
  .workspace.is-fork .workspace-heading{display:flex;justify-content:flex-end;align-items:center;margin-bottom:2px}
  .workspace.is-fork .stage-top>span{font-size:10px;letter-spacing:.02em;line-height:1.3;text-wrap:balance}
  .workspace.is-fork{--fork-sheet:100px;padding-top:2px}
  .workspace.is-fork .workspace-heading .text-button{min-height:32px;padding-top:0;padding-bottom:0}
  .workspace.is-fork .adventure-grid{display:grid;grid-template-columns:minmax(136px,36%) minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start}
  .workspace.is-fork .instruction-panel h2,.workspace.is-fork .fold-lead{grid-column:1/-1}
  .workspace.is-fork .instruction-panel h2{font-size:20px;line-height:1.15}
  .workspace.is-fork .paper-stage{grid-column:1;grid-row:3/span 2;padding:42px 8px 10px 12px;align-self:start}
  .workspace.is-fork .fold-setup,.workspace.is-fork .fold-palette-label{grid-column:2}
  .workspace.is-fork .paper-setup{grid-column:1/-1;grid-row:5}
  .workspace.is-fork .first-timer{grid-column:1/-1;grid-row:6;margin:0;padding:4px 8px}
  .workspace.is-fork .fold-random{grid-column:1/-1;grid-row:7;min-height:40px;padding:6px 12px}
  .workspace.is-fork .fold-options{grid-column:1/-1;grid-row:8}
  .workspace.is-fork .fold-center{width:100%;max-width:112px;margin:2px auto}
  .workspace.is-fork .fold-orbit{padding-bottom:16px}
  .workspace.is-fork .stage-top,.workspace.is-fork .stage-bottom{padding:0}
  .workspace.is-fork .fold-setup{font-size:13px;line-height:1.3}
  .workspace.is-fork .first-timer{padding:6px 8px}
  .workspace.is-fork .paper-setup .swatch{width:auto;height:auto;aspect-ratio:1;border-width:3px}
  .fold-option-paper{width:44px;height:44px}
  .fold-options .fold-option{padding:6px 6px 8px}
 }
 /* The lesson dock is more specific than the fork rules, and it would lock a square stage over the choices. */
 body:has(#workspace.is-fork:not([hidden])) .site-footer{display:flex}
 body:has(#workspace.is-fork:not([hidden])) .workspace{height:auto;max-height:none;overflow:visible;display:block}
 body:has(#workspace.is-fork:not([hidden])) .adventure-grid{flex:none;height:auto;min-height:0;overflow:visible;align-items:stretch}
 body:has(#workspace.is-fork:not([hidden])) .paper-column{display:contents;overflow:visible;height:auto;min-height:0;flex:none}
 body:has(#workspace.is-fork:not([hidden])) .paper-stage{aspect-ratio:auto;min-height:0;height:auto;width:100%;flex:none}
 body:has(#workspace.is-fork:not([hidden])) #paper-view{display:none;min-height:0;height:auto}
 body:has(#workspace.is-fork:not([hidden])) .paper-stage svg{min-height:0;max-height:none;height:auto;aspect-ratio:auto}
 body:has(#workspace.is-fork:not([hidden])) .instruction-panel,body:has(#workspace.is-fork:not([hidden])) .fork-copy{display:contents;height:auto;overflow:visible;min-height:0;flex:none}
 body:has(#workspace.is-fork:not([hidden])) .instruction-body{overflow:visible;height:auto;flex:none}
 body:has(#workspace.is-fork:not([hidden])) .fold-center svg{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto}
}
/* Ring beside the words. The script reads --fork-ring, which this same query sets, and moves the column to match. */
@container fork style(--fork-ring: yes){
 body:has(#workspace.is-fork:not([hidden])) .site-header{height:84px}
 body:has(#workspace.is-fork:not([hidden])) .site-footer{display:flex;padding-top:0;padding-bottom:6px}
 .workspace.is-fork{display:flex;flex-direction:column;height:auto;max-height:none;min-height:calc(100svh - 84px);overflow:visible;padding-top:4px;padding-bottom:0}
 .workspace.is-fork .workspace-heading{margin-bottom:6px}
 .workspace.is-fork .workspace-heading .eyebrow{margin-bottom:2px}
 .workspace.is-fork .workspace-heading h1{font-size:26px;line-height:1.1}
 .workspace.is-fork .adventure-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-rows:repeat(5,auto) 1fr;gap:0 52px;align-items:stretch;overflow:visible;min-height:0;flex:1}
 .workspace.is-fork .paper-column{display:contents}
 .workspace.is-fork .paper-column>:not(.paper-stage){grid-column:2}
 .workspace.is-fork .paper-stage{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;position:relative;padding:8px 0 4px;overflow:visible}
 .workspace.is-fork #fold-mount{margin-top:auto;margin-bottom:auto;width:100%}
 .workspace.is-fork .instruction-panel{order:0;display:block;min-height:0;height:auto;overflow:visible;padding-top:0;grid-column:2;grid-row:1}
 .workspace.is-fork .stage-top{position:absolute;top:10px;left:24px;right:16px;padding:0;z-index:2;pointer-events:none}
 .workspace.is-fork .stage-bottom{padding:0 24px;min-height:20px}
 .workspace.is-fork .stage-top>span{max-width:none;white-space:nowrap;line-height:1.3}
 .workspace.is-fork .fold-ring{padding:0}
 .fold-center{width:136px;height:136px;background:var(--card);border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center}
 .workspace.is-fork .fold-center svg{width:84%;height:84%}
 .workspace.is-fork .look-row{margin-top:2px}
 .workspace.is-fork .trail-heading{margin-top:6px}
 .workspace.is-fork .trail{min-height:36px}
 .workspace.is-fork .workspace-footer{margin-top:4px;padding:2px 0}
 .workspace.is-fork .fork-copy{gap:10px;max-width:36em}
 .workspace.is-fork .fork-copy .paper-setup{padding:0}
 .workspace.is-fork .fork-copy .palette-row{margin:4px 0 0}
 .workspace.is-fork .fork-copy .paper-option{margin:0;padding-block:4px}
 .workspace.is-fork .fork-copy .tip{margin:0;padding:8px 14px}
 .workspace.is-fork .fold-lead{font-size:15px;line-height:1.5}
 .workspace.is-fork .paper-stage:has(.fold-caption:not(:empty)) .stage-bottom{visibility:hidden}
 .fold-ring .fold-option:hover,.fold-ring .fold-option:focus-visible{background:var(--soft);transform:none;box-shadow:none;outline:3px solid var(--focus);outline-offset:2px}
 /* The 18-choice ring and Unfold share a 720px-tall window only with the shorter header. */
 @media(max-height:780px){
  body:has(#workspace.is-fork:not([hidden])) .site-header{height:64px}
  .workspace.is-fork{min-height:calc(100svh - 64px)}
 }
 /* Front and Back sit in this column. On a short or narrow laptop they shrink so Unfold stays on the first screen. */
 @media(max-height:859px) and (max-width:1239px),(max-height:740px){
  .workspace.is-fork .fork-copy{gap:4px}
  .workspace.is-fork .instruction-panel h2{font-size:26px;line-height:1.15}
  .workspace.is-fork .fork-copy .palette-field{margin:0;gap:8px}
  .workspace.is-fork .fork-copy .palette-field .swatch{max-width:32px}
  .workspace.is-fork .fork-copy .tip{padding:6px 10px}
  .workspace.is-fork .fold-random{min-height:40px;padding:8px 16px}
 }
 /* The lesson dock is more specific than these ring rules and would stretch every stage drawing. */
 body:has(#workspace.is-fork:not([hidden])) .site-footer{display:flex;padding-top:0;padding-bottom:6px}
 body:has(#workspace.is-fork:not([hidden])) .workspace{height:auto;max-height:none;overflow:visible;display:flex;flex-direction:column}
 body:has(#workspace.is-fork:not([hidden])) .adventure-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);grid-template-rows:repeat(5,auto) 1fr;flex:1;height:auto;min-height:0;overflow:visible;align-items:stretch}
 body:has(#workspace.is-fork:not([hidden])) .paper-column{display:contents;overflow:visible;height:auto;min-height:0}
 body:has(#workspace.is-fork:not([hidden])) .paper-stage{aspect-ratio:auto;min-height:0;height:auto;width:auto;flex:none}
 body:has(#workspace.is-fork:not([hidden])) #paper-view{display:none;min-height:0;height:auto}
 body:has(#workspace.is-fork:not([hidden])) .paper-stage svg{min-height:0;max-height:none;height:auto;aspect-ratio:auto}
 body:has(#workspace.is-fork:not([hidden])) .fold-center svg{width:84%;height:84%;min-height:0}
 body:has(#workspace.is-fork:not([hidden])) .fold-option-paper svg{width:100%;height:100%;min-height:0;max-height:none}
 body:has(#workspace.is-fork:not([hidden])) .instruction-panel{display:block;height:auto;min-height:0;overflow:visible}
 body:has(#workspace.is-fork:not([hidden])) .instruction-body{overflow:visible;height:auto}
}
@media(prefers-reduced-motion:reduce){
 .fold-option-paper{animation:none}
}
/* Picture-led ring for a phone, tablet or touch screen. The laptop cream ring stays on the fine-pointer query. */
.fold-explore-line{display:none}
body:has(#workspace.fork-phone:not([hidden])) .site-header{height:auto;min-height:0;padding:4px 12px 2px}
body:has(#workspace.fork-phone:not([hidden])) .brand small{display:none}
body:has(#workspace.fork-phone:not([hidden])) .brand svg{width:26px;height:26px}
body:has(#workspace.fork-phone:not([hidden])) .brand>span{font-size:16px;line-height:1.05}
body:has(#workspace.fork-phone:not([hidden])) .site-header nav{gap:12px}
body:has(#workspace.fork-phone:not([hidden])) .site-header nav .text-button{min-height:32px;padding:2px 0;font-size:13px}
body:has(#workspace.fork-phone:not([hidden])) .site-footer{display:flex}
body:has(#workspace.fork-phone:not([hidden])) .workspace{height:auto;max-height:none;overflow:visible;display:flex;flex-direction:column;padding:2px 12px 10px}
body:has(#workspace.fork-phone:not([hidden])) .adventure-grid{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0;height:auto;overflow:visible}
.fork-phone .workspace-heading{display:flex;justify-content:flex-end;align-items:center;margin:0 0 2px}
.fork-phone .workspace-heading h1,.fork-phone .workspace-heading .eyebrow,.fork-phone .fold-kicker,.fork-phone .instruction-panel h2,.fork-phone .fold-lead,.fork-phone .fold-setup,.fork-phone .fold-palette-label,.fork-phone .first-timer{display:none}
.fork-phone .fold-explore-line{display:block;order:1;margin:0;color:var(--ink);font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.1;letter-spacing:-.02em}
.fork-phone .paper-setup{order:2;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;margin:0;padding:0}
.fork-phone .paper-setup .palette-row{margin:0;gap:8px}
.workspace.fork-phone .paper-option{min-height:32px;margin:0;padding:0;font-size:13px;line-height:1.2;gap:8px}
.workspace.fork-phone .paper-option input{margin:0 -3px}
.fork-phone .paper-stage{order:3;width:100%;margin:0;padding:0;background:transparent;background-image:none;border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;min-height:0}
.fork-phone .stage-bottom{display:none}
body:has(#workspace.fork-phone:not([hidden])) .stage-top{display:none}
.workspace.fork-phone .workspace-heading .paper-colours{position:static;width:auto;height:auto;min-width:44px;min-height:36px;margin:0 8px 0 0;padding:4px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:transparent;font-size:0;line-height:1.2;flex:0 0 auto}
.workspace.fork-phone .workspace-heading .paper-colours::after{content:"Colours";color:var(--ink);font-size:14px;font-weight:600;letter-spacing:0}
.fork-phone .fold-random{order:5;align-self:center;min-height:40px;margin:0;padding:8px 12px;border:none;background:transparent;color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a7b69f}
/* The first fork also carries the palette. Pick a fold for me shares the heading's row there, so fifteen choices keep 44px. */
body:has(#workspace.fork-phone:not([hidden])) .adventure-grid:has(.paper-setup){flex-flow:row wrap;align-items:center}
body:has(#workspace.fork-phone:not([hidden])) .adventure-grid:has(.paper-setup) .fold-random{order:1;margin-left:auto}
body:has(#workspace.fork-phone:not([hidden])) .adventure-grid:has(.paper-setup) .paper-stage{margin-inline:auto}
body:has(#workspace.fork-phone:not([hidden])) .adventure-grid:has(.paper-setup) .trail-heading{width:100%}
.fork-phone .look-row,.fork-phone .view-controls,.fork-phone .view-note,.fork-phone .trail-heading,.fork-phone .trail,.fork-phone .motion-controls{order:6;width:100%}
.fork-phone .workspace-footer{margin-top:4px;padding:0}
.fork-phone .fold-option-name,.fork-phone .fold-option-hint,.fork-phone .fold-option-meta{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fork-phone .fold-caption{position:static;width:auto;height:auto;margin:4px auto 0;max-width:28em;overflow:visible;clip:auto;white-space:normal;text-align:center;color:var(--ink);font:italic 15px/1.3 var(--serif)}
.fork-phone .fold-caption:empty{display:none}
.fork-phone .fold-option:hover{transform:none;box-shadow:none}
.fork-phone .fold-option:focus-visible,.fork-phone .fold-option.is-pressed{outline:3px solid var(--focus);outline-offset:2px}
.fork-phone .paper-setup{order:2}
.fork-phone .paper-stage{order:3;flex:1 1 auto;justify-content:center}
.fork-phone .fold-ring{width:calc(var(--ring) * 2 + var(--opt));max-width:100%;margin-inline:auto}
.fork-phone .fold-orbit{position:relative;width:calc(var(--ring) * 2 + var(--opt));height:calc(var(--ring) * 2 + var(--opt));display:block}
.fork-phone .fold-hairline{display:block}
.fork-phone .fold-options{position:static;display:block;width:auto;height:auto;background:transparent}
.workspace.fork-phone .fold-center{position:absolute;left:50%;top:50%;width:calc(var(--ring) * .72);height:calc(var(--ring) * .72);max-width:none;margin:0;padding:0;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;z-index:1;pointer-events:none}
body:has(#workspace.fork-phone:not([hidden])) .fold-center svg{width:76%;height:76%;min-height:0;max-height:none}
.fork-phone .fold-options .fold-option{position:absolute;left:calc(50% + cos(var(--a)) * var(--ring) - var(--opt) / 2);top:calc(50% + sin(var(--a)) * var(--ring) - var(--opt) / 2);width:var(--opt);height:var(--opt);min-width:0;min-height:0;margin:0;padding:0;border:1px solid var(--faint);border-radius:50%;background:var(--card);display:grid;place-items:center;place-content:center;overflow:hidden}
.fork-phone .fold-option-paper{width:var(--paper);height:var(--paper)}
@media(orientation:landscape) and (max-height:520px){
 .fork-phone .fold-explore-line{font-size:22px}
 body:has(#workspace.fork-phone:not([hidden])) .site-header{height:36px;padding:0 10px}
 body:has(#workspace.fork-phone:not([hidden])) .workspace-heading{position:absolute;top:2px;right:8px;z-index:3;min-height:0;margin:0}
 body:has(#workspace.fork-phone:not([hidden])) .workspace-heading .text-button{min-height:28px}
 body:has(#workspace.fork-phone:not([hidden])) .site-header nav{margin-right:210px}
 .workspace.fork-phone .workspace-heading .paper-colours{min-height:28px;padding:2px 8px}
 body:has(#workspace.fork-phone:not([hidden])) .paper-setup{flex-direction:row;flex-wrap:nowrap;align-items:center}
 body:has(#workspace.fork-phone:not([hidden])) .adventure-grid{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
 body:has(#workspace.fork-phone:not([hidden])) .fold-explore-line{grid-column:1;grid-row:1}
 body:has(#workspace.fork-phone:not([hidden])) .paper-setup{grid-column:2;grid-row:1;width:auto;justify-content:flex-end}
 body:has(#workspace.fork-phone:not([hidden])) .paper-stage{grid-column:1 / -1;grid-row:2;width:auto}
 body:has(#workspace.fork-phone:not([hidden])) .fold-random{grid-column:1 / -1;grid-row:3}
 /* On the first fork it waits under the heading, in the free column left of the ring. */
 body:has(#workspace.fork-phone:not([hidden])) .adventure-grid:has(.paper-setup) .fold-random{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin-left:0;z-index:2}
}
html:has(#workspace.fork-phone:not([hidden])),body:has(#workspace.fork-phone:not([hidden])){overflow-x:hidden;max-width:100%}
body:has(#workspace.fork-phone:not([hidden])) .look-row,body:has(#workspace.fork-phone:not([hidden])) .view-controls,body:has(#workspace.fork-phone:not([hidden])) .view-note,body:has(#workspace.fork-phone:not([hidden])) .trail,body:has(#workspace.fork-phone:not([hidden])) .motion-controls{display:none}
body:has(#workspace.fork-phone:not([hidden])) .trail-heading{display:flex;justify-content:flex-end;align-items:center;width:auto;margin:0;padding:0;border:none;order:6}
body:has(#workspace.fork-phone:not([hidden])) .trail-heading>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
body:has(#workspace.fork-phone:not([hidden])) .trail-heading .text-button{min-width:44px;min-height:44px}
body:has(#workspace.fork-phone:not([hidden])) .paper-stage{order:3;padding:0;background:transparent;background-image:none;border:none;width:auto;max-width:100%;min-height:0;align-self:center}
body:has(#workspace.fork-phone:not([hidden])) .fold-orbit{padding:0}
body:has(#workspace.fork-phone:not([hidden])) .fold-explore-line{order:1}
body:has(#workspace.fork-phone:not([hidden])) .paper-setup{order:2}
body:has(#workspace.fork-phone:not([hidden])) .fold-random{order:5}