/* The beta invitation keeps the same matte shell and Klein-blue controls. */
#beta-waitlist{width:min(460px,calc(100vw - 2rem));height:auto;max-height:calc(var(--viewport-height,100dvh) - 2rem);top:var(--viewport-top,0px);margin:clamp(1rem,12vh,7rem) auto 0;padding:1.5rem;border:1px solid var(--metal-rim);border-radius:1rem;overflow:auto;overscroll-behavior:contain;box-shadow:inset 0 1px var(--highlight),0 3px 0 var(--button-base),0 18px 60px #0005}
#beta-waitlist[open]{display:flex;flex-direction:column;gap:1.25rem}
.beta-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}.beta-label{font:12px/1.4 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted)}
.beta-copy h2{margin:0 0 .75rem;font-size:clamp(1.45rem,4vw,1.8rem);line-height:1.15;letter-spacing:-.035em;font-weight:600;outline:none}.beta-copy p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
#beta-form{display:grid;gap:.65rem;min-width:0}#beta-form[hidden],#beta-done[hidden]{display:none}#beta-form label{font-size:.875rem;line-height:1.4}#beta-email{width:100%;min-width:0;min-height:3rem;padding:.7rem .85rem;font-size:1rem;line-height:1.4;border:1px solid var(--metal-rim);border-radius:.4rem;background:var(--field);color:var(--ink);box-shadow:inset 0 1px 2px var(--metal-dent)}#beta-submit,#beta-done{min-height:3rem;justify-content:center;font-size:.9375rem;padding:.75rem 1rem}#beta-note{margin:.2rem 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}#beta-status{margin:0;font-size:.875rem;line-height:1.4;color:var(--ink)}#beta-status:empty{display:none}
@media(max-height:480px){#beta-waitlist{margin:.75rem auto 0;max-height:calc(var(--viewport-height,100dvh) - 1.5rem);padding:1rem 1.25rem}#beta-waitlist[open]{gap:.65rem}.beta-copy h2{font-size:1.3rem;margin-bottom:.35rem}.beta-copy p{font-size:.875rem;line-height:1.35}#beta-form{gap:.35rem}#beta-email,#beta-submit,#beta-done{min-height:2.75rem;padding:.5rem .75rem}.beta-top .round-key{width:2.75rem;height:2.75rem;min-width:2.75rem;min-height:2.75rem}}
:root{
  font-family:Arial,Helvetica,sans-serif;font-size:100%;font-synthesis:none;color-scheme:light;
  --blue:#163cff;--blue-deep:#002fa7;--blue-bright:#5974ff;--room:#0735ef;--room-shade:.18;--ink:#26282a;--muted:#55595c;--shell:#d2d6d5;--paper:#e1e4e2;--well:#aeb6bb;--scene:#bfc5c4;--screen-ink:#36434b;--hint-surface:rgba(242,240,233,.62);
  --line:#202326;--edge:#949b9e;--highlight:#ffffffe0;--shadow:#0b102536;--key:#e2e5e4;--key-low:#bcc2c4;--field:#eceeec;--focus:#163cff;--warm-edge:#ffe7c4;--warm-spill:#ffbb744d;
  --grain:url('/assets/matte-grain.svg');--finish:var(--grain),linear-gradient(115deg,#ffffff35,transparent 55%,#00000008);
  --button-side:#27313d;--button-base:#101923;--crt-noise:url('/assets/crt-grain.svg');--metal:#d4d8d9;--metal-low:#bac0c3;--metal-edge:#929a9e;--metal-rim:#a4adb1;--metal-hi:#ffffff7a;--metal-dent:#24303926;--metal-text:#30383e;--metal-accent:#244ddb;--metal-shadow:#17243338;
  --panel-skin:#e4ecf3a8;--panel-rim:#f0f7ffb3;--panel-side:#b1bdc8;--panel-edge:#798895;--panel-wash:#edf3fa55;--panel-warm:#ffe6bda8;--panel-cool:#7b9cfa66;--panel-glow:.65;
  --safe-top:max(var(--outer),env(safe-area-inset-top));--safe-right:max(var(--outer),env(safe-area-inset-right));--safe-bottom:max(var(--outer),env(safe-area-inset-bottom),.625rem);--safe-left:max(var(--outer),env(safe-area-inset-left));
  --lights-time:.72s;--outer:clamp(.65rem,1.6vw,1.4rem);--dial-size:4.2rem;--screen-radius:4px;--screen-edge:#33414938;--screen-socket-shadow:inset 0 2px 4px #070e1659,inset 0 -1px .75px #ffffff2b,0 2px 3px #13212e33,0 7px 12px -5px #13212e59;color:var(--ink);background:var(--room);
}
:root[data-theme=dark]{color-scheme:dark;--room-shade:.4;--ink:#e1e5e6;--muted:#b2b7bb;--shell:#36393a;--paper:#3b3f42;--well:#202429;--scene:#373a3b;--screen-ink:#bac9d8;--hint-surface:rgba(35,39,41,.72);--line:#090c10;--edge:#10161d;--highlight:#ffffff24;--shadow:#0009;--key:#454c51;--key-low:#252b31;--field:#20262c;--focus:#a9c2ff;--warm-edge:#ffebcf;--warm-spill:#ffc08070;--metal:#363c40;--metal-low:#292f33;--metal-edge:#171d21;--metal-rim:#4b5359;--metal-hi:#a8bac52e;--metal-dent:#00000066;--metal-text:#d6dde2;--metal-accent:#bac9ff;--metal-shadow:#0008;--panel-skin:#34404f82;--panel-rim:#aabbd548;--panel-side:#303b49;--panel-edge:#171e27;--panel-wash:#61789518;--panel-warm:#ffdaa875;--panel-cool:#537eff4d;--panel-glow:.65;--finish:var(--grain),linear-gradient(115deg,#ffffff0d,transparent 55%,#00000018)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background-color:var(--room)}html{min-height:100%;background:var(--room);transition:none}body{position:fixed;inset:0;isolation:isolate;height:100%;padding:0;background:var(--room);-webkit-text-size-adjust:100%;transition:none}
/* Persistent Klein-blue backing also covers space exposed by mobile browser chrome.
   The lighting veil fades to zero on every visual-viewport edge, matching theme-color. */
body::before{content:'';position:fixed;inset:0;min-height:100vh;min-height:100lvh;z-index:-2;pointer-events:none;background:var(--room);transition:none}
body::after{content:'';position:fixed;top:var(--viewport-top,0px);left:var(--viewport-left,0px);width:var(--viewport-width,100vw);height:var(--viewport-height,100dvh);z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at 50% 50%,#00125880 55%,#00125838 80%,#00125800 100%);opacity:var(--room-shade);transition:opacity var(--lights-time)}
button,input,select,textarea{font:inherit}button,summary{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:disabled{opacity:.38;cursor:default}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}svg{width:100%;height:100%;fill:currentColor;pointer-events:none}.icon,[data-icon]{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex:none}::selection{background:var(--blue);color:#fff}
/* A single cast housing, with a dark lower edge and a fine blasted finish. */
.app{--frame-width:min(1520px,calc(var(--viewport-width,100vw) - var(--safe-left) - var(--safe-right)));position:fixed;top:calc(var(--viewport-top,0px) + var(--safe-top));left:calc(var(--viewport-left,0px) + var(--safe-left) + (var(--viewport-width,100vw) - var(--safe-left) - var(--safe-right) - var(--frame-width))/2);display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom));width:var(--frame-width);max-width:1520px;margin:0;container:console / size;min-height:0;min-width:0;background-color:var(--shell);background-image:var(--finish);background-size:120px 120px,cover;background-blend-mode:soft-light,normal;border:1px solid var(--edge);border-radius:1.1rem;box-shadow:inset 0 2px 1px var(--highlight),inset 0 -2px 1px #0002,0 6px 0 #69737c,0 8px 0 #172129,0 calc(var(--safe-bottom)*.25) calc(var(--safe-bottom)*.45) calc(var(--safe-bottom)*-.2) #0004;overflow:hidden;transition:background-color var(--lights-time)}
.machine-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-width:0;padding:1rem 1.6rem .9rem}.brand{justify-self:start;font-size:1.65rem;font-weight:700;letter-spacing:-.08rem;white-space:nowrap;text-shadow:0 1px var(--highlight)}.brand>span{color:var(--blue)}:root[data-theme=dark] .brand>span{color:inherit}.header-actions{display:flex;align-items:center;justify-self:end;gap:1.6rem}
.view-switch{display:flex;gap:3px;padding:4px;border-radius:.45rem;background:var(--button-base);box-shadow:inset 0 2px 4px #0005,0 1px var(--highlight)}
.view-switch button{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.6rem;min-width:2.6rem;padding:.55rem 1rem;border-radius:.25rem;font-size:.8rem;font-weight:600}
.view-switch .icon{width:1rem;height:1rem}
/* One recessed switch bed: only the current choice has a raised matte cap. */
.view-switch button,.segmented button{border:1px solid transparent;color:#a8b4c0;background:transparent;box-shadow:none;transform:none;transition:transform .14s,background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.view-switch button.active,.segmented button.active{color:var(--metal-accent);border-color:var(--metal-rim);background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 1px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 4px 5px var(--metal-shadow);transform:translateY(-1px)}
.view-switch button.active:active,.segmented button.active:active{transform:translateY(1px);box-shadow:inset 0 1px var(--metal-hi),0 1px 0 var(--button-base)}
/* Disc keys are functional controls, not decoration. */
.round-key{display:inline-flex;align-items:center;justify-content:center;flex:none;position:relative;width:3.25rem;height:3.25rem;min-width:3.25rem;min-height:3.25rem;padding:.8rem;border:1px solid var(--metal-rim);border-radius:50%;color:var(--metal-text);background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 6px 8px var(--metal-shadow);transition:transform .14s,background-color var(--lights-time),color var(--lights-time),border-color var(--lights-time),box-shadow .22s;}
.round-key.small{width:2.6rem;height:2.6rem;min-width:2.6rem;min-height:2.6rem;padding:.7rem}.round-key.small .icon,.round-key.small [data-icon]{width:1.1rem;height:1.1rem}.round-key:hover{filter:none;border-color:var(--metal-accent)}.round-key:active{transform:translateY(2px);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 1px 0 var(--button-base),0 3px 4px var(--metal-shadow)}
.round-key.blue,.button.blue{--metal:var(--blue);--metal-rim:#102cae;--metal-hi:#adc4ff6b;--metal-dent:#00126a70;--metal-text:#f0f4ff;--metal-accent:#e1eaff;background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;color:var(--metal-accent);border-color:var(--metal-rim);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 6px 8px var(--metal-shadow);}.round-key.blue:active,.button.blue:active{transform:translateY(2px);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 1px 0 var(--button-base),0 3px 4px var(--metal-shadow)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.65rem 1rem;border-radius:.35rem;border:1px solid var(--metal-rim);color:var(--metal-text);background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 6px 8px var(--metal-shadow);transition:transform .14s,background-color var(--lights-time),color var(--lights-time),border-color var(--lights-time),box-shadow .22s;font-size:.8125rem;font-weight:600;line-height:1.2}.text-key{font-size:.8125rem;min-height:2.75rem;padding:.5rem .75rem}.button:active{transform:translateY(2px)}
.light-switch{display:flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:0}.rocker-socket{display:block;width:1.65rem;height:2.6rem;padding:3px;border-radius:.35rem;background:var(--button-base);box-shadow:0 1px var(--highlight),inset 0 2px 3px #0009;perspective:100px}.rocker{display:grid;grid-template-rows:1fr 1fr;width:100%;height:100%;border-radius:.18rem;background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px var(--metal-hi),0 2px 3px var(--metal-shadow);transform:rotateX(-15deg);color:var(--metal-text);transition:transform .14s,background-color var(--lights-time),color var(--lights-time),border-color var(--lights-time),box-shadow .22s;}.rocker span{display:flex;align-items:center;justify-content:center;font:10px/1 Arial}.rocker-on{text-shadow:0 0 4px #002fa777}.light-state{font:10px/1 ui-monospace,monospace;letter-spacing:.06em;min-width:1.3rem;color:var(--muted)}[aria-checked=false] .rocker{transform:rotateX(15deg)}[aria-checked=false] .rocker-off{color:var(--metal-accent);text-shadow:none}
/* A fine warm seam marks active keys; the translucent material belongs to the deck. */
:is(.round-key,.transport-key,.button,.view-switch button,.segmented button,.dialog-switch button){position:relative;isolation:isolate;overflow:visible}
:is(.round-key,.transport-key,.button,.view-switch button,.segmented button,.dialog-switch button)::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid var(--warm-edge);pointer-events:none;opacity:0;z-index:3;box-shadow:0 0 3px #ffe6c780,0 2px 7px var(--warm-spill);transition:opacity .2s ease-out}
:is(.round-key,.transport-key,.button,.dialog-switch button):not(:disabled):is(:active,[data-lit],.active,[aria-pressed=true],[aria-current=page])::after,.player-options[open]>summary::after{opacity:1}
:is(.round-key,.transport-key,.button):disabled::after{opacity:0}
.view-switch button.active::after,.segmented button.active::after{opacity:1}
.view-switch button:not(.active)::after,.segmented button:not(.active)::after{opacity:0;box-shadow:none}
#player-flip::before{content:'';position:absolute;inset:3px;border-radius:inherit;border:1px solid var(--metal-hi);opacity:.4;pointer-events:none}
#player-flip[aria-pressed=true] .dial-marker::after{background:var(--metal-accent);box-shadow:0 0 3px var(--warm-spill)}
.rocker-socket{position:relative}
.rocker-socket::after{content:'';position:absolute;inset:2px;border-radius:.23rem;border:1px solid var(--warm-edge);pointer-events:none;opacity:0;box-shadow:0 0 5px #ffd4a5b3,0 3px 12px var(--warm-spill);transition:opacity .2s}
.light-switch:is(:active,[data-lit],[aria-checked=true]) .rocker-socket::after{opacity:1}
/* The photograph and the playable world occupy this same flat screen. */
.player-view{min-height:0;min-width:0;padding:0 1.6rem 1.25rem}.player-card{display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-height:0;height:100%;min-width:0}.display-surround{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0;padding:.25rem .4rem .4rem;border-radius:.5rem;background:#24292d var(--grain);background-size:180px;background-blend-mode:soft-light;border:1px solid #0c1015;box-shadow:0 2px 1px var(--highlight),inset 0 2px 2px #0009}
.display-label{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:1.7rem;padding:0 .2rem .25rem;color:#b7c0c8;font:10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.09em}.source-readout{display:flex;gap:1.4rem}.source-readout>span{opacity:.5}.source-readout>span.active{opacity:1;color:#b0c7ff}.source-readout>span::before{content:'';display:inline-block;vertical-align:middle;width:4px;height:4px;margin-right:.5rem;background:currentColor;border-radius:50%}.source-readout>span.active::before{box-shadow:0 0 6px #779bff}
.mini-slot{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--scene);border-radius:.2rem;transition:background-color var(--lights-time)}
/* A shared glass layer sits above both the WebGL world and the original photo. */
/* Fine phosphor, not a wire mesh: half the old pitch, lower contrast, no vertical grating. */
.mini-slot::before{position:absolute;content:'';inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:var(--crt-noise);background-size:80px 80px;opacity:.12}
.mini-slot::after{position:absolute;content:'';inset:0;z-index:6;pointer-events:none;border-radius:inherit;background-image:repeating-linear-gradient(0deg,#09121d06 0 .35px,transparent .35px 2px)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.mini-back{position:absolute;inset:0;z-index:3;background:#101417;opacity:0;visibility:hidden;pointer-events:none}.mini-back img{width:100%;height:100%;object-fit:cover;object-position:left 70%;background:#101417}.mini-back>button{display:block;width:100%;height:100%;padding:0}.flipped .mini-back{opacity:1;visibility:visible;pointer-events:auto}.flipped .mini-open{pointer-events:none}.screen-hint{position:absolute;bottom:.75rem;left:.75rem;z-index:8;width:max-content;max-width:calc(100% - 1.5rem);padding:6px 10px;border-radius:5px;background:var(--hint-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);font-size:.75rem;line-height:1.4;pointer-events:none;transition:background-color var(--lights-time),color var(--lights-time)}.playing .screen-hint{opacity:0}
/* Head switch / 04: one clipped tracking canvas below the glass finish. */
.screen-shutter{position:absolute;z-index:5;inset:0;overflow:hidden;transform:translateY(-106%);pointer-events:none;border-radius:inherit;background:transparent}
.screen-shutter canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.shutter-rail{display:none}
[data-shutter-state=preparing] .screen-hint,[data-shutter-state=tracking] .screen-hint{visibility:hidden}

/* The inscription is etched into the housing; it never changes sides with the screen. */
.engraving{position:relative;min-width:0;margin:1.05rem .25rem .8rem;padding:.1rem 0;color:var(--ink);text-shadow:0 1px var(--highlight)}.inscription{position:relative;padding-right:3rem;min-width:0}.inscription-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-width:0}.inscription h1{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600;line-height:1.2;letter-spacing:-.03em;min-width:0;overflow-wrap:anywhere}.inscription-place{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.2rem;margin-top:.4rem;font-family:inherit;font-size:.8125rem;font-weight:400;line-height:1.4;letter-spacing:normal;color:var(--muted);overflow-wrap:anywhere}.inscription-place>span{min-width:0;font:inherit;color:inherit}#inscription-date{white-space:nowrap}.inscription-place>span+span{border-left:1px solid var(--edge);padding-left:1rem}#inscription-mood{margin-top:.4rem;font-size:.875rem;line-height:1.4;overflow-wrap:anywhere}.engrave-edit{position:absolute;right:0;top:0;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}.engrave-edit:hover{color:var(--ink)}.engrave-edit .icon{width:1rem;height:1rem}
.inscription-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:.75rem;text-shadow:none}.inscription-form label,.shape-fields label{display:flex;flex-direction:column;gap:.4rem;min-width:0;color:var(--muted);font-size:.75rem}.inscription-form input,.shape-fields input,.shape-fields select,.object-picker select{width:100%;min-width:0;min-height:2.75rem;border:0;border-radius:.3rem;padding:.6rem .7rem;color:var(--ink);background:var(--field);box-shadow:inset 0 2px 4px #0002,0 1px var(--highlight);font-size:.875rem}.inscription-form input::placeholder,.shape-fields input::placeholder{color:var(--muted);opacity:.85}.inscription-actions{display:flex;align-items:center;gap:.1rem}.save-status{font-size:.75rem;line-height:1.35;overflow-wrap:anywhere}.save-status:not(:empty){margin-top:.5rem}.save-status.error{color:var(--ink);font-weight:600}
/* One translucent, light-diffusing silicone face carries the matte metal controls. */
.player-transport.hardware-deck{position:relative;z-index:8;isolation:isolate;display:grid;grid-template-columns:1.1fr 1fr 1fr .85fr;align-items:center;gap:1.5rem;padding:1.35rem 2rem 1.25rem;border:1px solid var(--panel-rim);border-radius:.85rem;background:var(--panel-skin);backdrop-filter:blur(22px) saturate(.85);-webkit-backdrop-filter:blur(22px) saturate(.85);box-shadow:inset 0 1px 2px var(--panel-rim),inset 0 -2px 3px #00000014,0 4px 0 var(--panel-side),0 5px 0 var(--panel-edge),0 10px 16px var(--metal-shadow);min-width:0;transition:background-color var(--lights-time),border-color var(--lights-time),box-shadow var(--lights-time)}
.player-transport.hardware-deck::before{content:'';position:absolute;inset:6px;z-index:-2;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 52% 85%,var(--panel-warm),transparent 72%),linear-gradient(115deg,var(--panel-cool),transparent 45%,var(--panel-wash));filter:blur(16px);opacity:var(--panel-glow);transition:opacity .4s}
.player-transport.hardware-deck::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background-image:var(--grain),linear-gradient(150deg,var(--panel-wash),#ffffff03 50%,#ffffff0a);background-size:90px 90px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 3px var(--panel-rim),inset 0 -3px 10px var(--panel-wash)}
.player-transport.hardware-deck:has([data-lit])::before,.player-transport.hardware-deck:has(#player-flip[aria-pressed=true])::before,.player-transport.hardware-deck:has(details[open])::before{opacity:1}

/* Two real rows keep captions clear of the physical key rims and shadows. */
.hardware-deck{--actuator-height:4.75rem;--caption-height:1.5rem;--caption-gap:1rem;--caption-font:.75rem;--readout-font:.6875rem;--readout-padding:.35rem .6rem}
.hardware-deck>div{position:relative;display:grid;grid-template-rows:var(--actuator-height) var(--caption-height);align-items:center;justify-items:center;row-gap:var(--caption-gap);min-width:0;min-height:0;padding:0}
.transport-label{position:static;display:flex;align-items:center;justify-content:center;gap:.625rem;min-height:var(--caption-height);white-space:nowrap;text-align:center;font-size:var(--caption-font);font-weight:500;letter-spacing:.025em;line-height:1.3;color:var(--muted);text-shadow:0 1px var(--highlight)}
.mount-screw{position:absolute;z-index:1;width:.4rem;height:.4rem;border-radius:50%;background:var(--metal-low);box-shadow:inset 0 0 0 1px var(--metal-rim),0 1px var(--metal-hi);pointer-events:none}.mount-screw::after{content:'';position:absolute;top:2px;left:1px;right:1px;height:1px;background:var(--metal-edge);transform:rotate(-35deg);box-shadow:0 1px var(--metal-hi)}.screw-tl{left:.5rem;top:.5rem}.screw-tr{right:.5rem;top:.5rem}.screw-bl{left:.5rem;bottom:.5rem}.screw-br{right:.5rem;bottom:.5rem}
.moment-actuator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-width:0}.transport-lcd{display:block;font:var(--readout-font)/1.1 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.12em;padding:var(--readout-padding);white-space:nowrap;border-radius:.2rem;color:#8cadff;background:#151e2c;border:1px solid #040c18;box-shadow:inset 0 2px 3px #0009,0 1px var(--highlight);text-shadow:0 0 7px #487aff66}
.transport-keybank{display:flex;gap:3px;background:var(--button-base);padding:3px;border-radius:.4rem;box-shadow:inset 0 2px 2px var(--metal-dent),0 1px var(--metal-hi);transition:background-color var(--lights-time)}.transport-key{position:relative;display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.25rem;padding:.5rem;border:1px solid var(--metal-rim);border-radius:.25rem;color:var(--metal-text);background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 6px 8px var(--metal-shadow);transition:transform .14s,background-color var(--lights-time),color var(--lights-time),border-color var(--lights-time),box-shadow .22s;}.transport-key .icon,.transport-key [data-icon]{width:1.05rem;height:1.05rem}.transport-key:active{transform:translateY(2px);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 1px 0 var(--button-base),0 3px 4px var(--metal-shadow)}
.dial-seat{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--dial-size) + .4rem);height:calc(var(--dial-size) + .4rem);border:1px solid var(--button-base);border-radius:50%;background:var(--button-base);box-shadow:inset 0 1px 3px #0008,0 1px var(--metal-hi),0 2px 3px var(--metal-shadow);transition:background-color var(--lights-time),border-color var(--lights-time)}.dial-ticks{position:absolute;inset:-.28rem;border-radius:50%;background:none;opacity:.65;pointer-events:none}
.dial-ticks::before,.dial-ticks::after{content:'';position:absolute;top:5%;width:1px;height:3px;background:var(--metal-text)}.dial-ticks::before{left:22%;transform:rotate(-38deg)}.dial-ticks::after{right:22%;transform:rotate(38deg)}
#player-flip{position:relative;isolation:isolate;width:var(--dial-size);height:var(--dial-size);min-width:var(--dial-size);min-height:var(--dial-size);padding:.85rem;border:1px solid var(--metal-rim);color:var(--metal-text);background-color:var(--metal);background-image:var(--grain),linear-gradient(145deg,#ffffff0e,transparent 55%,#0000000a);background-size:100px 100px,cover;background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 3px 0 var(--button-side),0 4px 0 var(--button-base),0 7px 10px var(--metal-shadow);transition:transform .14s,background-color var(--lights-time),color var(--lights-time),border-color var(--lights-time),box-shadow .22s;}#player-flip:active{transform:translateY(2px);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 1px 0 var(--button-base),0 3px 4px var(--metal-shadow)}#player-flip>[data-icon]{width:1.15rem;height:1.15rem;opacity:1;filter:drop-shadow(0 1px 1px #00135c66)}.dial-marker{position:absolute;inset:.5rem;border-radius:50%;pointer-events:none;transform:rotate(-38deg);transition:transform .65s cubic-bezier(.3,.05,.3,1)}.dial-marker::after{position:absolute;content:'';width:2px;height:.4rem;left:calc(50% - 1px);top:0;border-radius:1px;background:var(--metal-accent);box-shadow:0 1px var(--metal-hi)}#player-flip[aria-pressed=true] .dial-marker{transform:rotate(38deg)}
.hardware-deck .toss-key{width:3.45rem;height:3.45rem;min-width:3.45rem;min-height:3.45rem}.hardware-deck .toss-key:active{transform:translateY(2px);box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 1px 0 var(--button-base),0 3px 4px var(--metal-shadow)}#throw-count{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;font:var(--readout-font)/1.1 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#c9d5e2;background:#26313d;padding:var(--readout-padding);margin:0;border:1px solid #040c1833;border-radius:.2rem;text-shadow:none;box-shadow:inset 0 1px 2px #0006}
/* Fixed caption slots keep the counter in one place for Toss, Lights, and three-digit values. */
.hardware-deck .play-transport .transport-label{display:grid;grid-template-columns:3rem 2.5rem;column-gap:.625rem;width:6.125rem;justify-content:center}
.hardware-deck .play-transport #throw-count{width:2.5rem;min-width:0}
@media(max-width:600px){.hardware-deck .play-transport .transport-label{grid-template-columns:2.25rem 2rem;column-gap:.5rem;width:4.75rem}.hardware-deck .play-transport #throw-count{width:2rem;min-width:0}}
.hardware-deck .toss-key:disabled{opacity:1}.hardware-deck .toss-key:disabled>[data-icon]{color:#a4acbd;opacity:.6;filter:grayscale(1)}
.knurled-key{box-shadow:inset 0 1px 1px var(--metal-hi),inset 0 -1px 2px var(--metal-dent),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 6px 8px var(--metal-shadow);}.hardware-deck .utility-transport::before{content:'';position:absolute;right:0;top:calc(50% - 1.4rem);width:1.2rem;height:2.25rem;background:radial-gradient(ellipse at center,var(--metal-edge) 0 30%,transparent 45%);background-size:4px 4px;opacity:.45;pointer-events:none}[data-theme=dark] .app{box-shadow:inset 0 2px 1px #ffffff25,inset 0 -2px 1px #0006,0 6px 0 #252729,0 8px 0 #08090a,0 calc(var(--safe-bottom)*.25) calc(var(--safe-bottom)*.45) calc(var(--safe-bottom)*-.2) #0008}

.player-options{position:relative}.player-options summary{list-style:none}.player-options summary::-webkit-details-marker{display:none}.options-panel{position:absolute;right:0;bottom:calc(100% + 1.3rem);z-index:15;width:17rem;max-width:calc(100vw - 3rem);display:grid;gap:1rem;padding:1.1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--finish),var(--shell);background-size:120px 120px,cover;box-shadow:inset 0 1px var(--highlight),0 5px 0 var(--line),0 12px 24px #0004}.camera-controls{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.segmented{display:flex;gap:3px;padding:3px;background:var(--button-base);border-radius:.3rem;box-shadow:inset 0 2px 4px #0003}.segmented button{display:flex;align-items:center;justify-content:center;gap:.4rem;flex:1;min-height:2.5rem;padding:.5rem;font-size:.8125rem;border-radius:.2rem}.options-actions{display:flex;gap:.65rem}.options-actions>.button{flex:1;min-width:0;padding:.6rem .7rem}.object-picker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem;font-size:.75rem;color:var(--muted)}
.hover-label,.toast,.global-status{position:absolute;z-index:12;pointer-events:none;background:#18202bf2;color:#f2f4f8;border-radius:.3rem;padding:.65rem .85rem;font-size:.8125rem;line-height:1.4;max-width:calc(100% - 2rem);text-align:center;box-shadow:0 3px 8px #0003}.hover-label{display:none;transform:translate(-50%,calc(-100% - 16px));white-space:nowrap}.toast{left:50%;bottom:1.8rem;transform:translate(-50%,.5rem);opacity:0;transition:opacity .2s,transform .2s}.global-status{left:50%;bottom:1rem;margin:0;transform:translate(-50%,.5rem);opacity:0;transition:opacity .2s,transform .2s}.toast.show,.global-status.show{opacity:1;transform:translate(-50%,0)}
/* A tuner, painted immediately, covers real image/geometry preload. */
.signal-screen{position:absolute;inset:0;z-index:9;isolation:isolate;overflow:hidden;display:block;background:#293743;color:#d6e2f5;font:11px/1.4 ui-monospace,Consolas,monospace;cursor:progress}
.signal-screen::before{content:'';position:absolute;inset:-10%;z-index:2;pointer-events:none;background-image:var(--crt-noise),repeating-linear-gradient(0deg,#10244126 0 .5px,transparent .5px 4px),linear-gradient(180deg,transparent 20%,#234ddb26 44%,#9bbaff35 45%,#163cff26 46%,transparent 60%);background-size:128px 128px,100% 4px,cover;opacity:.72;animation:signal-hiss .42s steps(3,end) infinite}
.signal-screen[data-renderer=webgl]::before{opacity:.25}
.signal-screen::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 2.5rem #0a13284d;border:1px solid #070d183d}
.signal-canvas{position:absolute;inset:0;z-index:1;display:block;opacity:0;width:100%;height:100%;pointer-events:none}
.signal-screen[data-renderer=webgl] .signal-canvas{opacity:1}
.signal-readout{position:absolute;z-index:5;left:clamp(.65rem,2vw,1.2rem);right:clamp(.65rem,2vw,1.2rem);top:.9rem;display:flex;justify-content:space-between;gap:1rem;letter-spacing:.16em;text-shadow:-1px 0 #7cabff66,1px 0 #daa4bc33}
.signal-readout b{font:inherit;font-weight:600;font-variant-numeric:tabular-nums;color:#edf3ff}
.signal-readout [data-signal-state]{color:#afc5ed;font-size:9px}
.signal-message{position:absolute;z-index:5;left:clamp(.65rem,2vw,1.2rem);right:clamp(.65rem,2vw,1.2rem);bottom:1.15rem;display:flex;align-items:center;gap:.65rem;max-width:100%;font-size:clamp(10px,1.1vw,12px);letter-spacing:.035em;overflow-wrap:anywhere}
.signal-lock{display:block;flex:none;width:.4rem;height:.4rem;border:1px solid #b3caff;box-shadow:0 0 5px #708dff80}
.signal-track{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(0deg,transparent 48%,#688dff12 49%,#99baff33 50%,transparent 51%);transform:translateY(-45%);animation:signal-track 2.8s linear infinite}
.signal-screen[data-phase=ready] .signal-lock{background:#c5d8ff}
.signal-screen[data-phase=error]{cursor:default}
.signal-screen[data-phase=error]::before,.signal-screen[data-phase=error] .signal-track{animation:none}
.signal-screen[data-renderer=webgl][data-phase=error] .signal-canvas{opacity:.35}
.gallery-loading.signal-screen{background:#293743;display:block}
@keyframes signal-hiss{0%{transform:translate(0,0)}33%{transform:translate(-3%,1%)}66%{transform:translate(2%,-1%)}}
@keyframes signal-track{to{transform:translateY(45%)}}
@media(prefers-reduced-motion:reduce){.signal-screen::before,.signal-track{animation:none!important}}
/* A responsive contact sheet sits on one continuous display bed. */
.gallery-view{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;gap:.8rem;padding:.2rem .9rem 1rem}.gallery-grid{position:relative;min-height:0;min-width:0}.gallery-cards{display:grid;height:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(.35rem,.7vw,.7rem);min-height:0;min-width:0}.gallery-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;padding:3px 3px .35rem;border:1px solid var(--edge);border-radius:.35rem;background:var(--finish),var(--paper);background-size:120px 120px,cover;box-shadow:inset 0 1px var(--highlight),0 2px 0 #75838d,0 3px 4px #0002}.gallery-card .mini-slot{border-radius:.15rem;min-height:0;background:var(--scene)}.mini-open{position:absolute;inset:0;z-index:3;width:100%;height:100%;border-radius:inherit}.mini-open:focus-visible,.mini-back button:focus-visible{outline-color:#9fbbff;outline-offset:-4px}.mini-serial{position:absolute;z-index:4;left:.35rem;top:.3rem;pointer-events:none;font:8px/1.2 ui-monospace,monospace;letter-spacing:.06em;color:#e4e9f0;background:#202c38ad;padding:.2rem .25rem;border-radius:2px}
.mini-engraving{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;min-width:0;position:relative;z-index:4;padding:.45rem .5rem .15rem;text-shadow:0 1px var(--highlight)}.mini-inscription{display:flex;flex-direction:column;gap:.15rem;min-width:0}.mini-title{padding:0;min-width:0;text-align:left;font-size:.8125rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-date{font:9px/1.2 ui-monospace,monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.round-key.card-flip{z-index:4;width:2rem;height:2rem;min-width:2rem;min-height:2rem;padding:.45rem;box-shadow:inset 0 1px var(--metal-hi),0 2px 0 var(--button-side),0 3px 0 var(--button-base),0 4px 4px var(--metal-shadow)}.round-key.card-flip .icon{width:.9rem;height:.9rem}.card-flip[aria-pressed=true]{color:var(--metal-accent)}#gallery-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none}.gallery-loading{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:var(--shell);font-size:.875rem}
.collection-transport{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0;padding:0 .25rem}.collection-playback,#gallery-pages{display:flex;align-items:center;gap:.9rem;min-width:0}.sort-control{display:block;min-width:0}.sort-control select{border:0;background:transparent;color:var(--ink);min-height:2.75rem;max-width:100%;font-size:.8125rem;padding:.5rem .25rem;cursor:pointer}.sort-control option{background:var(--shell);color:var(--ink)}.collection-count,#page-label{font:11px/1.3 ui-monospace,monospace;white-space:nowrap;color:var(--muted)}#page-label{min-width:2.7rem;text-align:center}
/* Framing is a three-step tool, contained in the same viewport. */
dialog{color:var(--ink);position:fixed;top:var(--viewport-top,0px);bottom:auto;margin:1.25rem auto 0;width:min(760px,calc(100vw - 2rem));height:min(650px,calc(var(--viewport-height,100dvh) - 2.5rem));max-height:none;max-width:none;min-height:0;padding:1.2rem;border:2px solid var(--line);border-radius:.85rem;background:var(--finish),var(--shell);background-size:120px 120px,cover;box-shadow:inset 0 1px var(--highlight),0 6px 0 var(--line),0 20px 45px #0005;overflow:hidden}dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:1rem}dialog::backdrop{background:#080e1b99;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;min-width:0}.dialog-header h2{font-size:1.1rem;letter-spacing:-.03em;font-weight:600}.dialog-switch{display:flex;gap:.3rem;border-bottom:1px solid var(--edge)}.dialog-switch button{flex:1;min-width:0;min-height:2.75rem;padding:.5rem;color:var(--muted);font-size:.8125rem;border-bottom:3px solid transparent}.dialog-switch button[aria-pressed=true]{border-bottom-color:var(--blue);color:var(--ink)}.editor-body{min-height:0;min-width:0;position:relative}.photo-editor{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:0;padding:1rem 1rem 2.5rem;background:#181f26;border-radius:.4rem;box-shadow:inset 0 2px 6px #0008}.photo-editor canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;touch-action:none;cursor:crosshair}.crop-instruction{position:absolute;bottom:.7rem;left:.5rem;right:.5rem;text-align:center;color:#cfd8e4;font-size:.75rem}.editor-controls{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:1.5rem;height:100%;max-width:500px;margin:auto;min-height:0;min-width:0}.shape-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-width:0}.editor-note{font-size:.8125rem;color:var(--muted);line-height:1.4;text-align:center}.editor-list-panel{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1rem;min-height:0}.selection-list{display:grid;grid-auto-rows:3.2rem;align-content:start;min-height:0;min-width:0}.selection-row{display:flex;align-items:center;gap:.75rem;justify-content:space-between;border-bottom:1px solid var(--edge);min-width:0;font-size:.875rem}.selection-row>span{min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selection-row button{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem}.selection-empty{font-size:.875rem;color:var(--muted);align-self:center}.selection-pages{display:flex;align-items:center;justify-content:center;gap:1rem}.selection-pages>span{font:11px/1.3 ui-monospace,monospace}.editor-bottom{display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-width:0;padding-top:.85rem;border-top:1px solid var(--edge)}#selection-count{font:11px/1.3 ui-monospace,monospace;color:var(--muted);text-align:center}
@media(max-width:1000px){.machine-header{padding:.85rem 1.1rem}.player-view{padding:0 1.1rem 1.05rem}.inscription-form{grid-template-columns:1fr 1fr}.inscription-actions{grid-column:1/-1;justify-content:flex-end}.header-actions{gap:1rem}.engraving{margin:.85rem .15rem .75rem}.player-transport.hardware-deck{gap:1rem;padding:1.15rem 1.5rem 1.05rem}.hardware-deck .utility-transport::before{display:none}}
@media(max-width:600px){:root{--outer:.55rem;--dial-size:3.15rem}.machine-header{grid-template-columns:minmax(0,1fr) auto auto;gap:.55rem;padding:.7rem .8rem}.brand{font-size:1.3rem;letter-spacing:-.06rem}.view-switch{gap:2px;padding:3px}.view-switch button{padding:.4rem;min-width:2.2rem;min-height:2.35rem}.view-switch button>span:last-child{display:none}.header-actions{gap:.6rem}.header-actions>.round-key{width:2.3rem;height:2.3rem;min-width:2.3rem;min-height:2.3rem}.light-state{display:none}.light-switch{min-height:2.65rem}.rocker-socket{width:1.45rem;height:2.3rem}.player-view{padding:0 .7rem .9rem}.display-surround{padding:.2rem .3rem .3rem;border-radius:.45rem}.display-label{font-size:9px;min-height:1.45rem;letter-spacing:.04em}.source-readout{gap:.75rem}.source-readout>span::before{margin-right:.3rem}.engraving{margin:.65rem .15rem .65rem}.inscription{padding-right:2rem}.inscription-heading{display:block}.inscription h1{font-size:1.05rem;line-height:1.2}.inscription-place{display:block;margin-top:.3rem}.inscription-place>span{display:block}.inscription-place>span+span{border:0;padding:0;margin-top:.1rem}#inscription-mood{margin-top:.3rem;font-size:.8rem;line-height:1.3}.engrave-edit{width:2rem;height:2.5rem}.player-transport.hardware-deck{gap:.55rem;grid-template-columns:1.15fr 1.1fr 1fr 1fr;padding:1rem .85rem .8rem;border-radius:.5rem}.hardware-deck{--actuator-height:3.65rem;--caption-height:1.25rem;--caption-gap:.75rem;--caption-font:.625rem;--readout-font:.5625rem;--readout-padding:.27rem .35rem}.moment-actuator{gap:.35rem}.hardware-deck .toss-key{width:2.6rem;height:2.6rem;min-width:2.6rem;min-height:2.6rem;padding:.65rem}.hardware-deck .utility-transport .round-key{width:2.4rem;height:2.4rem;min-width:2.4rem;min-height:2.4rem;padding:.6rem}.transport-key{width:1.8rem;height:1.85rem;padding:.3rem}.transport-keybank{gap:2px;padding:2px}.transport-lcd{letter-spacing:.1em}.hardware-deck .transport-label{gap:.5rem;letter-spacing:.025em}#throw-count{min-width:1.8rem}.dial-seat{width:calc(var(--dial-size) + .4rem);height:calc(var(--dial-size) + .4rem)}.dial-ticks{inset:-.3rem}#player-flip>[data-icon]{width:1rem;height:1rem}.dial-marker{inset:.35rem}.dial-marker::after{height:.45rem}.screen-hint{bottom:.5rem;left:.5rem;max-width:calc(100% - 1rem)}.options-panel{right:-.25rem;gap:.85rem;padding:1rem;width:17rem}.gallery-view{padding:.1rem .45rem .8rem;gap:.7rem}.gallery-cards{gap:.35rem}.gallery-card{padding:2px 2px .2rem;border-radius:.25rem}.mini-engraving{padding:.35rem .2rem .1rem;gap:.2rem}.mini-title{font-size:.6rem;line-height:1.2}.mini-date{font-size:7px}.mini-serial{font-size:7px;top:.2rem;left:.2rem;padding:.15rem .2rem}.round-key.card-flip{width:1.6rem;height:1.6rem;min-width:1.6rem;min-height:1.6rem;padding:.3rem}.round-key.card-flip .icon{width:.8rem;height:.8rem}.collection-transport{gap:.35rem;padding:0 .15rem}.collection-playback,#gallery-pages{gap:.45rem}.collection-count{display:none}.sort-control select{font-size:.75rem;max-width:7rem}#page-label{font-size:10px;min-width:2.1rem}.inscription-form{gap:.55rem}.inscription-form label{font-size:.7rem;gap:.25rem}.inscription-form input{font-size:16px;min-height:2.5rem;padding:.4rem .5rem}.inscription-actions .button,.inscription-actions .text-key{min-height:2.5rem}.inscription-actions{gap:.3rem}.save-status{font-size:.7rem}dialog{padding:.9rem;margin:.75rem auto 0;width:calc(100vw - 1.5rem);height:calc(var(--viewport-height,100dvh) - 1.5rem)}dialog[open]{gap:.65rem}.dialog-header h2{font-size:1rem}.shape-fields{gap:.6rem}.shape-fields input,.shape-fields select{font-size:16px}.editor-controls{gap:1rem}.editor-note{font-size:.75rem}.editor-bottom{padding-top:.7rem;gap:.4rem}.editor-bottom .button{padding:.6rem .8rem}.crop-instruction{font-size:.7rem}}
@media(max-width:360px){:root{--dial-size:2.85rem}.machine-header{padding:.65rem .55rem;gap:.35rem}.header-actions{gap:.5rem}.brand{font-size:1.15rem}.view-switch button{min-width:2.1rem;padding:.4rem}.player-view{padding:0 .55rem .85rem}.player-transport.hardware-deck{gap:.45rem;padding:.9rem .75rem .75rem}.transport-key{width:1.55rem}.transport-keybank{gap:2px}.hardware-deck .toss-key{width:2.4rem;height:2.4rem;min-width:2.4rem;min-height:2.4rem}.hardware-deck .utility-transport .round-key{width:2.15rem;height:2.15rem;min-width:2.15rem;min-height:2.15rem}.hardware-deck{--caption-font:.5625rem}.hardware-deck .transport-label{gap:.375rem;letter-spacing:.025em}.source-readout{gap:.45rem}.mini-engraving{padding-left:.1rem;padding-right:.1rem}.mini-title{font-size:9px}.mini-date{font-size:6.5px}.round-key.card-flip{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem}.collection-playback,#gallery-pages{gap:.3rem}.sort-control select{max-width:6rem;font-size:.7rem}}
/* A slimmer desktop deck gives the screen more room without crowding the captions. */
@media(min-width:601px) and (min-height:651px){
  .player-transport.hardware-deck{--actuator-height:4.5rem;--dial-size:3.75rem;--caption-gap:.5rem;padding-top:1.05rem;padding-bottom:.95rem}
  .hardware-deck .moment-actuator{gap:.35rem}
  .hardware-deck .transport-key{width:2.4rem;height:2.125rem}
  .hardware-deck .toss-key{width:3.125rem;height:3.125rem;min-width:3.125rem;min-height:3.125rem}
  .hardware-deck .player-options>summary.round-key{width:2.5rem;height:2.5rem;min-width:2.5rem;min-height:2.5rem;padding:.65rem}
}
@media(max-height:650px){.machine-header{padding-top:.5rem;padding-bottom:.5rem}.engraving{margin:.5rem .15rem .55rem}.inscription h1{font-size:1rem}.inscription-place,#inscription-mood{margin-top:.2rem}.player-transport.hardware-deck{--caption-gap:.75rem;padding-top:.9rem;padding-bottom:.75rem}.display-label{min-height:1.4rem}.gallery-view{gap:.6rem;padding-bottom:.7rem}}
.compact-height{--outer:.4rem;--dial-size:2.65rem}.compact-height .machine-header{padding:.3rem .85rem}.compact-height .brand{font-size:1.15rem}.compact-height .player-view{padding:0 .7rem .65rem}.compact-height .display-label{min-height:1.1rem;font-size:8px}.compact-height .display-surround{padding:.15rem .3rem .3rem}.compact-height .engraving{margin:.35rem .15rem}.compact-height .inscription{padding-right:2.5rem}.compact-height .inscription h1{font-size:.9rem}.compact-height .inscription-heading{display:flex}.compact-height .inscription-place{display:flex;gap:.75rem;margin-top:.1rem}.compact-height #inscription-mood{font-size:.65rem;line-height:1.2;margin-top:.1rem}.compact-height .player-transport.hardware-deck{padding:.6rem 1.2rem .6rem;gap:.6rem}.compact-height .hardware-deck>div{display:flex;align-items:center;justify-content:center;min-height:3.25rem;gap:.6rem;padding:0}.compact-height .hardware-deck .moment-actuator{flex-direction:row;gap:.6rem}.compact-height .hardware-deck .transport-label{display:none}.compact-height .hardware-deck .transport-lcd{font-size:9px;padding:.25rem .4rem}.compact-height .hardware-deck .transport-key{width:2rem;height:2rem}.compact-height .hardware-deck .toss-key{width:2.5rem;height:2.5rem;min-width:2.5rem;min-height:2.5rem}.compact-height .hardware-deck .utility-transport .round-key{width:2.5rem;height:2.5rem;min-width:2.5rem;min-height:2.5rem}.compact-height .gallery-view{padding:.15rem .55rem .6rem;gap:.5rem}.compact-height .mini-engraving{padding:.2rem .35rem .1rem}.compact-height .mini-title{font-size:9px}.compact-height .mini-date{display:none}.compact-height .round-key.card-flip{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;padding:.25rem}.compact-height .options-panel{gap:.5rem;padding:.75rem;grid-template-columns:1fr 1fr;width:28rem;max-width:calc(100vw - 3rem);right:0}.compact-height .object-picker{grid-template-columns:minmax(0,1fr);gap:0;font-size:0}.compact-height .camera-controls{gap:.4rem}.compact-height dialog[open]{gap:.45rem;padding:.65rem}.compact-height .editor-controls{gap:.65rem}.compact-height .editor-note{display:none}.compact-height .dialog-switch button{min-height:2.2rem}.compact-height .editor-bottom{padding-top:.45rem}.compact-height .shape-fields input,.compact-height .shape-fields select{min-height:2.3rem}.compact-height .crop-instruction{bottom:.45rem}.compact-height .photo-editor{padding:.5rem .5rem 1.8rem}
@media(max-width:600px){.compact-height .hardware-deck .moment-actuator{flex-direction:column;gap:.25rem}.compact-height .hardware-deck .transport-key{width:1.65rem;height:1.55rem}.compact-height .player-transport.hardware-deck{padding:.55rem .75rem}.compact-height .transport-lcd{font-size:7px!important}}
/* A short landscape window keeps the screen large and puts controls beside it. */
@container console (max-height:440px) and (min-width:620px){
  .player-card{grid-template-columns:minmax(0,1fr) minmax(230px,30%);grid-template-rows:auto minmax(0,1fr);gap:.65rem 1rem}
  .display-surround{grid-column:1;grid-row:1/-1}
  .engraving{grid-column:2;grid-row:1;margin:0 .15rem;align-self:start}
  .inscription-heading{display:block}
  .inscription-place{display:block}.inscription-place>span{display:block}.inscription-place>span+span{border:0;padding:0;margin-top:.1rem}
  .player-transport.hardware-deck{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;align-content:space-evenly;gap:.7rem;padding:.7rem .85rem}
  .hardware-deck>div{display:flex;align-items:center;justify-content:center;min-height:3rem;gap:.6rem;padding:0}
  .app .hardware-deck .moment-actuator{flex-direction:column;gap:.3rem}
  .hardware-deck .transport-key{width:1.75rem;height:1.6rem}
  .hardware-deck .transport-lcd{font-size:8px}
  .hardware-deck .transport-label,.hardware-deck .utility-transport::before{display:none}
  .options-panel{right:0;bottom:calc(100% + .8rem);width:27rem;max-width:calc(var(--viewport-width,100vw) - 3rem);grid-template-columns:1fr 1fr;gap:.65rem;padding:.8rem}
  .object-picker{grid-template-columns:minmax(0,1fr);gap:0;font-size:0}
  .player-card:has(.engraving.editing) .engraving{grid-row:1/-1;align-self:center}
  .player-card:has(.engraving.editing) .player-transport{display:none}
}
.keyboard-open .app:has(.engraving.editing) .machine-header,.keyboard-open .player-card:has(.engraving.editing) .display-surround,.keyboard-open .player-card:has(.engraving.editing) .player-transport{display:none}.keyboard-open .app:has(.engraving.editing){grid-template-rows:minmax(0,1fr)}.keyboard-open .player-card:has(.engraving.editing){display:flex;align-items:center}.keyboard-open .engraving.editing{width:100%;margin:.5rem 0}.keyboard-open .player-view{padding:.5rem 1rem}.keyboard-open .inscription-form{grid-template-columns:1fr 1fr;gap:.45rem}.keyboard-open .inscription-actions{grid-column:1/-1;justify-content:flex-end}
/* A square desktop housing; mobile retains the original viewport-filling shape. */
@media(min-width:700px) and (min-height:550px) and (min-aspect-ratio:1/1){
  .app{
    --frame-width:min(880px,calc(var(--viewport-width,100vw) - var(--safe-left) - var(--safe-right)),calc(var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom)));
    height:var(--frame-width);max-width:880px;
    top:calc(var(--viewport-top,0px) + var(--safe-top) + (var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom) - var(--frame-width))/2);
  }
}
/* The collection has its own matching bezel, with transport still below it. */
.gallery-grid{padding:clamp(.35rem,.6vw,.55rem);border:1px solid #0c1015;border-radius:.5rem;background:#24292d var(--grain);background-size:180px;background-blend-mode:soft-light;box-shadow:0 2px 1px var(--highlight),inset 0 2px 2px #0009}
.gallery-view{padding:0 1.6rem 1.25rem}
/* Only the outer display has a bezel. Space, not nested frames, groups memories. */
.gallery-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.gallery-cards{grid-template-columns:repeat(var(--gallery-columns,3),minmax(0,1fr));grid-template-rows:repeat(var(--gallery-rows,3),minmax(0,1fr));gap:clamp(.5rem,1vw,.85rem)}
.gallery-card .mini-engraving{color:#d9e0e5;text-shadow:none}
.gallery-card .mini-date{color:#9ca8b3}
.mini-engraving:has(.preview-key){grid-template-columns:minmax(0,1fr) 44px;gap:.25rem;min-height:44px;padding:7px 0 7px .25rem}
.preview-key{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:7px;justify-self:end;border:0;border-radius:50%;background:transparent;color:#b0c7ff;box-shadow:none;transition:color .16s,background-color .16s}
.preview-key .icon{width:15px;height:15px}
.preview-key:is(:hover,:focus-visible,:active){color:#d8e4ff;background:#b0c7ff1a}
/* Keep the 44px hit area inside its own tile when the small key aligns right. */
.preview-key::before{content:'';position:absolute;inset:-7px 0 -7px -14px;border-radius:50%;background:transparent}
/* Clipping contains the content; a quiet half-pixel edge only finishes the glass. */
[data-theme=dark]{--screen-edge:#cfdae51c;--screen-socket-shadow:inset 0 1px 2.5px #00000059,0 .5px 0 #ffffff0c}
.mini-slot,.gallery-card .mini-slot{border-radius:var(--screen-radius)}
.mini-slot::after{border:0;box-shadow:inset 0 0 0 .5px var(--screen-edge);z-index:7;transition:box-shadow var(--lights-time)}
.mini-back{inset:1px;border-radius:calc(var(--screen-radius) - 1px);overflow:hidden}
/* Keep the full-slot snapshot mapping; clip the same aperture without scaling. */
#scene,.screen-shutter{clip-path:inset(1px round calc(var(--screen-radius) - 1px))}
.display-surround,.gallery-grid{border-color:transparent;box-shadow:var(--screen-socket-shadow);transition:box-shadow var(--lights-time)}
.gallery-grid{overflow:hidden}
.screen-clip-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
@media(max-width:1000px){.gallery-view{padding:0 1.1rem 1.05rem}}
@media(max-width:600px){
  .gallery-view{padding:0 .7rem .9rem}
  .mini-engraving:has(.preview-key){gap:.15rem;padding:7px 0 7px .15rem}
  .mini-engraving:has(.preview-key) .mini-title{font-size:9px}
}
@media(max-width:360px){.gallery-view{padding:0 .55rem .85rem}}
.compact-height .gallery-view{padding:0 .7rem .65rem}
@media(max-height:450px){
  .mini-engraving:has(.preview-key){padding:7px 0 7px .25rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* The original engraved heading, date and pencil stay anchored while editing. */
.inscription-fields{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr);gap:.65rem .85rem;margin-top:.7rem;text-shadow:none}
.inscription-fields[hidden]{display:none}
.inscription-fields label{display:grid;gap:.3rem;min-width:0;font-size:.75rem;color:var(--muted);line-height:1.2}
.inscription-fields label:nth-child(n+3){grid-column:1/-1}
.inscription-fields input{appearance:none;box-sizing:border-box;width:100%;min-width:0;min-height:2.65rem;padding:.55rem .65rem;border:1px solid var(--highlight);border-radius:.35rem;background:var(--field);color:var(--ink);line-height:1.35;font-family:inherit;font-size:16px;box-shadow:inset 0 1px 2px #00000012;outline:none;color-scheme:inherit}
.inscription-fields input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 15%,transparent)}
.inscription-fields input::placeholder{color:var(--muted);opacity:.7}
#memory-status:not(.error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.engraving:has(.inscription-fields:not([hidden])){flex:none}
@media(min-width:1001px){.inscription-fields{grid-template-columns:minmax(8.5rem,.65fr) minmax(0,1fr) minmax(0,1.35fr)}.inscription-fields label:nth-child(3){grid-column:auto}}
@media(max-width:360px){.inscription-fields{gap:.5rem}.inscription-fields input{padding:.5rem;min-height:2.5rem}}
@media(max-height:450px) and (min-width:601px){.inscription-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:.4rem}.inscription-fields label:nth-child(n){grid-column:auto}.inscription-fields input{min-height:2.3rem;padding:.4rem}.inscription-fields label{gap:.2rem}}
@media(max-height:450px) and (max-width:600px){.inscription-fields{gap:.3rem .5rem;margin-top:.35rem}.inscription-fields input{min-height:2.2rem;padding:.35rem .5rem}.inscription-fields label{gap:.15rem}.inscription-fields label:nth-child(3){grid-column:auto}.inscription-fields label:nth-child(4){grid-column:auto}}
@container console (max-height:440px) and (min-width:620px){
  .player-card:has(.inscription-fields:not([hidden])) .engraving{grid-row:1/-1;align-self:start}
  .player-card:has(.inscription-fields:not([hidden])) .player-transport{display:none}
  .inscription-fields{grid-template-columns:minmax(8rem,1.1fr) minmax(0,1fr);gap:.4rem;margin-top:.5rem}
  .inscription-fields label:nth-child(n+3){grid-column:1/-1}
}

.display-surround{position:relative}

.compact-height .hardware-deck #throw-count{padding:.25rem .4rem}

/* Small visual reset, full-size touch target; aligned with the scene hint. */
.screen-reset{position:absolute;right:.5rem;bottom:.25rem;z-index:8;display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--ink);touch-action:manipulation}
.screen-reset::before{content:'';position:absolute;inset:7px;border-radius:5px;background:var(--hint-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:-1}
.screen-reset .icon{width:16px;height:16px;pointer-events:none}
.screen-reset:active::before{background:var(--field)}
.screen-reset:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;border-radius:8px}
#stage-help{max-width:calc(100% - 4.5rem)}
.screen-reset[hidden],[data-shutter-state=preparing] .screen-reset,[data-shutter-state=tracking] .screen-reset{visibility:hidden;pointer-events:none}
@media(max-width:600px){.screen-reset{right:.2rem;bottom:.05rem}}