.showcase{max-width:500px;min-height:100dvh;margin:auto;background:var(--paper);padding:24px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:28px;border-inline:1px solid #aaa}.showcase>header{height:44px}.showcase-title{display:flex;flex-direction:column;gap:16px}.showcase-title h1{font-size:42px;max-width:390px;letter-spacing:-2px}.showcase-title p,.experience p{font-size:15px;line-height:1.55}.experience{display:flex;flex-direction:column;gap:16px;border-top:2px solid #111;padding-top:20px}.experience h2{font-size:27px}.experience .instrument{text-decoration:none;min-height:48px}.experience button:disabled{opacity:1;color:#777;background:#e9e7e1;border-color:#777;cursor:not-allowed}.showcase footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;margin-top:auto}.showcase-back{position:fixed;top:12px;left:max(12px,calc(50vw - 350px));color:#111;text-decoration:none;min-height:44px;display:flex;align-items:center;padding:8px 12px;background:var(--paper);border:1px solid #111;z-index:8;font-size:12px}@media(max-width:700px){.showcase-back{position:static;max-width:500px;margin:auto;border:0;border-bottom:1px solid #aaa;min-height:44px;justify-content:center}.showcase-back+.app{height:calc(100dvh - 44px);min-height:536px}}@media(max-width:360px){.showcase-title h1{font-size:36px}.showcase{padding-inline:16px}}:root{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;color:#111;background:#deddd8;font-synthesis:none;--paper: #f4f2ed;--ink: #111;--lime: #b6ff39}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;padding:8px;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #087db6;outline-offset:-3px}button svg{vertical-align:middle}input{min-height:44px;min-width:0;border:1px solid #111;background:#fff;padding:10px;border-radius:0;color:#111}select{min-height:44px;background:#fff;color:#111}input[type=checkbox]{min-height:22px;width:22px;accent-color:#111}input[type=color]{padding:0;width:80px}h1,h2,p{margin:0}h1{font-size:36px;line-height:1.05;font-weight:900;letter-spacing:-1.8px}h2{font-size:24px;font-weight:800;letter-spacing:-.5px}p{line-height:1.5}code,.tech{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.tech{font-size:11px;letter-spacing:.7px;text-transform:uppercase}.caption{font-size:12px;line-height:1.5;color:#666}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.full{width:100%}.app{max-width:500px;margin:auto;height:100dvh;min-height:580px;background:var(--paper);display:flex;flex-direction:column;position:relative;overflow:hidden;border-inline:1px solid #aaa}.scan-screen{display:flex;flex-direction:column;flex:1;min-height:0}.scan-head{padding:calc(4px + env(safe-area-inset-top)) 12px 6px;background:var(--paper)}.scan-head>.row{height:44px}.segments{display:flex;gap:2px;padding:2px;background:#e5e4df;border-radius:8px;min-width:0}.segments button{flex:1;font-size:11px;letter-spacing:.25px;text-transform:uppercase;border-radius:6px;min-width:0;padding:5px;min-height:44px;font-weight:600}.segments button[aria-pressed=true]{background:#fff}.viewfinder{position:relative;flex:1;min-height:140px;background:#171715;overflow:hidden;touch-action:none;isolation:isolate}.viewfinder video,.viewfinder>.frozen{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.camera-status{position:absolute;top:8px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;background:#111;color:#fff;padding:0 8px;min-height:28px;pointer-events:none}.camera-status button{padding:0 4px;min-height:28px;pointer-events:auto;font-size:11px}.registration{position:absolute;top:45px;color:#fff;filter:drop-shadow(0 0 1px black);pointer-events:none}.registration.left{left:22px}.registration.right{right:22px}.camera-prompt{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(100% - 48px);max-width:330px;background:var(--paper);padding:20px;display:flex;gap:12px;flex-direction:column;align-items:center;text-align:center;font-size:14px}.camera-prompt .instrument{width:100%}.camera-prompt .caption{font-size:11px}.instrument{border:1px solid #111;background:#fff;min-height:44px;padding:10px 12px;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:0}.instrument.primary{background:var(--lime)}.instrument.square{height:54px;width:54px}.scan-bottom{padding:12px 0;background:var(--paper)}.live-palette{display:flex;height:88px}.live-palette>div:not(.empty-palette){flex:1;min-width:0;display:flex;flex-direction:column}.live-palette button{width:100%;padding:0 2px;display:flex;align-items:center;justify-content:center;gap:4px;height:44px}.live-palette button:first-child{flex-direction:column;gap:0;position:relative}.live-palette button:first-child span{height:14px;font-size:12px;line-height:14px}.live-palette code{font-size:clamp(9px,2.7vw,12px);font-weight:600}.empty-palette{width:100%;display:grid;place-items:center;background:repeating-conic-gradient(#d7d6d1 0% 25%,#e6e5e0 0% 50%) 50%/12px 12px;text-align:center}.sample-controls{min-height:44px;padding:0 12px;display:flex;align-items:center;gap:8px}.sample-controls .tech{flex:1;font-size:10px}.sample-controls details{margin-left:auto}.sample-controls code{font-size:12px}.sample-controls .replace{font-size:12px;font-weight:600;margin-left:auto}.sample-chip{width:20px;height:20px;border:1px solid #111}.shutter-row{display:flex;justify-content:space-between;align-items:center;padding:0 34px;gap:12px}.shutter{width:76px;height:76px;border:2px solid #111;border-radius:50%;padding:5px}.shutter span{display:block;border-radius:50%;width:100%;height:100%;background:#111}.bottom-nav{display:flex;border-top:1px solid #111;flex-shrink:0;background:var(--paper)}.bottom-nav button{flex:1;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.bottom-nav span{font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}.bottom-nav button[aria-current=page]{background:var(--lime)}.bottom-nav svg{width:24px;height:24px}.demo-info{min-height:24px;padding:4px 8px calc(4px + env(safe-area-inset-bottom));font:9px ui-monospace,monospace;letter-spacing:1px;border-top:1px solid #d1d0cb;color:#555}.reticle{position:absolute;transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 0 1px black);pointer-events:none}.loupe{position:absolute;width:114px;border:2px solid #111;pointer-events:none;background:var(--paper)}.loupe img{display:block;width:110px;height:110px;image-rendering:pixelated}.loupe>svg{position:absolute;top:43px;left:43px;color:#fff;filter:drop-shadow(0 0 1px black)}.loupe code{display:block;text-align:center;font-size:12px;padding:4px}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px;background:var(--paper);font-size:13px}.workspace{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.workspace-body{display:flex;flex-direction:column;gap:18px;padding:18px}.editorial{display:flex;flex-direction:column;gap:12px;border-bottom:2px solid #111;padding-bottom:14px}.checker{width:48px;height:24px;background:repeating-conic-gradient(currentColor 0% 25%,transparent 0% 50%) 50%/8px 8px;flex-shrink:0}.search{display:flex;border:1px solid #111;background:#fff;align-items:center;gap:8px;padding:0 12px}.search input{border:0;flex:1;width:0}.diary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.diary-grid.list{grid-template-columns:1fr}.diary-entry{padding:0;text-align:left;display:flex;flex-direction:column;gap:8px;min-width:0}.diary-entry>img{width:100%;aspect-ratio:4/5;object-fit:cover}.diary-grid.list img{aspect-ratio:16/9}.diary-entry .strip{height:23px;width:100%;margin-top:-8px}.diary-entry strong{font-size:14px;overflow-wrap:anywhere}.diary-entry .tech{font-size:9px}.strip{display:flex;height:44px;flex-shrink:0}.strip>div{position:relative;flex:1;min-width:0;display:grid;place-items:center}.strip svg{position:absolute;right:5px;top:5px}.strip.labelled{height:66px}.strip span{font:9px ui-monospace,monospace}.empty{padding:50px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}.studio-container{display:flex;flex:1;min-height:0}.studio-container[hidden]{display:none}.studio-sticky{position:sticky;top:0;z-index:2;background:var(--paper);padding:8px 16px;display:flex;flex-direction:column;gap:8px}.studio-sticky .row>div{display:flex}.studio-sticky button{font-size:12px}.study-title{align-items:flex-start}.study-title>div{flex:1;min-width:0}.study-title input{font-size:28px;font-weight:800;letter-spacing:-1px;background:transparent;border:0;padding:0;width:100%;min-height:52px}.study-title img{width:56px;height:68px;object-fit:cover}.design-swatch{border:1px solid #111}.color-edit{height:96px;width:100%;display:flex;align-items:flex-end;justify-content:space-between;padding:12px;position:relative}.color-edit strong{font-size:38px;font-weight:900;letter-spacing:-2px}.color-edit>svg{position:absolute;top:8px;right:8px}.color-edit .tech{font-size:10px}.swatch-actions{background:#fff;padding-inline:4px;gap:0}.swatch-actions>button{font:600 13px ui-monospace,monospace}.swatch-actions>div{display:flex}.role-row{display:flex;align-items:center;gap:12px;text-align:left;padding:0;width:100%;min-height:56px}.role-row>span:first-child{width:56px;height:56px;flex-shrink:0}.role-row>span:last-child:not(:first-child){width:auto}.role-row strong{flex:1;text-transform:capitalize}.role-row code{font-size:12px}.divider{height:12px;border-top:1px solid #111;position:relative;margin-top:6px}.divider:after{content:"";position:absolute;right:0;top:-6px;width:36px;height:12px;background:repeating-conic-gradient(#111 0% 25%,var(--paper) 0% 50%) 50%/6px 6px}.distribution{display:flex;height:48px}.variation{width:100%;padding:8px 0}.variation .strip{height:32px;margin-top:8px}.variation.selected{outline:2px solid #111;outline-offset:4px}.theme-preview{display:block;width:100%;height:auto;background:#fff}.studio-container details{flex:1}.studio-container summary{font-size:13px}.editor-sample{height:130px;width:100%}dialog{width:min(100%,500px);max-width:100%;max-height:92dvh;padding:0;background:var(--paper);color:#111;border:1px solid #111;margin:auto auto 0;overscroll-behavior:contain}dialog::backdrop{background:#0008}.sheet-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--paper);border-bottom:1px solid #111;z-index:3}.sheet-body{padding:20px;display:flex;flex-direction:column;gap:18px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.sheet-body label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.sheet-body label input{max-width:60%;text-align:right}.sheet-body .title-label{display:block;font:11px ui-monospace,monospace}.title-label input{display:block;width:100%;max-width:100%!important;text-align:left!important;font:700 22px system-ui;margin-top:10px}.review-photo{width:100%;height:auto;max-height:55dvh;object-fit:contain}.toast{position:absolute;bottom:95px;left:16px;right:16px;background:var(--lime);padding:14px;border:1px solid #111;font-size:13px;z-index:10;pointer-events:none}details{position:relative}summary{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}details[open]{background:var(--paper);border:1px solid #111;padding:8px}details[open]>button,details[open]>label,details[open]>.caption{display:flex;align-items:center;gap:8px;width:100%;padding:8px;font-size:12px}details[open]>label{justify-content:space-between}.sample-controls details[open]{position:absolute;right:12px;bottom:210px;z-index:4;min-width:210px}.sample-controls details[open] summary{justify-content:flex-end}dialog .instrument{width:100%}[role=alert]{color:#b5221a;font-size:13px}@media(min-width:700px){.app{max-width:460px}dialog{margin:auto;max-height:90dvh}.viewfinder{min-height:240px}}@media(max-height:700px){.camera-prompt{padding:12px;gap:6px}.camera-prompt>svg,.camera-prompt>.caption{display:none}.scan-bottom{padding:6px 0}.shutter{height:64px;width:64px}.live-palette{height:80px}.live-palette button{height:40px}.scan-head{padding-top:0}.demo-info{font-size:8px}.bottom-nav button{height:54px}}@media(prefers-reduced-motion:no-preference){button{transition:opacity .12s}button:active{opacity:.65}}@media(prefers-contrast:more){.caption{color:#333}.segments{border:1px solid #111}}@media(min-width:700px)and (min-height:900px){.app{max-height:900px;margin:20px auto;height:calc(100dvh - 40px);border:1px solid #111}}