:root{color-scheme:dark;--paper: #0c0b0a;--ink: #f2ebe0;--mute: #a39a8c;--line: rgba(255, 255, 255, .14);--glass: linear-gradient( 165deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 42%, rgba(18, 16, 14, .28) 100% );--glass-fill: rgba(255, 255, 255, .08);--glass-fill-strong: rgba(255, 255, 255, .14);--glass-stroke: rgba(255, 255, 255, .26);--glass-stroke-soft: rgba(255, 255, 255, .14);--glass-shine: rgba(255, 255, 255, .36);--glass-shadow: 0 14px 36px rgba(0, 0, 0, .28);--glass-inset: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12);--glass-chroma: inset 1px 0 0 rgba(255, 78, 124, .34), inset -1px 0 0 rgba(64, 196, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .2);--glass-chroma-rim: inset 1px 0 0 rgba(255, 78, 124, .34), inset -1px 0 0 rgba(64, 196, 255, .3);--glass-chroma-hot: inset 1.5px 0 0 rgba(255, 90, 130, .45), inset -1.5px 0 0 rgba(70, 210, 255, .4);--glass-blur: blur(18px) saturate(1.25);--err: #f2b8b5;--err-bg: rgba(28, 10, 10, .72);--accent: rgba(226, 200, 150, .22);--accent-stroke: rgba(226, 200, 150, .48);--accent-ink: #f4e6c8;--sans: "Barlow", ui-sans-serif, system-ui, sans-serif;--display: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;background:var(--paper);overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--sans)}#gl{display:block;width:100%;height:100%;height:100dvh;cursor:crosshair;touch-action:none}body.exporting #gl{position:fixed;top:50%;left:50%;width:auto;height:auto;max-width:100vw;max-height:100dvh;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #060505db}#brand,#dock,#hud,#error{transition:opacity .18s ease}#brand{position:fixed;top:calc(34px + env(safe-area-inset-top,0px));left:calc(24px + env(safe-area-inset-left,0px));z-index:2;pointer-events:none}#brand .word{margin:0;display:flex;align-items:baseline;gap:.35em;color:#fffcf6eb;font-family:var(--display);font-size:15px;font-weight:600;font-style:normal;letter-spacing:.12em;line-height:1;text-transform:uppercase}#brand .sep{color:#fffcf666;letter-spacing:0;font-weight:500}#dock{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));z-index:3;display:flex;flex-direction:column;width:min(312px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:visible;padding:18px 14px 14px;border:1px solid var(--glass-stroke-soft);border-radius:22px;background:transparent;box-shadow:var(--glass-shadow)}#dock:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:0;background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 32%,transparent 55%),linear-gradient(165deg,#1e1a16d1,#0c0b0ae6);box-shadow:var(--glass-chroma);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);pointer-events:none}#dock:after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1.5px 0 #ff467838,inset -1.5px 0 #3cbeff33;opacity:.85}#dock>*{position:relative;z-index:1}.dock-head{display:block;flex:none;padding:4px 2px 8px;overflow:visible}.dock-title{min-width:0;overflow:visible}.dock-tools{display:flex;flex:none;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;width:100%;padding:2px 0 10px;overflow:visible}#dock-sound,#dock-hands,#dock-tilt,#dock-show,#dock-variations,#dock-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin:0;border:1.5px solid var(--glass-stroke-soft);border-radius:50%;background:radial-gradient(120% 100% at 50% 0%,#ffffff47,#ffffff1a 42%,#ffffff0a);box-shadow:var(--glass-chroma-rim),0 4px 12px #00000029;-webkit-mask-image:radial-gradient(closest-side,#000 99.5%,transparent 100%);mask-image:radial-gradient(closest-side,#000 99.5%,transparent 100%);color:#f4eee4;cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .16s ease}#dock-sound svg,#dock-hands svg,#dock-tilt svg,#dock-show svg,#dock-variations svg,#dock-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}#dock-variations svg{width:13px;height:13px;stroke-width:1.7}#dock-hands svg{width:17px;height:17px}#dock-sound:hover,#dock-hands:hover,#dock-tilt:hover,#dock-show:hover,#dock-variations:hover,#dock-toggle:hover{background:radial-gradient(120% 100% at 50% 0%,#fff6,#ffffff24 48%,#ffffff0f);border-color:var(--glass-stroke);box-shadow:var(--glass-chroma-hot),0 8px 20px #00000038}#dock-variations:hover svg{transform:scale(1.1)}#dock-hands:hover svg{transform:scale(1.1)}#dock-show:hover svg{transform:scale(1.15)}body.hands-on #dock-hands,body.tilt-on #dock-tilt,body.sounding #dock-sound{border-color:#ecd2a0eb;background:radial-gradient(120% 100% at 50% 0%,#ffe6b46b,#785a2866 55%,#503c1e80);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px #e2c89680,inset 1px 0 #ff5a8247,inset -1px 0 #46c8ff3d,0 4px 14px #00000038}#dock.min #dock-toggle svg{transform:rotate(180deg)}#dock.min{max-height:none;overflow:visible}#dock.min .dock-head{padding-bottom:8px}#dock.min .dock-note,#dock.min #dock-body{display:none}#dock-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}#dock.min .dock-actions{margin-bottom:2px}#recipe-name{margin:0;padding:.1em 0 .28em;color:#fffcf6;font-family:var(--sans);font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.4;text-wrap:balance;text-shadow:none;filter:none;overflow:visible;overflow-wrap:anywhere}.dock-head .kicker{margin:0 0 6px;color:#fff8ecb8;font-size:10px;letter-spacing:.18em;text-transform:uppercase}#shader-file{display:none}.dock-actions{display:grid;flex:none;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:12px 0 10px}.dock-actions button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0;overflow:hidden;border:1px solid var(--glass-stroke-soft);border-radius:999px;background:linear-gradient(180deg,#ffffff38,#ffffff14 55%,#ffffff0a);box-shadow:var(--glass-inset),var(--glass-chroma),0 8px 18px #0003;color:#fffcf6;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s ease}.dock-actions button:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 0 #ff4e7c66,inset -1px 0 #40c4ff5c;opacity:.7}.dock-actions button:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translate(-120%);transition:transform .48s ease;pointer-events:none}.dock-actions button:hover{border-color:var(--glass-stroke);background:linear-gradient(180deg,#ffffff52,#ffffff1a);box-shadow:var(--glass-chroma-hot),inset 0 1px #ffffff8c,0 10px 24px #0000003d}.dock-actions button:hover:before{opacity:1}.dock-actions button:hover:after{transform:translate(120%)}.dock-actions button svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s cubic-bezier(.3,.8,.3,1)}.dock-actions button[data-act=colors]:hover svg,.dock-actions button[data-act=look]:hover svg{transform:rotate(180deg)}.dock-actions button[data-act=undo]:hover svg{transform:translate(-2px)}.dock-actions button:active{transform:translateY(1px) scale(.98)}.dock-note{margin:0 0 10px;padding:0 4px;color:var(--mute);font-size:10.5px;line-height:1.4}.dock-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 0 10px;padding:4px;border:1px solid var(--glass-stroke-soft);border-radius:999px;background:#ffffff0d;box-shadow:inset 0 1px #ffffff1f,inset 1px 0 #ff4e7c33,inset -1px 0 #40c4ff2e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dock-tabs button{height:28px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--mute);font:500 11px/1 var(--sans);letter-spacing:.06em;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.dock-tabs button.on{border-color:var(--glass-stroke-soft);background:linear-gradient(180deg,#ffffff3d,#ffffff14);box-shadow:var(--glass-inset),var(--glass-chroma),0 4px 12px #00000029;color:#fffcf6}.dock-page{display:none;width:100%}.dock-page.on{display:block}.dock-page .tp-dfwv{--tp-base-background-color: transparent;--tp-base-shadow-color: transparent;--tp-button-background-color: rgba(255, 255, 255, .1);--tp-button-background-color-hover: rgba(255, 255, 255, .18);--tp-button-background-color-focus: rgba(255, 255, 255, .18);--tp-button-background-color-active: rgba(255, 255, 255, .22);--tp-button-foreground-color: #f4eee4;--tp-container-background-color: rgba(255, 255, 255, .06);--tp-container-background-color-hover: rgba(255, 255, 255, .1);--tp-container-background-color-focus: rgba(255, 255, 255, .1);--tp-container-background-color-active: rgba(255, 255, 255, .12);--tp-container-foreground-color: #f0e8dc;--tp-groove-foreground-color: rgba(255, 255, 255, .1);--tp-input-background-color: rgba(255, 255, 255, .08);--tp-input-background-color-hover: rgba(255, 255, 255, .12);--tp-input-background-color-focus: rgba(255, 255, 255, .14);--tp-input-background-color-active: rgba(255, 255, 255, .16);--tp-input-foreground-color: #fffcf6;--tp-label-foreground-color: rgba(255, 248, 236, .55);--tp-monitor-background-color: rgba(0, 0, 0, .22);--tp-monitor-foreground-color: #cfc6b8;font-family:var(--sans);width:100%}.dock-page .tp-rotv{background:transparent!important;border-radius:0;box-shadow:none!important}.dock-page .tp-rotv>.tp-rotv_b{display:none}#hud{position:fixed;left:20px;bottom:18px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:min(640px,calc(100vw - 360px))}#hud .hint{color:var(--mute);font-size:12px}#hud .keys{display:none;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}#hud .keys li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border:1px solid var(--glass-stroke-soft);border-radius:999px;background:linear-gradient(180deg,#ffffff24,#ffffff0d);box-shadow:var(--glass-inset),0 6px 16px #0000002e;backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);color:#d8d0c4;font-size:11px}body.sounding #hud .keys li:has(kbd.sound){border-color:var(--accent-stroke);background:linear-gradient(180deg,#ffe6b442,#503c1e66);color:var(--accent-ink)}#hud kbd{display:inline-flex;min-width:18px;justify-content:center;color:#efe6d8;font:500 10px/1.4 var(--sans)}@media(min-width:900px){#hud .keys{display:flex}}body.present #brand,body.present #dock,body.present #hud,body.present #error{opacity:0;pointer-events:none}body.present #rec{opacity:0}body.showing{background:#000}body.showing.cursor-away,body.showing.cursor-away #gl{cursor:none}#grid{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;gap:14px;padding:calc(18px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));background:#0a0908b8;backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);overflow:auto}#grid[hidden]{display:none}.grid-bar{display:flex;align-items:center;gap:12px;flex:none;padding:14px 14px 14px 16px;border:1px solid var(--glass-stroke-soft);border-radius:22px;background:transparent;box-shadow:var(--glass-shadow);position:relative;overflow:visible}.grid-bar:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 32%,transparent 55%),linear-gradient(165deg,#1c1814d1,#0e0c0ae0);box-shadow:var(--glass-inset),var(--glass-chroma);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);pointer-events:none}.grid-bar>*{position:relative;z-index:1}.grid-bar-title{flex:1;min-width:0}.grid-bar-title .kicker{margin:0 0 4px;color:#fff8ec8c;font-size:10px;letter-spacing:.18em;text-transform:uppercase}.grid-bar-heading{margin:0;padding:.05em 0 .08em;color:#fffcf6;font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.25;text-shadow:none}.grid-bar-actions{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:7px}.grid-bar button{height:36px;padding:0 14px;border:1.5px solid var(--glass-stroke-soft);border-radius:999px;background:radial-gradient(120% 100% at 50% 0%,#ffffff47,#ffffff1a 42%,#ffffff0a);box-shadow:var(--glass-chroma-rim),0 4px 12px #00000029;color:#fffcf6;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}.grid-bar button:hover{border-color:var(--glass-stroke);background:radial-gradient(120% 100% at 50% 0%,#fff6,#ffffff24 48%,#ffffff0f);box-shadow:var(--glass-chroma-hot),0 8px 20px #00000038}.grid-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none}.grid-cell{position:relative;display:block;padding:0;aspect-ratio:3 / 2;overflow:hidden;border:1px solid var(--glass-stroke-soft);border-radius:18px;background:#0c0b0a59;box-shadow:var(--glass-chroma-rim),0 10px 28px #00000038;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.grid-pick{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}.grid-cell img{display:block;width:100%;height:100%;object-fit:cover}.grid-cell:after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:52%;background:linear-gradient(to top,rgba(8,7,6,.78) 0%,rgba(8,7,6,.35) 45%,transparent 100%);pointer-events:none}.grid-chrome{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;align-items:center;gap:6px;pointer-events:none}.grid-label,.grid-more{pointer-events:auto;height:32px;padding:0 12px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;background:#0e0c0ae0;box-shadow:inset 1px 0 #ff4e7c47,inset -1px 0 #40c4ff3d,0 4px 12px #00000047;color:#fffcf6;font:500 10.5px/1 var(--sans);letter-spacing:.04em;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.grid-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.grid-more{flex:none;letter-spacing:.06em;text-transform:uppercase;font-size:10px}.grid-label:hover,.grid-more:hover{border-color:#fff6;background:#16120ef0;box-shadow:inset 1.5px 0 #ff5a825c,inset -1.5px 0 #46d2ff4d,0 6px 16px #00000052}.grid-cell--bright:after{background:linear-gradient(to top,rgba(250,246,238,.86) 0%,rgba(250,246,238,.4) 48%,transparent 100%)}.grid-cell--bright .grid-label,.grid-cell--bright .grid-more{border-color:#14100c24;background:#faf6eeeb;color:#1a1612;box-shadow:inset 1px 0 #ff4e7c38,inset -1px 0 #288cc833,0 4px 12px #0000001f}.grid-cell--bright .grid-label:hover,.grid-cell--bright .grid-more:hover{border-color:#14100c38;background:#fffaf2}.grid-cell:hover{transform:translateY(-2px);border-color:var(--glass-stroke);box-shadow:var(--glass-chroma-hot),0 14px 32px #00000047}.grid-cell.loading{background:linear-gradient(100deg,#fff8ec08 30%,#fff8ec17,#fff8ec08 70%);background-size:220% 100%;animation:grid-shimmer 1.1s linear infinite}@keyframes grid-shimmer{to{background-position:-120% 0}}@media(prefers-reduced-motion:reduce){.grid-cell.loading{animation:none}}@media(max-width:900px){.grid-cells{grid-template-columns:repeat(2,1fr)}.grid-bar{flex-wrap:wrap;row-gap:10px;padding:12px}.grid-bar-title{flex:1 1 auto;min-width:min(100%,10rem)}.grid-bar-heading{font-size:20px}.grid-bar-actions{flex:1 1 auto}.grid-bar button{height:34px}}#rec{position:fixed;top:calc(22px + env(safe-area-inset-top,0px));left:50%;z-index:5;display:flex;align-items:center;gap:8px;transform:translate(-50%);padding:8px 15px 8px 12px;border:1px solid rgba(242,120,120,.4);border-radius:999px;background:linear-gradient(180deg,#ffb4b429,#280c0c8c);box-shadow:var(--glass-inset),0 10px 28px #00000047;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);color:#f8dedc;font:500 11px/1 var(--sans);letter-spacing:.08em;font-variant-numeric:tabular-nums}#rec[hidden]{display:none}#rec .dot{width:8px;height:8px;border-radius:50%;background:#f2564f;animation:rec-pulse 1.1s ease-in-out infinite}@keyframes rec-pulse{50%{opacity:.25}}#toast{position:fixed;top:50%;left:50%;bottom:auto;z-index:5;transform:translate(-50%,calc(-50% + 10px));padding:10px 18px;border:1px solid var(--glass-stroke-soft);border-radius:999px;background:linear-gradient(180deg,#ffffff1f,#14121052);box-shadow:var(--glass-inset),var(--glass-chroma),0 12px 32px #0000004d;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:#fffcf6;font:500 11.5px/1 var(--sans);letter-spacing:.04em;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;max-width:min(280px,calc(100vw - 48px));text-align:center}#toast.on{opacity:1;transform:translate(-50%,-50%)}#toast[hidden]{display:none}#tilt-gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));background:#08070647;backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}#tilt-gate[hidden]{display:none}#tilt-gate .tilt-card{position:relative;width:min(100%,340px);padding:24px 22px 18px;overflow:hidden;border:1px solid var(--glass-stroke-soft);border-radius:24px;background:var(--glass);box-shadow:var(--glass-inset),var(--glass-chroma),0 24px 60px #0006;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:#fffcf6;text-align:center}#tilt-gate .tilt-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.05) 34%,transparent 55%);box-shadow:inset 1.5px 0 #ff4e7c47,inset -1.5px 0 #40c4ff3d;mix-blend-mode:soft-light}#tilt-gate .tilt-title{position:relative;margin:0 0 8px;font-family:var(--display);font-size:1.35rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}#tilt-gate .tilt-copy{position:relative;margin:0 0 18px;font-size:.95rem;line-height:1.45;color:#fffcf6b8}#tilt-gate #tilt-enable,#tilt-gate #tilt-cancel{position:relative;display:block;width:100%;min-height:48px;margin:0;border-radius:14px;font:inherit;font-weight:600;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .14s ease}#tilt-gate #tilt-enable{border:1px solid var(--accent-stroke);background:linear-gradient(180deg,#ffe6b452,#e2c8961f);box-shadow:inset 0 1px #fff0c873,0 10px 24px #00000038;color:var(--accent-ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#tilt-gate #tilt-enable:active{transform:scale(.98)}#tilt-gate #tilt-cancel{margin-top:8px;border:1px solid transparent;background:transparent;color:#fffcf68c}#tilt-gate #tilt-cancel.quiet:hover{color:#fffcf6;border-color:var(--glass-stroke-soft);background:#ffffff0f}@media(prefers-reduced-motion:reduce){#rec .dot{animation:none}#toast{transition:none}}#error{position:fixed;left:20px;right:340px;bottom:88px;z-index:4;margin:0;max-height:32vh;overflow:auto;padding:10px 12px;background:linear-gradient(180deg,#ffb4b424,#1c0a0a9e);box-shadow:var(--glass-inset),0 12px 32px #00000047;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);color:var(--err);font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;border:1px solid rgba(242,184,181,.28);border-radius:14px}#error[hidden]{display:none}@media(max-width:720px){#brand{top:calc(24px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px))}#brand .word{font-size:12px;letter-spacing:.1em}#dock{top:auto;right:calc(10px + env(safe-area-inset-right,0px));left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-height:min(52dvh,calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));padding:14px 10px 8px}.dock-head{padding-bottom:6px}.dock-tools{justify-content:center;gap:7px;padding:2px 0 8px}.dock-actions button{height:40px;font-size:10.5px;letter-spacing:.06em}#recipe-name{font-size:clamp(18px,5.6vw,24px)}#hud{display:none}#rec{top:calc(12px + env(safe-area-inset-top,0px))}#toast{max-width:calc(100vw - 48px)}#grid{padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));gap:10px}.grid-bar-heading{font-size:clamp(18px,5vw,20px)}.grid-cells{gap:8px}.grid-chrome{left:6px;right:6px;bottom:6px;gap:5px}.grid-label,.grid-more{height:30px;padding:0 10px}#error{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));bottom:auto;top:calc(8px + env(safe-area-inset-top,0px));max-height:22dvh}}@media(orientation:landscape)and (max-height:520px){#brand{top:calc(18px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px))}#brand .word{font-size:11px;letter-spacing:.08em}#dock{top:auto;right:calc(8px + env(safe-area-inset-right,0px));left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:10px 8px 6px}.dock-head{padding-bottom:4px}#recipe-name{font-size:18px}.dock-tools{gap:6px;padding-bottom:6px}.dock-actions{margin:8px 0 6px}.dock-actions button{height:36px}#hud{display:none}#grid{padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}}@media(max-width:420px){.grid-cells{grid-template-columns:1fr 1fr}.grid-more{padding:0 9px;font-size:9.5px;letter-spacing:.04em}}@media(max-width:360px){.dock-tools{gap:5px}.dock-actions{grid-template-columns:1fr 1fr 1fr}.dock-actions button{font-size:10px;letter-spacing:.04em;gap:3px}}#dock-sound svg{opacity:.55}#dock-sound .wave-near,#dock-sound .wave-far{opacity:0}body.sounding #dock-sound svg{opacity:1}body.sounding #dock-sound .wave-near{opacity:1}body.sounding #dock-sound .wave-far{opacity:.65}@media(pointer:coarse),(max-width:720px){#dock-sound,#dock-hands,#dock-tilt,#dock-show,#dock-variations,#dock-toggle{width:44px;height:44px}#dock-sound svg,#dock-hands svg,#dock-tilt svg,#dock-show svg,#dock-variations svg,#dock-toggle svg{width:19px;height:19px}#dock-hands svg{width:21px;height:21px}}@media(prefers-reduced-transparency:reduce){#dock:before,.grid-bar:before,#toast,#tilt-gate .tilt-card,#rec,#error{backdrop-filter:none;-webkit-backdrop-filter:none}#dock:before,.grid-bar:before,#tilt-gate .tilt-card{background:#1c1814f0}.dock-actions button,#dock-sound,#dock-hands,#dock-tilt,#dock-show,#dock-variations,#dock-toggle,.grid-bar button,.grid-label,.grid-more,#toast{background:#2a241eeb}}@media(prefers-reduced-motion:reduce){.dock-actions button:after{display:none}.dock-actions button,#dock-sound,#dock-hands,#dock-tilt,#dock-show,#dock-variations,#dock-toggle{transition:none}}