:root{--ink:#284f4c;--muted:#70847e;--paper:#fffdf7;--line:#ddd2b3;--yellow:#f4bb42;--purple:#8071b8;--blue:#55a8cb;--green:#55aa80;--green-dark:#2d765b;--coral:#ed7267;--shadow:0 18px 36px rgba(53,79,68,.14),0 8px 0 rgba(145,126,79,.16)}
*{box-sizing:border-box}html{min-width:320px}body{min-width:320px;margin:0;overflow-x:hidden;background:#f4f1df;color:var(--ink);font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif}.background{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 12% 16%,rgba(255,255,255,.8) 0 3px,transparent 4px) 0 0/46px 46px,radial-gradient(circle at 88% 18%,rgba(91,169,207,.18),transparent 33%),linear-gradient(135deg,#fff5d6,#edf2df 55%,#e6f0e8)}button{font:inherit;color:inherit}button:focus-visible{outline:4px solid rgba(244,187,66,.62);outline-offset:3px}.app{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:22px 0 52px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.brand,.top-button{min-height:52px;border:2px solid var(--line);border-radius:18px;background:#fffdf8;box-shadow:0 5px 0 rgba(145,126,79,.16);cursor:pointer}.brand{display:flex;align-items:center;gap:10px;padding:5px 15px 5px 7px;text-align:left}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#ffe080,var(--yellow));font-size:23px}.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{font-size:11px;color:var(--muted)}.top-actions{display:flex;gap:9px}.top-button{padding:0 16px;font-weight:900}.paper{border:2px solid var(--line);border-radius:40px;background:var(--paper);box-shadow:var(--shadow)}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);min-height:510px;overflow:hidden}.hero-copy{padding:48px 38px 38px 52px}.eyebrow{margin:0 0 13px;color:#a06c20;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{margin:0}.hero h1,.labs h2,.result h1,.album h1{font-family:Georgia,"Times New Roman",serif}.hero h1{font-size:clamp(44px,4.9vw,62px);line-height:.98;letter-spacing:-.045em;overflow-wrap:normal}.lead{margin:22px 0 25px;max-width:570px;color:var(--muted);font-size:18px;line-height:1.5}.hero-actions,.actions,.result-actions{display:flex;flex-wrap:wrap;gap:12px}.primary,.secondary,.hint{min-height:55px;padding:0 23px;border-radius:17px;font-weight:900;cursor:pointer}.primary{border:0;background:var(--green);color:white;box-shadow:0 7px 0 var(--green-dark)}.primary:hover:not(:disabled){transform:translateY(-1px);background:#66b98f}.primary:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--green-dark)}.secondary,.hint{border:2px solid var(--line);background:#fffaf0;box-shadow:0 5px 0 rgba(145,126,79,.15)}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:32px}.hero-facts div{padding:10px;border:2px solid #d9d5b8;border-radius:17px;background:#f5f8e9}.hero-facts b{font-size:22px;color:var(--purple)}.hero-facts span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.hero-visual{position:relative;min-height:510px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.36) 1px,transparent 1px),#dfeee8;background-size:30px 30px}.hero-visual .circuit{position:absolute;left:20px;top:55px;width:93%;height:320px}.hero-visual>img{position:absolute;right:-15px;bottom:-15px;width:175px;height:275px;object-fit:contain;filter:drop-shadow(0 9px 7px rgba(43,72,64,.12))}.safety{display:flex;align-items:center;gap:14px;width:min(930px,calc(100% - 28px));margin:18px auto 0;padding:16px 21px;border:2px solid #e1c77d;border-radius:24px;background:#fff1c0;box-shadow:0 7px 0 rgba(149,122,45,.13)}.safety>b{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--yellow);color:white;font-size:23px}.safety p{margin:0;line-height:1.42}.labs,.album,.result{margin-top:24px;padding:38px}.labs>p:not(.eyebrow),.album>p,.result>p{max-width:700px;color:var(--muted);line-height:1.45}.labs h2{font-size:clamp(38px,5vw,58px)}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:27px}.lab-card{display:flex;min-width:0;flex-direction:column;padding:25px 23px 22px;border:2px solid var(--line);border-radius:27px;background:#fff8e8;box-shadow:0 7px 0 rgba(145,126,79,.15)}.lab-card:nth-child(2){background:#eef6f8}.lab-card:nth-child(3){background:#f1eef8}.lab-card>span{display:grid;place-items:center;width:54px;height:54px;margin-bottom:18px;border-radius:18px;background:var(--yellow);font-family:Georgia,serif;font-size:27px;font-weight:900}.lab-card:nth-child(2)>span{background:var(--blue);color:white}.lab-card:nth-child(3)>span{background:var(--purple);color:white}.lab-card h3{font-size:25px}.lab-card p{flex:1;color:var(--muted);line-height:1.45}.lab-card small{margin:13px 0;color:var(--green-dark);font-weight:900}.lab-card .primary{width:100%}.game{padding:28px}.game-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-bottom:20px}.progress{display:flex;justify-content:space-between;gap:10px;font-size:13px}.track{height:13px;overflow:hidden;margin-top:8px;border:2px solid #ced2b3;border-radius:999px;background:#eef0df}.track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),var(--purple));transition:width .3s}.score{padding:10px 14px;border-radius:15px;background:#fff1bf}.experiment{display:grid;grid-template-columns:minmax(400px,.98fr) minmax(0,1.02fr);gap:26px}.stage{position:relative;min-height:465px;overflow:hidden;border:2px solid #cfd0b7;border-radius:31px;background:linear-gradient(rgba(255,255,255,.44) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.44) 1px,transparent 1px),#e8ead9;background-size:30px 30px}.stage>p{position:absolute;z-index:2;left:18px;right:18px;top:16px;margin:0;padding:9px;border-radius:16px;background:rgba(255,255,255,.93);text-align:center;font-weight:900}.circuit{width:100%;height:100%}.stage .circuit{position:absolute;inset:42px 0 0;width:100%;height:calc(100% - 42px)}.wire{fill:none;stroke:#386d75;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}.battery rect{fill:#f3bd4b;stroke:#365b58;stroke-width:6}.battery path,.bulb path{fill:none;stroke:#365b58;stroke-width:6;stroke-linecap:round}.battery text{font-size:24px;font-weight:900;fill:#365b58;text-anchor:middle}.battery.empty{opacity:.22}.bulb circle{fill:#fff6c5;stroke:#365b58;stroke-width:7}.bulb.on circle{fill:#fff0a3}.bulb.on path{stroke:#f1aa2e}.switch circle{fill:white;stroke:#365b58;stroke-width:5}.switch path{fill:none;stroke:#365b58;stroke-width:8;stroke-linecap:round}.switch text{font-size:14px;fill:#57716d;text-anchor:middle}.break{stroke:var(--coral);stroke-width:8;stroke-linecap:round}.light{fill:#ffe373;opacity:.65}.question{display:flex;min-width:0;flex-direction:column;padding:14px 3px}.question h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,4vw,51px);line-height:1.05}.options{display:grid;grid-template-columns:1fr;gap:11px;margin-top:20px}.options.two{grid-template-columns:repeat(2,1fr)}.options button{min-height:86px;padding:12px 15px;border:3px solid #d2d5bb;border-radius:22px;background:#fffaf0;box-shadow:0 6px 0 rgba(145,126,79,.15);font-weight:900;cursor:pointer;text-align:left}.options button span{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:12px;background:#edf5e5;font-size:20px}.options button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--purple)}.options button.wrong{border-color:var(--coral);background:#fff0ed}.options button.correct,.options button.hinted{border-color:var(--green);background:#eaf6ee}.feedback{min-height:84px;margin-top:15px;padding:14px 16px;border:2px solid #d8d7bd;border-radius:19px;background:#f8f6e9;line-height:1.4}.feedback b{display:block;margin-bottom:3px}.feedback.error{border-color:#efa9a0;background:#fff0ed}.feedback.success{border-color:#a6d7bd;background:#e9f6ee}.feedback.hint{border-color:#e4c56d;background:#fff4c9}.actions{margin-top:15px;align-items:center}.actions .primary{margin-left:auto}.result{text-align:center}.result h1{font-size:clamp(41px,5vw,61px)}.stars{margin:12px 0;color:var(--yellow);font-size:58px;letter-spacing:8px}.result>p{margin:0 auto}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,190px));justify-content:center;gap:12px;margin:25px auto}.stats div{padding:17px;border:2px solid var(--line);border-radius:20px;background:#fffaf0}.stats b{display:block;font-size:31px}.stats span{color:var(--muted);font-size:12px;font-weight:900}.result-actions{justify-content:center}.album{margin-top:0}.album-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:25px}.album-card{min-height:160px;padding:15px 8px;border:2px solid var(--line);border-radius:21px;background:#fffaf0;text-align:center}.album-card.locked{opacity:.48;filter:grayscale(.35)}.album-card>span{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 8px;border-radius:18px;background:#edf5e5;font-size:28px}.album-card b{display:block;min-height:35px;font-size:14px}.album-card small{display:block;margin-top:7px;color:var(--purple);font-size:11px;font-weight:900}@media(max-width:930px){.hero{grid-template-columns:minmax(0,1fr) 365px}.experiment{grid-template-columns:365px minmax(0,1fr)}.album-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.app{width:calc(100% - 20px);padding-top:10px}.hero{grid-template-columns:1fr}.hero-copy{padding:37px 27px 31px}.hero-visual{min-height:410px}.lab-grid,.experiment{grid-template-columns:1fr}.lab-card p{flex:auto}.stage{min-height:420px}.album-grid{grid-template-columns:repeat(3,1fr)}.game-head{grid-template-columns:1fr}.score{justify-self:start}}@media(max-width:520px){.app{width:calc(100% - 16px)}.brand{padding-right:8px}.brand small{display:none}.top-button{width:49px;padding:0;font-size:0}.top-button::first-letter{font-size:20px}.paper{border-radius:29px}.hero-copy{padding:31px 20px 25px}.hero h1{font-size:38px}.lead{font-size:16px}.hero-actions>*{width:100%}.hero-facts{grid-template-columns:1fr}.safety{width:calc(100% - 12px);align-items:flex-start;padding:14px;font-size:14px}.labs,.album,.result,.game{padding:20px 14px}.stage{min-height:360px;border-radius:23px}.experiment{gap:18px}.question h1{font-size:36px}.options.two{grid-template-columns:1fr 1fr}.options button{min-height:100px;padding:10px;font-size:14px}.options button span{display:flex;width:28px;height:28px;margin:0 auto 6px}.actions{display:grid;grid-template-columns:1fr 1fr}.actions .primary{grid-column:1/-1;width:100%;margin:0}.stats{grid-template-columns:1fr}.album-grid{grid-template-columns:repeat(2,1fr);gap:8px}}