html,body{height:100%;margin:0}.specimen{background:var(--ground-light);background-attachment:fixed;place-items:center;display:grid}.specimen:after{content:"";pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url(/grain.svg);position:fixed;inset:0}.tray{--w:var(--tray-w);--h:var(--tray-h);--r:22px;pointer-events:auto;width:var(--w);height:var(--h);border-radius:var(--r);background:linear-gradient(155deg,oklch(100% 0 0/.9) 0%,oklch(100% 0 0/0) 50%),linear-gradient(oklch(99.8% .002 95) 0%,oklch(98.4% .003 95) 100%);transition:width .38s cubic-bezier(.2,.8,.2,1),height .38s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .38s cubic-bezier(.2,.8,.2,1);position:relative;box-shadow:inset 0 1px oklch(100% 0 0),inset 0 -2px oklch(30% .012 85/.05),0 1px 1px oklch(30% .012 85/.14),0 14px 14px -8px oklch(30% .012 85/.22),0 34px 56px -20px oklch(30% .012 85/.42)}.tray-well{border-radius:calc(var(--r) - 10px);background:linear-gradient(oklch(96.4% .005 95) 0%,oklch(98.2% .003 95) 70%);position:absolute;inset:10px 10px 50px;box-shadow:inset 0 3px 4px oklch(30% .012 85/.14),inset 0 10px 18px -10px oklch(30% .012 85/.18),inset 0 0 0 1px oklch(30% .012 85/.05),0 1px oklch(100% 0 0)}.tray-lip{z-index:2;background:linear-gradient(oklch(100% 0 0) 0%,oklch(99% .002 95) 40%,oklch(94.4% .005 95) 100%);border-radius:7px 7px 9px 9px;height:14px;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:26px;left:16px;right:16px;box-shadow:inset 0 1px oklch(100% 0 0),inset 0 -1px oklch(30% .012 85/.1),0 -2px 3px oklch(30% .012 85/.08),0 3px 3px oklch(30% .012 85/.16),0 6px 10px -5px oklch(30% .012 85/.2)}.tray-row{justify-content:center;align-items:flex-end;gap:18px;padding-bottom:11px;display:flex;position:absolute;inset:0}.card{cursor:pointer;background:linear-gradient(155deg,oklch(100% 0 0/.9) 0%,oklch(100% 0 0/0) 55%),oklch(99.6% .002 95);border:0;border-radius:14px;flex:none;place-items:center;width:132px;height:104px;padding:0;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1);display:grid;position:relative;box-shadow:inset 0 1px oklch(100% 0 0),0 1px 1px oklch(30% .012 85/.12),0 6px 8px -3px oklch(30% .012 85/.14),0 20px 26px -12px oklch(30% .012 85/.32)}.card:before{content:"";background:var(--field,var(--grey));border-radius:10px;position:absolute;inset:5px;box-shadow:inset 0 1px 3px oklch(25% .03 250/.28),inset 0 0 0 1px oklch(25% .03 250/.1)}.card:hover{transform:translateY(-5px);box-shadow:inset 0 1px oklch(100% 0 0),0 3px 4px oklch(30% .012 85/.1),0 16px 20px -6px oklch(30% .012 85/.18),0 34px 40px -14px oklch(30% .012 85/.34)}.card:active{transition-duration:80ms;transform:translateY(0)}.card:focus-visible{outline:2px solid var(--sage);outline-offset:3px}.screen{z-index:1;background:linear-gradient(155deg,oklch(100% 0 0/.8) 0%,oklch(100% 0 0/0) 50%),#faf8f3;border-radius:2px;display:block;position:relative;box-shadow:inset 0 0 0 1px oklch(30% .012 85/.08),0 1px 1px oklch(25% .03 250/.22),0 4px 6px -2px oklch(25% .03 250/.3),0 9px 14px -6px oklch(25% .03 250/.28)}.screen-spread:after{content:"";background:linear-gradient(90deg,oklch(30% .012 85/0),oklch(30% .012 85/.1) 50%,oklch(30% .012 85/0));width:8px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.tray-sizes{z-index:1;opacity:0;justify-content:center;align-items:center;gap:18px;height:16px;transition:opacity .28s 60ms;display:flex;position:absolute;bottom:25px;left:16px;right:16px}.tray-sizes span{text-align:center;width:132px;font:400 10.5px/1 var(--f-mono);letter-spacing:.08em;color:oklch(55% .01 85/.62);transition:color .18s}.tray:hover .tray-lip,.tray:focus-within .tray-lip{transform:translateY(16px);box-shadow:inset 0 1px oklch(100% 0 0),inset 0 -1px oklch(30% .012 85/.1),0 3px 4px oklch(30% .012 85/.18),0 8px 12px -5px oklch(30% .012 85/.22)}.tray:hover .tray-sizes,.tray:focus-within .tray-sizes{opacity:1}:is(.tray:has(.tray-cards>:first-child:is(:hover,:focus-within)) .tray-sizes span:first-child,.tray:has(.tray-cards>:nth-child(2):is(:hover,:focus-within)) .tray-sizes span:nth-child(2),.tray:has(.tray-cards>:nth-child(3):is(:hover,:focus-within)) .tray-sizes span:nth-child(3),.tray:has(.tray-cards>:nth-child(4):is(:hover,:focus-within)) .tray-sizes span:nth-child(4),.tray:has(.tray-cards>:nth-child(5):is(:hover,:focus-within)) .tray-sizes span:nth-child(5)){color:var(--tray-size-hi,oklch(35% .01 85/.9))}.tray-ctl{z-index:3;opacity:0;gap:6px;transition:opacity .2s,transform .2s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:14px;right:20px;transform:translateY(-2px)}.tray:hover .tray-ctl,.tray:focus-within .tray-ctl{opacity:1;transform:none}.ctl{--ctl-ink:oklch(30% .012 85);cursor:pointer;width:26px;height:26px;color:var(--ctl-ink);background:oklch(30% .012 85/.06);border:0;border-radius:50%;place-items:center;padding:0;transition:background .15s,color .15s,box-shadow .15s;display:grid;box-shadow:inset 0 1px 1px oklch(30% .012 85/.08)}.ctl svg{flex:none;width:16px;height:16px}.tray-ctl .ctl,.float-ctl .ctl{width:32px;height:32px}.ctl:hover{color:var(--ctl-ink);background:linear-gradient(155deg,oklch(100% 0 0) 0%,oklch(98.5% .003 95) 100%);box-shadow:inset 0 1px oklch(100% 0 0),0 1px 1px oklch(30% .012 85/.14),0 3px 6px -2px oklch(30% .012 85/.22)}.ctl:focus-visible{outline:2px solid var(--sage);outline-offset:2px}.tray[data-state=min]{opacity:0;pointer-events:none;transform:translateY(14px)scale(.96)}.tray-well{transition:opacity .2s}.tray[data-state=closed]{opacity:0;pointer-events:none;transform:translateY(20px)scale(.985)}.specimen{box-sizing:border-box;padding-top:64px}.spec-hd{z-index:10;background:linear-gradient(180deg, oklch(100% 0 0/.05) 0%, oklch(100% 0 0/0) 60%), var(--chrome);align-items:center;gap:28px;height:64px;padding:0 24px;display:flex;position:fixed;inset:0 0 auto;box-shadow:inset 0 1px oklch(100% 0 0/.07),inset 0 -1px oklch(0% 0 0/.35),0 2px 4px oklch(10% .01 60/.18),0 18px 30px -18px oklch(10% .01 60/.5)}.spec-logo{filter:drop-shadow(0 -1px oklch(0% 0 0/.55));width:auto;height:34px;display:block}.hd-icon{box-sizing:border-box;cursor:pointer;background:linear-gradient(155deg,oklch(100% 0 0) 0%,oklch(96.8% .004 95) 100%);border:2px solid oklch(99.6% .002 95);border-radius:10px;place-items:center;width:46px;height:38px;padding:0;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;display:grid;box-shadow:inset 0 2px 4px oklch(30% .012 85/.22),inset 0 0 0 1px oklch(30% .012 85/.06),inset 0 -1px oklch(100% 0 0/.8),0 1px 1px oklch(0% 0 0/.45),0 6px 10px -3px oklch(0% 0 0/.45),0 16px 26px -8px oklch(0% 0 0/.55)}.hd-icon .screen{border-radius:1.5px;box-shadow:inset 0 0 0 .5px oklch(30% .012 85/.14),0 1px 1px oklch(30% .012 85/.22),0 2px 4px -1px oklch(30% .012 85/.28)}.hd-icon:hover{transform:translateY(-2px);box-shadow:inset 0 2px 4px oklch(30% .012 85/.22),inset 0 0 0 1px oklch(30% .012 85/.06),inset 0 -1px oklch(100% 0 0/.8),0 2px 2px oklch(0% 0 0/.45),0 10px 14px -3px oklch(0% 0 0/.5),0 22px 32px -8px oklch(0% 0 0/.6)}.hd-icon:active{transform:none}.hd-icon:focus-visible{outline:2px solid var(--sage);outline-offset:3px}.card[aria-pressed=true]{box-shadow:inset 0 1px oklch(100% 0 0),0 0 0 1px #4a5d4e24,0 0 7px #4a5d4e2e,0 1px 1px oklch(30% .012 85/.12),0 6px 8px -3px oklch(30% .012 85/.14),0 20px 26px -12px oklch(30% .012 85/.32)}.float{z-index:42;opacity:0;pointer-events:none;align-items:center;gap:8px;transition:opacity .28s,transform .32s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;transform:translateY(10px)scale(.92)}.float[data-shown=true]{opacity:1;pointer-events:auto;transform:none}.float-card{box-sizing:border-box;cursor:grab;touch-action:none;-webkit-backdrop-filter:blur(14px)saturate(1.15);backdrop-filter:blur(14px)saturate(1.15);background:linear-gradient(155deg,oklch(100% 0 0/.4) 0%,oklch(100% 0 0/.08) 60%),oklch(100% 0 0/.26);border:6px solid oklch(99.6% .002 95);border-radius:14px;place-items:center;width:104px;height:86px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;display:grid;position:relative;box-shadow:inset 0 2px 5px oklch(30% .012 85/.24),inset 0 0 0 1px oklch(30% .012 85/.06),inset 0 -1px oklch(100% 0 0/.7),0 0 0 .5px oklch(30% .012 85/.08),0 1px 1px oklch(30% .012 85/.14),0 10px 14px -6px oklch(30% .012 85/.22),0 28px 40px -16px oklch(30% .012 85/.4)}.float[data-dragging=true] .float-card{cursor:grabbing;transform:translateY(-3px)rotate(-1.5deg);box-shadow:inset 0 2px 5px oklch(30% .012 85/.24),inset 0 0 0 1px oklch(30% .012 85/.06),inset 0 -1px oklch(100% 0 0/.7),0 2px 3px oklch(30% .012 85/.12),0 18px 22px -8px oklch(30% .012 85/.24),0 42px 54px -18px oklch(30% .012 85/.42)}.float-ctl{opacity:0;flex-direction:column;gap:6px;transition:opacity .2s,transform .2s cubic-bezier(.2,.8,.2,1);display:flex;transform:translate(-4px)}.float:hover .float-ctl,.float:focus-within .float-ctl{opacity:1;transform:none}.float .ctl{background:linear-gradient(155deg,oklch(100% 0 0) 0%,oklch(97% .003 95) 100%);box-shadow:inset 0 1px oklch(100% 0 0),0 1px 1px oklch(30% .012 85/.16),0 4px 8px -3px oklch(30% .012 85/.26)}.float:before{content:"";width:calc(var(--cw,104px) + 36px);height:calc(var(--ch,86px) + 36px);z-index:-1;filter:blur(10px);opacity:0;pointer-events:none;background:radial-gradient(closest-side,oklch(100% 0 0/.95),oklch(100% 0 0/.55) 55%,oklch(100% 0 0/0));border-radius:30px;transition:opacity .28s,transform .36s cubic-bezier(.2,.8,.2,1);position:absolute;top:-18px;left:-18px;transform:scale(.85)}.float:hover:before,.float[data-dragging=true]:before{opacity:1;transform:none}.float:hover .float-card{transform:translateY(-3px);box-shadow:inset 0 2px 5px oklch(30% .012 85/.24),inset 0 0 0 1px oklch(30% .012 85/.06),inset 0 -1px oklch(100% 0 0/.7),0 0 0 .5px oklch(30% .012 85/.08),0 2px 3px oklch(30% .012 85/.14),0 16px 22px -8px oklch(30% .012 85/.28),0 40px 56px -18px oklch(30% .012 85/.46)}.hd-icon[data-hidden=true]{opacity:0;pointer-events:none}.float[data-docking=true] .float-ctl,.float[data-docking=true]:before{opacity:0}.float-card{padding-top:10px;transition:width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}.float-card .screen,.hd-icon .screen{transition:width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1)}.hd-icon{transition:width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .18s,opacity .22s}.float-size{text-align:center;white-space:nowrap;font:400 8px/1 var(--f-mono);letter-spacing:.06em;color:oklch(40% .01 85/.5);pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;top:7px;left:0;right:0}.float-card>svg{align-self:end;max-height:calc(100% - 10px)}.float-card>.phase-peek{pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:3px;align-self:end;max-width:100%;max-height:calc(100% - 10px)}.tray-wrap{transform:translate(var(--tx,0px), var(--ty,0px)) scale(var(--ts,1));transform-origin:100% 100%}.tray{cursor:grab}.tray-wrap[data-moving=drag] .tray{cursor:grabbing}.tray-wrap[data-moving=drag] .tray,.tray-wrap[data-moving=resize] .tray{-webkit-user-select:none;user-select:none}.card,.ctl{cursor:pointer}.tray-grip{z-index:3;color:oklch(50% .01 85/.7);cursor:nwse-resize;opacity:0;background:0 0;border:0;border-radius:6px;place-items:center;width:14px;height:14px;padding:0;transition:opacity .2s,color .15s,background .15s;display:grid;position:absolute;top:3px;left:3px}.tray-grip svg{width:9px;height:9px;transform:rotate(180deg)}.tray:hover .tray-grip,.tray-grip:focus-visible,.tray-wrap[data-moving=resize] .tray-grip{opacity:1}.tray-grip:hover{color:oklch(30% .01 85)}.tray-grip:focus-visible{outline:2px solid var(--sage);outline-offset:1px}.tray-set{flex-direction:column;gap:17px;display:flex}.tray-cards{gap:18px;display:flex}.tray-hint{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:oklch(45% .01 85/.7);opacity:0;-webkit-user-select:none;user-select:none;padding-left:2px;transition:opacity .22s,transform .22s cubic-bezier(.2,.8,.2,1);transform:translateY(2px)}.tray:hover .tray-hint,.tray:focus-within .tray-hint{opacity:1;transform:none}.tray>.tray-hint{z-index:3;max-width:var(--hint-w,50%);text-overflow:ellipsis;white-space:nowrap;position:absolute;top:25px;left:20px;overflow:hidden}.card[aria-pressed=true]:before{background:linear-gradient(155deg,oklch(97.2% .005 90) 0%,oklch(95% .006 88) 100%);box-shadow:inset 0 3px 6px oklch(30% .012 85/.26),inset 0 1px 2px oklch(30% .012 85/.14),inset 0 0 0 1px oklch(30% .012 85/.07),inset 0 -1px oklch(100% 0 0/.8)}.card[aria-pressed=true] .screen{box-shadow:inset 0 0 0 1px oklch(30% .012 85/.1),0 1px 1px oklch(30% .012 85/.18),0 4px 6px -2px oklch(30% .012 85/.22),0 9px 14px -6px oklch(30% .012 85/.22)}.card:before{transition:background .25s}.tray-wrap{position:relative}.tray{z-index:1}.size-drawer{z-index:0;opacity:0;pointer-events:none;background:linear-gradient(155deg,oklch(100% 0 0/.9) 0%,oklch(100% 0 0/0) 50%),linear-gradient(oklch(99.8% .002 95) 0%,oklch(98.6% .003 95) 100%);border-radius:14px 14px 0 0;align-items:center;gap:8px;margin:0;padding:10px 12px 22px;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s;display:flex;position:absolute;bottom:calc(100% - 14px);right:18px;transform:translateY(100%);box-shadow:inset 0 1px oklch(100% 0 0),0 -1px 1px oklch(30% .012 85/.08),0 -8px 18px -10px oklch(30% .012 85/.22)}.size-drawer[data-open=true]{opacity:1;pointer-events:auto;transform:none}.size-drawer[data-invalid=true]{animation:.3s sd-nudge}@keyframes sd-nudge{25%{translate:-3px}75%{translate:3px}}.sd-field{background:oklch(96% .004 95);border-radius:8px;align-items:center;gap:6px;height:28px;padding:0 8px;display:flex;box-shadow:inset 0 1px 2px oklch(30% .012 85/.14),inset 0 0 0 1px oklch(30% .012 85/.05)}.sd-field input{caret-color:oklch(25% .01 85)}.sd-field span{font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;color:oklch(45% .01 85/.7)}.sd-field input{width:46px;font:400 12px/1 var(--f-mono);color:oklch(25% .01 85);-moz-appearance:textfield;background:0 0;border:0;outline:none;padding:0}.sd-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sd-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sd-x{font:400 11px/1 var(--f-mono);color:oklch(45% .01 85/.6)}.sd-add{margin-left:2px}.ctl[aria-expanded=true]{color:var(--ctl-ink);background:oklch(30% .012 85/.1)}:is(.tray:has(.tray-cards>:nth-child(6):is(:hover,:focus-within)) .tray-sizes span:nth-child(6),.tray:has(.tray-cards>:nth-child(7):is(:hover,:focus-within)) .tray-sizes span:nth-child(7),.tray:has(.tray-cards>:nth-child(8):is(:hover,:focus-within)) .tray-sizes span:nth-child(8)){color:var(--tray-size-hi,oklch(35% .01 85/.9))}.tray-sizes span{flex:none}.dots{border-right:1px solid oklch(30% .012 85/.08);grid-template-columns:repeat(3,12px);gap:5px;margin-right:4px;padding:2px 10px 2px 2px;display:grid}.dots .dot{cursor:pointer;background:var(--dot);border:0;border-radius:50%;width:12px;height:12px;padding:0;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s;box-shadow:inset 0 0 0 .5px oklch(30% .012 85/.22),inset 0 1px 1px oklch(100% 0 0/.35),0 1px 1px oklch(30% .012 85/.18)}.dots .dot:hover{transform:scale(1.18)}.dots .dot[aria-pressed=true]{box-shadow:inset 0 0 0 .5px oklch(30% .012 85/.22),0 0 0 2px oklch(100% 0 0),0 0 6px 2px #4a5d4e59}.dots .dot:focus-visible{outline:2px solid var(--sage);outline-offset:2px}.slot{display:flex;position:relative}.slot:hover .card{transform:translateY(-5px)}.del{z-index:2;opacity:0;width:24px;height:24px;color:var(--ctl-ink,oklch(30% .012 85));background:oklch(100% 0 0/.35);transition:opacity .18s,background .15s,color .15s;position:absolute;top:9px;right:9px;box-shadow:inset 0 0 0 .5px oklch(30% .012 85/.14)}.del svg{width:16px;height:16px}.del:hover{color:var(--ctl-ink,oklch(30% .012 85));background:oklch(100% 0 0/.9);box-shadow:0 1px 2px oklch(30% .012 85/.18)}.slot:hover .del,.del:focus-visible{opacity:1;transform:translateY(-5px)}.float[data-docking=true]{z-index:43}.sketch-well{overflow:hidden}.sketch-sheet{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.sketch-sheet svg{display:block}.tray-sizes input,.tray-sizes .sketch-kind{width:5.5ch;font:inherit;letter-spacing:inherit;color:oklch(35% .01 85/.9);text-align:left;background:0 0;border:0;padding:0}.tray-sizes .sketch-kind{cursor:pointer;width:auto}.tray-sizes .sketch-kind[data-doubt]{color:var(--gold,#9c6730)}.tray-sizes .sketch-repair{width:22px;height:22px;color:var(--gold,#9c6730)}.tray-sizes input:focus{color:oklch(25% .01 85);outline:none}.ctl:disabled{cursor:default;color:var(--ctl-ink)}.ctl:disabled svg{opacity:.3}.ctl:disabled:hover{color:var(--ctl-ink);background:oklch(30% .012 85/.06);box-shadow:inset 0 1px 1px oklch(30% .012 85/.08)}.tray-wrap:not([data-moving=""]) iframe{pointer-events:none}