.darslik-lab[hidden] { display: none !important; }
.darslik-lab {
    --lab-1: #7c3aed;
    --lab-2: #2563eb;
    --lab-3: #ec4899;
    --lab-yumshoq: #ede9fe;
    position: absolute;
    z-index: 3;
    inset: 12px;
    display: grid;
    min-height: 0;
    padding: clamp(14px, 2.2vw, 28px);
    grid-template-rows: auto minmax(150px, 1fr) auto;
    gap: clamp(12px, 2vh, 22px);
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--lab-3) 18%, transparent), transparent 20%),
        radial-gradient(circle at 92% 85%, color-mix(in srgb, var(--lab-2) 20%, transparent), transparent 24%),
        linear-gradient(145deg, #fff, color-mix(in srgb, var(--lab-yumshoq) 48%, #fff));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
}
.darslik-lab::before, .darslik-lab::after { content: ''; position: absolute; z-index: -1; width: 140px; height: 140px; border: 22px solid color-mix(in srgb, var(--lab-1) 10%, transparent); border-radius: 44% 56% 62% 38%; transform: rotate(23deg); }
.darslik-lab::before { top: -72px; left: -45px; }
.darslik-lab::after { right: -60px; bottom: -80px; transform: rotate(-31deg); }
.uslub-osmon { --lab-1:#0284c7; --lab-2:#06b6d4; --lab-3:#f59e0b; --lab-yumshoq:#e0f2fe; }
.uslub-bog { --lab-1:#16a34a; --lab-2:#059669; --lab-3:#f59e0b; --lab-yumshoq:#dcfce7; }
.uslub-quyosh { --lab-1:#ea580c; --lab-2:#eab308; --lab-3:#ec4899; --lab-yumshoq:#fef3c7; }
.uslub-dengiz { --lab-1:#0f766e; --lab-2:#0891b2; --lab-3:#8b5cf6; --lab-yumshoq:#cffafe; }
.uslub-gilos { --lab-1:#be123c; --lab-2:#db2777; --lab-3:#7c3aed; --lab-yumshoq:#ffe4e6; }
.uslub-koinot { --lab-1:#4338ca; --lab-2:#7c3aed; --lab-3:#f59e0b; --lab-yumshoq:#e0e7ff; }
.uslub-lola { --lab-1:#c026d3; --lab-2:#e11d48; --lab-3:#0ea5e9; --lab-yumshoq:#fae8ff; }
.uslub-yalpiz { --lab-1:#047857; --lab-2:#14b8a6; --lab-3:#f97316; --lab-yumshoq:#ccfbf1; }
.uslub-sandiq { --lab-1:#92400e; --lab-2:#d97706; --lab-3:#7c3aed; --lab-yumshoq:#fef3c7; }
.darslik-savol { align-self: center; max-width: 1100px; margin: 0 auto; color: #172554; font-size: clamp(18px, 2.4vw, 31px); font-weight: 950; line-height: 1.18; text-align: center; }
.darslik-sahna { display: grid; min-height: 0; place-items: center; overflow: hidden; }
.darslik-javoblar { display: flex; min-height: 74px; align-items: stretch; justify-content: center; gap: clamp(8px, 1.5vw, 16px); flex-wrap: wrap; }
.darslik-variant { position: relative; min-width: clamp(86px, 11vw, 150px); min-height: 66px; padding: 10px 18px; border: 4px solid white; border-radius: 20px; color: white; background: linear-gradient(145deg, var(--lab-2), var(--lab-1)); box-shadow: 0 12px 24px color-mix(in srgb, var(--lab-1) 27%, transparent); font-size: clamp(18px, 2.1vw, 28px); font-weight: 950; cursor: pointer; touch-action: manipulation; transition: transform .18s, filter .18s, box-shadow .18s; }
.darslik-variant:nth-child(2n) { background: linear-gradient(145deg, #f97316, #e11d48); }
.darslik-variant:nth-child(3n) { background: linear-gradient(145deg, #16a34a, #0f766e); }
.darslik-variant:nth-child(4n) { background: linear-gradient(145deg, #eab308, #ca8a04); }
.darslik-variant:hover, .darslik-variant:focus-visible { transform: translateY(-5px) scale(1.03); filter: saturate(1.15); box-shadow: 0 18px 32px color-mix(in srgb, var(--lab-1) 35%, transparent); outline: 5px solid rgba(250,204,21,.55); outline-offset: 3px; }
.darslik-variant:disabled { cursor: default; }
.darslik-variant.tanlangan { outline: 6px solid #facc15; outline-offset: 4px; transform: scale(1.05); }
.darslik-variant.javob-togri { background: linear-gradient(145deg,#22c55e,#047857); animation: lab-togri .55s ease 2; }
.darslik-variant.javob-xato { background: linear-gradient(145deg,#ef4444,#b91c1c); animation: lab-xato .38s ease 2; }
.darslik-lab.yakun-togri { animation: lab-maydon-togri .55s ease 2; }
.darslik-lab.yakun-xato { animation: lab-maydon-xato .48s ease 2; }

.belgilar-panjara { display: flex; max-width: 700px; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 54px); }
.katta-belgi { position: relative; display: grid; width: clamp(90px, 14vw, 170px); aspect-ratio: 1; place-items: center; border: 7px solid white; border-radius: 32px; background: linear-gradient(145deg,#fff,#dbeafe); box-shadow: 0 20px 34px rgba(30,64,175,.16); font-size: clamp(55px, 9vw, 108px); }
.katta-belgi::after { content: attr(data-tartib); position: absolute; right: 8px; bottom: 4px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: white; background: var(--lab-1); font: 900 14px system-ui; }
.sanoq-poyezdi { display: flex; width: min(96%, 1050px); align-items: end; justify-content: center; gap: 4px; }
.vagon { position: relative; display: grid; width: clamp(38px, 7vw, 84px); height: clamp(58px, 9vw, 105px); place-items: center; border: 4px solid white; border-radius: 14px 14px 22px 22px; color: white; background: linear-gradient(#38bdf8,#2563eb); box-shadow: 0 13px 20px rgba(37,99,235,.2); font-size: clamp(18px,3vw,36px); font-weight:950; }
.vagon::after { content:''; position:absolute; right:8px; bottom:-9px; width:13px; height:13px; border:4px solid white; border-radius:50%; background:#334155; box-shadow:-24px 0 #334155, -24px 0 0 4px white; }
.vagon.faol { height: clamp(82px, 12vw, 140px); background:linear-gradient(#facc15,#f97316); animation:vagon-sakrashi 1s ease-in-out infinite; }
.yuzlik-jadvali { display:grid; grid-template-columns:repeat(5,minmax(46px,72px)); gap:clamp(7px,1.2vw,13px); justify-content:center; }
.yuzlik-jadvali span { display:grid; min-height:clamp(44px,7vw,68px); place-items:center; border:2px solid color-mix(in srgb,var(--lab-1) 32%,white); border-radius:15px; color:#1e293b; background:rgba(255,255,255,.88); box-shadow:0 7px 16px rgba(30,41,59,.08); font-weight:900; }
.yuzlik-jadvali .faol { outline:5px solid #facc15; }
.yuzlik-jadvali .yashirin { color:white; background:var(--lab-1); }
.son-lifti { position:relative; display:grid; width:min(540px,94%); margin:auto; padding:clamp(14px,3vw,28px); grid-template-columns:1fr clamp(90px,13vw,150px) 1fr; grid-template-rows:repeat(2,minmax(64px,auto)); align-items:center; gap:12px; border-radius:28px; background:linear-gradient(145deg,#dbeafe,#f5f3ff); box-shadow:inset 0 0 0 4px rgba(255,255,255,.8),0 18px 35px rgba(67,56,202,.12); }
.son-lifti::after { content:attr(data-qadam); position:absolute; right:15px; top:15px; padding:7px 12px; border-radius:999px; color:var(--lab-1); background:#fff; font-weight:950; }
.lift-qavat,.lift-son { display:grid; min-height:64px; place-items:center; border-radius:18px; background:#fff; font-size:clamp(1.35rem,3vw,2rem); font-weight:950; }
.lift-qavat.yuqori { grid-column:1; grid-row:1; }
.lift-qavat.past { grid-column:1; grid-row:2; }
.lift-son { grid-column:3; grid-row:1/3; color:var(--lab-1); }
.lift-kabina { display:grid; min-height:145px; grid-column:2; grid-row:1/3; place-items:center; border:7px solid #334155; border-radius:18px 18px 8px 8px; color:#fff; background:linear-gradient(90deg,#fbbf24 49%,#f59e0b 50%); text-shadow:0 3px 0 rgba(0,0,0,.15); font-size:3.5rem; animation:lift-harakati 1.8s ease-in-out infinite alternate; }
.ketma-ketlik { display:flex; width:min(96%,980px); align-items:center; justify-content:center; gap:clamp(5px,1vw,13px); }
.ketma-karta { display:grid; min-width:clamp(78px,14vw,180px); min-height:clamp(72px,12vw,130px); padding:12px; place-items:center; border:5px solid white; border-radius:23px; color:#1e3a8a; background:linear-gradient(145deg,#fff,#dbeafe); box-shadow:0 14px 26px rgba(30,64,175,.14); font-size:clamp(16px,2.2vw,28px); font-weight:900; text-align:center; }
.ketma-karta.bosh { border-style:dashed; border-color:#a78bfa; color:#7c3aed; background:#f3e8ff; }
.ketma-strelka { color:var(--lab-1); font-size:clamp(28px,5vw,58px); font-weight:950; }
.interaktiv-chiziq { position:relative; display:flex; width:min(92%,960px); height:120px; align-items:center; justify-content:space-between; }
.interaktiv-chiziq::before { content:''; position:absolute; left:2%; right:2%; top:55%; height:9px; border-radius:9px; background:linear-gradient(90deg,var(--lab-1),var(--lab-2)); box-shadow:0 6px 16px color-mix(in srgb,var(--lab-1) 30%,transparent); }
.chiziq-nuqta { position:relative; z-index:1; display:grid; width:clamp(36px,6vw,64px); height:clamp(36px,6vw,64px); place-items:center; border:5px solid white; border-radius:50%; color:white; background:var(--lab-1); box-shadow:0 8px 18px rgba(30,41,59,.18); font-size:clamp(15px,2.4vw,25px); font-weight:950; }
.chiziq-nuqta.yashirin { color:#7c3aed; background:#fef3c7; animation:nuqta-urishi 1s ease infinite; }
.raqam-izi-quti { display:grid; width:min(90%,390px); justify-items:center; gap:5px; }
.raqam-izi-quti canvas { width:min(100%,360px); aspect-ratio:360/250; border:5px solid white; border-radius:30px; background:rgba(255,255,255,.75); box-shadow:0 18px 34px rgba(76,29,149,.18); touch-action:none; }
.raqam-izi-quti.chizildi canvas { box-shadow:0 0 0 8px rgba(34,197,94,.2),0 18px 34px rgba(76,29,149,.18); }
.iz-korsatma { color:#5b21b6; font-weight:850; }
.son-uychasi { display:grid; width:clamp(210px,34vw,380px); grid-template-columns:1fr 1fr; filter:drop-shadow(0 18px 18px rgba(91,33,182,.16)); }
.uy-tomi { grid-column:1/-1; padding:24px 10px 18px; clip-path:polygon(50% 0,100% 48%,92% 100%,8% 100%,0 48%); color:white; background:linear-gradient(145deg,#f43f5e,#c026d3); font-size:clamp(34px,6vw,64px); font-weight:950; text-align:center; }
.uy-xona { display:grid; min-height:100px; place-items:center; border:5px solid white; color:#1e3a8a; background:#bae6fd; font-size:clamp(40px,7vw,70px); font-weight:950; }
.uy-xona.yashirin { color:#7c3aed; background:#f3e8ff; border-style:dashed; }
.onlik-birikma { display:grid; min-width:min(90%,650px); padding:24px; grid-template-columns:1fr 1fr; gap:24px; border:6px solid white; border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 18px 38px rgba(30,64,175,.14); }
.onliklar,.birliklar { display:flex; min-height:130px; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.onlik-tayoq { display:grid; width:30px; height:120px; place-items:center; border:3px solid #1d4ed8; border-radius:8px; color:#1d4ed8; background:repeating-linear-gradient(0deg,#93c5fd 0 9px,#fff 9px 11px); font-size:0; }
.birlik-kub { display:grid; width:34px; height:34px; place-items:center; border:3px solid white; border-radius:9px; color:#f97316; background:#fed7aa; box-shadow:0 5px 8px rgba(194,65,12,.15); font-size:18px; }
.abakus-amal { grid-column:1/-1; color:var(--lab-1); font-size:clamp(25px,5vw,54px); text-align:center; }
.onlik-ramka { display:grid; width:clamp(220px,38vw,420px); padding:12px; grid-template-columns:repeat(5,1fr); gap:8px; border:7px solid #1d4ed8; border-radius:24px; background:white; box-shadow:0 18px 32px rgba(29,78,216,.16); }
.onlik-ramka span { aspect-ratio:1; border:3px solid #cbd5e1; border-radius:50%; }
.onlik-ramka .tolgan { border-color:#f97316; background:radial-gradient(circle at 35% 30%,#fde68a,#f97316 60%); }
.qoshiluvchi-chip { margin-top:14px; padding:11px 24px; border-radius:999px; color:white; background:#16a34a; box-shadow:0 9px 18px rgba(22,163,74,.25); font-size:clamp(28px,5vw,50px); font-weight:950; }
.butun-tasma { display:grid; width:min(90%,680px); grid-template-columns:var(--chap,1fr) var(--ong,1fr); border:6px solid white; border-radius:24px; overflow:hidden; box-shadow:0 18px 34px rgba(30,64,175,.16); }
.tasma-qism { display:grid; min-height:120px; place-items:center; color:white; font-size:clamp(38px,6vw,64px); font-weight:950; }
.tasma-qism.bir { background:linear-gradient(145deg,#06b6d4,#2563eb); }
.tasma-qism.ikki { background:linear-gradient(145deg,#f59e0b,#f97316); }
.tasma-butun { grid-column:1/-1; padding:12px; color:#4c1d95; background:#fff; font-size:clamp(20px,3vw,32px); text-align:center; }
.lab-tarozi { position:relative; display:grid; width:min(92%,700px); min-height:230px; grid-template-columns:1fr 110px 1fr; align-items:end; }
.tarozi-palla { display:grid; min-height:100px; place-items:center; border:7px solid white; border-radius:50% 50% 28px 28px; color:white; background:linear-gradient(#38bdf8,#2563eb); box-shadow:0 18px 30px rgba(30,64,175,.2); font-size:clamp(30px,5vw,58px); font-weight:950; }
.tarozi-palla.ong { background:linear-gradient(#fb7185,#db2777); }
.tarozi-ustun { align-self:end; padding-bottom:18px; color:#92400e; font-size:clamp(70px,12vw,130px); text-align:center; }
.olchov-lab { display:flex; min-width:min(92%,650px); min-height:220px; align-items:center; justify-content:center; gap:22px; }
.yuk { display:grid; min-width:150px; min-height:130px; padding:16px; place-items:center; border:6px solid white; border-radius:26px; color:#713f12; background:#fef3c7; box-shadow:0 16px 28px rgba(146,64,14,.15); font-size:clamp(20px,3vw,34px); font-weight:950; }
.plus { color:#eab308; font-size:60px; font-weight:950; }
.suv-idish { position:relative; width:180px; height:230px; overflow:hidden; border:10px solid #93c5fd; border-top:0; border-radius:12px 12px 46px 46px; background:linear-gradient(to top,#38bdf8 var(--tolish),rgba(255,255,255,.65) var(--tolish)); box-shadow:0 18px 28px rgba(2,132,199,.15); }
.suv-idish::after { content:'💧'; position:absolute; top:12px; left:50%; font-size:54px; transform:translateX(-50%); }
.siniq-svg { width:min(92%,600px); overflow:visible; }
.siniq-svg polyline { fill:none; stroke:var(--lab-1); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 8px 8px rgba(76,29,149,.22)); }
.siniq-svg text { fill:#172554; font:900 21px system-ui; }
.perimetr-shakl { position:relative; width:clamp(190px,35vw,400px); height:clamp(130px,23vw,260px); border:15px dashed #16a34a; border-radius:10px; background:repeating-linear-gradient(45deg,#dcfce7 0 18px,#bbf7d0 18px 36px); box-shadow:0 18px 32px rgba(22,163,74,.16); }
.olcham { position:absolute; padding:5px 12px; border-radius:999px; color:white; background:#047857; font-weight:900; }
.olcham.eni { left:50%; bottom:-35px; transform:translateX(-50%); }
.olcham.boyi { top:50%; right:-60px; transform:translateY(-50%) rotate(90deg); }
.geometriya-sahna { display:grid; width:min(90%,530px); min-height:260px; place-items:center; perspective:700px; }
.polygon-belgi { color:var(--lab-1); font-size:clamp(150px,26vw,270px); line-height:1; filter:drop-shadow(0 18px 15px rgba(76,29,149,.18)); }
.tortburchak-belgi { display:block; border:12px solid #2563eb; border-radius:16px; background:linear-gradient(145deg,#dbeafe,#fef3c7); box-shadow:0 18px 30px rgba(37,99,235,.18); }
.burchak-belgi { position:relative; width:220px; height:150px; }
.burchak-belgi::before,.burchak-belgi::after { content:''; position:absolute; left:35px; bottom:25px; width:170px; height:13px; border-radius:9px; background:var(--lab-1); transform-origin:left center; }
.burchak-belgi::after { transform:rotate(calc(-1 * var(--daraja))); }
.soha-doira { position:relative; display:block; width:250px; height:190px; border:12px solid #2563eb; border-radius:50%; background:rgba(147,197,253,.35); }
.qizil-nuqta { position:absolute; width:28px; height:28px; border:5px solid white; border-radius:50%; background:#ef4444; box-shadow:0 7px 12px rgba(185,28,28,.28); }
.soha-doira[data-nuqta="ichida"] .qizil-nuqta { top:50%; left:50%; transform:translate(-50%,-50%); }
.soha-doira[data-nuqta="чегарада"] .qizil-nuqta,.soha-doira[data-nuqta="chegarada"] .qizil-nuqta { top:-17px; left:50%; }
.soha-doira[data-nuqta="ташқарида"] .qizil-nuqta,.soha-doira[data-nuqta="tashqarida"] .qizil-nuqta { right:-70px; bottom:-25px; }
.tangram { position:relative; width:260px; height:260px; filter:drop-shadow(0 18px 14px rgba(76,29,149,.2)); transform:rotate(calc(var(--namuna,0)*3deg)); }
.tangram span { position:absolute; display:block; }
.tangram-a { inset:0 50% 50% 0; clip-path:polygon(0 0,100% 100%,0 100%); background:#ef4444; }
.tangram-b { inset:0 0 50% 50%; clip-path:polygon(0 100%,100% 0,100% 100%); background:#3b82f6; }
.tangram-c { inset:50% 50% 0 0; clip-path:polygon(0 0,100% 0,0 100%); background:#22c55e; }
.tangram-d { inset:50% 0 0 50%; clip-path:polygon(0 0,100% 0,100% 100%); background:#f59e0b; }
.tangram-e { width:90px; height:90px; top:85px; left:85px; background:#a855f7; transform:rotate(45deg); }
.tangram-f { width:70px; height:70px; right:10px; bottom:10px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#06b6d4; }
.tangram-g { width:80px; height:55px; left:10px; bottom:10px; transform:skew(-25deg); background:#ec4899; }
.aylanuvchi-shakl { display:grid; width:clamp(160px,28vw,290px); aspect-ratio:1; place-items:center; border:8px solid white; border-radius:34px; background:linear-gradient(145deg,#fef3c7,#dbeafe); box-shadow:0 22px 36px rgba(76,29,149,.17); font-size:clamp(90px,18vw,180px); transform:rotate(var(--burilish)); transition:transform .8s; animation:mayin-aylanish 3s ease-in-out infinite alternate; }
.aylanuvchi-shakl.oyna { box-shadow:25px 0 0 rgba(147,197,253,.32),0 22px 36px rgba(76,29,149,.17); }
.rim-soat { position:relative; width:clamp(220px,36vw,350px); aspect-ratio:1; border:14px solid #92400e; border-radius:50%; background:radial-gradient(circle,#fff 0 58%,#fef3c7 59% 100%); box-shadow:0 22px 38px rgba(146,64,14,.2); }
.rim-soat span { position:absolute; top:50%; left:50%; font-size:clamp(15px,2.5vw,24px); font-weight:950; transform:translate(-50%,-50%) rotate(calc(var(--i)*30deg)) translateY(clamp(-135px,-14vw,-90px)) rotate(calc(var(--i)*-30deg)); }
.soat-strelka { position:absolute; left:50%; bottom:50%; width:8px; height:34%; border-radius:8px; background:#dc2626; transform-origin:50% 100%; transform:translateX(-50%) rotate(calc(var(--soat)*30deg)); }
.soat-strelka::after { content:''; position:absolute; left:50%; bottom:-10px; width:22px; height:22px; border-radius:50%; background:#1e293b; transform:translateX(-50%); }
.tenglama-qulf { position:relative; display:grid; width:clamp(220px,38vw,390px); min-height:230px; padding:80px 28px 25px; place-items:center; border:10px solid #f59e0b; border-radius:34px; color:white; background:linear-gradient(145deg,#7c3aed,#2563eb); box-shadow:0 22px 40px rgba(76,29,149,.25); }
.qulf-tutqich { position:absolute; top:-105px; width:55%; height:135px; border:24px solid #fbbf24; border-bottom:0; border-radius:100px 100px 0 0; }
.qulf-ifoda { font-size:clamp(27px,5vw,52px); }
.qulf-teshik { display:grid; width:56px; height:56px; place-items:center; border-radius:50% 50% 18px 18px; color:#713f12; background:#fef3c7; font-size:34px; font-weight:950; }
.masala-yoli { display:flex; width:min(94%,900px); align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.masala-yoli span { display:grid; min-width:80px; min-height:80px; padding:10px; place-items:center; border:5px solid white; border-radius:50%; color:white; background:linear-gradient(145deg,var(--lab-2),var(--lab-1)); box-shadow:0 12px 22px rgba(76,29,149,.18); font-size:clamp(20px,3vw,34px); font-weight:950; }
.masala-yoli span + span::before { content:'➜'; margin-right:12px; color:#f59e0b; }
.ifoda-mashinasi { display:grid; min-width:min(90%,600px); min-height:210px; padding:24px; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; border:8px solid white; border-radius:38px; color:white; background:linear-gradient(145deg,#0ea5e9,#7c3aed); box-shadow:0 22px 38px rgba(76,29,149,.2); }
.tishli { font-size:clamp(55px,9vw,100px); animation:tishli-aylan 5s linear infinite; }
.ifoda-matni { font-size:clamp(28px,5vw,55px); text-align:center; }
.natija-oynasi { display:grid; width:80px; height:90px; place-items:center; border:6px dashed #fef3c7; border-radius:20px; color:#fef3c7; font-size:55px; font-weight:950; }
.chiziq-namuna { position:relative; width:min(86%,560px); height:190px; }
.chiziq-namuna span,.chiziq-namuna::before,.chiziq-namuna::after { position:absolute; content:''; left:8%; right:8%; top:50%; height:12px; border-radius:12px; background:var(--lab-1); }
.chiziq-namuna.эгри-чизиқ span,.chiziq-namuna.egri-chiziq span { height:100px; border:12px solid var(--lab-1); border-color:var(--lab-1) transparent transparent; border-radius:50%; background:transparent; }
.chiziq-namuna.кесма span,.chiziq-namuna.kesma span { left:20%; right:20%; }
.chiziq-namuna.кесма::before,.chiziq-namuna.kesma::before,.chiziq-namuna.кесма::after,.chiziq-namuna.kesma::after { left:18%; right:auto; width:25px; height:25px; border-radius:50%; transform:translateY(-7px); }
.chiziq-namuna.кесма::after,.chiziq-namuna.kesma::after { left:auto; right:18%; }
.chiziq-namuna.синиқ-чизиқ span,.chiziq-namuna.siniq-chiziq span { clip-path:polygon(0 55%,28% 5%,55% 75%,80% 20%,100% 52%,100% 65%,80% 34%,55% 90%,28% 20%,0 70%); height:130px; background:var(--lab-1); }
.joylashuv-sahna { position:relative; width:min(86%,560px); height:250px; border:7px solid white; border-radius:35px; background:linear-gradient(#bae6fd 0 63%,#bbf7d0 64%); box-shadow:0 20px 34px rgba(14,116,144,.15); }
.joy-birinchi,.joy-ikkinchi { position:absolute; display:grid; place-items:center; font-size:clamp(70px,13vw,130px); }
.joy-ikkinchi { left:50%; top:50%; transform:translate(-50%,-50%); }
.joy-birinchi { left:62%; top:30%; z-index:2; }
.holat-чапда .joy-birinchi,.holat-chapda .joy-birinchi { left:18%; }
.holat-ўнгда .joy-birinchi,.holat-ongda .joy-birinchi { left:70%; }
.holat-устида .joy-birinchi,.holat-ustida .joy-birinchi,.holat-тепасида .joy-birinchi { left:50%; top:0; transform:translateX(-50%); }
.holat-остида .joy-birinchi,.holat-ostida .joy-birinchi { left:50%; top:64%; transform:translateX(-50%); }
.sahna-kartasi { display:grid; min-width:min(86%,520px); min-height:210px; padding:22px; place-items:center; border:7px solid white; border-radius:34px; background:linear-gradient(145deg,#fff,#fef3c7); box-shadow:0 20px 38px rgba(76,29,149,.15); text-align:center; }
.sahna-belgi { font-size:clamp(80px,15vw,150px); line-height:1; }
.sahna-nomi { color:var(--lab-1); font-size:clamp(28px,5vw,52px); }
.sahna-matn { margin:8px 0 0; color:#334155; font-size:clamp(18px,3vw,31px); font-weight:850; }
.mexanika-savat .darslik-variant { min-width:clamp(145px,24vw,300px); min-height:110px; border-radius:28px 28px 70px 70px; background:linear-gradient(#38bdf8,#2563eb); }
.mexanika-savat .darslik-variant:nth-child(2n) { background:linear-gradient(#fb7185,#db2777); }
.mexanika-savat .darslik-variant::after { content:''; position:absolute; inset:15px; border:5px solid rgba(255,255,255,.35); border-radius:18px 18px 50px 50px; }
.mexanika-tarozi .darslik-variant,.mexanika-muvozanat .darslik-variant { min-width:100px; border-radius:50%; font-size:42px; }
.mexanika-son_yoli .darslik-variant,.mexanika-chizgich .darslik-variant,.mexanika-kesma .darslik-variant { min-width:68px; border-radius:50% 50% 18px 18px; }
.mexanika-puzzle .darslik-variant,.mexanika-oyna .darslik-variant { min-width:150px; min-height:95px; border-radius:28px; font-size:26px; }
.mexanika-sehrli_katak { --lab-1:#0369a1; --lab-2:#0ea5e9; --lab-3:#f59e0b; --lab-yumshoq:#e0f2fe; grid-template-rows:minmax(150px,1fr) auto; }
.mexanika-sehrli_katak .darslik-savol { display:none; }
.mexanika-sehrli_katak .darslik-sahna { position:relative; grid-row:1; overflow:visible; }
.mexanika-sehrli_katak .darslik-javoblar { display:grid; min-height:66px; grid-row:2; grid-template-columns:repeat(6,minmax(52px,86px)); align-items:center; }
.mexanika-sehrli_katak .sehrli-karta { min-width:0; min-height:58px; padding:7px; border-radius:18px; font-size:clamp(20px,2.4vw,30px); }
.sehrli-karta.joylandi { opacity:.28; filter:grayscale(.45); transform:scale(.9); }
.sehrli-sahna-quti { position:absolute; display:grid; inset:0; width:100%; height:100%; min-height:0; grid-template-columns:auto auto; grid-template-rows:minmax(0,1fr); align-items:center; justify-content:center; gap:clamp(4px,2vw,24px); }
.sehrli-qizcha { width:auto; height:100%; min-height:0; max-height:100%; overflow:hidden; aspect-ratio:1/2; justify-self:center; filter:drop-shadow(0 13px 13px rgba(15,23,42,.2)); transform-origin:50% 90%; }
.sehrli-qizcha-rasm { display:block; width:auto; max-width:none; height:100%; transform:translateX(0); transition:transform .12s steps(1,end); user-select:none; pointer-events:none; }
.sehrli-qizcha.kutish { animation:qizcha-kutishi 2.2s ease-in-out infinite; }
.sehrli-qizcha.xursand { animation:qizcha-quvonchi .52s ease-in-out 4; }
.sehrli-qizcha.xafa { animation:qizcha-xatosi .42s ease-in-out 4; }
.sehrli-qizcha.xursand .sehrli-qizcha-rasm { transform:translateX(-33.333333%); }
.sehrli-qizcha.xafa .sehrli-qizcha-rasm { transform:translateX(-66.666667%); }
.sehrli-ramka { position:relative; display:grid; width:auto; height:100%; min-height:0; max-width:min(58vw,500px); max-height:100%; aspect-ratio:1; padding:clamp(6px,1.1vw,13px); grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); align-items:center; justify-items:center; isolation:isolate; border:clamp(4px,.6vw,8px) solid rgba(255,255,255,.94); border-radius:clamp(18px,3vw,34px); background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(224,242,254,.92)); box-shadow:0 16px 30px rgba(2,132,199,.2),inset 0 0 0 4px rgba(14,165,233,.12); }
.sehrli-ramka::before { content:''; position:absolute; z-index:-1; inset:12%; border:clamp(4px,.7vw,8px) solid rgba(14,165,233,.2); border-radius:24px; background:radial-gradient(circle at 50% 45%,#fef3c7,rgba(186,230,253,.48) 70%); }
.sehrli-belgi { z-index:2; display:grid; width:70%; min-width:0; aspect-ratio:1; place-items:center; border-radius:clamp(8px,1.4vw,18px); color:#172554; font-size:clamp(17px,4vh,38px); font-weight:950; line-height:1; }
.sehrli-son { border:3px solid rgba(14,165,233,.32); background:#fff; box-shadow:0 7px 14px rgba(2,132,199,.12); }
.sehrli-son.tayanch { color:#fff; border-color:#fff; background:linear-gradient(145deg,#10b981,#047857); text-shadow:0 3px 0 rgba(0,0,0,.12); }
.sehrli-amal { color:#f97316; text-shadow:0 3px 0 rgba(255,255,255,.9); }
.sehrli-teng { color:#eab308; }
.sehrli-bosh-katak { border:clamp(3px,.5vw,6px) dashed #8b5cf6; color:#7c3aed; background:#f3e8ff; box-shadow:0 8px 18px rgba(124,58,237,.17); cursor:pointer; touch-action:manipulation; transition:transform .18s,background .18s,box-shadow .18s; }
.sehrli-bosh-katak.tanlash-kutilmoqda { animation:sehrli-katak-chorlovi .8s ease-in-out infinite alternate; }
.sehrli-bosh-katak.ustida,.sehrli-bosh-katak.qabul-kutilmoqda { transform:scale(1.12); background:#fef3c7; box-shadow:0 0 0 8px rgba(250,204,21,.3); }
.sehrli-bosh-katak.toldirilgan { border-style:solid; color:#fff; background:linear-gradient(145deg,#8b5cf6,#4f46e5); text-shadow:0 3px 0 rgba(0,0,0,.13); }
.sehrli-bosh-katak.katak-togri { color:#713f12; border-color:#fff7b2; background:linear-gradient(145deg,#fff59d 0%,#facc15 48%,#d97706 100%); box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 24px rgba(245,158,11,.75); text-shadow:0 1px 0 rgba(255,255,255,.55); animation:sehrli-katak-togri .45s ease 4; }
.sehrli-bosh-katak.katak-xato { color:#fff; border-color:#fee2e2; background:linear-gradient(145deg,#fb7185,#dc2626); box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 22px rgba(220,38,38,.62); animation:sehrli-katak-xato .38s ease 4; }
.sehrli-markaz { z-index:1; display:grid; width:82%; height:82%; align-self:center; justify-self:center; place-items:center; align-content:center; gap:5px; border:4px solid rgba(255,255,255,.86); border-radius:50%; color:#075985; background:radial-gradient(circle at 35% 25%,#fff,#bae6fd 55%,#7dd3fc); box-shadow:0 13px 24px rgba(2,132,199,.16); text-align:center; }
.sehrli-yumaloq { width:clamp(42px,7vw,78px); aspect-ratio:1; border:clamp(5px,.7vw,9px) solid rgba(255,255,255,.95); border-radius:50%; background:radial-gradient(circle at 32% 28%,#fef9c3 0 12%,#facc15 14% 48%,#f59e0b 52% 72%,#b45309 76% 100%); box-shadow:0 8px 0 rgba(180,83,9,.2),0 0 24px rgba(250,204,21,.48); }
.sehrli-markaz-matn { display:none; }
.sehrli-ramka.ramka-togri { animation:sehrli-ramka-togri .55s ease 3; }
.sehrli-ramka.ramka-xato { animation:sehrli-ramka-xato .48s ease 3; }
@keyframes lab-togri { 50% { transform:translateY(-9px) scale(1.08); filter:drop-shadow(0 0 18px #22c55e); } }
@keyframes lab-xato { 25% { transform:translateX(-10px); } 55% { transform:translateX(10px); } 80% { transform:translateX(-5px); } }
@keyframes lab-maydon-togri { 50% { box-shadow:inset 0 0 0 10px rgba(34,197,94,.32),0 0 35px rgba(34,197,94,.25); } }
@keyframes lab-maydon-xato { 50% { box-shadow:inset 0 0 0 10px rgba(239,68,68,.28),0 0 35px rgba(239,68,68,.2); } }
@keyframes vagon-sakrashi { 50% { transform:translateY(-9px); } }
@keyframes lift-harakati { to { transform:translateY(-8px); } }
@keyframes nuqta-urishi { 50% { transform:scale(1.18); box-shadow:0 0 0 10px rgba(250,204,21,.25); } }
@keyframes mayin-aylanish { to { transform:rotate(calc(var(--burilish) + 12deg)) scale(1.04); } }
@keyframes tishli-aylan { to { transform:rotate(360deg); } }
@keyframes qizcha-kutishi { 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes qizcha-quvonchi { 50% { transform:translateY(-13px) scale(1.06); filter:drop-shadow(0 0 18px rgba(34,197,94,.75)); } }
@keyframes qizcha-xatosi { 25% { transform:translateX(-6px) rotate(-2deg); } 70% { transform:translateX(6px) rotate(2deg); } }
@keyframes sehrli-katak-chorlovi { to { transform:scale(1.07); box-shadow:0 0 0 7px rgba(139,92,246,.16),0 8px 18px rgba(124,58,237,.2); } }
@keyframes sehrli-katak-togri { 50% { transform:scale(1.15); box-shadow:0 0 0 9px rgba(34,197,94,.25); } }
@keyframes sehrli-katak-xato { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); box-shadow:0 0 0 8px rgba(239,68,68,.2); } }
@keyframes sehrli-ramka-togri { 50% { box-shadow:0 0 0 12px rgba(34,197,94,.2),0 22px 42px rgba(2,132,199,.2); } }
@keyframes sehrli-ramka-xato { 50% { box-shadow:0 0 0 12px rgba(239,68,68,.18),0 22px 42px rgba(2,132,199,.2); } }
@media (max-width:700px) {
    .darslik-lab { inset:6px; padding:11px; grid-template-rows:auto minmax(135px,1fr) auto; gap:8px; border-radius:16px; }
    .darslik-savol { font-size:clamp(17px,5vw,23px); }
    .darslik-sahna { min-height:130px; }
    .darslik-javoblar { min-height:58px; gap:6px; }
    .darslik-variant { min-width:72px; min-height:54px; padding:7px 10px; border-width:3px; border-radius:14px; font-size:clamp(15px,4.5vw,21px); }
    .katta-belgi { width:78px; border-width:4px; border-radius:18px; font-size:50px; }
    .ketma-karta { min-width:60px; min-height:62px; padding:7px; border-width:3px; border-radius:14px; font-size:14px; }
    .onlik-birikma { min-width:92%; min-height:135px; padding:10px; gap:8px; border-width:4px; }
    .onliklar,.birliklar { min-height:90px; }
    .onlik-tayoq { width:20px; height:78px; }
    .birlik-kub { width:25px; height:25px; }
    .lab-tarozi { min-height:150px; grid-template-columns:1fr 64px 1fr; }
    .tarozi-palla { min-height:76px; border-width:4px; font-size:28px; }
    .tarozi-ustun { font-size:62px; }
    .olchov-lab { min-height:150px; gap:8px; }
    .yuk { min-width:100px; min-height:90px; padding:7px; border-width:4px; font-size:17px; }
    .suv-idish { width:115px; height:145px; border-width:7px; }
    .tangram { width:170px; height:170px; }
    .aylanuvchi-shakl { width:145px; border-width:5px; border-radius:22px; font-size:85px; }
    .rim-soat { width:190px; border-width:8px; }
    .rim-soat span { transform:translate(-50%,-50%) rotate(calc(var(--i)*30deg)) translateY(-74px) rotate(calc(var(--i)*-30deg)); font-size:13px; }
    .tenglama-qulf { width:210px; min-height:135px; padding:50px 14px 12px; border-width:6px; border-radius:23px; }
    .qulf-tutqich { top:-62px; height:78px; border-width:15px; }
    .ifoda-mashinasi { min-width:94%; min-height:125px; padding:12px; gap:8px; border-width:4px; border-radius:23px; }
    .tishli { font-size:44px; }
    .natija-oynasi { width:54px; height:60px; font-size:36px; }
    .joylashuv-sahna { width:92%; height:155px; border-width:4px; border-radius:20px; }
    .joy-birinchi,.joy-ikkinchi { font-size:66px; }
    .sahna-kartasi { min-width:92%; min-height:125px; padding:10px; border-width:4px; border-radius:20px; }
    .sahna-belgi { font-size:68px; }
    .mexanika-savat .darslik-variant { min-width:120px; min-height:75px; border-radius:18px 18px 42px 42px; }
    .sehrli-sahna-quti { width:100%; grid-template-columns:auto auto; gap:4px; }
    .sehrli-qizcha { width:auto; height:min(100%,240px); }
    .sehrli-ramka { width:auto; height:min(100%,320px); min-width:0; }
    .mexanika-sehrli_katak .darslik-javoblar { grid-template-columns:repeat(6,minmax(44px,62px)); gap:5px; }
    .darslik-lab.mexanika-sehrli_katak { grid-template-rows:minmax(135px,1fr) auto; }
    .mexanika-sehrli_katak .sehrli-karta { min-height:50px; border-width:3px; border-radius:14px; font-size:19px; }
}
@media (max-width:430px) {
    .darslik-lab { grid-template-rows:auto minmax(115px,1fr) auto; }
    .darslik-javoblar { max-height:none; flex-wrap:nowrap; overflow:visible; }
    .darslik-variant { min-height:48px; }
    .mexanika-savat .darslik-variant { min-width:clamp(80px,28vw,96px); min-height:64px; padding-inline:6px; font-size:15px; }
    .mexanika-puzzle .darslik-variant,.mexanika-oyna .darslik-variant { min-width:clamp(80px,28vw,96px); min-height:58px; padding-inline:6px; border-radius:16px; font-size:15px; }
    .sanoq-poyezdi { gap:1px; }
    .vagon { width:30px; height:48px; border-width:2px; border-radius:7px 7px 12px 12px; font-size:14px; }
    .vagon.faol { height:68px; }
    .vagon::after { width:7px; height:7px; border-width:2px; bottom:-5px; box-shadow:-13px 0 #334155,-13px 0 0 2px white; }
    .ketma-strelka { font-size:21px; }
    .chiziq-nuqta { width:29px; height:29px; border-width:3px; font-size:12px; }
    .raqam-izi-quti canvas { max-height:155px; }
    .uy-tomi { padding:13px 6px 9px; font-size:31px; }
    .uy-xona { min-height:62px; font-size:34px; }
    .onlik-ramka { width:210px; padding:7px; gap:4px; border-width:4px; }
    .butun-tasma { border-width:4px; }
    .tasma-qism { min-height:78px; font-size:31px; }
    .perimetr-shakl { width:180px; height:110px; border-width:9px; }
    .geometriya-sahna { min-height:150px; }
    .polygon-belgi { font-size:130px; }
    .soha-doira { width:160px; height:118px; border-width:8px; }
    .masala-yoli span { min-width:52px; min-height:52px; padding:5px; border-width:3px; font-size:16px; }
    .mexanika-sehrli_katak { padding-inline:7px; }
    .mexanika-sehrli_katak .darslik-savol { font-size:16px; }
    .sehrli-sahna-quti { grid-template-columns:1fr; }
    .sehrli-qizcha { position:absolute; z-index:4; right:0; bottom:-2px; left:auto; width:auto; height:66%; pointer-events:none; }
    .sehrli-ramka { width:auto; height:min(100%,310px); min-width:0; }
    .sehrli-belgi { width:70%; min-width:0; font-size:clamp(17px,6.5vw,29px); }
    .sehrli-markaz-matn { display:none; }
    .mexanika-sehrli_katak .darslik-javoblar { width:100%; grid-template-columns:repeat(6,1fr); gap:4px; }
    .darslik-lab.mexanika-sehrli_katak { grid-template-rows:minmax(120px,1fr) auto; }
    .mexanika-sehrli_katak .sehrli-karta { min-width:0; min-height:46px; padding:3px; font-size:17px; }
}
@media (max-width:360px) {
    .darslik-lab { padding:7px; grid-template-rows:auto minmax(100px,1fr) auto; gap:5px; }
    .darslik-savol { font-size:15px; }
    .darslik-sahna { min-height:100px; }
    .darslik-javoblar { gap:4px; }
    .darslik-variant { min-width:58px; min-height:42px; padding:4px 5px; border-width:2px; border-radius:12px; font-size:13px; }
    .mexanika-savat .darslik-variant,.mexanika-puzzle .darslik-variant,.mexanika-oyna .darslik-variant { min-width:76px; min-height:50px; padding-inline:4px; font-size:13px; }
    .tangram { width:125px; height:125px; }
    .rim-soat { width:142px; }
    .rim-soat span { transform:translate(-50%,-50%) rotate(calc(var(--i)*30deg)) translateY(-54px) rotate(calc(var(--i)*-30deg)); font-size:10px; }
    .aylanuvchi-shakl { width:112px; font-size:65px; }
    .tenglama-qulf { width:175px; min-height:108px; padding:38px 8px 8px; }
    .qulf-tutqich { top:-49px; height:62px; border-width:12px; }
    .sahna-kartasi { min-height:90px; }
    .sahna-belgi { font-size:52px; }
}
@media (orientation:landscape) and (max-height:560px) {
    .darslik-lab { grid-template-columns:minmax(240px,.8fr) minmax(350px,1.4fr); grid-template-rows:auto 1fr; padding:10px 18px; gap:8px 18px; }
    .darslik-savol { grid-column:1; grid-row:1; font-size:19px; }
    .darslik-sahna { grid-column:1; grid-row:2; min-height:150px; }
    .darslik-javoblar { grid-column:2; grid-row:1/3; align-content:center; }
    .darslik-variant { min-height:58px; }
    .son-lifti { padding:8px; grid-template-rows:repeat(2,minmax(44px,auto)); gap:5px; }
    .lift-qavat,.lift-son { min-height:44px; font-size:1.25rem; }
    .lift-kabina { min-height:108px; font-size:2.6rem; }
    .son-lifti::after { top:5px; right:5px; padding:4px 8px; }
    .mexanika-sehrli_katak .darslik-savol { font-size:17px; }
    .mexanika-sehrli_katak .darslik-javoblar { grid-template-columns:repeat(2,minmax(64px,100px)); }
    .darslik-lab.mexanika-sehrli_katak { grid-template-columns:minmax(260px,1fr) auto; grid-template-rows:minmax(150px,1fr); }
    .mexanika-sehrli_katak .darslik-sahna { grid-column:1; grid-row:1; }
    .mexanika-sehrli_katak .darslik-javoblar { grid-column:2; grid-row:1; }
    .sehrli-sahna-quti { grid-template-columns:auto auto; gap:2px; }
    .sehrli-qizcha { position:static; width:auto; height:min(100%,190px); }
    .sehrli-ramka { width:auto; height:min(100%,230px); min-width:0; }
    .sehrli-belgi { width:70%; min-width:0; font-size:19px; }
    .sehrli-markaz-matn { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .darslik-lab *, .darslik-lab *::before, .darslik-lab *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}