:root{--bg:#1c1a18;--panel:#181614c7;--line:#ffffff17;--text:#f3eee6;--muted:#b3aa9c;--accent:#f2c14e;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--sans:ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;--edge:18px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--sans);margin:0;overflow:hidden}canvas#c{touch-action:none;cursor:grab;width:100vw;height:100vh;display:block;position:fixed;inset:0}canvas#c:active{cursor:grabbing}button{font:inherit;color:inherit}button:disabled{opacity:.35;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#vignette{pointer-events:none;background:radial-gradient(140% 120% at 50% 45%,#0000 55%,#0000008c 100%);transition:opacity .5s;position:fixed;inset:0}body:not(.view-pov) #vignette{opacity:0}#mirror-frame{pointer-events:none;opacity:0;border-radius:28px;transition:opacity .5s;position:fixed;inset:14px;box-shadow:inset 0 0 0 10px #c9b48a,inset 0 0 0 12px #6d5a39,inset 0 0 60px #ffffff1f}body.view-mirror #mirror-frame{opacity:1}.panel-title{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px}.panel-title.small{margin-top:16px}aside#knots,#settings-panel,#stepcard,#knot-btn,#settings>summary,#cam-tools{background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.2);border:1px solid var(--line);box-shadow:0 10px 40px #00000059}#dock{left:50%;bottom:var(--edge);width:min(780px, calc(100vw - 2 * var(--edge)));z-index:3;align-items:stretch;gap:10px;display:flex;position:fixed;transform:translate(-50%)}#pip{cursor:pointer;background:0 0;border:5px solid #c9b48a;border-radius:16px;flex:none;width:196px;min-height:204px;padding:0;position:relative;box-shadow:inset 0 0 0 1px #6d5a39,inset 0 0 24px #ffffff1a,0 10px 30px #00000073}#pip[hidden]{display:none}#pip:hover{border-color:#e6d2a4}#pip span{font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:#181614a8;border-radius:99px;padding:3px 7px;position:absolute;bottom:6px;left:6px}#pip span:after{content:" ⤢";opacity:0;transition:opacity .15s}#pip:hover span:after{opacity:1}#stepcard{border-radius:16px;flex-direction:column;flex:1;min-width:0;min-height:204px;padding:14px 18px 12px;display:flex}.title-row{align-items:center;gap:10px;display:flex}#step-num{letter-spacing:.06em;color:#1b1916;background:var(--accent);font-variant-numeric:tabular-nums;border-radius:99px;flex:none;padding:3px 8px;font-size:12px;font-weight:700}#step-title{font-family:var(--serif);letter-spacing:-.01em;margin:0;font-size:24px;font-weight:700;line-height:1.15}#step-text{color:#e8e1d5;margin:8px 0 0;font-size:17px;line-height:1.45}#step-text b{color:#fff;background:linear-gradient(#0000 60%,#f2c14e59 60%)}#step-tip{color:var(--muted);margin:6px 0 0;font-size:13px;line-height:1.4}#step-tip:empty{display:none}#step-tip:before{content:"💡 "}.seq-row{align-items:center;gap:8px;margin-top:8px;display:flex}body:not(.notation) .seq-row{display:none}#knot-seq{flex-wrap:wrap;gap:3px;display:flex}#knot-seq span{color:var(--muted);background:#ffffff0f;border-radius:5px;padding:2px 5px;font:700 11px ui-monospace,SF Mono,Menlo,monospace;transition:all .2s}#knot-seq span.done{color:var(--text)}#knot-seq span.cur{background:var(--accent);color:#1b1916}#legend{color:var(--muted);background:#ffffff0a;border-radius:8px;margin-top:8px;padding:8px 10px;font-size:12px;line-height:1.5}#legend[hidden]{display:none}button.ghost{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;flex:none;width:24px;height:24px;font-size:12px}body:not(.notation) #knot-seq,body:not(.notation) #legend-btn,body:not(.notation) #legend{display:none!important}.controls{gap:8px;margin-top:auto;padding-top:12px;display:flex}.controls button{border:1px solid var(--line);cursor:pointer;background:#ffffff0f;border-radius:12px;flex:none;place-items:center;width:44px;height:44px;font-size:20px;line-height:1;display:grid}.controls button:hover:not(:disabled){background:#ffffff21}.controls button.primary{background:var(--accent);color:#1b1916;width:auto;font:700 15px var(--sans);letter-spacing:.01em;border:0;flex:1}.controls button.primary:hover:not(:disabled){background:#f7cf6c}#btn-play{font-size:15px}#btn-prev{padding-bottom:4px;font-size:28px}#timeline{gap:4px;margin-top:10px;display:flex}#timeline button{cursor:pointer;background:0 0;border:0;flex:1;height:14px;padding:0;position:relative}#timeline button:before{content:"";background:#ffffff24;border-radius:3px;height:6px;position:absolute;top:4px;left:0;right:0}#timeline button.done:before{background:#f2c14e8c}#timeline button.cur:before{background:var(--accent)}#timeline button:hover:after{content:attr(data-label);white-space:nowrap;color:#fff;pointer-events:none;z-index:2;background:#000;border-radius:6px;padding:4px 7px;font-size:11px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#knot-btn{left:var(--edge);top:var(--edge);z-index:4;cursor:pointer;border-radius:999px;align-items:center;gap:10px;padding:9px 14px 9px 16px;transition:border-color .2s;display:flex;position:fixed}#knot-btn:hover,#knot-btn[aria-expanded=true]{border-color:#f2c14e99}#knot-btn .lbl{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:10.5px}#knot-btn #knot-btn-name{font-family:var(--serif);font-size:17px;font-weight:600}#knot-btn .chev{color:var(--accent);transition:transform .2s}#knot-btn[aria-expanded=true] .chev{transform:rotate(180deg)}aside#knots{left:var(--edge);z-index:5;border-radius:16px;width:340px;max-height:calc(100vh - 88px);padding:16px 12px 12px;animation:.16s ease-out drop;position:fixed;top:70px;overflow:auto}aside#knots[hidden]{display:none}@keyframes drop{0%{opacity:0;transform:translateY(-6px)}}#knot-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}#knot-list li button{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:11px;grid-template-columns:64px 1fr auto;align-items:center;gap:2px 12px;width:100%;padding:9px 10px;display:grid}#knot-list li button:hover{background:#ffffff0d}#knot-list li button.on{background:#f2c14e1f;border-color:#f2c14e73}#knot-list li button>:not(.thumb){grid-column:2/-1}#knot-list li button>.nm{font-family:var(--serif);grid-column:2;font-size:16px;font-weight:600}#knot-list li button>.sz{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;grid-column:3;font-size:10.5px}#knot-list .thumb{object-fit:cover;border:1px solid var(--line);background:#ffffff0f;border-radius:10px;grid-area:1/1/span 5;align-self:start;width:64px;height:64px}#knot-list .thumb:not([src]){animation:1.2s ease-in-out infinite alternate pulse}@keyframes pulse{to{background:#ffffff1f}}#knot-list .dots{color:var(--muted);align-items:center;gap:8px;font-size:11px;display:flex}#knot-list .dots i{background:#ffffff2e;border-radius:50%;width:6px;height:6px;margin-right:2px;display:inline-block}#knot-list .dots i.f{background:var(--accent)}#knot-list .blurb{color:var(--muted);margin-top:4px;font-size:12px;line-height:1.4}#knot-list .start{letter-spacing:.1em;text-transform:uppercase;color:#1b1916;background:var(--accent);border-radius:99px;justify-self:start;margin-bottom:2px;padding:2px 7px;font-size:10px;font-weight:700}#settings{right:var(--edge);top:var(--edge);z-index:5;position:fixed}#settings>summary{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;width:42px;height:42px;margin-left:auto;list-style:none;transition:border-color .2s;display:grid}#settings>summary::-webkit-details-marker{display:none}#settings>summary:hover,#settings[open]>summary{border-color:#f2c14e99}#settings svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round}#settings-panel{border-radius:16px;width:300px;max-height:calc(100vh - 90px);margin-top:10px;padding:14px 16px;animation:.16s ease-out drop;overflow:auto}#view-switch{background:#ffffff0d;border-radius:999px;gap:2px;margin:0 0 12px;padding:4px;display:flex}.seg button{color:var(--muted);font:600 13px var(--sans);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;flex:1;padding:8px 6px}.seg button.on{background:var(--text);color:#1b1916}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;margin:9px 0;font-size:13px;display:flex}.toggle input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.toggle span{background:#ffffff29;border-radius:99px;flex:none;width:30px;height:18px;transition:background .2s;position:relative}.toggle span:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle input:checked+span{background:var(--accent)}.toggle input:checked+span:after{transform:translate(12px)}.slider{justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:13px;display:flex}.slider input{width:120px;accent-color:var(--accent)}#swatches{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}#swatches button{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:8px;padding:0;box-shadow:inset 0 0 0 1px #ffffff26}#swatches button.on{border-color:var(--accent)}#keys{color:var(--muted);grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:12px;display:grid}#keys dt{color:var(--text);font:600 11px ui-monospace,Menlo,monospace}#keys dd{margin:0}#cam-tools{left:var(--edge);bottom:var(--edge);border-radius:999px;gap:6px;padding:4px;display:flex;position:fixed}#cam-tools button{cursor:pointer;background:#ffffff0f;border:0;border-radius:50%;place-items:center;width:34px;height:34px;font-size:18px;line-height:1;display:grid}#cam-tools button:hover{background:#ffffff24}#hint{color:var(--muted);pointer-events:none;text-shadow:0 1px 4px #000;white-space:nowrap;font-size:12px;transition:opacity 1s;position:fixed;top:30px;left:50%;transform:translate(-50%)}#hint.gone{opacity:0}@media (width<=1160px){#cam-tools{display:none}}@media (width<=700px){:root{--edge:10px}aside#knots{right:var(--edge);width:auto;max-height:calc(100vh - 76px);top:58px}#settings-panel{width:min(300px,100vw - 20px)}#dock{gap:6px}#pip{border-width:4px;border-radius:13px;width:100px;min-height:0}#stepcard{border-radius:13px;min-height:0;padding:10px 12px 8px}#step-title{font-size:18px}#step-num{padding:2px 6px;font-size:11px}#step-text{margin-top:6px;font-size:14px}#step-tip{font-size:12px}.controls{gap:6px;padding-top:10px}.controls button{border-radius:10px;width:38px;height:38px}#timeline{margin-top:6px}#hint{text-align:center;white-space:normal;width:calc(100vw - 20px);top:58px}}@media (height<=560px) and (width>=700px){#dock{left:auto;right:var(--edge);top:62px;bottom:var(--edge);gap:6px;width:min(440px,50vw);transform:none}#hint{display:none}#pip{border-width:4px;width:34%;min-height:0}#stepcard{min-height:0;padding:10px 12px 8px;overflow:auto}#step-title{font-size:19px}#step-text{font-size:14px}#step-tip{font-size:12px}.controls button{width:38px;height:38px}}