:root {
  --ink:#2d504d;
  --muted:#708480;
  --paper:#fffdf7;
  --line:#ddd3b5;
  --yellow:#f3bd4b;
  --yellow-dark:#bd8429;
  --purple:#8170b8;
  --purple-dark:#5e4d91;
  --blue:#5ba9cf;
  --green:#59aa82;
  --green-dark:#31795e;
  --coral:#ec7166;
  --shadow:0 18px 38px rgba(64,83,69,.14),0 8px 0 rgba(151,136,87,.17);
}
*{box-sizing:border-box}
html{min-width:320px}
body{min-width:320px;margin:0;overflow-x:hidden;color:var(--ink);background:#f5f1df;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif}
button{color:inherit;font:inherit}
button:focus-visible{outline:4px solid rgba(243,189,75,.58);outline-offset:3px}
.background{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.88) 0 3px,transparent 4px) 0 0/46px 46px,radial-gradient(circle at 92% 11%,rgba(129,112,184,.14),transparent 35%),linear-gradient(135deg,#fff5d4,#f2f4e5 55%,#e4f0ea)}
.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:rgba(255,253,247,.96);box-shadow:0 5px 0 rgba(145,130,83,.18);cursor:pointer}
.brand{min-width:0;display:flex;align-items:center;gap:10px;padding:5px 15px 5px 7px;text-align:left}
.brand-mark{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:14px;color:#6b4c14;background:linear-gradient(145deg,#ffd978,var(--yellow));font-size:24px}
.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{margin-top:1px;color:var(--muted);font-size:11px}
.top-actions{display:flex;gap:9px}.top-button{padding:0 16px;font-weight:900}.brand:hover,.top-button:hover{transform:translateY(-1px)}.brand:active,.top-button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(145,130,83,.18)}
.paper{border:2px solid var(--line);border-radius:40px;background:var(--paper);box-shadow:var(--shadow)}
.hero{min-height:535px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(400px,.96fr);overflow:hidden}
.hero-copy{min-width:0;padding:48px 34px 38px 52px}
.eyebrow{margin:0 0 13px;color:#a0681e;font-size:13px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{margin:0}
.hero h1,.page-head h2,.result-page h1,.album-page h1{font-family:Georgia,"Times New Roman",serif}
.hero h1{max-width:620px;font-size:clamp(51px,5.8vw,75px);line-height:.98;letter-spacing:-.045em}
.lead{max-width:600px;margin:23px 0 25px;color:var(--muted);font-size:18px;line-height:1.5}
.hero-actions,.game-actions,.result-actions{display:flex;flex-wrap:wrap;gap:12px}
.primary,.secondary,.hint-button{min-height:55px;padding:0 23px;border-radius:17px;font-weight:900;cursor:pointer}
.primary{border:0;color:white;background:var(--green);box-shadow:0 7px 0 var(--green-dark)}
.primary:hover:not(:disabled){background:#67b88f;transform:translateY(-1px)}.primary:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--green-dark)}.primary:disabled{opacity:.55;cursor:default}
.secondary,.hint-button{border:2px solid var(--line);background:#fffaf0;box-shadow:0 5px 0 rgba(145,130,83,.16)}.secondary:hover,.hint-button:hover{background:#fff2cb;transform:translateY(-1px)}.secondary:active,.hint-button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(145,130,83,.16)}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:32px}
.hero-fact{min-width:0;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:0 8px;padding:9px;border:2px solid #d9d6ba;border-radius:17px;background:#f4f8ea}
.hero-fact span{grid-row:1/3;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--purple);font-weight:900}.hero-fact b{font-size:12px}.hero-fact small{color:var(--muted);font-size:10px}
.hero-visual{position:relative;min-width:0;min-height:535px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(145deg,#ebe4c9,#d9e8df);background-size:31px 31px,31px 31px,auto}
.hero-visual::before{content:"";position:absolute;z-index:1;left:-20%;top:12%;width:620px;height:390px;background:linear-gradient(100deg,rgba(255,224,116,.72),rgba(255,245,201,.12));clip-path:polygon(0 35%,100% 0,100% 100%,0 65%)}
.hero-wall-shadow{position:absolute;z-index:2;right:75px;bottom:72px;width:205px;height:255px;opacity:.27;filter:brightness(0);transform:skewX(-11deg) scaleX(.8);transform-origin:bottom}
.hero-person{position:absolute;z-index:4;right:-18px;bottom:-17px;width:180px;height:294px;object-fit:contain}
.hero-cactus{position:absolute;z-index:3;left:48%;bottom:63px;width:190px;height:260px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(46,71,63,.14))}
.flashlight{position:absolute;z-index:5;left:28px;top:42%;width:110px;transform:rotate(-12deg)}
.hero-badge{position:absolute;z-index:6;left:22px;top:22px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:19px;background:rgba(255,255,255,.94);box-shadow:0 7px 18px rgba(38,76,76,.15);font-weight:900}
.safety{width:min(930px,calc(100% - 28px));display:flex;align-items:center;gap:14px;margin:18px auto 0;padding:16px 21px;border:2px solid #e0c77f;border-radius:24px;background:#fff1bf;box-shadow:0 7px 0 rgba(155,129,59,.14)}
.safety span{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--yellow);font-size:23px;font-weight:900}.safety p{margin:0;line-height:1.42}
.home-labs,.album-page,.result-page{margin-top:24px;padding:38px;scroll-margin-top:18px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.page-head h2,.album-page h1,.result-page h1{font-size:clamp(38px,5vw,58px);line-height:1.03}.page-head p{max-width:650px;margin:9px 0 0;color:var(--muted);line-height:1.45}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lab-card{min-width:0;padding:25px 23px 22px;border:2px solid var(--line);border-radius:27px;background:#fff8e8;box-shadow:0 7px 0 rgba(144,130,83,.17)}.lab-card:nth-child(2){background:#f1eef8}.lab-card:nth-child(3){background:#eaf4f5}
.lab-number{width:54px;height:54px;display:grid;place-items:center;margin-bottom:18px;border-radius:18px;color:#684b11;background:var(--yellow);font-family:Georgia,serif;font-size:28px;font-weight:900;transform:rotate(-3deg)}.lab-card:nth-child(2) .lab-number{color:white;background:var(--purple)}.lab-card:nth-child(3) .lab-number{color:white;background:var(--blue)}
.lab-card h3{font-size:25px;line-height:1.08}.lab-card p{min-height:82px;color:var(--muted);line-height:1.45}.lab-card .primary{width:100%}.lab-status{display:block;margin:0 0 14px;color:var(--green-dark);font-size:12px;font-weight:900}
.game-shell{padding:28px}.game-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-bottom:20px}
.progress-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px;font-weight:900}.progress-track{height:13px;overflow:hidden;border:2px solid #cfd1b3;border-radius:999px;background:#edf0df}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),var(--purple));transition:width .35s ease}.score-chip{padding:10px 14px;border-radius:15px;background:#fff2c5;font-weight:900}
.experiment{display:grid;grid-template-columns:minmax(370px,.98fr) minmax(0,1.02fr);gap:24px}
.stage{position:relative;min-height:470px;overflow:hidden;border:2px solid #cdcbb8;border-radius:31px;background:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px),#edead9;background-size:30px 30px}
.stage::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:112px;background:linear-gradient(#d9c69d,#c4a979);border-top:5px solid #8c744f}
.stage-label{position:absolute;z-index:9;left:18px;top:17px;right:18px;padding:9px 13px;border-radius:16px;background:rgba(255,255,255,.94);text-align:center;font-weight:900}
.lamp{position:absolute;z-index:6;width:98px;height:98px;transition:left .5s,right .5s,top .5s,bottom .5s}
.lamp.left{left:22px;top:48%}.lamp.right{right:22px;top:48%;transform:scaleX(-1)}.lamp.high{left:40px;top:82px}.lamp.low{left:38px;bottom:86px}
.lamp svg{width:100%;height:100%}
.light-beam{position:absolute;z-index:2;opacity:.58;background:linear-gradient(90deg,rgba(255,224,104,.78),rgba(255,239,168,.05));clip-path:polygon(0 38%,100% 0,100% 100%,0 62%)}
.light-beam.from-left{left:72px;right:0;top:100px;bottom:60px}.light-beam.from-right{right:72px;left:0;top:100px;bottom:60px;transform:scaleX(-1)}.light-beam.high{left:90px;right:0;top:45px;bottom:55px;transform:rotate(14deg);transform-origin:left}.light-beam.low{left:88px;right:0;top:150px;bottom:28px;transform:rotate(-7deg);transform-origin:left}
.subject-wrap{position:absolute;z-index:5;left:50%;bottom:91px;width:145px;height:220px;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center}
.subject-wrap img{width:100%;height:100%;object-fit:contain}
.cast-shadow{position:absolute;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s ease}
.cast-shadow img{width:100%;height:100%;object-fit:contain;filter:brightness(0) contrast(1.12) blur(.7px);opacity:.45}
.cast-shadow.direction-shadow{bottom:100px;width:150px;height:225px}
.cast-shadow.direction-shadow.to-right{left:calc(50% + 42px);transform:skewY(-3deg) scaleX(.84);transform-origin:bottom left}
.cast-shadow.direction-shadow.to-left{left:calc(50% - 190px);transform:skewY(3deg) scaleX(.84);transform-origin:bottom right}
.cast-shadow.length-shadow{bottom:100px;left:calc(50% + 25px);width:145px;height:220px;transform-origin:bottom left}
.cast-shadow.length-shadow.long{transform:translateX(31px) scaleX(1.08) scaleY(1.02)}
.cast-shadow.length-shadow.short{transform:translateX(-11px) scaleX(.65) scaleY(.68)}
.cast-shadow.reveal{opacity:1}
.silhouette-stage{position:absolute;z-index:4;inset:80px 24px 94px;display:grid;place-items:center}
.silhouette-stage img{width:min(245px,80%);height:100%;object-fit:contain}
.silhouette-stage .target-shadow{position:absolute;right:7%;bottom:0;width:42%;height:74%;object-fit:contain;filter:brightness(0);opacity:0;transform:skewX(-8deg);transition:opacity .35s ease}
.silhouette-stage .target-shadow.reveal{opacity:.32}
.question-panel{min-width:0;display:flex;flex-direction:column;padding:16px 3px 4px}.question-panel .eyebrow{margin-bottom:8px}.question-panel h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4.2vw,52px);line-height:1.03}.question-panel>p{margin:13px 0 19px;color:var(--muted);font-size:17px;line-height:1.45}
.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.answer-grid.three{grid-template-columns:repeat(3,1fr)}
.answer{min-height:116px;padding:14px 10px;border:3px solid #d2d5bc;border-radius:23px;background:#fffaf0;box-shadow:0 7px 0 rgba(145,130,83,.16);cursor:pointer}.answer>span:not(.shadow-option){display:block;margin-bottom:7px;font-size:29px}.answer b{display:block;font-size:17px;line-height:1.15}.answer:hover:not(:disabled){border-color:#a293c7;transform:translateY(-2px)}.answer:disabled{cursor:default}.answer.wrong{border-color:var(--coral);background:#fff0ed;animation:shake .32s ease}.answer.correct,.answer.hinted{border-color:var(--green);background:#e8f5ed}.answer.hinted{animation:pulse 1s ease 2}
.shadow-option{width:84px;height:76px;display:block;margin:0 auto 5px}.shadow-option img{width:100%;height:100%;object-fit:contain;filter:brightness(0);opacity:.72}.shadow-option.mirror img{transform:scaleX(-1)}.shadow-option.squash img{transform:scale(.72,1.08)}
.feedback{min-height:91px;margin-top:15px;padding:15px 17px;border:2px solid #d8d7bd;border-radius:20px;background:#f8f6e8;line-height:1.42}.feedback b{display:block;margin-bottom:4px}.feedback.error{border-color:#efafa7;background:#fff0ed}.feedback.success{border-color:#a9d6bd;background:#e9f6ee}.feedback.hint{border-color:#e5c674;background:#fff4c9}
.game-actions{margin-top:15px;align-items:center}.game-actions .primary{margin-left:auto}
.result-page{text-align:center}.result-person{width:126px;height:164px;object-fit:contain}.stars{margin:13px 0;color:var(--yellow);font-size:58px;letter-spacing:8px;text-shadow:0 4px 0 rgba(159,118,34,.15)}.result-page>p{max-width:680px;margin:14px auto 24px;color:var(--muted);font-size:18px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,190px));justify-content:center;gap:12px;margin:23px auto 28px}.stat{padding:17px 12px;border:2px solid var(--line);border-radius:20px;background:#fffaf0}.stat b{display:block;font-size:31px}.stat span{color:var(--muted);font-size:12px;font-weight:900}.result-actions{justify-content:center}
.album-page{margin-top:0}.album-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.album-card{min-width:0;min-height:188px;padding:12px 8px;border:2px solid var(--line);border-radius:21px;background:#fffaf0;text-align:center}.album-card.locked{opacity:.5;filter:grayscale(.38)}.album-art{width:90px;height:88px;margin:0 auto 5px;position:relative}.album-art img{width:100%;height:100%;object-fit:contain}.album-art .mini-shadow{position:absolute;right:-5px;bottom:2px;width:54px;height:42px;filter:brightness(0);opacity:.3;transform:skewX(-12deg)}.album-card b{display:block;min-height:34px;font-size:14px;line-height:1.16}.album-card span{display:block;margin-top:6px;color:var(--purple-dark);font-size:12px;font-weight:900}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes pulse{50%{transform:scale(1.025)}}
@media(max-width:930px){.hero{grid-template-columns:minmax(0,1fr) 365px}.hero-copy{padding-left:36px}.experiment{grid-template-columns:365px minmax(0,1fr)}.answer-grid.three{grid-template-columns:1fr}.answer-grid.three .answer{min-height:82px;display:grid;grid-template-columns:90px 1fr;align-items:center}.album-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.app{width:min(1120px,calc(100% - 20px));padding-top:10px}.hero{grid-template-columns:1fr}.hero-copy{padding:37px 27px 31px}.hero-visual{min-height:420px}.hero-cactus{left:45%;height:235px}.hero-person{width:152px;height:248px}.lab-grid{grid-template-columns:1fr}.lab-card p{min-height:0}.experiment{grid-template-columns:1fr}.stage{min-height:420px}.question-panel{padding-top:4px}.game-head{grid-template-columns:1fr}.score-chip{justify-self:start}.album-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.app{width:calc(100% - 16px)}.topbar{align-items:flex-start;gap:7px}.brand{padding-right:8px}.brand small{display:none}.top-actions{gap:6px}.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:49px}.lead{font-size:16px}.hero-actions>*{width:100%}.hero-facts{grid-template-columns:1fr}.hero-visual{min-height:360px}.hero-badge{left:12px;top:13px;font-size:13px}.hero-cactus{left:43%;width:155px;height:210px}.hero-person{right:-34px;width:137px;height:215px}.flashlight{left:8px;width:87px}.safety{width:calc(100% - 12px);align-items:flex-start;padding:14px;border-radius:20px;font-size:14px}.home-labs,.album-page,.result-page,.game-shell{padding:20px 14px}.page-head{display:block}.stage{min-height:360px;border-radius:23px}.lamp{width:76px;height:76px}.lamp.left{left:8px}.lamp.right{right:8px}.subject-wrap{width:120px;height:180px;bottom:87px}.cast-shadow.direction-shadow{bottom:87px;width:120px;height:180px}.cast-shadow.direction-shadow.to-right{left:calc(50% + 31px)}.cast-shadow.direction-shadow.to-left{left:calc(50% - 151px)}.cast-shadow.length-shadow{bottom:87px;left:calc(50% + 18px);width:120px;height:180px}.silhouette-stage{inset:74px 12px 92px}.question-panel h1{font-size:37px}.answer-grid{gap:8px}.answer{min-height:104px;padding:12px 6px}.answer b{font-size:15px}.answer-grid.three{grid-template-columns:1fr}.answer-grid.three .answer{min-height:82px}.game-actions{display:grid;grid-template-columns:1fr 1fr}.game-actions .primary{width:100%;margin:0;grid-column:1/-1}.stats{grid-template-columns:1fr}.album-grid{grid-template-columns:repeat(2,1fr);gap:8px}.album-card{min-height:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
