:root{--ink: #2e2a25;--ink-soft: #675f53;--room: #b4ada2;--panel: rgba(246, 242, 235, .92);--rule: rgba(46, 42, 37, .14);--accent: #4a5d7a;--font: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--room);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{position:fixed;inset:0;overflow:hidden}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.masthead{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:calc(env(safe-area-inset-left,0px) + 18px);pointer-events:none}.masthead h1{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.01em}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.start-over{position:absolute;top:calc(env(safe-area-inset-top,0px) + 9px);right:calc(env(safe-area-inset-right,0px) + 12px);padding:7px 12px;border:0;border-radius:8px;background:transparent;font-size:.9rem;color:var(--ink-soft)}.start-over:hover:not(:disabled){color:var(--ink);background:#ffffff40}.start-over:disabled{opacity:.4}.dock{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translate(-50%);width:min(560px,calc(100vw - 20px));padding:10px 12px 12px;border-radius:18px;background:var(--panel);box-shadow:0 1px #fff9 inset,0 10px 30px #342c222e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.progress{display:flex;gap:5px;margin:0 2px 10px;padding:0;list-style:none}.progress li{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background-color .25s}.progress li.done{background:var(--ink)}.progress li.active{background:var(--accent)}.dock-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.caption{min-width:0}.caption p{margin:0}.step-no{font-size:.78rem;color:var(--ink-soft)}.step-title{font-size:1.02rem;font-weight:600;line-height:1.25}.step-hint{margin-top:2px!important;font-size:.85rem;line-height:1.35;color:var(--ink-soft)}.btn{min-width:76px;min-height:44px;padding:0 16px;border-radius:999px;font-size:.95rem;font-weight:600;transition:background-color .2s,opacity .2s}.btn:disabled{opacity:.35}.btn-quiet{border:1px solid var(--rule);background:transparent}.btn-quiet:hover:not(:disabled){background:#2e2a250d}.btn-primary{border:0;background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}@media (max-width: 520px){.dock{padding:9px 10px 10px;border-radius:16px}.dock-row{gap:8px}.btn{min-width:64px;padding:0 12px}.step-hint{font-size:.8rem}}[hidden]{display:none!important}.papers{position:absolute;top:calc(env(safe-area-inset-top,0px) + 52px);bottom:118px;left:calc(env(safe-area-inset-left,0px) + 16px);width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:hidden}.swatches{display:flex;flex-direction:column;gap:8px;min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.swatch{position:relative;width:48px;height:48px;flex:none;padding:0;border:0;border-radius:3px;overflow:hidden;background:#fff;box-shadow:0 1px 2px #28201647,0 4px 10px #2820161f;transition:transform .18s,box-shadow .18s}.paper-group-label{flex:none;max-width:70px;padding:4px 0 1px;font-size:.63rem;color:var(--ink-soft);text-align:center}.swatch img{width:100%;height:100%;display:block;transition:transform .3s}.swatch .corner{position:absolute;right:0;bottom:0;width:18px;height:18px;background:linear-gradient(135deg,var(--reverse) 50%,transparent 50%);box-shadow:-1px -1px 2px #0000002e}.swatch:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 18px 18px;border-color:transparent transparent var(--room) transparent}.swatch[aria-checked=true]{transform:translateY(-1px) scale(1.06);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink),0 6px 14px #28201633}.swatch:hover:not([aria-checked=true]){transform:translateY(-1px)}.paper-name{margin:2px 0 0;flex:none;font-size:.8rem;line-height:1.3;text-align:center;color:var(--ink)}.rotate{display:inline-flex;align-items:center;flex:none;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);font-size:.8rem;line-height:1.1}.rotate svg{width:16px;height:16px;flex:none}.rotate:hover{background:#fff}@media (max-width: 719px){.papers{top:calc(env(safe-area-inset-top,0px) + 46px);bottom:auto;left:12px;right:12px;width:auto;height:44px;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px}.swatches{flex-direction:row;flex:1 1 auto;min-width:0;gap:8px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}.swatch{width:44px;height:44px}.swatch .corner{width:14px;height:14px}.swatch:after{border-width:0 0 14px 14px}.paper-name,.rotate span{display:none}.rotate{width:44px;height:44px;padding:0;justify-content:center}.rotate svg{width:20px;height:20px}}.display-dock{padding-top:12px}.display-head{grid-template-columns:1fr auto;margin-bottom:10px}.display-tools{display:flex;gap:8px;align-items:center}.segmented{display:flex;flex:1;padding:3px;border-radius:999px;background:#2e2a2512}.seg{flex:1;min-height:38px;border:0;border-radius:999px;background:transparent;font-size:.9rem;font-weight:600}.seg:hover{background:#ffffffb3}.seg:active{background:#fff}.toggle[aria-pressed=true]{background:var(--accent);border-color:transparent;color:#fff}@media (max-width: 520px){.display-tools{gap:6px}.display-tools .btn{min-width:0;padding:0 11px;font-size:.88rem}.seg{font-size:.86rem}}.studio-controls{position:absolute;top:50px;left:128px;right:16px;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;padding:8px 12px;width:fit-content;max-width:calc(100% - 144px);border-radius:12px;background:var(--panel);font-size:.8rem}.studio-controls label{display:inline-flex;gap:6px;align-items:center}.studio-controls select,.studio-button{font:inherit;color:var(--ink);min-height:36px;padding:4px 9px;border:1px solid var(--rule);border-radius:8px;background:transparent}.studio-controls select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.studio-button:disabled{opacity:.45}.studio-note{color:var(--ink-soft)}.centre-controls{display:inline-flex;gap:6px;align-items:center}.centre-controls button[aria-pressed=true]{background:#ffffffa6;border-color:var(--ink)}@media (max-width: 719px){.studio-controls{top:100px;left:12px;right:12px;max-width:none;width:auto;gap:5px 8px;padding:7px 9px}.studio-note{font-size:.73rem}}@media (max-height: 540px){.studio-note,.step-hint{display:none}.display-head{margin-bottom:5px}}.shape-choices{margin:0 0 10px;padding:0;border:0;display:flex;gap:8px}.shape-choices legend{font-size:.8rem;color:var(--ink-soft);margin-bottom:6px}.shape-choices button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;padding:4px 8px;background:transparent;border:1px solid var(--rule);border-radius:10px;font-size:.8rem}.shape-choices button[aria-pressed=true]{border-color:var(--ink);background:#fff9;box-shadow:inset 0 0 0 1px var(--ink)}.shape-choices svg{width:38px;height:38px;flex:none;fill:var(--ink-soft)}@media (max-width: 520px){.shape-choices button{flex-direction:column;gap:2px;font-size:.73rem}.shape-choices svg{width:30px;height:30px}}@media (max-height: 540px){.shape-choices{margin-bottom:5px}.shape-choices button{min-height:34px}.shape-choices svg{width:24px;height:24px}}@media (max-height: 540px) and (min-width: 720px){.studio-controls{flex-wrap:nowrap;overflow-x:auto;max-width:calc(100% - 144px);padding:6px 8px;gap:6px}.studio-controls>*{flex-shrink:0}.studio-controls select,.studio-button{min-height:32px}.display-dock{padding:8px 10px;bottom:8px}.display-dock .btn,.display-dock .seg{min-height:32px}}.fold-handles{position:absolute;inset:0;pointer-events:none}.fold-handle{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--ink-soft);padding:0;background:#f6f2ebe0;box-shadow:0 2px 7px #302b2633;display:grid;place-items:center;pointer-events:auto;touch-action:none;cursor:grab}.fold-handle span{display:block;font-size:25px;line-height:1}.fold-handle:active{cursor:grabbing;background:#fff}.studio-note.experiment-note{display:block;max-width:420px}@media (max-height: 540px) and (min-width: 720px){.studio-controls:has(.experiment-note){flex-wrap:wrap;overflow-x:visible}.studio-note.experiment-note{flex:1 1 240px;min-width:0;font-size:.73rem}}.print-shifted{box-shadow:inset 0 0 0 2px var(--ink)}.rotate{min-height:44px}.display-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:190px}.editor-dialog{color:var(--ink);background:#f6f2eb;border:1px solid var(--rule);border-radius:18px;padding:20px;max-height:calc(100dvh - 24px);max-width:calc(100vw - 24px);overflow:auto;box-shadow:0 16px 70px #302b2650}.editor-dialog::backdrop{background:#302b2660}.editor-dialog h2{margin:0 0 12px;font-size:1.12rem}.editor-dialog p{font-size:.88rem;line-height:1.4;margin:8px 0 12px}.editor-dialog button,.editor-dialog select,.editor-dialog input{min-height:44px}.editor-dialog :focus-visible{outline:2px solid var(--ink);outline-offset:3px}.editor-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.editor-actions [aria-pressed=true]{background:#d7dbce;border-color:var(--ink)}.editor-dialog .editor-readout{font-size:.78rem;color:var(--ink-soft)}.print-dialog{width:390px}.print-preview{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;margin:12px auto;box-shadow:0 2px 8px #302b2630;touch-action:none}.print-preview.can-slide{cursor:grab}.print-preview.can-slide:active{cursor:grabbing}.pinboard-dialog{width:1050px}.board-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:20px}.board-preview{min-width:0;align-self:center}.pinboard-canvas{display:block;width:100%;height:auto;aspect-ratio:var(--board-aspect);touch-action:none;cursor:grab;border-radius:4px}.pinboard-canvas:active{cursor:grabbing}.board-tools{display:flex;flex-direction:column;gap:8px}.board-tools label{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:.9rem}.board-tools select{font:inherit;color:inherit;background:transparent;border:1px solid var(--rule);border-radius:8px;padding:0 10px}.board-tools select{min-width:0;max-width:190px}.board-storage{padding:8px;border:1px solid var(--rule);border-radius:8px}.board-tools input{flex:1;min-width:0;accent-color:var(--accent)}.board-tools .editor-actions{display:grid;grid-template-columns:1fr 1fr;margin:0}@media (max-width: 719px){.display-actions{max-width:100px}.board-body{grid-template-columns:1fr;gap:12px}.editor-dialog{padding:14px}.board-tools{gap:6px}}@media (max-height: 540px) and (min-width: 720px){.print-dialog{width:680px;display:grid;grid-template-columns:220px 1fr;gap:8px 20px;align-items:center}.print-dialog:not([open]){display:none}.print-dialog h2{grid-column:1 / -1}.print-preview{grid-column:1;grid-row:2 / 6;margin:0}.print-dialog>:not(h2):not(canvas){grid-column:2}.board-tools .btn{font-size:.85rem}}@media (max-height: 540px) and (min-width: 720px){.board-body{max-height:calc(100dvh - 110px)}.board-preview{width:min(100%,calc((100dvh - 110px) * var(--board-aspect)));justify-self:center;align-self:start}.board-tools{max-height:calc(100dvh - 110px);overflow-y:auto;padding:2px 4px 4px}}.pinboard-dialog{height:min(860px,calc(100dvh - 24px))}.pinboard-dialog .board-body{height:calc(100% - 36px);max-height:none;min-height:0}.pinboard-dialog .board-tools{height:100%;min-height:0;max-height:none;overflow-y:auto;padding:2px 6px 6px}.pinboard-dialog .board-preview{width:min(100%,calc(min(729px,100dvh - 155px) * var(--board-aspect)));align-self:center;justify-self:center}@media (max-width: 719px){.pinboard-dialog .board-body{grid-template-rows:auto minmax(0,1fr)}.pinboard-dialog .board-preview{width:min(100%,calc((100dvh - 250px) * var(--board-aspect)));align-self:start}.pinboard-dialog .board-preview p{display:none}}