:root{--bg:#F3F1EC;--ink:#171613;--muted:#5A574F;--line:#D9D4C8;--soft:#E7E3D9;--on-ink:#F3F1EC;--dot:#C2410C;--edge:rgb(23 22 19 / .1);--f-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--f-title:"Instrument Serif",Georgia,"Times New Roman",serif;--gutter:clamp(16px,4vw,44px);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#10100F;--ink:#F1EFE9;--muted:#A8A499;--line:#34322D;--soft:#1E1D1A;--on-ink:#10100F;--dot:#F08A4B;--edge:rgb(241 239 233 / .1)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(.viewer[open]){overflow:hidden}
body{margin:0;min-block-size:100vh;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
.sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(12px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.glyph{display:grid;place-items:center;inline-size:27px;block-size:27px;min-block-size:44px;color:var(--dot);flex:none}
.glyph svg{inline-size:27px;block-size:27px}
.total{margin:0;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}

.page{padding:0 max(var(--gutter),env(safe-area-inset-right)) max(56px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
.intro{padding-block:clamp(18px,5vw,48px) clamp(20px,4vw,36px)}
h1{margin:0;font:400 clamp(46px,11vw,84px)/.92 var(--f-title);letter-spacing:-.015em}
.lede{margin:12px 0 0;font-size:17px;line-height:1.45;color:var(--muted);text-wrap:pretty}

.controls{display:flex;flex-wrap:wrap;gap:10px 12px;margin-block-end:clamp(20px,3vw,32px)}
:root:not([data-device]) .controls{display:none}
.devices,.looks{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:16px}
.devices{flex:1 1 380px}
.looks{flex:0 1 auto}
.seg{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-inline-size:0;min-block-size:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:16px;font-weight:600;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ico{flex:none;inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg-count{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.seg[aria-pressed="true"] .seg-count{color:var(--on-ink)}
@media (max-width:599px){
  .looks{flex:1 1 100%}
  .devices .seg{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;gap:3px 5px;min-block-size:58px;padding:6px 4px;font-size:15px}
  .devices .seg .ico{grid-column:1 / -1;justify-self:center}
}

.wall{display:none}
:root:not([data-device]) .wall{display:block;margin-block-end:44px}
.wall-head{margin:0 0 14px;font:600 15px/1.3 var(--f-ui);color:var(--muted)}
.wall-count{font-weight:500}
.grid{display:grid;gap:clamp(14px,2vw,22px);margin:0;padding:0;list-style:none}
.grid[data-kind="phone"]{grid-template-columns:repeat(auto-fill,minmax(clamp(132px,30vw,190px),1fr))}
.grid[data-kind="tablet"]{grid-template-columns:repeat(auto-fill,minmax(clamp(132px,28vw,240px),1fr))}
.grid[data-kind="desktop"]{grid-template-columns:repeat(auto-fill,minmax(clamp(256px,44vw,380px),1fr))}
.tile{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.tile:focus-visible{outline:none}
.shot{position:relative;display:block;aspect-ratio:var(--ratio,1);overflow:hidden;background:var(--soft)}
.grid[data-kind="phone"] .shot{border-radius:11cqi}
.grid[data-kind="tablet"] .shot{border-radius:5cqi}
.grid[data-kind="desktop"] .shot{border-radius:2.6cqi}
.shot picture,.shot img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%}
.shot img{object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--edge);pointer-events:none}
.shot.failed{background:repeating-linear-gradient(135deg,var(--soft) 0 10px,var(--bg) 10px 20px)}
.tile:focus-visible .shot{outline:3px solid var(--ink);outline-offset:3px}
.label{display:flex;flex-direction:column;gap:2px;padding-inline:2px}
.name{font-size:16px;font-weight:600;line-height:1.3}
.meta{display:flex;align-items:center;font-size:14px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.pair{display:inline-flex;align-items:center;gap:2px}
.mini{inline-size:14px;block-size:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini + .mini{margin-inline-end:5px}
.empty{margin:24px 0;font-size:17px;color:var(--muted)}
@media (hover:hover){.tile:hover .shot{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgb(0 0 0 / .5)}}

.viewer{position:fixed;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:0;border:0;background:#0D0D0C;color:#F5F3ED;overflow:hidden}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.viewer::backdrop{background:#0D0D0C}
.viewer :focus-visible{outline-color:#F5F3ED}
.v-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.v-glow img{position:absolute;inset:-15%;inline-size:130%;block-size:130%;object-fit:cover;filter:blur(60px) saturate(1.3);opacity:.5}
.v-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgb(13 13 12 / .55),rgb(13 13 12 / .25) 35%,rgb(13 13 12 / .8) 72%,rgb(13 13 12 / .92))}
.v-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}
.v-count{margin:0;font-size:15px;color:#DEDAD1;font-variant-numeric:tabular-nums}
.v-btn{flex:none;display:grid;place-items:center;inline-size:48px;block-size:48px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255 / .14);color:#F5F3ED;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v-btn svg{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-stage{position:relative;min-block-size:0;container-type:size}
.frame{--frame:.4603;position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:min(calc(100cqi - 40px),calc((100cqb - 28px) * var(--frame)));aspect-ratio:var(--frame);translate:-50% -50%;overflow:hidden;background:#1A1A18 center/cover no-repeat;container-type:inline-size}
.frame[data-kind="phone"]{--frame:.4603;border-radius:12.8% / 5.9%;box-shadow:0 0 0 5px #070707,0 0 0 6.5px #3C3B37,0 40px 80px -30px rgb(0 0 0 / .8)}
.frame[data-kind="tablet"]{--frame:.75;border-radius:5% / 3.75%;box-shadow:0 0 0 8px #070707,0 0 0 9.5px #3C3B37,0 40px 80px -30px rgb(0 0 0 / .8)}
.frame[data-kind="desktop"]{--frame:1.6;border-radius:1.6% / 2.56%;box-shadow:0 0 0 7px #070707,0 0 0 8.5px #3C3B37,0 40px 80px -30px rgb(0 0 0 / .8)}
.frame[data-kind="phone"]::before{content:"";position:absolute;inset-block-start:2.3%;inset-inline-start:50%;z-index:3;inline-size:30%;block-size:3.3%;translate:-50% 0;border-radius:999px;background:#050505}
.v-shot{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding-block-start:15%;color:#FFFFFF;text-shadow:0 1px 14px rgb(0 0 0 / .28);pointer-events:none}
.frame[data-kind="tablet"] .lock{padding-block-start:9%}
.lock-date{font:600 5.2cqi/1.2 ui-rounded,-apple-system,system-ui,sans-serif}
.lock-time{font:700 23cqi/1 ui-rounded,-apple-system,system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.frame[data-kind="tablet"] .lock-date{font-size:3.4cqi}
.frame[data-kind="tablet"] .lock-time{font-size:15cqi}
.desk{position:absolute;inset:0;z-index:2;pointer-events:none}
.menubar{position:absolute;inset:0 0 auto;block-size:3.3%;background:rgb(255 255 255 / .3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dock{position:absolute;inset-block-end:2.6%;inset-inline-start:50%;inline-size:44%;block-size:7.4%;translate:-50% 0;border:1px solid rgb(255 255 255 / .4);border-radius:1.6cqi;background:rgb(255 255 255 / .24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.frame[data-kind="desktop"] .lock,.frame:not([data-kind="desktop"]) .desk,.viewer[data-overlay="off"] .lock,.viewer[data-overlay="off"] .desk{display:none}
.v-panel{position:relative;display:grid;gap:12px;inline-size:min(100%,780px);margin-inline:auto;padding:6px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.v-name{margin:0;font:400 clamp(28px,6vw,36px)/1.05 var(--f-title);color:#F7F5EF}
.v-meta{margin:-6px 0 0;font-size:15px;color:#D2CEC4;font-variant-numeric:tabular-nums}
.v-options{display:flex;flex-wrap:wrap;gap:8px}
.v-looks{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgb(255 255 255 / .12)}
.v-seg{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#F5F3ED;font-size:15px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v-seg svg{flex:none;inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v-seg[aria-pressed="true"]{background:#F5F3ED;color:#161512}
.v-overlay{min-block-size:52px;border-radius:14px;background:rgb(255 255 255 / .12)}
.viewer[data-kind="desktop"] .v-overlay .for-lock,.viewer:not([data-kind="desktop"]) .v-overlay .for-desk{display:none}
.v-overlay[aria-pressed="true"]{background:#F5F3ED}
.v-actions{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px}
.v-save{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:52px;padding:0 18px;border-radius:999px;background:#F5F3ED;color:#161512;font-size:17px;font-weight:650;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.v-save svg{flex:none;inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-save:focus-visible{outline-color:#F5F3ED}
.v-size{font-weight:500;color:#57544C;font-variant-numeric:tabular-nums}
.v-hint{margin:0;font-size:14px;line-height:1.45;color:#C5C1B7;text-align:center}

@media (prefers-reduced-motion:no-preference){
  .shot{transition:transform .25s ease,box-shadow .25s ease}
  .seg,.v-seg,.v-btn{transition:background-color .15s ease,color .15s ease}
  .viewer[open]{animation:v-in .22s ease-out}
  .viewer[open] .frame{animation:v-rise .28s cubic-bezier(.2,.8,.2,1)}
}
@keyframes v-in{from{opacity:0}to{opacity:1}}
@keyframes v-rise{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@media (hover:hover){
  .seg:not([aria-pressed="true"]):hover{background:var(--soft)}
  .v-btn:hover,.v-seg:not([aria-pressed="true"]):hover{background:rgb(255 255 255 / .22)}
  .v-save:hover{background:#FFFFFF}
}