/* ===================================================================
   TILDOSH v17 · RANG TIZIMI
   Kechki (Night) — asosiy. Kunduzgi (Day) — dars uchun.
   Galereya sahnalari doim Night sahnada ("stage") koʻrsatiladi.
   Barcha matn juftliklari WCAG AA (4.5:1), interfeys chegaralari 3:1.
   Tokenlar @property bilan roʻyxatdan oʻtgan: mavzu almashganda silliq oʻtadi.
   =================================================================== */
@property --bg{syntax:'<color>';inherits:true;initial-value:#0B0C11}
@property --lit{syntax:'<color>';inherits:true;initial-value:#171A25}
@property --ink{syntax:'<color>';inherits:true;initial-value:#ECEEF5}
@property --say{syntax:'<color>';inherits:true;initial-value:#F3E9D6}
@property --mut{syntax:'<color>';inherits:true;initial-value:#9AA2B6}
@property --line{syntax:'<color>';inherits:true;initial-value:#262B38}
@property --line2{syntax:'<color>';inherits:true;initial-value:#566078}
@property --card{syntax:'<color>';inherits:true;initial-value:rgba(22,26,37,.72)}
@property --amb{syntax:'<color>';inherits:true;initial-value:#F4B455}
@property --amb-ink{syntax:'<color>';inherits:true;initial-value:#F4B455}
@property --ind{syntax:'<color>';inherits:true;initial-value:#A5ADFF}
@property --red{syntax:'<color>';inherits:true;initial-value:#F28B80}
@property --ok{syntax:'<color>';inherits:true;initial-value:#6FD3A0}
@property --p1{syntax:'<color>';inherits:true;initial-value:#232838}
@property --p2{syntax:'<color>';inherits:true;initial-value:#343B52}
@property --sh{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,.55)}
@property --glass-a{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.14)}
@property --glass-b{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.04)}
@property --glass-line{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.22)}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
 --e-in:cubic-bezier(.05,.7,.1,1);--e-out:cubic-bezier(.3,0,.8,.15);--e-spring:cubic-bezier(.2,.9,.25,1.08)}
:root,:root[data-theme="dark"]{color-scheme:dark;
 --bg:#0B0C11;--lit:#171A25;--ink:#ECEEF5;--say:#F3E9D6;--mut:#9AA2B6;--line:#262B38;--line2:#566078;--card:rgba(22,26,37,.72);
 --amb:#F4B455;--amb-ink:#F4B455;--ind:#A5ADFF;--red:#F28B80;--ok:#6FD3A0;--p1:#232838;--p2:#343B52;
 --sh:rgba(0,0,0,.55);--glass-a:rgba(255,255,255,.14);--glass-b:rgba(255,255,255,.04);--glass-line:rgba(255,255,255,.22)}
:root[data-theme="light"]{color-scheme:light;
 --bg:#F2F4F8;--lit:#FFFFFF;--ink:#171B2A;--say:#171B2A;--mut:#566074;--line:#D5DAE5;--line2:#74809A;--card:rgba(255,255,255,.78);
 --amb:#B86F00;--amb-ink:#8F5200;--ind:#4651C9;--red:#C0392B;--ok:#1B7F4C;--p1:#E2E7F1;--p2:#C6CEDF;
 --sh:rgba(27,32,48,.28);--glass-a:rgba(255,255,255,.92);--glass-b:rgba(255,255,255,.62);--glass-line:rgba(23,27,42,.12)}
:root{transition:--bg .6s ease,--lit .6s ease,--ink .6s ease,--say .6s ease,--mut .6s ease,--line .6s ease,--line2 .6s ease,--card .6s ease,--amb .6s ease,--amb-ink .6s ease,--ind .6s ease,--red .6s ease,--ok .6s ease,--p1 .6s ease,--p2 .6s ease,--sh .6s ease,--glass-a .6s ease,--glass-b .6s ease,--glass-line .6s ease}
/* MUHIM: html ga fon bermang. body foni viewportga oʻtmasa, #dr (z-index:-1) tomchilari fon ostida qolib koʻrinmaydi */
body{background:radial-gradient(62% 52% at 50% 42%,color-mix(in srgb,var(--lit),rgb(var(--orb,244 180 85)) var(--tw,6%)),var(--bg) 80%);color:var(--ink);font-family:'Public Sans',system-ui,sans-serif;overflow:hidden}
#g,#c{transition:filter .6s ease}
:root[data-theme="light"] #g,:root[data-theme="light"] #c{filter:brightness(1.08) saturate(1.26) contrast(1.03)}


html,body{height:100%;margin:0}
canvas{position:fixed;inset:0}
.chips{position:fixed;left:0;right:0;top:calc(10px + env(safe-area-inset-top,0px));display:flex;gap:6px;padding:0 12px;overflow-x:auto;justify-content:safe center;scrollbar-width:none}
.c{font:500 12px 'Public Sans',sans-serif;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;white-space:nowrap}
.c.on{color:var(--ink);border-color:var(--ind)}
.c:focus-visible,#go:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
#cards{position:fixed;z-index:4;left:0;right:0;top:150px;bottom:176px;display:flex;align-items:center;justify-content:center;pointer-events:none}
#cards{transition:opacity .28s}#cards.off{opacity:0}
.stg{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap;max-width:min(940px,92vw)}
@keyframes in{to{opacity:1;transform:none}}
.col{display:flex;flex-direction:column;align-items:center;gap:18px}
.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.tile,.bub,.opt,.inp{background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(30,40,90,.45)}
.tile{font:600 clamp(24px,5vw,38px)/1 Fraunces,Georgia,serif;padding:14px 24px;border-radius:16px}
.tile.hot,.opt.sel{border-color:var(--amb);box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 20%,transparent)}
.bub{font:500 clamp(21px,4.2vw,32px)/1.35 Fraunces,Georgia,serif;padding:20px 28px;border-radius:26px 26px 26px 8px;text-align:left}
.bub small{font:400 14px 'Public Sans',sans-serif;color:var(--mut)}
.opt{min-width:132px;padding:16px 22px;border-radius:18px}
.opt b{display:block;font:600 21px Fraunces,Georgia,serif}
.opt small{color:var(--mut);font-size:13px}
.pill{padding:7px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);font:600 14px 'Public Sans',sans-serif;color:var(--mut)}
.inp{min-width:min(400px,78vw);padding:16px 22px;border-radius:14px;border-bottom:2px solid var(--ind);color:var(--mut);font:500 20px Fraunces,Georgia,serif}
.fg{margin:0;text-align:center}.fg svg{height:clamp(120px,22vh,170px)}
.fg figcaption{font-size:13px;color:var(--mut);margin-top:4px}
.pl{height:clamp(110px,20vh,150px)}.pl .a{fill:var(--p1)}.pl .b{fill:var(--p2)}.pl .c{fill:var(--amb)}
.ar{width:46px;color:var(--mut)}s{text-decoration-color:var(--red)}
.sw{transition:opacity .25s}.stg.sync .sw{opacity:.28}.stg.sync .sw.on{opacity:1}
.sw.cur{text-decoration:underline;text-decoration-color:var(--amb);text-decoration-thickness:3px;text-underline-offset:6px}
@keyframes wv{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#tr span.on{animation:none}.card{transition:opacity .2s}}

:root{--e-in:cubic-bezier(.05,.7,.1,1);--e-out:cubic-bezier(.3,0,.8,.15)}
#cards{transition:opacity .2s var(--e-out)}
.bd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amb);margin-right:9px;vertical-align:middle;animation:bd 4s ease-in-out infinite}
@keyframes bd{50%{transform:scale(1.8);opacity:.4}}
.mg,.pc{pointer-events:auto}
.slots,.tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sl{min-width:96px;min-height:68px;border-radius:16px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .3s,box-shadow .3s}
.mt,.pc{cursor:pointer}.mt:focus-visible,.pc:focus-visible{outline:2px solid var(--ind);outline-offset:3px}
.mg.ok .sl{border:1.5px solid var(--amb);box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 20%,transparent)}
.mh{color:var(--mut);font-size:13px;transition:opacity .4s}.mg.ok .mh{opacity:0}
.pc{rotate:var(--r,0deg);transition:rotate .4s var(--e-in),translate .4s var(--e-in);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:clamp(18px,3.4vw,26px);padding:16px 20px}
.pc:hover{rotate:0deg;translate:0 -5px}
.pc .u{display:none;font:500 15px/1.35 'Public Sans',sans-serif;color:var(--mut);max-width:150px}
.pc.fl .e{display:none}.pc.fl .u{display:block}
.dots{display:flex;gap:5px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--amb)}
.pl .ly{transition:transform .5s var(--e-in)}
.pl .wl{animation:wl 8s ease-in-out infinite}@keyframes wl{0%,35%,100%{fill:var(--p2)}50%,80%{fill:var(--amb)}}
.pl .pu{transform-box:fill-box;transform-origin:center;animation:pu 6s ease-in-out infinite}@keyframes pu{50%{transform:scale(1.1)}}
.pl .wk{animation:wk 16s linear infinite}@keyframes wk{from{transform:translateX(-20px)}to{transform:translateX(220px)}}
.sum{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px 30px;max-width:min(440px,86vw);text-align:left;box-shadow:0 18px 40px -26px rgba(30,40,90,.45)}
.sum h3{font:600 15px 'Public Sans',sans-serif;color:var(--mut);margin:0 0 14px}
.sum ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.sum li{font:500 clamp(18px,3.6vw,22px)/1.3 Fraunces,Georgia,serif}
.sum li small{display:block;font:400 13px 'Public Sans',sans-serif;color:var(--mut)}
.sum p{margin:0 0 12px;font:400 14px/1.5 'Public Sans',sans-serif;color:var(--mut)}
.moons{display:flex;gap:8px;margin-bottom:8px}.moons i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line)}.moons i.on{background:var(--amb);border-color:var(--amb)}.moons i.td{outline:1.5px solid var(--ind);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.stg>*{animation-duration:.01s}.pl .wl,.pl .pu,.pl .wk,.bd{animation:none}.pc{transition:none}}
.chips[hidden]{display:none}
#cards{bottom:calc(130px + env(safe-area-inset-bottom,0px))}
.nav .c{min-width:36px;font-size:15px;text-align:center}

:root[data-theme="light"] .cap{text-shadow:none}
.cap{font:500 clamp(34px,7.4vw,68px)/1 'Public Sans',sans-serif;letter-spacing:.04em;color:var(--ink);text-shadow:0 0 28px rgba(255,170,80,.55);text-align:center}
.cap.sm{font-size:clamp(24px,5vw,42px);letter-spacing:.01em}.cap b{color:var(--amb);font-weight:600}
.fq{display:grid;gap:16px}.fq div{display:grid;grid-template-columns:clamp(100px,24vw,132px) clamp(120px,30vw,200px);align-items:center;gap:14px;font:600 14px/1 'Public Sans',sans-serif;letter-spacing:.12em;color:var(--mut)}
.fq i{height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.fq i::after{content:'';position:absolute;inset:0;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#FF8A4C,var(--amb));transform-origin:left;animation:gr 1.2s var(--e-in) both}
.fq .hi{color:var(--ink);text-shadow:0 0 18px rgba(255,170,80,.7)}@keyframes gr{from{transform:scaleX(0)}}
.hv{position:relative;padding:26px 34px;min-width:clamp(120px,26vw,220px);text-align:center;font:500 clamp(16px,3.4vw,24px)/1.3 'Public Sans',sans-serif}
.hv b{display:block;margin-top:6px;font:600 clamp(28px,6vw,46px)/1 'Public Sans',sans-serif}
.hv.l{border-radius:120px 14px 14px 120px;background:linear-gradient(135deg,#FF9A5A,#E85D4A);color:#2A1408;box-shadow:0 0 60px -10px rgba(255,130,60,.7)}
.hv.r{border-radius:14px 120px 120px 14px;background:linear-gradient(135deg,#F6E6B8,#D9C48A);color:#2A2210;opacity:.6}
.hv u{text-decoration:none;position:absolute;left:-24px;top:calc(6% + var(--i)*11%);font:600 15px 'IBM Plex Mono',monospace;color:var(--amb);opacity:0;animation:fly 2.6s calc(var(--i)*.28s) infinite}
@keyframes fly{0%{opacity:0;transform:translateX(-90px)}25%{opacity:1}100%{opacity:0;transform:translateX(70px)}}
.dir{position:relative;display:flex;align-items:center;gap:clamp(40px,14vw,170px);padding:34px 24px}
.dir::before{content:'';position:absolute;inset:auto -10% -10px -10%;height:70%;background:repeating-linear-gradient(90deg,rgba(255,180,94,.14) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(255,180,94,.14) 0 1px,transparent 1px 34px);transform:perspective(380px) rotateX(58deg);-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.dir>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font:500 clamp(15px,3vw,20px) 'Public Sans',sans-serif;color:var(--mut);opacity:.5}
.dir .hot{opacity:1;color:var(--ink);animation:pa 1.8s ease-in-out infinite}@keyframes pa{50%{transform:translateX(-6px)}}
.dir svg{width:clamp(70px,14vw,110px);fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.dir .hot svg{stroke:var(--amb);filter:drop-shadow(0 0 12px var(--amb))}
.clk{width:clamp(130px,24vh,190px);overflow:visible;filter:drop-shadow(0 0 18px rgba(255,170,80,.55))}
.clk circle,.clk line{stroke:var(--amb);fill:none;stroke-linecap:round}.clk .dt{fill:var(--amb)}
.clk .h,.clk .m{transform-origin:60px 60px;animation:hh 2.4s var(--e-in) both}.clk .m{animation-name:mm}
@keyframes hh{from{transform:rotate(-40deg)}to{transform:rotate(210deg)}}@keyframes mm{from{transform:rotate(500deg)}to{transform:rotate(0)}}
.cubes{display:grid;gap:8px;justify-items:center}.cubes>div{display:flex;gap:8px}
.cb{width:clamp(44px,9vw,64px);aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font:600 clamp(20px,4vw,30px) 'Public Sans',sans-serif;font-style:normal;color:var(--ink);background:linear-gradient(145deg,rgba(255,190,120,.34),rgba(255,120,60,.12));border:1px solid rgba(255,200,140,.3);box-shadow:0 0 22px -4px rgba(255,150,70,.5),inset 0 1px 0 rgba(255,255,255,.25);animation:dp .7s var(--d) cubic-bezier(.3,1.5,.5,1) both}
@keyframes dp{from{opacity:0;transform:translateY(-160px) rotate(-10deg)}}
.tbl{height:clamp(200px,36vh,300px);overflow:visible}
@media (prefers-reduced-motion:reduce){.hv u,.dir .hot,.clk .h,.clk .m,.cb,.fq i::after{animation:none}}

.spell{position:relative;display:flex;gap:clamp(8px,2vw,18px);padding:36px 44px}
.spell::before{content:'';position:absolute;inset:8px 0 -8px;border:1px solid rgba(255,180,94,.18);border-radius:50%}
.lt{position:relative;font:600 clamp(40px,9vw,76px)/1 'Public Sans',sans-serif;font-style:normal;color:rgba(247,232,207,.2);translate:0 var(--y);transition:color .3s,text-shadow .3s,scale .35s var(--e-in)}
.lt.lit{color:var(--ink);text-shadow:0 0 26px rgba(255,170,80,.8)}.lt.now{scale:1.22;color:var(--amb)}
.lt.now::after{content:'';position:absolute;inset:-6px -14px;border-radius:50%;border:1.5px solid var(--amb);animation:rp .9s ease-out forwards}
@keyframes rp{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
.vc{position:relative;display:flex;align-items:flex-start;gap:clamp(20px,6vw,70px);padding:24px 34px}
.vc::before{content:'';position:absolute;inset:14px 0 -6px;border:1px dashed rgba(255,180,94,.2);border-radius:50%}
.vi{position:relative;translate:0 var(--y);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mut);opacity:.5;font:500 clamp(15px,3vw,20px) 'Public Sans',sans-serif;transition:opacity .3s,color .3s,scale .45s var(--e-in),filter .3s}
.vi svg{width:clamp(64px,13vw,96px);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vi.lit{opacity:1;color:var(--amb);filter:drop-shadow(0 0 12px rgba(255,160,70,.6))}.vi.now{scale:1.18;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.lt.now::after{animation:none}}

.gl,.u-card{padding:22px 26px;border-radius:26px;background:rgba(40,32,26,.55);backdrop-filter:blur(18px);border:1px solid rgba(255,200,140,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px -34px rgba(255,150,60,.4)}
.gl h4,.u-card h4{margin:0 0 4px;font:600 13px 'Public Sans',sans-serif;letter-spacing:.14em;color:var(--mut)}.gl>p,.u-card>p{margin:0 0 10px;font-size:15px;color:var(--mut)}
.gr{display:flex;align-items:center;gap:14px;min-width:min(380px,76vw);padding:11px 14px;border-radius:12px;font:500 clamp(20px,4vw,28px)/1.1 'Public Sans',sans-serif;color:var(--mut);transition:background .3s,color .3s}
.gr b{width:1.3em;font-weight:500;opacity:.55}.gr svg{margin-left:auto;width:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gr.lit{color:var(--ink)}.gr.now{background:rgba(255,180,94,.14);box-shadow:inset 0 0 0 1px rgba(255,180,94,.35)}.gr.now svg{color:var(--amb)}
.mxs{display:block;width:clamp(260px,46vw,400px);overflow:visible}
.mxs path,.mxs rect{stroke-linecap:round;stroke-linejoin:round}.mxs .cv{fill:none;stroke:var(--mut);stroke-width:2;opacity:.7}
.mxs .tt{fill:rgba(247,232,207,.88)}.mxs .mp{fill:rgba(255,130,100,.72);stroke:var(--amb);stroke-width:2;filter:drop-shadow(0 0 10px rgba(255,150,70,.5))}
.mxs .lp{fill:none;stroke:#E8805F;stroke-width:7;opacity:.85}
.mxs .air{fill:none;stroke:var(--amb);stroke-width:2.2;stroke-dasharray:4 9;opacity:0;transition:opacity .4s;animation:ad 1s linear infinite}
.mx[data-pose="th"] .air,.mx[data-pose="s"] .air{opacity:.9}@keyframes ad{to{stroke-dashoffset:-26}}
.mlb{position:relative;height:1.5em;margin-top:8px;font:500 15px 'Public Sans',sans-serif;color:var(--ink)}.mlb span{position:absolute;inset:0;text-align:center;opacity:0;transition:opacity .3s}
.mx[data-pose="th"] .mlb .th,.mx[data-pose="s"] .mlb .s,.mx[data-pose="rest"] .mlb .rest{opacity:1}
.cap span{opacity:.3;transition:opacity .3s,text-shadow .3s}.cap span.lit{opacity:1}
@media (prefers-reduced-motion:reduce){.mxs .air{animation:none}}

.micw{position:fixed;left:50%;top:44vh;width:0;height:0}
.micw::before,.micw::after{content:'';position:absolute;left:0;top:0;width:clamp(120px,24vmin,210px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,180,94,.45);animation:mr 2.8s ease-out infinite}
.micw::after{animation-delay:1.4s}@keyframes mr{from{scale:.5;opacity:.9}to{scale:1.7;opacity:0}}
.mic{position:absolute;left:0;top:clamp(42px,10.2vmin,90px);translate:-50% -50%;width:clamp(30px,6vmin,48px);fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,180,94,.8))}
.mapv{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap}
.mapv svg{height:clamp(220px,40vh,340px);overflow:visible}
.mapv .co{fill:rgba(255,180,94,.07);stroke:var(--amb);stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,170,80,.55))}
.pin{opacity:.3;transition:opacity .4s}.pin.lit{opacity:1}.pin .pd{fill:var(--amb)}.pin .pr{fill:none;stroke:var(--amb);transform-box:fill-box;transform-origin:center}
.pin.lit .pr{animation:pr 2s ease-out infinite}@keyframes pr{from{scale:.6;opacity:.9}to{scale:3.4;opacity:0}}
.pin text{font:500 11px 'Public Sans',sans-serif;fill:var(--ink)}
.acc{min-width:min(320px,82vw);max-width:340px}
.ai{padding:10px 12px;border-radius:12px;opacity:.45;transition:opacity .3s,background .3s}.ai b{display:block;font:600 18px 'Public Sans',sans-serif;margin-bottom:3px}
.ai span{font-size:14px;line-height:1.45;color:var(--mut)}.ai.lit{opacity:1}.ai.now{background:rgba(255,180,94,.12);box-shadow:inset 0 0 0 1px rgba(255,180,94,.3)}
.pcd{padding:14px 14px 16px;border-radius:24px}.pcd h4{margin:0 0 10px 4px}
.pcd .ph{display:block;width:clamp(240px,40vw,340px);border-radius:14px}
.pcd .ch{position:absolute;left:26px;bottom:30px;padding:6px 14px;border-radius:99px;background:rgba(20,15,11,.7);backdrop-filter:blur(8px);font:500 clamp(16px,3vw,22px) 'Public Sans',sans-serif;color:var(--ink);opacity:0;translate:0 8px;transition:opacity .4s,translate .4s var(--e-in)}
.pcd{position:relative;transition:box-shadow .5s}.pcd.lit{box-shadow:0 0 0 1px rgba(255,180,94,.4),0 30px 80px -30px rgba(255,150,60,.6)}.pcd.lit .ch{opacity:1;translate:0}
@media (prefers-reduced-motion:reduce){.micw::before,.micw::after,.pin.lit .pr{animation:none}}

body.top canvas{z-index:5;pointer-events:none}#tr,.nav,.chips,#go,#lab,#bar{z-index:10}
.lt,.vi,.gr,.cap,.bub{pointer-events:auto;cursor:pointer}
.cap[data-w]{opacity:.35;transition:opacity .3s}.cap[data-w].lit{opacity:1}
.pn{width:clamp(130px,30vw,260px);height:clamp(110px,22vh,170px);padding:0}
.bx{pointer-events:auto;cursor:pointer;min-width:clamp(120px,24vw,170px);padding:30px 24px;border-radius:20px;text-align:center;font:600 clamp(20px,4vw,28px) 'Public Sans',sans-serif;color:var(--ink);background:rgba(255,200,140,.07);border:1px solid rgba(255,200,140,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -30px rgba(255,150,60,.5);transition:box-shadow .3s,border-color .3s,scale .3s}
.bx.hv2{border-color:var(--amb);scale:1.05}.bx.ok{box-shadow:0 0 0 2px var(--amb),0 0 40px rgba(255,170,80,.6)}.bx.no{animation:shk .4s}@keyframes shk{25%{translate:-8px}75%{translate:8px}}
.dk{pointer-events:auto;touch-action:none;cursor:grab;user-select:none;padding:12px 28px;border-radius:16px;font:600 clamp(24px,5vw,34px) Fraunces,Georgia,serif;color:var(--ink);background:var(--card);border:1px solid var(--amb);box-shadow:0 0 0 4px rgba(255,180,94,.18);transition:translate .35s var(--e-in)}
.dk.dr{cursor:grabbing;transition:none;position:relative;z-index:20}
.heard{position:absolute;left:0;top:clamp(120px,27vmin,230px);translate:-50% 0;width:min(80vw,560px);min-height:1.4em;text-align:center;font:500 clamp(18px,3.4vw,24px)/1.4 Fraunces,Georgia,serif;color:var(--ink)}
.mic{scale:calc(1 + var(--lv,0)*.35);transition:scale .08s}
.mnu{position:fixed;left:50%;translate:-50% 0;bottom:calc(64px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:min(560px,92vw);padding:12px;border-radius:18px;background:rgba(20,15,11,.88);backdrop-filter:blur(14px);border:1px solid var(--line);z-index:12}.mnu[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bx.no{animation:none}}
#cards{bottom:calc(158px + env(safe-area-inset-bottom,0px))}.mxs{width:clamp(220px,34vw,320px)}.mx.gl{padding:12px 20px 14px}

#dr{position:fixed;inset:0;z-index:-1;pointer-events:none;filter:url(#goo) drop-shadow(0 0 7px rgba(255,160,70,.65));transition:opacity .35s}#dr.off{opacity:0}
.dmh{opacity:0!important}.dmo{animation:dmi .6s both}@keyframes dmi{from{opacity:0;filter:blur(6px)}}

.pf{opacity:.35;transition:opacity .3s,border-color .3s}.pf.lit{opacity:1}.pf.now{border-color:var(--amb);box-shadow:0 0 0 4px rgba(255,180,94,.2)}
.wd{flex-direction:column;align-items:stretch;gap:6px;max-width:min(540px,92vw)}.wd .wr{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.wd .wl{width:100%;text-align:center;font:600 11px 'Public Sans',sans-serif;letter-spacing:.12em;color:var(--mut);margin-top:4px}


.pn{width:clamp(150px,36vw,460px);height:clamp(120px,34vh,280px)}

.tw{position:relative;width:clamp(260px,min(640px,86vw,calc((100vh - 400px)*1.647)),640px);aspect-ratio:560/340}
.tw svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tgb{position:absolute;inset:0;pointer-events:none;background:rgba(18,14,10,.2);-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);clip-path:polygon(21.43% 19.41%,78.57% 19.41%,94.29% 35.88%,94.29% 40.59%,5.71% 40.59%,5.71% 35.88%)}
.cs{font:500 clamp(15px,2.6vw,22px)/1.4 'Public Sans',sans-serif;color:var(--mut);text-align:center;margin-top:-6px}
:root[data-theme="light"] .tw svg{filter:brightness(.3) contrast(1.4)}
:root[data-theme="light"] .tgb{background:rgba(255,255,255,.25)}

/* ===================================================================
   TILDOSH VIZUAL LUGʻAT v1
   Shakllar : card · tile · bubble · field · chip · slot · figure · meter · caption
   Holatlar : is-dim · is-now · is-sel · is-ok · is-no · is-lock
   Harakat  : data-fx = enter · attention · ok · no · exit   (link, swap — MOTION API)
   Manba    : TILDOSH_VOCAB (pastdagi skript) — AI faqat shu nomlarni tanlaydi
   =================================================================== */
:root{--ok:#6FCF97}
:root[data-theme="light"]{--ok:#1E8E55}

/* --- holatlar (har qanday shaklga qoʻllanadi) --- */
.is-dim{opacity:.4}
.is-lock{opacity:.5;filter:saturate(.25);pointer-events:none}
:root[data-theme] .is-now{border-color:var(--amb)!important;scale:1.04;box-shadow:0 0 0 1px var(--amb),0 0 28px -4px color-mix(in srgb,var(--amb) 70%,transparent)!important}
:root[data-theme] .is-sel{border-color:var(--amb)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 20%,transparent)!important}
:root[data-theme] .is-ok{border-color:var(--ok)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)!important}
:root[data-theme] .is-no{border-color:var(--red)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent)!important}

/* --- harakat: intent × variant. Faqat transform / opacity / filter --- */
[data-fx]{animation-duration:calc(var(--d,450ms)*var(--t,1));animation-timing-function:var(--e-in);animation-fill-mode:both}
[data-fx=enter]{--d:450ms}[data-fx=attention]{--d:900ms;animation-timing-function:ease-in-out}
[data-fx=ok]{--d:700ms;animation-timing-function:ease-in-out}[data-fx=no]{--d:450ms;animation-timing-function:cubic-bezier(.36,.07,.19,.97)}
[data-fx=exit]{--d:300ms;animation-timing-function:var(--e-out)}
[data-fx=enter][data-fxv=rise]{animation-name:fx-enter-rise}[data-fx=enter][data-fxv=pop]{animation-name:fx-enter-pop}[data-fx=enter][data-fxv=fade]{animation-name:fx-enter-fade}
[data-fx=attention][data-fxv=pulse]{animation-name:fx-att-pulse}[data-fx=attention][data-fxv=glow]{animation-name:fx-att-glow}[data-fx=attention][data-fxv=wiggle]{animation-name:fx-att-wiggle}
[data-fx=ok][data-fxv=halo]{animation-name:fx-ok-halo}[data-fx=ok][data-fxv=pop]{animation-name:fx-ok-pop}
[data-fx=no][data-fxv=shake]{animation-name:fx-no-shake}[data-fx=no][data-fxv=nudge]{animation-name:fx-no-nudge}
[data-fx=exit][data-fxv=sink]{animation-name:fx-exit-sink}[data-fx=exit][data-fxv=fade]{animation-name:fx-exit-fade}
@keyframes fx-enter-rise{from{opacity:0;transform:translateY(calc(16px*var(--k,1)))}}
@keyframes fx-enter-pop{from{opacity:0;transform:scale(calc(1 - .1*var(--k,1)))}}
@keyframes fx-enter-fade{from{opacity:0}}
@keyframes fx-att-pulse{40%{transform:scale(calc(1 + .07*var(--k,1)))}}
@keyframes fx-att-glow{40%{filter:drop-shadow(0 0 calc(16px*var(--k,1)) var(--amb)) brightness(1.08)}}
@keyframes fx-att-wiggle{20%{transform:rotate(calc(-2.5deg*var(--k,1)))}50%{transform:rotate(calc(2.5deg*var(--k,1)))}80%{transform:rotate(calc(-1deg*var(--k,1)))}}
@keyframes fx-ok-halo{0%{filter:drop-shadow(0 0 0 var(--ok))}40%{filter:drop-shadow(0 0 calc(22px*var(--k,1)) var(--ok));transform:scale(calc(1 + .05*var(--k,1)))}100%{filter:drop-shadow(0 0 0 var(--ok))}}
@keyframes fx-ok-pop{35%{transform:scale(calc(1 + .12*var(--k,1)))}65%{transform:scale(calc(1 - .03*var(--k,1)))}}
@keyframes fx-no-shake{20%{transform:translateX(calc(-9px*var(--k,1)))}40%{transform:translateX(calc(8px*var(--k,1)))}60%{transform:translateX(calc(-5px*var(--k,1)))}80%{transform:translateX(calc(3px*var(--k,1)))}}
@keyframes fx-no-nudge{30%{transform:translateY(calc(5px*var(--k,1))) rotate(calc(-1.5deg*var(--k,1)))}60%{transform:translateY(calc(-2px*var(--k,1))) rotate(calc(1deg*var(--k,1)))}}
@keyframes fx-exit-sink{to{opacity:0;transform:translateY(calc(10px*var(--k,1))) scale(.97)}}
@keyframes fx-exit-fade{to{opacity:0}}
@keyframes fx-rm{from{opacity:.55}}
@media (prefers-reduced-motion:reduce){[data-fx]:not([data-fx=exit]){animation-name:fx-rm!important;animation-duration:200ms!important}[data-fx=exit]{animation-name:fx-exit-fade!important;animation-duration:150ms!important}}
html[data-rm] [data-fx]:not([data-fx=exit]){animation-name:fx-rm!important;animation-duration:200ms!important}
html[data-rm] [data-fx=exit]{animation-name:fx-exit-fade!important;animation-duration:150ms!important}
.fx-link{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55;overflow:visible}

/* --- UI kit ekrani --- */
#kit{position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;color:var(--ink);font-family:'Public Sans',system-ui,sans-serif;background:radial-gradient(60% 38% at 50% 0%,color-mix(in srgb,var(--lit),var(--amb) 6%),var(--bg) 72%);padding:calc(78px + env(safe-area-inset-top,0px)) clamp(16px,4vw,40px) calc(120px + env(safe-area-inset-bottom,0px))}
#kit[hidden]{display:none}
#kit .kbar{position:fixed;top:0;left:0;right:0;height:calc(78px + env(safe-area-inset-top,0px));display:flex;align-items:flex-end;padding:0 clamp(16px,4vw,40px) 20px;background:linear-gradient(var(--bg) 72%,transparent);pointer-events:none;z-index:2;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--mut)}
#kit .kw{max-width:980px;margin:0 auto}
#kit h1{margin:0 0 12px;font:600 clamp(32px,6.4vw,56px)/1.04 Fraunces,Georgia,serif;letter-spacing:-.015em}
#kit .lead{max-width:62ch;margin:0;color:var(--mut);font:400 16px/1.6 'Public Sans',sans-serif}
#kit .cnt{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 0;font:500 12px 'IBM Plex Mono',monospace;color:var(--amb);letter-spacing:.04em}
#kit h2{margin:64px 0 8px;padding-top:20px;border-top:1px solid var(--line);font:600 12px 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
#kit .sub{margin:0 0 22px;max-width:64ch;color:var(--mut);font:400 14.5px/1.55 'Public Sans',sans-serif}
#kit code{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--mut)}
#kit .kg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 34px}
#kit .ks{padding:16px 0 26px;border-top:1px solid var(--line)}
#kit .ks .id{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:var(--amb)}
#kit .ks h3{margin:4px 0;font:600 21px Fraunces,Georgia,serif}
#kit .ks>p{margin:0 0 12px;min-height:4.2em;color:var(--mut);font:400 13.5px/1.5 'Public Sans',sans-serif}
#kit .st{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:100px}
#kit .tile{font-size:22px;padding:10px 18px;border-radius:14px}
#kit .bub{font-size:19px;padding:14px 20px;max-width:100%}
#kit .inp{min-width:0;width:100%;font-size:17px;padding:12px 16px}
#kit .opt{min-width:0;padding:12px 16px}#kit .opt b{font-size:18px}
#kit .pill{display:inline-block}
#kit .fg svg{height:104px}
#kit .u-card{padding:16px 18px;max-width:260px}
#kit .sl{min-width:64px;min-height:46px;border-radius:12px}
#kit .cap.sm{font-size:22px}
#kit .sum{padding:18px 20px;max-width:300px}
#kit .kscroll{overflow-x:auto;margin:0 -4px;padding:6px 4px 10px}
#kit .kmx{display:grid;grid-template-columns:70px repeat(6,minmax(104px,1fr));gap:18px 12px;align-items:center;min-width:780px}
#kit .kh{display:flex;flex-direction:column;gap:3px;font:600 12px 'Public Sans',sans-serif;color:var(--ink)}
#kit .kr{font:500 12px 'Public Sans',sans-serif;color:var(--mut)}
#kit .kmx .u-card{padding:10px 14px;border-radius:16px!important}#kit .kmx .u-card p{margin:0;font:500 15px 'Fraunces',Georgia,serif;color:var(--ink)}
#kit .kmx .tile{font-size:20px;padding:9px 16px}
#kit .kctl{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;margin:0 0 6px;padding:6px 0 14px}
#kit .kctl label{display:flex;align-items:center;gap:8px;font:500 12px 'IBM Plex Mono',monospace;color:var(--mut)}
#kit .kseg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
#kit .kseg button{padding:8px 14px;border:0;background:transparent;color:var(--mut);font:600 12.5px 'Public Sans',sans-serif;cursor:pointer}
#kit .kseg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
#kit input[type=text]{width:120px;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 12.5px 'IBM Plex Mono',monospace}
#kit input[type=checkbox]{accent-color:var(--amb);width:16px;height:16px}
#kit button:focus-visible,#kit input:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
#kit .km{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px 34px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
#kit .km h3{margin:3px 0 4px;font:600 20px Fraunces,Georgia,serif}
#kit .km>div:first-child>p{margin:0;color:var(--mut);font:400 13.5px/1.5 'Public Sans',sans-serif}
#kit .km .id{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:var(--amb)}
#kit .vs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#kit .vs span{padding:3px 9px;border-radius:99px;border:1px solid var(--line);font:500 11px 'IBM Plex Mono',monospace;color:var(--mut)}
#kit .kwrap{display:flex;flex-direction:column;gap:10px;align-items:stretch}
#kit .kstage{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;min-height:128px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
#kit .kact{display:flex;align-items:center;gap:12px;justify-content:space-between}
#kit .kv{font:500 11.5px 'IBM Plex Mono',monospace;color:var(--mut)}
#kit .kbtn{padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 13px 'Public Sans',sans-serif;cursor:pointer}
#kit .kbtn:hover{border-color:var(--amb)}
#kit .kbtn.pri{background:var(--ink);color:var(--bg);border-color:transparent}
#kit .kbl{padding:22px 0 26px;border-top:1px solid var(--line)}
#kit .kbl header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
#kit .kbl h3{margin:0;font:600 20px Fraunces,Georgia,serif}
#kit .kbs{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;min-height:160px;padding:22px 12px;border-radius:18px;background:color-mix(in srgb,var(--ink) 4%,transparent);overflow:hidden}
#kit .kbs .col,#kit .kbs .row{align-items:center}
#kit pre{margin:0 0 22px;padding:16px 18px;border-radius:14px;overflow:auto;background:color-mix(in srgb,var(--ink) 5%,transparent);font:400 12.5px/1.65 'IBM Plex Mono',monospace;color:var(--ink)}
#kit .rl{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:r}
#kit .rl li{position:relative;padding-left:34px;counter-increment:r;color:var(--mut);font:400 14.5px/1.55 'Public Sans',sans-serif}
#kit .rl li::before{content:counter(r);position:absolute;left:0;top:1px;font:600 12px 'IBM Plex Mono',monospace;color:var(--amb)}
#kit .rl b{color:var(--ink);font-weight:600}
@media (max-width:640px){#kit .km{grid-template-columns:1fr}}


/* ===================================================================
   TILDOSH v17 · QOBIQ (v8 dan olingan joylashuv) + SIRTLAR + OʻTISH
   =================================================================== */
/* --- sirtlar: shisha faqat haqiqiy kartalarda, qolgani yengil --- */
.stg>*{opacity:1;transform:none;animation:none}
.stg.old{pointer-events:none}
.tile,.bub,.opt,.inp,.sum{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 48px -30px var(--sh)}
.inp{border-bottom-color:var(--ind)}
.opt,.sum,.gl,.tile.pc,.u-card{background:linear-gradient(145deg,var(--glass-a),var(--glass-b))!important;-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border:1px solid var(--glass-line)!important;border-radius:22px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 22px 48px -22px var(--sh)!important}
:root[data-theme] .opt.sel{border-color:var(--amb)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 22%,transparent)!important}
.cap{color:var(--say)}.cap b{color:var(--amb-ink)}
.sl{border-color:var(--line2)}
.tile.hot,.opt.sel{border-color:var(--amb)}
.mnu{top:calc(58px + env(safe-area-inset-top,0px));bottom:auto;background:color-mix(in srgb,var(--bg) 90%,transparent);z-index:35}
.tx-ghost{position:fixed;margin:0;box-sizing:border-box;pointer-events:none;z-index:6;overflow:hidden}

/* --- yuqori panel --- */
.tb{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;gap:8px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.tb>*{pointer-events:auto}
.sp{flex:1;pointer-events:none}
.lv,.brand{display:flex;align-items:center;gap:9px;font:600 12px/1 'Public Sans',sans-serif;letter-spacing:.16em;color:var(--mut);white-space:nowrap;pointer-events:none}
.lv i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.brand b{font:600 15px/1 Fraunces,Georgia,serif;letter-spacing:.02em;color:var(--ink)}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--amb);box-shadow:0 0 10px var(--amb)}
.lg,.q,.ib{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 85%,transparent);color:var(--mut);font:500 13px 'Public Sans',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.q{color:var(--ink)}
.ib{width:34px;padding:0;justify-content:center;font-size:15px;line-height:1;color:var(--ink)}
.q:hover,.ib:hover{border-color:var(--line2)}
.q:focus-visible,.ib:focus-visible,.rb:focus-visible,#go:focus-visible,#gs:focus-visible,.pk button:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
body:not(.live) .lv,body:not(.live) .lg,body:not(.live) .q{display:none}
body.live .brand{display:none}
body.kit-open .lv,body.kit-open .lg,body.kit-open .q,body.kit-open .brand{visibility:hidden}

/* --- markaziy navigatsiya (yuqorida) --- */
.nav{position:fixed;inset:0;display:block;pointer-events:none;gap:0;z-index:20}
.nav[hidden]{display:none}
.nav>*{pointer-events:auto}
.nv{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top,0px));display:flex;gap:6px;z-index:31}
.nv .c{height:34px;min-width:36px;padding:0 10px;display:grid;place-items:center;font-size:15px;line-height:1;color:var(--mut);background:color-mix(in srgb,var(--card) 85%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nv .c:hover{color:var(--ink);border-color:var(--line2)}
.c.on{color:var(--amb-ink);border-color:var(--amb)}
@media (max-width:760px){.nv{top:calc(56px + env(safe-area-inset-top,0px))}.lx{display:none}.chips{top:calc(98px + env(safe-area-inset-top,0px))}}
.chips{top:calc(60px + env(safe-area-inset-top,0px));z-index:21}

/* --- pastki boshqaruv: tovush, toʻlqin, mikrofon, izoh --- */
.rb{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--mut);display:grid;place-items:center;cursor:pointer;padding:0}
.rb:hover{color:var(--ink)}
.rb.on{color:var(--amb-ink);background:color-mix(in srgb,var(--amb) 16%,transparent);border-color:color-mix(in srgb,var(--amb) 50%,transparent)}
#sd{position:fixed;left:18px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.rg{position:fixed;right:18px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;pointer-events:none}
.rg>*{pointer-events:auto}
#wv{inset:auto 126px calc(12px + env(safe-area-inset-bottom,0px)) 76px;width:calc(100% - 202px);height:48px;pointer-events:none}
#bar{position:fixed;left:0;top:0;bottom:auto;height:2px;width:0;background:var(--ind);opacity:.9;transition:width .7s var(--e-in);z-index:32}

/* --- nutq matni va taglavha --- */
#tr{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));text-align:center;padding:0 24px;font:500 clamp(18px,4.6vw,24px)/1.5 Fraunces,Georgia,serif;min-height:1.8em;pointer-events:none;transition:opacity .6s}
#tr span{display:inline-block;margin:0 .14em;opacity:0;color:var(--mut);transition:opacity .35s,color .35s}
#tr span.on{opacity:1;animation:wv 2.6s ease-in-out infinite}
#tr span.cur{color:var(--ink)}
#tr.rest span.on{animation:none}
#tr.big{bottom:calc(112px + env(safe-area-inset-bottom,0px));font-size:clamp(24px,5.2vw,44px);line-height:1.18}
#tr.big span.on{color:var(--say)}
#tr.big span.cur{color:var(--say);text-shadow:0 0 22px color-mix(in srgb,var(--amb) 45%,transparent)}
#tr.top{bottom:auto;top:calc(92px + env(safe-area-inset-top,0px))}
#sub{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom,0px));text-align:center;padding:0 28px;font:400 clamp(13px,2.4vw,17px)/1.4 'Public Sans',sans-serif;color:var(--mut);opacity:0;transition:opacity .9s;pointer-events:none}

/* --- boshlangʻich ekran --- */
#go{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));font:600 16px 'Public Sans',sans-serif;padding:14px 30px;border-radius:99px;border:0;background:var(--ink);color:var(--bg);cursor:pointer;z-index:10;transition:transform .3s var(--e-in),box-shadow .3s}
#go:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 14px 34px -14px var(--sh)}
#gs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(40px + env(safe-area-inset-bottom,0px));font:600 15px 'Public Sans',sans-serif;padding:12px 26px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;z-index:10;transition:border-color .25s}
#gs:hover{border-color:var(--ink)}
#go[hidden],#gs[hidden]{display:none}

/* --- sahna tanlagich --- */
.pk{position:fixed;left:50%;translate:-50% 0;top:calc(58px + env(safe-area-inset-top,0px));width:min(580px,92vw);max-height:min(64vh,540px);overflow:auto;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);z-index:35;box-shadow:0 30px 70px -30px var(--sh);overscroll-behavior:contain}
.pk[hidden]{display:none}
.pk h5{margin:12px 6px 8px;font:600 11px 'Public Sans',sans-serif;letter-spacing:.16em;color:var(--mut)}
.pk h5:first-child{margin-top:2px}
.pk .g2{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.pk button{display:flex;gap:9px;align-items:baseline;text-align:left;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:9px 11px;font:500 13px 'Public Sans',sans-serif;cursor:pointer;min-width:0}
.pk button:hover{border-color:var(--line2)}
.pk button i{font:500 11px 'IBM Plex Mono',monospace;color:var(--mut);font-style:normal;flex:none}
.pk button span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pk button b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk button small{font:400 11px 'Public Sans',sans-serif;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk button.on{border-color:var(--amb);color:var(--amb-ink)}
@media (max-width:760px){.pk,.mnu{top:calc(100px + env(safe-area-inset-top,0px));max-height:calc(100vh - 220px)}.pk .g2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#bar{transition:none}}

/* galereya: loyqa xaki oʻrniga palitraga mos periwinkle */
.hv.r{background:linear-gradient(135deg,#C9D0FF,#8E98E8);color:#10142B;opacity:.5}

#kit .kpal{display:grid;grid-template-columns:minmax(170px,1.1fr) 1fr 1fr;gap:10px;align-items:stretch;min-width:600px}
#kit .kpc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
#kit .kpc b{font:600 22px Fraunces,Georgia,serif}
#kit .kpc span{font:500 12px 'IBM Plex Mono',monospace}
#kit .kpc i{margin-left:auto;font:600 10px 'IBM Plex Mono',monospace;font-style:normal;padding:2px 8px;border-radius:99px;border:1px solid currentColor}
#kit .kr code{display:inline-block;margin-top:2px}
.chips.a{top:calc(100px + env(safe-area-inset-top,0px))}.chips[hidden]+.chips.a{display:none}
@media (max-width:640px){.chips.a{top:calc(138px + env(safe-area-inset-top,0px))}}

/* Learning Studio v0.1 — source theme and original button geometry, new pedagogical layout */
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;overscroll-behavior:none}
body{overflow:hidden;background:radial-gradient(60% 46% at 52% 35%,color-mix(in srgb,var(--lit),var(--amb) 8%),var(--bg) 78%)}
#lesson-root{height:100dvh;min-height:550px;isolation:isolate;position:relative}
#s,#g,#c{position:fixed;inset:0;z-index:3;width:100vw;height:100dvh;pointer-events:none}
#s{z-index:0}#g{z-index:2}#c{z-index:3}
.tb{height:66px;padding:calc(12px + env(safe-area-inset-top,0px)) clamp(18px,3vw,36px) 7px;z-index:50}
body.live .brand{display:flex}
body.live .lv{display:flex}
body.live .brand b{font-size:19px}
.tb .brand{margin-right:15px}
.ib,#leave{flex-shrink:0;text-decoration:none;display:grid;place-items:center;color:var(--ink);min-width:34px}
.preview-tag{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.11em;color:var(--amb-ink);padding:7px 13px;border-radius:99px;border:1px solid color-mix(in srgb,var(--amb) 40%,var(--line));background:color-mix(in srgb,var(--amb) 7%,transparent)}
.lesson-identity{position:absolute;top:clamp(72px,10vh,98px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:9px;z-index:6;pointer-events:none;text-align:center;padding:0 20px}
.lesson-eyebrow{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.19em;color:var(--mut)}
.lesson-eyebrow span{padding:0 8px;opacity:.55}
#lesson-heading{font:500 clamp(19px,2.9vw,27px)/1.3 Fraunces,Georgia,serif;letter-spacing:-.03em;color:var(--say);max-width:90vw}
.experience{position:absolute;z-index:4;inset:clamp(142px,17vh,172px) 18px clamp(230px,30vh,290px);display:flex;align-items:center;justify-content:center;pointer-events:none}
#orb-anchor{position:absolute;left:50%;top:clamp(35px,11vh,85px);width:4px;height:4px;transform:translate(-50%,-50%);transition:left .65s var(--e-spring),top .65s var(--e-spring);pointer-events:none}
.experience[data-phase="showing"] #orb-anchor{left:22%;top:44%}
.experience[data-phase="waiting"] #orb-anchor{left:19%;top:42%}
.experience[data-phase="feedback"] #orb-anchor{left:23%;top:39%}
.scene-board{z-index:4;position:absolute;left:20%;right:5%;top:9%;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;min-height:50px}
.experience[data-phase="intro"] .scene-board{left:7%;right:7%;top:53%}
.scene-board>*,.scene-board button,.scene-board input{pointer-events:auto}
.scene-enter{animation:scene-show .66s var(--e-in) both}
@keyframes scene-show{from{opacity:0;transform:translate3d(0,26px,0) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.scene-col{display:flex;flex-direction:column;align-items:center;gap:clamp(11px,2.3vh,21px);width:100%;max-width:790px}
.micro-label{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--amb-ink);text-transform:uppercase}
.grammar-sentence{font:500 clamp(32px,5.7vw,64px)/1.13 Fraunces,Georgia,serif;letter-spacing:-.05em;color:var(--say);text-align:center;white-space:normal}
.grammar-sentence.small{font-size:clamp(25px,4.1vw,45px)}
.grammar-sentence .suffix{color:var(--amb);display:inline-block;animation:suffix-glow 1.5s ease-in-out infinite alternate;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px}
@keyframes suffix-glow{to{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--amb) 80%,transparent));transform:translateY(-3px)}}
.rule-ribbon{padding:9px 18px;color:var(--amb-ink);background:color-mix(in srgb,var(--amb) 9%,transparent);border:1px solid color-mix(in srgb,var(--amb) 28%,transparent);border-radius:99px;font:600 14px 'Public Sans',sans-serif;text-align:center}
.scene-lead{font:500 clamp(17px,2.7vw,21px)/1.6 'Public Sans',sans-serif;text-align:center;max-width:690px;color:var(--mut)}
.scene-emph{color:var(--say);font-weight:600}
.calendar{display:flex;justify-content:center;gap:clamp(5px,1vw,12px);width:100%;max-width:600px}
.calendar-day{width:clamp(35px,6vw,61px);height:clamp(48px,7vw,68px);border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--card) 80%,transparent);display:grid;place-items:center;opacity:0;animation:day-enter .45s var(--e-spring) forwards;animation-delay:calc(var(--i)*.1s);box-shadow:0 11px 28px -19px var(--sh)}
.calendar-day b{font:500 clamp(11px,1.5vw,13px) 'Public Sans';color:var(--mut)}
.calendar-day.on{background:color-mix(in srgb,var(--amb) 18%,var(--card));border-color:var(--amb)}
.calendar-day.on b{color:var(--amb-ink)}
@keyframes day-enter{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,22px);width:100%;align-items:stretch}
.contrast-item{border-radius:22px;border:1px solid var(--line);background:var(--card);padding:clamp(17px,2vw,27px);display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0}
.contrast-item.important{border-color:color-mix(in srgb,var(--amb) 66%,var(--line));box-shadow:0 0 55px -27px var(--amb)}
.contrast-label{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.19em;color:var(--mut)}
.contrast-item .grammar-sentence{font-size:clamp(22px,3.8vw,46px)}
.scene-arrow{font:500 clamp(22px,3vw,32px) 'Public Sans';color:var(--amb-ink)}
.scene-quote{max-width:670px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center}
.scene-quote .grammar-sentence{line-height:1.25}
.scene-context{display:flex;align-items:center;gap:12px;justify-content:center}
.context-symbol{height:80px;width:80px;display:grid;place-items:center;font-size:40px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 42px -25px var(--sh)}
.scene-figure{color:var(--mut);font:500 12px 'Public Sans',sans-serif}
.practice-shell{width:min(630px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;align-items:stretch;padding:8px 6px 12px}
.practice-shell .micro-label{text-align:center}
.practice-shell .grammar-sentence{font-size:clamp(20px,3vw,34px);margin:5px 0 6px}
.practice-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.practice-choice{border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:13px 16px;border-radius:17px;text-align:center;font:500 clamp(13px,1.9vw,18px) 'Public Sans',sans-serif;transition:background .2s,border .2s;cursor:pointer}
.practice-choice:hover,.practice-choice[aria-pressed="true"]{background:color-mix(in srgb,var(--amb) 13%,var(--card));border-color:var(--amb)}
.practice-input{font:500 clamp(17px,2.8vw,24px) Fraunces,Georgia,serif;max-width:100%;border:1px solid var(--line2);padding:14px 18px;border-radius:17px;background:var(--card);color:var(--ink);text-align:center}
.practice-input:focus-visible,.practice-choice:focus-visible{outline:2px solid var(--amb);outline-offset:3px}
.practice-hint{font:400 13px/1.5 'Public Sans',sans-serif;text-align:center;color:var(--mut)}
.practice-feedback{font:500 13px/1.5 'Public Sans',sans-serif;color:var(--ink);text-align:center}
.practice-feedback.bad{color:var(--amb-ink)}
.practice-control{border:1px solid var(--line2);background:var(--lit);color:var(--ink);padding:11px 17px;font:600 13px 'Public Sans',sans-serif;border-radius:99px;cursor:pointer;align-self:center;min-width:130px}
.practice-control:hover{border-color:var(--amb)}
.practice-control:disabled{opacity:.4;cursor:not-allowed}
.feedback-glow{font:500 clamp(55px,6vw,88px) Fraunces,Georgia,serif;color:var(--amb-ink);opacity:.95}
.caption-dock{position:fixed;bottom:calc(105px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 36px));z-index:12;text-align:center;display:flex;flex-direction:column;gap:10px;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 82%,transparent) 19%);padding:9px 8px 0}
.caption-heading{display:flex;align-items:center;justify-content:center;gap:8px;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--mut)}
.caption-type{margin-left:10px;font-size:9px;color:var(--amb-ink)}
.speaking-dot{height:7px;width:7px;border-radius:50%;background:var(--amb)}
#tr{position:static;min-height:48px;padding:0;color:var(--say);font:500 clamp(18px,2.8vw,26px)/1.38 Fraunces,Georgia,serif;opacity:1;text-align:center;pointer-events:none;transition:none}
#tr span{display:inline-block;opacity:.3;color:var(--mut);margin:0 .13em;transition:opacity .12s,color .15s}
#tr span.on{opacity:1;color:var(--say);animation:none}
#tr span.cur{color:var(--amb-ink)}
#sub{position:static;opacity:1;min-height:21px;max-height:48px;overflow:hidden;font:400 clamp(12px,1.9vw,15px)/1.45 'Public Sans',sans-serif;color:var(--mut);text-align:center;transition:opacity .2s}
#sub.is-hidden{opacity:0;visibility:hidden}
.transport{position:fixed;left:50%;bottom:calc(45px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);height:49px;display:flex;align-items:center;justify-content:center;gap:8px;z-index:30;padding:0 10px;max-width:calc(100% - 24px);background:color-mix(in srgb,var(--card) 78%,var(--bg));border:1px solid var(--line);border-radius:99px;backdrop-filter:blur(18px)}
.transport .ib{height:34px;width:34px;padding:0}
.transport-next{background:var(--ink);border-color:var(--ink);color:var(--bg)!important;font-weight:600;min-width:127px}
.transport-next:hover{background:var(--amb);border-color:var(--amb)}
.transport-next:disabled{opacity:.4;cursor:not-allowed}
.transport-progress{height:3px;width:clamp(36px,10vw,90px);background:var(--line2);border-radius:9px;overflow:hidden}
.transport-progress-fill{height:100%;width:0;background:var(--amb);transition:width .4s var(--e-in)}
.preview-footer{position:fixed;bottom:calc(13px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:20;text-align:center;display:flex;justify-content:center;gap:16px;font:400 10px/1.35 'Public Sans',sans-serif;color:var(--mut);padding:0 14px}
.preview-footer a{color:var(--mut)}
.scene-decor{position:absolute;z-index:0;width:clamp(170px,27vw,300px);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.scene-decor-1{top:8%;left:5%;transform:rotate(-14deg)}.scene-decor-2{bottom:17%;right:0;transform:rotate(13deg)}
.scene-error{color:var(--red);text-align:center;font:500 15px/1.5 'Public Sans',sans-serif}
.scene-empty{color:var(--mut);text-align:center}
@media(max-width:700px){
 .tb{height:57px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 0;gap:6px}
 .brand b{font-size:16px!important}.brand{margin-right:3px!important}
 .lv{font-size:9px;letter-spacing:.11em}.lx{display:none}
 .preview-tag{display:none}
 .lesson-identity{top:calc(67px + env(safe-area-inset-top,0px));gap:6px}
 #lesson-heading{font-size:20px}
 .experience{left:10px;right:10px;top:calc(115px + env(safe-area-inset-top,0px));bottom:calc(236px + env(safe-area-inset-bottom,0px))}
 #orb-anchor{top:44px}
 .experience[data-phase="showing"] #orb-anchor{left:50%;top:28px}
 .experience[data-phase="waiting"] #orb-anchor{left:50%;top:25px}
 .experience[data-phase="feedback"] #orb-anchor{left:50%;top:27px}
 .scene-board{left:0;right:0;top:128px;bottom:0}
 .experience[data-phase="intro"] .scene-board{left:0;right:0;top:170px}
 .scene-col{gap:13px}
 .grammar-sentence{font-size:clamp(26px,7.8vw,38px)}
 .contrast-item{padding:13px 9px;border-radius:16px;gap:8px}
 .contrast-item .grammar-sentence{font-size:clamp(17px,4.7vw,26px)}
 .calendar-day{height:51px;width:38px}
 .context-symbol{height:58px;width:58px;font-size:28px;border-radius:17px}
 .rule-ribbon{font-size:11px;padding:7px 12px}
 .practice-shell{gap:8px}
 .practice-shell .grammar-sentence{font-size:clamp(18px,5vw,25px);margin:0}
 .practice-choice{padding:10px 8px}
 .caption-dock{bottom:calc(114px + env(safe-area-inset-bottom,0px));width:calc(100% - 22px);gap:8px;padding:5px 2px}
 #tr{font-size:clamp(16px,4.7vw,20px);min-height:54px}
 #sub{font-size:12px;min-height:16px}
 .caption-type{font-size:8px}
 .transport{bottom:calc(53px + env(safe-area-inset-bottom,0px));height:47px;gap:5px;padding:0 6px}
 .transport .ib{width:30px;height:30px;font-size:13px}
 .transport-next{min-width:auto;font-size:12px;padding:8px 13px}
 .transport-progress{width:33px}
 #sub-toggle{font-size:11px;padding:7px 8px}
 .preview-footer{font-size:9px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 #gallery-link{display:none}
}
@media(max-height:680px){
 .experience{top:120px;bottom:195px}
 .lesson-identity{top:67px}
 .caption-dock{bottom:92px}
 .transport{bottom:40px}
 .preview-footer{bottom:7px}
}
@media(prefers-reduced-motion:reduce){
 :root{transition:none!important}
 .scene-enter,.calendar-day,.grammar-sentence .suffix{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
 .transport-progress-fill,#orb-anchor{transition:none!important}
}