.front{position:relative;display:grid;gap:14px;padding:14px var(--gutter) 28px;max-width:1560px;margin:0 auto}.stage-words{display:grid;gap:10px;align-content:start}.front h1{font-size:clamp(54px,15vw,132px);line-height:.86;letter-spacing:-.02em;text-shadow:0 0 .03em var(--halo),0 0 .2em var(--halo-2),0 0 .62em var(--halo-2)}.front .lead{font-size:17px;max-width:36ch;color:var(--ink-2)}.front .lead strong{color:var(--ink);font-weight:600}.stage-tray{position:relative;height:min(78svh,136vw);min-height:420px;margin:0 calc(var(--gutter) * -1);user-select:none;-webkit-user-select:none}.stamp-canvas{position:absolute;inset:0;width:100%;height:100%;outline:none;cursor:crosshair;touch-action:pan-y}.stamp-canvas:focus-visible{outline:2px solid var(--signal);outline-offset:-6px}.is-busy .stamp-canvas{cursor:progress}.stamp-tag{position:absolute;left:0;top:0;pointer-events:none;margin:18px 0 0 16px;padding:3px 8px 4px;font:400 22px/1 var(--display);color:var(--ink);background:color-mix(in srgb,var(--room) 82%,transparent);border:1px solid var(--line-2);opacity:0;transition:opacity .18s;white-space:nowrap}.stamp-tag.is-on{opacity:1}.stage-tools{display:flex;flex-direction:column;gap:12px}.stage-tools .readout{font-size:14px;color:var(--ink-2);min-height:1.4em;overflow-wrap:anywhere}.stage-tools .readout b{font-weight:600;color:var(--ink)}.stage-tools .readout a{font-family:var(--mono, ui-monospace, monospace);font-size:13px}.is-read .tray-status .edge{color:var(--dial)}:root[data-room=light] .is-read .tray-status .edge{color:#2a6b28}.lamp{display:grid;grid-template-columns:auto 1fr 3.2em;align-items:center;gap:12px;max-width:420px}.lamp output{text-align:right;color:var(--ink)}.lamp input[type=range]{width:100%;accent-color:var(--signal);height:28px}.lamp-ends{grid-column:2;display:flex;justify-content:space-between;gap:8px;margin-top:-10px;font:500 11px/1.2 var(--sans, system-ui);color:var(--ink-3);white-space:nowrap}.stage-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}.front .card{max-width:440px}.front .card h2{font-size:34px;line-height:1}.front .card p{font-size:15px}.pick summary{cursor:pointer;color:var(--ink-3);list-style:none}.pick summary::-webkit-details-marker{display:none}.pick summary:before{content:"+ "}.pick[open] summary:before{content:"\2212  "}.pick-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;max-width:460px}.pick-list button{font:400 19px/1 var(--display);padding:6px 10px 7px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}.pick-list button:hover,.pick-list button[aria-pressed=true]{color:var(--ink);border-color:var(--signal)}.no-gl .stage-tray{display:none}@media(min-width:960px){.front{grid-template-columns:minmax(340px,4fr) 8fr;grid-template-rows:auto 1fr;column-gap:28px;align-items:start;min-height:calc(100svh - var(--head));padding-top:26px;padding-bottom:10px}.stage-words{grid-column:1;grid-row:1;padding-top:3vh}.stage-tools{grid-column:1;grid-row:2}.stage-tray{grid-column:2;grid-row:1 / span 2;height:calc(100svh - var(--head) - 36px);max-height:1000px;margin:0}.front h1{font-size:clamp(88px,9vw,160px)}.front .lead{font-size:19px}}@media(max-width:959px){.front{padding-top:8px;gap:10px}.stage-words{display:contents}.front .stage-lead{order:3}.stage-tray{order:2;height:min(68svh,128vw);min-height:380px}.stage-tools{order:4}.front h1{font-size:clamp(44px,12.5vw,76px);order:1}.front .stage-words>.edge{order:0}.front .tray-status{position:static}}.front .who{font-size:14px;line-height:1.45;color:var(--ink-3);max-width:40ch}.front .who a{color:inherit}@media(max-width:959px){.front .who{order:1;font-size:13px}}.front h1.pressed-name{font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:0;text-shadow:none;color:var(--ink)}.front:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle 420px at var(--lx, 62%) var(--ly, 45%),color-mix(in srgb,var(--signal) 13%,transparent),transparent 70%);transition:background-position .2s}:root[data-room=light] .front:before{background:radial-gradient(circle 420px at var(--lx, 62%) var(--ly, 45%),#fff8e655,transparent 70%)}.front>*{position:relative;z-index:1}@media(min-width:960px){.front{grid-template-columns:minmax(250px,3fr) minmax(0,7.2fr) minmax(270px,3fr);grid-template-rows:1fr;column-gap:22px}.front .stage-words{grid-column:1;grid-row:1;align-self:end;padding:0 0 6vh}.front .stage-tray{grid-column:2;grid-row:1}.front .stage-tools{grid-column:3;grid-row:1;align-self:start;padding-top:4vh}.front .lead{font-size:17px}}@media(max-width:959px){.front h1.pressed-name{order:1;font-size:30px}}.tray-drop{position:absolute;z-index:3;right:1.5%;bottom:.5%;background:var(--signal);color:var(--on-signal)}.tray-drop:hover{color:var(--on-signal)}.tray-drop[hidden]{display:none}.packet{position:absolute;z-index:4;inset:-1.5% .5% auto auto;display:block;width:clamp(112px,23%,172px);aspect-ratio:1.38;transform:rotate(6deg);transform-origin:50% 40%;transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .3s;touch-action:none;user-select:none;-webkit-user-select:none}.packet-body{position:absolute;inset:0;display:block;border-radius:3px;overflow:visible;background:linear-gradient(170deg,#26201b,#0c0a09 70%);box-shadow:0 14px 26px #000c,0 2px 4px #0009,inset 0 1px #ffffff1a;color:#f3ead6}.packet-strip{position:absolute;left:0;right:0;top:0;height:17%;background:linear-gradient(#2c2520,#15110e);border-radius:3px 3px 0 0;transform-origin:0% 100%;transition:transform .35s ease-in,opacity .35s}.packet-mouth{position:absolute;left:50%;bottom:0;width:1px;height:1px}.packet-perf{position:absolute;left:4px;right:4px;top:17%;height:0;border-top:2px dashed #f3ead655}.packet-label{position:absolute;inset:29% 9% 13%;display:grid;align-content:center;gap:2px;padding:4px 8px;background:#f1e5c8;color:#1b140e;border-radius:2px;font:400 clamp(17px,2.1vw,24px)/.95 var(--display)}.packet-label b{font-weight:400}.packet-small,.packet-next{font:600 clamp(8px,.8vw,10px)/1.25 var(--sans, system-ui);letter-spacing:.06em;text-transform:uppercase}.packet-next{color:#9a2a12}.packet-tab{position:absolute;left:-16%;top:-5%;height:28%;min-height:30px;padding:0 12px 0 10px;font:700 13px/1 var(--sans, system-ui);letter-spacing:.06em;text-transform:uppercase;color:#1b140e;background:#ffd23f;border:0;border-radius:3px 14px 14px 3px;box-shadow:0 4px 10px #0008;cursor:grab;transform:rotate(-2deg)}.packet-tab:after{content:" \203a\203a\203a";letter-spacing:0}.packet-tab:active{cursor:grabbing}.packet-tab:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.packet.is-open .packet-strip{transform:translate(18%,-60%) rotate(-24deg);opacity:0}.packet.is-open .packet-perf{border-top-style:solid;border-top-color:#000}.packet.is-open .packet-tab:after{content:""}.packet.is-pouring{transform:rotate(-122deg)}.packet.is-pouring .packet-tab{opacity:0}.packet.is-empty{opacity:.55}@media(max-width:959px){.packet{width:clamp(96px,26%,128px);inset:-2.5% 0 auto auto}.packet-tab{font-size:12px}}@media(prefers-reduced-motion:reduce){.packet,.packet-strip{transition:none}}@media(min-width:960px){.front .packet{inset:3.4vh auto auto calc(100% + 34px);width:168px;transform:rotate(-4deg)}.front .stage-tools{padding-top:calc(4vh + 150px)}}@media(max-width:959px){.front .packet{width:112px;inset:-3% 2.5% auto auto;transform:rotate(4deg)}.packet-small{display:none}.packet-label{inset:27% 8% 10%;padding:3px 7px;font-size:19px}.packet-next{font-size:10px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.spill-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}.front .packet.is-pouring{transform:rotate(-122deg)}.front{isolation:isolate}.front>.stage-tray{z-index:auto}.front .packet,.front .tray-drop{z-index:6}@media(max-width:959px){.front .packet.is-pouring{transform:translate(-30px,66px) rotate(-122deg)}}@media(max-width:959px){.stage-tray{margin-top:28px}.front .packet{width:clamp(96px,27%,120px);inset:-32px 1.5% auto auto;transform:rotate(4deg)}.packet-label{top:32%;bottom:6%;gap:1px;font-size:17px}.packet-next{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}.packet-next [data-next]{display:block}.front .guide-hint{order:1}}