/* VOICE  calm, quiet, object-like — a clock you leave on all day
   IDEA   each face behaves like a real desk object: flip card, nixie tube, LED alarm, LCD, wristwatch dial
   PICTURE the clock itself fills the whole first screen; controls float and fade away
   COLOUR each face owns its palette; the page below is plain ink on white / night
   TYPE   Inter Tight for UI; Oswald, Big Shoulders, Outfit, Instrument Serif, Noto Sans KR per face */
:root{color-scheme:dark;--bg:#08080a;--ink:#ececef;--mute:#9a9aa3;--line:#1f1f24}
*{box-sizing:border-box;min-width:0}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Inter Tight",system-ui,sans-serif;overflow-x:clip}
body.fs{overflow:hidden}
[hidden]{display:none!important}
#stage{position:relative;height:100svh;min-height:420px;overflow:hidden;background:#000;user-select:none;container:clock/size}
.th{position:absolute;inset:0;display:none;place-items:center;font-variant-numeric:tabular-nums}
.th.on{display:grid}
.th>*{translate:var(--dx,0) var(--dy,0);transition:translate 3s ease}
.nosec .S,.nosec .sg,.nodate .D,.nodate .dd{display:none!important}
.cap{text-align:center;font:300 clamp(15px,2.2vw,28px)/1.3 "Inter Tight";opacity:.6;margin-top:.4em}

/* Minimal */
[data-t=minimal]{background:#000;color:#f4f4f2}
.mn-t{font:200 min(23cqw,44cqh)/1 "Inter Tight";letter-spacing:-.045em;white-space:nowrap}
.mn-t .S{font-size:.2em;font-weight:300;opacity:.45;letter-spacing:0;margin-left:.2em}
.mn-t .AP{font-size:.14em;font-weight:500;opacity:.6;letter-spacing:.02em;margin-left:.3em;vertical-align:.25em}

/* Flip */
[data-t=flip]{background:radial-gradient(ellipse at 50% 40%,#2c2c30,#0a0a0b 70%);color:#ececec}
.flw,.nxw,.alw,.dmw{display:grid;justify-items:center;gap:4cqh}
.fl{display:flex;align-items:center;gap:.08em;font:500 min(16cqw,30cqh)/1 Oswald}
html:not(.nosec) .fl{font-size:min(11cqw,27cqh)}
.fg{display:flex;gap:.045em}
.fc{position:relative;width:.7em;height:1.04em;perspective:3em;filter:drop-shadow(0 .04em .05em rgba(0,0,0,.6))}
.h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#232326;backface-visibility:hidden}
.u{top:0;border-radius:.07em .07em 0 0;transform-origin:50% 100%}
.d{bottom:0;border-radius:0 0 .07em .07em;transform-origin:50% 0;background:#1d1d20;border-top:.012em solid #050505}
.h i{position:absolute;left:0;right:0;height:200%;display:grid;place-items:center;font-style:normal}
.u i{top:0}.d i{bottom:0}
.f{visibility:hidden}.go .f{visibility:visible}
.go .u.f{animation:fu .3s ease-in forwards}
.go .d.f{animation:fd .3s .3s ease-out backwards}
@keyframes fu{to{transform:rotateX(-90deg);filter:brightness(.6)}}
@keyframes fd{from{transform:rotateX(90deg);filter:brightness(1.4)}}
.fcol{display:grid;gap:.2em;padding:0 .06em}.fcol i{width:.09em;height:.09em;border-radius:50%;background:#4a4a50}
.flw .cap{font-family:Oswald;letter-spacing:.06em;opacity:.5;margin:0}

/* Analog */
[data-t=analog]{background:#151517}
.an{width:min(80cqmin,680px);aspect-ratio:1}
.an svg{width:100%;height:100%;overflow:visible}

/* Aurora */
[data-t=aurora]{background:#071022;overflow:hidden}
.au i{position:absolute;width:62cqmax;height:62cqmax;border-radius:50%;filter:blur(70px);opacity:.75;animation:drift 26s ease-in-out infinite alternate}
.au i:nth-child(1){background:#2f6bff;left:-18vmax;top:-22vmax}
.au i:nth-child(2){background:#00c9a7;right:-20vmax;top:6cqmax;animation-delay:-9s}
.au i:nth-child(3){background:#ff6b8b;left:20cqmax;bottom:-34vmax;animation-delay:-17s}
@keyframes drift{50%{transform:translate(9cqmax,-6vmax) scale(1.12)}to{transform:translate(-7vmax,7cqmax) scale(.92)}}
.au-g{position:relative;padding:4cqh 6cqw;border-radius:clamp(20px,3cqw,40px);background:rgba(255,255,255,.08);backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);border:1px solid rgba(255,255,255,.2);color:#fff;text-align:center}
.au-t{font:200 min(17cqw,32cqh)/1 Outfit;white-space:nowrap;letter-spacing:-.02em}
.au-t .S{font-size:.24em;opacity:.6;margin-left:.15em}
.au-g .cap{font-family:Outfit;font-weight:400;opacity:.8}

/* Nixie */
[data-t=nixie]{background:radial-gradient(ellipse at 50% 60%,#22160d,#050302 70%)}
.nx{display:flex;align-items:center;gap:min(1.4cqw,2.4cqh)}
.tb{position:relative;width:min(11cqw,20cqh);height:min(19cqw,34cqh);border-radius:46% 46% 10% 10%/22% 22% 5% 5%;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.13) 28%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.09));border:1px solid rgba(255,190,140,.16);display:grid;place-items:center;font:300 min(14cqw,25cqh)/1 "Big Shoulders Display"}
html:not(.nosec) .tb{width:min(8.6cqw,18cqh);height:min(14.8cqw,31cqh);font-size:min(11cqw,22cqh)}
.tb::before{content:"8";position:absolute;color:rgba(255,150,70,.07)}
.tb b{position:relative;font-weight:300;color:#ffc58a;text-shadow:0 0 .03em #fff4e6,0 0 .12em #ff8a2a,0 0 .4em #ff5a00}
.nd{display:grid;gap:min(3cqw,5cqh)}.nd i{width:min(1.1cqw,1.8cqh);aspect-ratio:1;border-radius:50%;background:#ffb070;box-shadow:0 0 8px #ff6a00}
.nxw .cap{color:#ffb98a;opacity:.55}

/* Words */
[data-t=word]{background:#0c0c0d;color:#fff}
.wg{display:grid;gap:.35em .55em;font:500 min(4.2cqw,5.1cqh)/1 "Inter Tight";text-align:center}
.wg.ko{font:500 min(7.5cqw,8.4cqh)/1 "Noto Sans KR";gap:.45em .6em}
.wg span{color:rgba(255,255,255,.11);transition:color .8s,text-shadow .8s}
.wg span.lit{color:#fff;text-shadow:0 0 .45em rgba(255,255,255,.45)}
.wd{display:flex;justify-content:center;gap:1.2em;margin-top:4cqh}
.wd i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.12)}.wd i.lit{background:#fff;box-shadow:0 0 8px #fff}

/* Swiss */
[data-t=swiss]{background:#f2f2ef;color:#111}
.sw{display:grid;grid-template-columns:auto auto;align-items:end;gap:5cqw}
.sw-t{font:800 min(29cqw,41cqh)/.8 "Inter Tight";letter-spacing:-.065em}
.sw-t span{display:block}
.sw-side{display:grid;gap:10px;padding-bottom:1cqh}
.sw-day{font-weight:600;font-size:clamp(20px,3cqw,42px);line-height:1.1}
.sw-date{font-weight:300;font-size:clamp(16px,2cqw,28px);line-height:1.2}
.sw-bar{width:min(22cqw,260px);height:6px;background:#d8d8d4;margin-top:8px}
.sw-bar i{display:block;height:100%;width:0;background:#e10600;transition:width .3s linear}
.sw-side .AP{font-weight:600;color:#e10600}
@media(max-width:700px){.sw{grid-template-columns:1fr;gap:3cqh}.sw-t{font-size:min(44cqw,32cqh)}.sw-bar{width:60cqw}}

/* Seven-segment (Alarm, LCD) */
.g7,.g7c{overflow:visible;display:block}
.seg{display:flex;align-items:flex-end;gap:min(1cqw,1.6cqh)}
.seg .sg{display:flex;gap:min(.8cqw,1.2cqh);margin-left:min(1cqw,1.6cqh)}
[data-t=alarm]{background:radial-gradient(ellipse at 50% 50%,#1c0605,#050101 70%)}
.al .g7,.al .g7c{height:min(30cqh,15cqw);filter:drop-shadow(0 0 .6cqh rgba(255,40,20,.65))}
.al .sg .g7{height:min(12cqh,6cqw)}
.al rect{fill:rgba(255,40,20,.06)}.al rect.on{fill:#ff3a24}.al circle{fill:#ff3a24}
.al-ind{display:flex;gap:10px;align-items:center;color:#ff3a24;font:600 clamp(13px,1.6cqw,18px) "Inter Tight";letter-spacing:.08em;opacity:.18;justify-self:start}
.al-ind i{width:10px;height:10px;border-radius:50%;background:currentColor}.al-ind.on{opacity:1;text-shadow:0 0 8px #ff2a10}
.alw .cap{color:#ff6a50;opacity:.5}
[data-t=lcd]{background:radial-gradient(ellipse at 50% 30%,#ebe8e1,#c6c1b6)}
.lcdf{padding:min(2.4cqw,3.4cqh);border-radius:min(3.4cqw,34px);background:linear-gradient(#3a3d3b,#1f211f);box-shadow:0 40px 70px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.lcd{padding:min(2cqw,3cqh) min(3cqw,4.4cqh);border-radius:12px;background:linear-gradient(170deg,#b5bfa8,#959f88);box-shadow:inset 0 4px 14px rgba(0,0,0,.38);color:#1c2418}
.lcd-top{display:flex;gap:1.2em;justify-content:space-between;font:500 clamp(14px,2.2cqw,28px)/1 Oswald;letter-spacing:.1em;margin-bottom:.7em}
.lc .g7,.lc .g7c{height:min(25cqh,14cqw)}.lc .sg .g7{height:min(10.5cqh,6cqw)}
.lc rect{fill:rgba(20,30,10,.075)}.lc rect.on{fill:#1c2418}.lc circle{fill:#1c2418}

/* Dots */
[data-t=dots]{background:#05070c;color:#dfe9ff}
.dm{display:grid;gap:calc(var(--d,10px)*.3)}
.dm i{width:var(--d,10px);aspect-ratio:1;border-radius:50%;background:rgba(150,190,255,.07)}
.dm i.on{background:#e4edff;box-shadow:0 0 calc(var(--d,10px)*.7) rgba(140,180,255,.75)}
.dmw .cap{opacity:.45}

/* Sky */
[data-t=sky]{background:#3e8ee0;transition:background 2s}
.sun{position:absolute;width:11cqmin;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#fff6dc;box-shadow:0 0 70px 24px rgba(255,236,180,.45)}
.sun.moon{width:7cqmin;background:#e9edff;box-shadow:0 0 40px 10px rgba(200,210,255,.3)}
.hills{position:absolute;left:0;right:0;bottom:-12px;width:100%;height:34cqh}
.sky-t{position:relative;text-align:center;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25);margin-bottom:6cqh}
.sky-time{font:200 min(18cqw,34cqh)/1 Outfit;white-space:nowrap}
.sky-time .S{font-size:.24em;opacity:.7;margin-left:.15em}.sky-t .cap{opacity:.85;font-family:Outfit}

/* Rings */
[data-t=rings]{background:#0b0b0e;color:#f4f4f6}
.rg{position:relative;width:min(80cqmin,640px);aspect-ratio:1}
.rg svg{width:100%;height:100%}
.rg-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rg-time{font:200 min(10cqmin,80px)/1 "Inter Tight";letter-spacing:-.03em}
.rg-s{font-size:min(2.4cqmin,18px);opacity:.55;margin-top:.6em}

/* Serif */
[data-t=serif]{background:#0f231c;color:#efe8d8}
.sf-t{font:italic 400 min(25cqw,46cqh)/.9 "Instrument Serif";white-space:nowrap}
.sf-t .S{font-size:.25em;margin-left:.2em;opacity:.55}
.sf .cap{font:400 clamp(18px,2.6cqw,34px)/1.3 "Instrument Serif";opacity:.7}

/* Controls */
.zone{position:absolute;top:max(20px,env(safe-area-inset-top));left:22px;z-index:4;font:500 14px "Inter Tight";color:rgba(255,255,255,.7)}
.light .zone{color:rgba(0,0,0,.6)}
.bar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(16,16,18,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);color:#f2f2f2;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none;transition:opacity .5s;z-index:5}
.bar::-webkit-scrollbar{display:none}
.bar button{flex:none;min-height:44px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:inherit;font:500 14px "Inter Tight",system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.bar #bprev,.bar #bnext{width:44px;padding:0;font-size:20px}
.bar #bname{background:rgba(255,255,255,.12);min-width:110px}
.bar button:hover{background:rgba(255,255,255,.1)}
.bar button[aria-pressed=true]{background:#fff;color:#111}
.bar button:focus-visible,.top a:focus-visible,.pan button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sep{flex:none;width:1px;margin:8px 4px;background:rgba(255,255,255,.18)}
.top{position:absolute;top:max(14px,env(safe-area-inset-top));right:18px;z-index:5;transition:opacity .5s}
.top a{display:inline-block;padding:10px 14px;border-radius:999px;background:rgba(16,16,18,.5);color:#f2f2f2;text-decoration:none;font-size:14px}
.idle .bar,.idle .top{opacity:0;pointer-events:none}.idle #stage{cursor:none}
.pan{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.sheet{width:min(600px,100%);max-height:min(660px,86svh);display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;background:rgba(22,22,26,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f2f2f2;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.ph{display:flex;justify-content:space-between;align-items:center}.ph h2{margin:0;font:600 20px "Inter Tight"}
#px{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:inherit;font-size:22px;cursor:pointer}
#pq{width:100%;font:16px "Inter Tight";padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:inherit;outline:none}
#pq:focus{border-color:rgba(255,255,255,.5)}
.pl{flex:1 1 auto;min-height:0;overflow:auto;grid-auto-rows:max-content;display:grid;gap:2px;align-content:start;overscroll-behavior:contain}
.pl button{display:grid;grid-template-columns:1fr auto;gap:0 12px;text-align:left;padding:9px 12px;min-height:48px;border:0;border-radius:12px;background:transparent;color:inherit;font:15px "Inter Tight";cursor:pointer}
.pl button span{grid-column:1;font-size:13px;opacity:.55}.pl button em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;opacity:.7;font-size:13px}
.pl button:hover{background:rgba(255,255,255,.07)}.pl button[aria-pressed=true]{background:rgba(255,255,255,.16)}
.pl.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pl.grid b{font-weight:500;text-align:center}
.pl.grid button{grid-template-columns:1fr;gap:8px;padding:8px}
.pl.grid i{display:grid;place-items:center;height:70px;border-radius:10px;border:1px solid rgba(255,255,255,.1);font:500 18px "Inter Tight";font-style:normal}

/* Page */
.band{padding:clamp(40px,6vw,88px) max(5vw,16px)}
.wrap{max-width:760px;margin:0 auto}
.band h1{font-size:clamp(32px,5vw,50px);line-height:1.05;font-weight:600;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.band h2{font-size:clamp(24px,3vw,32px);line-height:1.15;font-weight:600;margin:56px 0 14px;text-wrap:balance}
.band p,.band li,.band dd{color:var(--mute);font-size:17px}
.lead{font-size:19px!important;color:var(--ink)!important}
.faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:4px 28px;margin:0}
.faces dt{font-weight:600;margin-top:14px}.faces dd{margin:2px 0 0;font-size:16px}
kbd{font:500 13px "Inter Tight";padding:2px 7px;border:1px solid var(--line);border-radius:6px;color:var(--ink)}
details{border-top:1px solid var(--line);padding:14px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:500;font-size:17px}
.ad{margin:48px auto;max-width:728px;min-height:100px;border:1px dashed var(--line);border-radius:8px;display:grid;place-items:center;color:var(--mute);font-size:13px}
footer{border-top:1px solid var(--line);padding:28px max(5vw,16px);color:var(--mute);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}
footer a{color:inherit}
/* Custom face */
[data-t=custom]{background:#0b0b0e;color:var(--cfg,#fff)}
.cu-t{font-family:var(--cff,"Inter Tight");font-weight:var(--cfw,200);font-style:var(--cfs,normal);letter-spacing:var(--cls,-.04em);font-size:min(22vw,42vh);line-height:1;white-space:nowrap;text-align:center}
.cu-t .S{font-size:.22em;opacity:.55;margin-left:.15em;letter-spacing:0}.cu-t .AP{font-size:.15em;opacity:.65;margin-left:.3em;letter-spacing:0}
[data-t=custom] .cap{font-family:var(--cff,"Inter Tight");opacity:.75}
.pl.cz{display:block;overflow:auto}.cz h3{font:600 14px "Inter Tight";opacity:.7;margin:14px 2px 10px}.cz h3:first-child{margin-top:2px}
.swg{display:grid;grid-template-columns:repeat(auto-fill,44px);gap:8px}
.pl .swb{width:44px;height:44px;min-height:0;padding:0;border-radius:12px;border:1px solid rgba(255,255,255,.2);display:block;cursor:pointer}
.pl .swb[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px;background-clip:padding-box}
.swb.pick{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.swb.pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cz .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:rgba(255,255,255,.1);color:inherit;font:500 14px "Inter Tight";cursor:pointer;border:0}
.fng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pl .fng button{display:block;text-align:center;font-size:24px;padding:10px;background:rgba(255,255,255,.06)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#fff;color:#111;padding:10px 18px;border-radius:999px;font:500 14px "Inter Tight",system-ui;z-index:60;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.on{opacity:1}

/* Overlay (OBS) */
.ov,.ov body,.ov #stage,.ov .th{background:transparent!important}
.ov body{overflow:hidden}.ov #stage{height:100vh;min-height:0}
.ov .bar,.ov .top,.ov .zone,.ov .au i,.ov .sun,.ov .hills,.ov #about,.ov footer{display:none!important}
.ov .au-g{background:rgba(0,0,0,.25)}
.ov .cap,.ov .tb b,.ov .mn-t,.ov .cu-t,.ov .sf-t,.ov .sky-t{text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* Pages */
.hd{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px max(5vw,16px);border-bottom:1px solid var(--line)}
.logo{font:600 19px "Inter Tight";letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.hd nav{display:flex;gap:4px;flex-wrap:wrap}.hd nav a{padding:10px 12px;border-radius:10px;color:var(--mute);text-decoration:none;font-size:15px}.hd nav a:hover,.hd nav a[aria-current]{color:var(--ink);background:light-dark(#efefea,#1b1b20)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;margin:28px 0 0}
.facts div{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.facts dt{font-size:13px;color:var(--mute)}.facts dd{margin:4px 0 0;font:600 clamp(16px,4.2vw,20px)/1.25 "Inter Tight";overflow-wrap:anywhere;font-variant-numeric:tabular-nums;color:var(--ink)}
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none}
.cities a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;min-height:48px}
.cities a:hover{background:light-dark(#f1f1ec,#17171b)}
.cities b{font-weight:500}.cities span{font-variant-numeric:tabular-nums;color:var(--mute);white-space:nowrap}
.big .cities a{flex-direction:column;align-items:flex-start;gap:2px}.big .cities span{font:300 34px/1.1 "Inter Tight";color:var(--ink)}.big .cities em{font-style:normal;font-size:13px;color:var(--mute)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;width:100%}
footer .langs{font-size:13px}

/* Stream builder */
.sb{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;max-width:1240px;margin:0 auto}
@media(max-width:860px){.sb{grid-template-columns:1fr}}
.prev{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:conic-gradient(light-dark(#e7e7e2,#26262b) 25%,light-dark(#f7f7f4,#1a1a1e) 0 50%,light-dark(#e7e7e2,#26262b) 0 75%,light-dark(#f7f7f4,#1a1a1e) 0) 0 0/22px 22px}
.prev iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ctl h3{font-size:14px;font-weight:600;color:var(--mute);margin:20px 0 8px}.ctl h3:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 14px "Inter Tight",system-ui;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.urlrow{display:flex;gap:8px;margin-top:8px}
.urlrow input{flex:1;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:light-dark(#fff,#151518);color:var(--ink);font:15px ui-monospace,Menlo,monospace}
.btn{min-height:46px;padding:0 20px;border-radius:12px;border:0;background:var(--ink);color:var(--bg);font:600 15px "Inter Tight",system-ui;cursor:pointer;white-space:nowrap}
.colorin{width:56px;height:40px;border:1px solid var(--line);border-radius:10px;padding:2px;background:transparent}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:baseline}.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:600 14px "Inter Tight"}
.note{font-size:15px!important}

/* Phones & portrait screens */
@media(max-width:700px){
 .bar{left:10px;right:10px;transform:none;max-width:none;flex-wrap:wrap;justify-content:center;border-radius:24px;padding:6px;gap:2px;overflow:visible}
 .bar button{min-height:40px;padding:0 11px;font-size:13px}
 .bar #bprev,.bar #bnext{width:40px}.bar #bname{min-width:0;flex:1 1 auto;max-width:180px}
 .sep{flex-basis:100%;height:0;width:auto;margin:2px 0;background:none}
 .zone{top:max(14px,env(safe-area-inset-top));left:14px;font-size:13px}
 .sheet{max-height:82svh;padding:16px;border-radius:20px}
 .pl.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pl.grid i{height:56px;font-size:16px}
 .band h1{font-size:clamp(28px,8vw,40px)}
 .lead{font-size:17px!important}
}
@container clock (max-aspect-ratio:4/5){
 html:not(.nosec) .fl{font-size:min(14.5cqw,24cqh)}
 html:not(.nosec) .tb{width:12.4cqw;height:21.5cqw;font-size:16cqw}
 .tb{width:20cqw;height:34cqw;font-size:25cqw}
 .al .g7,.al .g7c{height:min(26cqh,21cqw)}.al .sg .g7{height:min(11cqh,9cqw)}
 .lc .g7,.lc .g7c{height:min(22cqh,17cqw)}.lc .sg .g7{height:min(9cqh,7.5cqw)}
 .lcdf{padding:3cqw}.lcd{padding:3cqw 4cqw}
 .wg{font-size:min(6.2cqw,5cqh)}.wg.ko{font-size:min(9.5cqw,7cqh)}
 .mn-t,.au-t,.sky-time{font-size:min(21cqw,30cqh)}
 .au-g{padding:4cqh 5cqw}
 .an,.rg{width:86cqw}
 .cap{font-size:clamp(14px,4cqw,20px)}
}

@media(prefers-reduced-motion:reduce){.au i{animation:none}.go .f{animation:none!important;visibility:hidden}.th>*,.wg span,[data-t=sky]{transition:none}}

/* ===== 카드 미리보기 · 진짜 전체 화면 ===== */
.cardwrap #stage{height:min(72svh,calc((100vw - 2 * max(4vw,16px)) * .5625));min-height:300px;border-radius:22px;box-shadow:0 24px 70px -30px rgba(0,0,0,.55)}
@media(max-width:700px){.cardwrap #stage{height:min(62svh,calc((100vw - 32px) * 1.25));border-radius:18px}}
.cardwrap .bar{position:relative;left:auto;right:auto;bottom:auto;transform:none;margin:14px auto 0;width:fit-content;max-width:100%;background:light-dark(#fff,#18181c);color:var(--ink);border:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;flex-wrap:wrap;justify-content:center;border-radius:20px}
.cardwrap .bar button:hover{background:light-dark(#f0f0ec,#24242a)}
.cardwrap .bar button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.cardwrap .bar #bname{background:light-dark(#efefea,#24242a)}
.cardwrap .bar #bfs{background:var(--ink);color:var(--bg);font-weight:600}
.cardwrap .sep{background:var(--line)}
html.full,html.full body{overflow:hidden;background:#000}
html.full #stage{position:fixed!important;inset:0;width:100vw;height:100vh;height:100dvh!important;min-height:0;border-radius:0!important;box-shadow:none;z-index:200}
html.full .cardwrap .bar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;z-index:210;background:rgba(16,16,18,.62);color:#f2f2f2;border-color:rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html.full .cardwrap .bar button[aria-pressed=true]{background:#fff;color:#111}
html.full .cardwrap .bar #bname{background:rgba(255,255,255,.12)}
html.full .cardwrap .bar #bfs{background:rgba(255,255,255,.9);color:#111}
html.full .cardwrap .bar button:hover{background:rgba(255,255,255,.1)}
html.full .zone{top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left))}
@media(max-width:700px){html.full .cardwrap .bar{left:10px;right:10px;transform:none;width:auto}}
.idle .cardwrap .bar{opacity:0;pointer-events:none}
html:not(.full) .idle #stage{cursor:auto}
.lists h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 0}
.lists h2:first-child{margin-top:8px}
.logo{display:inline-flex;align-items:center;color:var(--ink)}
.logo svg{display:block;height:22px;width:auto}