.canvas-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:var(--mono-size);letter-spacing:var(--mono-track);text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease,scale .16s var(--ease-out);background:0 0;align-items: center;gap:7px;margin-left:8px;padding:5px 11px 5px 9px}.canvas-toggle:active{scale:var(--press,.97)}.canvas-toggle[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#f8faff}.canvas-dot{background:var(--dim-2);transition:background-color .16s ease,box-shadow .2s var(--ease-out);border-radius:50%;flex:none;width:6px;height:6px}.canvas-toggle[aria-pressed=true] .canvas-dot{background:#f8faff;box-shadow:0 0 0 3px #f8faff4d}@media (hover:hover) and (pointer:fine){.canvas-toggle:hover{color:var(--text);border-color:var(--dim-2)}.canvas-toggle[aria-pressed=true]:hover{background:var(--brand-deep)}}@media (hover:none),(pointer:coarse){.canvas-toggle{display:none}}.dl-canvas{position:fixed;z-index:1000;pointer-events:none;opacity:0;transition:opacity .14s var(--ease-out);contain:layout paint style;inset:0}.dl-canvas[data-shown="1"]{opacity:1}[data-canvas=live],[data-canvas=live] a,[data-canvas=live] button,[data-canvas=live] code{cursor:crosshair}[data-canvas=live] .canvas-toggle{cursor:pointer}.dl-box{position:absolute;border:1px solid var(--brand);transition:translate .15s var(--ease-in-out),width .15s var(--ease-in-out),height .15s var(--ease-in-out),background-color .15s ease,box-shadow .16s var(--ease-out);will-change:translate,width,height;background:#4353ff0f;border-radius:2px;width:0;height:0;top:0;left:0;translate:0}.dl-canvas[data-locked="1"] .dl-box{background:#4353ff1a;box-shadow:0 0 0 4px #4353ff1f}.dl-h{position:absolute;border:1px solid var(--brand);background:var(--panel);opacity:0;transition:opacity .12s var(--ease-out),scale .12s var(--ease-out);border-radius:1px;width:5px;height:5px;scale:.5}.dl-h-tl{top:-3px;left:-3px}.dl-h-tr{top:-3px;right:-3px}.dl-h-bl{bottom:-3px;left:-3px}.dl-h-br{bottom:-3px;right:-3px}.dl-canvas[data-locked="1"] .dl-h{opacity:1;scale:1}.dl-canvas[data-locked="1"] .dl-h-tr{transition-delay:25ms}.dl-canvas[data-locked="1"] .dl-h-br{transition-delay:50ms}.dl-canvas[data-locked="1"] .dl-h-bl{transition-delay:75ms}.dl-chip{position:absolute;border-radius:var(--r-xs);font-family:var(--font-mono);letter-spacing:0;white-space:nowrap;color:#f8faff;opacity:0;transition:opacity .13s var(--ease-out),transform .13s var(--ease-out),translate .15s var(--ease-in-out);padding:3px 7px;font-size:11px;line-height:1.35;top:0;left:0;transform:translateY(3px)}.dl-canvas[data-shown="1"] .dl-chip{opacity:1;transform:none}.dl-tag{background:var(--brand)}.dl-dim{background:var(--text);font-variant-numeric:tabular-nums}.dl-props{position:absolute;border-radius:var(--r-sm);background:var(--panel);box-shadow:0 0 0 1px var(--line),0 18px 40px -20px #17181f73;opacity:0;transform-origin:var(--dl-origin,top left);transition:opacity .11s ease,transform .11s var(--ease-out),translate .15s var(--ease-in-out);width:210px;padding:11px 13px 12px;top:0;left:0;transform:scale(.96)translateY(4px)}.dl-canvas[data-locked="1"] .dl-props{opacity:1;transition-duration:.18s,.18s,.15s;transform:none}.dl-canvas[data-tracking="1"] .dl-box{transition:background-color .15s ease,box-shadow .16s var(--ease-out)}.dl-canvas[data-tracking="1"] .dl-chip{transition:opacity .13s var(--ease-out),transform .13s var(--ease-out)}.dl-canvas[data-tracking="1"] .dl-props{transition:opacity .11s ease,transform .11s var(--ease-out)}.dl-props-head{display:block;font-family:var(--font-mono);font-size:var(--mono-size);letter-spacing:var(--mono-track);text-transform:uppercase;color:var(--dim-2);margin:0 0 8px}.dl-row{display:flex;justify-content:space-between;align-items: center;gap:12px;padding-block-start:4px;padding-block-end:4px;font-size:12px;line-height:1.4}.dl-row+.dl-row{border-top:1px solid var(--px-faint)}.dl-row span{color:var(--dim-2);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;font-size:10px}.dl-row b{color:var(--text);font-weight:500;font-family:var(--font-mono);letter-spacing:0;text-align:right;font-size:11px}.dl-sw{display:inline-block;border:1px solid var(--line);vertical-align:-1px;border-radius:2px;width:9px;height:9px;margin-right:5px}.dl-hint{display:block;border-top:1px solid var(--px-faint);font-family:var(--font-mono);letter-spacing:.04em;color:var(--dim-2);margin-top:9px;padding-top:8px;font-size:10px}@media (hover:hover) and (pointer:fine){.shot:not(.demo-shot) .shot-frame{transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}.shot:not(.demo-shot):hover .shot-frame{box-shadow:0 0 0 1px var(--line),0 30px 62px -30px #17181f57;transform:translateY(-3px)}.specs>div:before{transform-origin:left center;transition:transform .26s var(--ease-out);width:120px;transform:scaleX(.3333)}.specs>div:hover:before{transform:scaleX(1)}.specs dt{perspective:620px}.spec-glyph{transition:transform .28s var(--ease-out);transform-origin:50% 60%}.specs>div:hover .spec-glyph{transform:rotateX(16deg)rotateY(-18deg)translateZ(8px)scale(1.05)}.tints .sw{transition:opacity .2s ease,transform .2s var(--ease-out)}.tints:hover .sw{opacity:.42}.tints .sw:hover{opacity:1;transform:translateY(-4px)}.tints:has(.sw:last-child:hover) .sw:not(:last-child){opacity:.24}.hex{transition:color .2s}.sw:hover .hex{color:var(--text)}.sw:hover .hex.on{color:var(--brand)}.tour>article{position:relative}.tour>article:after{content:"";position:absolute;background:var(--brand);clip-path:inset(0 100% 0 0);transition:clip-path .34s var(--ease-out);pointer-events:none;height:1px;top:-1px;left:0;right:0}.tour>article:hover:after{clip-path:inset(0 0 0 0)}.tour-where:before{transition:transform .22s var(--ease-out)}.tour>article:hover .tour-where:before{transform:scale(2)}.steps .dial{transition:transform .24s var(--ease-out)}.steps li:hover .dial{transform:scale(1.05)}.steps .arc{transition:stroke-opacity .24s var(--ease-out)}.steps li:hover .arc{stroke-opacity:1}.steps b{transition:color .2s}.btn.primary{transition-property:background-color,color,transform,translate}.btn.primary:hover{translate:0 -1px}.colophon-meta dt{transition:color .2s}.colophon-meta>div:hover dt{color:var(--text)}}@media (prefers-reduced-motion:reduce){.dl-box,.dl-chip,.dl-props{transition-property:opacity,background-color;transition-duration:.12s}.dl-props{transform:none}.dl-h{transition:opacity .12s;scale:1}.shot:not(.demo-shot):hover .shot-frame,.tints .sw:hover,.steps li:hover .dial{transform:none}.btn.primary:hover{translate:none}.specs>div:hover .spec-glyph,.tour>article:hover .tour-where:before{transform:none}.specs>div:before,.tour>article:after{transition:none}}