:root{--bg:#f4f2ee;--surface:#fff;--surface-2:#ebe8e2;--ink:#1d1c1a;--ink-2:#5d5a54;--ink-3:#8f8b84;--line:#dcd8d0;--accent:#d2552a;--accent-ink:#fff;--shell:#2a2a2c;--shell-edge:#4a4a4e;--screen-bg:#000;--radius:14px;--font:ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;--mono:ui-monospace, "SF Mono", Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141413;--surface:#1d1d1b;--surface-2:#262623;--ink:#f1efe9;--ink-2:#b5b1a8;--ink-3:#7d7a73;--line:#34332f;--accent:#f07a4a;--shell:#3a3a3e;--shell-edge:#5c5c62;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#141413;--surface:#1d1d1b;--surface-2:#262623;--ink:#f1efe9;--ink-2:#b5b1a8;--ink-3:#7d7a73;--line:#34332f;--accent:#f07a4a;--shell:#3a3a3e;--shell-edge:#5c5c62;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;color:inherit}.app{grid-template:"top top top""nav stage panel"minmax(0,1fr)/250px minmax(0,1fr) 330px;height:100dvh;display:grid}.app-top{border-bottom:1px solid var(--line);grid-area:top;align-items:baseline;gap:14px;padding:14px 20px;display:flex}.app-wordmark{letter-spacing:-.02em;font-size:20px;font-weight:750}.app-wordmark b{color:var(--accent)}.app-tagline{color:var(--ink-2);font-size:14px}.app-top nav{gap:16px;margin-left:auto;font-size:14px;display:flex}.app-top nav a{color:var(--ink-2);text-decoration:none}.app-top nav a:hover{color:var(--ink)}.app-catalog{border-right:1px solid var(--line);grid-area:nav;padding:12px 12px 40px;overflow-y:auto}.app-catalog h2{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:18px 8px 4px;font-size:12px;font-weight:650}.app-catalog h2:first-child{margin-top:4px}.app-catalog p.app-blurb{color:var(--ink-3);margin:0 8px 6px;font-size:12.5px}.app-catalog button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:9px;width:100%;padding:7px 10px;display:block}.app-catalog button:hover{background:var(--surface-2)}.app-catalog button[aria-current=true]{background:var(--ink);color:var(--bg)}.app-catalog button small{color:var(--ink-3);font-size:12px;display:block}.app-catalog button[aria-current=true] small{color:inherit;opacity:.7}.app-stage{grid-area:stage;grid-template-rows:minmax(0,1fr) auto;min-width:0;display:grid}.app-device-host{min-height:420px;position:relative;overflow:hidden}.app-poses{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:12px 16px 18px;display:flex}.app-poses button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px 8px 4px;font-size:12px;display:flex}.app-poses button svg{stroke:currentColor;fill:none;stroke-width:1.6px;width:28px;height:20px}.app-poses button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.app-poses button .app-best{color:var(--accent);height:12px;font-size:10px}.app-hinge{width:100%;color:var(--ink-2);justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex}.app-hinge[hidden]{display:none}.app-hinge input{width:min(320px,60vw);accent-color:var(--accent)}.app-hinge output{font-family:var(--mono);min-width:4ch}.app-turn{border:1px solid var(--accent);color:var(--accent);background:var(--surface);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:13px}.app-turn[hidden]{display:none}.app-toggle{color:var(--ink-2);align-items:center;gap:6px;font-size:13px;display:flex}.app-panel{border-left:1px solid var(--line);grid-area:panel;padding:20px 20px 40px;overflow-y:auto}.app-panel .app-chip{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:650;display:inline-block}.app-panel h1{letter-spacing:-.02em;margin:2px 0 8px;font-size:24px;line-height:1.15}.app-panel .app-summary{color:var(--ink-2);margin:0 0 14px}.app-panel h3{color:var(--ink-3);margin:22px 0 8px;font-size:13px;font-weight:650}.app-panel ol{gap:6px;margin:0;padding:0;list-style:none;display:grid}.app-panel ol button{text-align:left;border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;grid-template-columns:110px 1fr;gap:8px;width:100%;padding:8px 10px;font-size:13.5px;display:grid}.app-panel ol button b{font-weight:650}.app-panel ol button span{color:var(--ink-2)}.app-panel ol button[aria-current=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.app-panel .app-principle{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13.5px}.app-panel .app-credits{margin:0;padding-left:18px;font-size:13.5px}.app-panel .app-facts{font-family:var(--mono);color:var(--ink-3);font-size:12px}@media (width<=1080px){.app{grid-template:"top top""nav stage"minmax(560px,1fr)"panel panel"/220px minmax(0,1fr);height:auto;min-height:100dvh}.app-panel{border-left:0;border-top:1px solid var(--line)}}@media (width<=720px){.app{flex-direction:column;display:flex}.app-top{flex-wrap:wrap;padding:12px 16px}.app-top nav{width:100%;margin-left:0}.app-catalog{border-right:0;border-bottom:1px solid var(--line);gap:6px;padding:10px 16px;display:flex;overflow-x:auto}.app-catalog h2,.app-catalog p.app-blurb{display:none}.app-catalog button{white-space:nowrap;flex:none;width:auto}.app-catalog button small{display:none}.app-device-host{height:62vh}.app-poses button{flex:30%;min-width:0}.app-panel{padding:16px}}.duo-stage{perspective:2000px;perspective-origin:50% 35%;place-items:center;display:grid;position:absolute;inset:0}.duo-scale{transform:scale(var(--scale,1));transform-style:preserve-3d;transition:transform .5s}.duo{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1);position:relative}.duo[data-frame=book]{width:600px;height:380px}.duo[data-frame=stacked]{width:380px;height:600px}.leaf{transform-style:flat;transition:transform .6s cubic-bezier(.3,.7,.2,1);position:absolute}.duo[data-frame=book] .leaf{width:300px;height:380px;top:0}.duo[data-frame=book] .leaf.start{transform-origin:100%;left:0}.duo[data-frame=book] .leaf.end{transform-origin:0;left:300px}.duo[data-frame=stacked] .leaf{width:380px;height:300px;left:0}.duo[data-frame=stacked] .leaf.start{transform-origin:bottom;top:0}.duo[data-frame=stacked] .leaf.end{transform-origin:top;top:300px}.face{background:var(--shell);box-shadow:0 0 0 1.5px var(--shell-edge) inset;padding:7px;transition:visibility 0s linear .3s;position:absolute;inset:0}.duo[data-frame=book] .face.back{transform:rotateY(180deg)translateZ(.5px)}.duo[data-frame=stacked] .face.back{transform:rotateX(180deg)translateZ(.5px)}.leaf[data-shows=front] .face.back,.leaf[data-shows=back] .face.front{visibility:hidden}.duo[data-frame=book] .start .front{border-radius:26px 0 0 26px;padding-right:0}.duo[data-frame=book] .end .front{border-radius:0 26px 26px 0;padding-left:0}.duo[data-frame=stacked] .start .front{border-radius:26px 26px 0 0;padding-bottom:0}.duo[data-frame=stacked] .end .front{border-radius:0 0 26px 26px;padding-top:0}.face.back{border-radius:26px}.face.back.shell{background:linear-gradient(135deg, var(--shell), #1c1c1e)}.screen{background:var(--screen-bg);color:#fff;width:100%;height:100%;font-family:var(--font);-webkit-user-select:none;user-select:none;touch-action:manipulation;position:relative;overflow:hidden;container-type:size}.duo[data-frame=book] [data-screen=start]{border-radius:20px 0 0 20px}.duo[data-frame=book] [data-screen=end]{border-radius:0 20px 20px 0}.duo[data-frame=stacked] [data-screen=start]{border-radius:20px 20px 0 0}.duo[data-frame=stacked] [data-screen=end]{border-radius:0 0 20px 20px}[data-screen=outer]{border-radius:20px}.screen[data-lit=false]{filter:brightness(.25)}.duo[data-facing=back][data-frame=stacked] [data-screen=outer]{transform:rotate(180deg)}.fold-mark,.camera{pointer-events:none;z-index:5;display:none;position:absolute}.show-regions .fold-mark:not([hidden]),.show-regions .camera{display:block}.duo[data-frame=book] .start .fold-mark{width:16px;top:0;bottom:0;right:0}.duo[data-frame=book] .end .fold-mark{width:16px;top:0;bottom:0;left:0}.duo[data-frame=stacked] .start .fold-mark{height:16px;bottom:0;left:0;right:0}.duo[data-frame=stacked] .end .fold-mark{height:16px;top:0;left:0;right:0}.fold-mark{background:repeating-linear-gradient(45deg,#f07a4a8c 0 4px,#0000 4px 8px)}.camera{background:#f07a4acc;border-radius:50%;width:22px;height:22px;top:16px;right:16px;box-shadow:0 0 0 4px #f07a4a4d}.duo:is([data-pose=book],[data-pose=table]) .leaf .front:after{content:"";pointer-events:none;z-index:4;position:absolute}.duo[data-pose=book] .start .front:after{background:linear-gradient(270deg,#00000073,#0000);width:10px;top:0;bottom:0;right:0}.duo[data-pose=book] .end .front:after{background:linear-gradient(90deg,#00000073,#0000);width:10px;top:0;bottom:0;left:0}.duo[data-pose=table] .start .front:after{background:linear-gradient(#0000,#00000073);height:10px;bottom:0;left:0;right:0}.duo[data-pose=table] .end .front:after{background:linear-gradient(#00000073,#0000);height:10px;top:0;left:0;right:0}.x-fill{position:absolute;inset:0}.x-center{text-align:center;place-items:center;display:grid}.x-hint{opacity:.6;letter-spacing:.02em;font-size:11px}@media (prefers-reduced-motion:reduce){.duo,.leaf,.duo-scale{transition:none}}