@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f6f5ee;--ink:#243c33;--muted:#7c8277;--green:#254c3c;--lime:#dfedc1;--orange:#e47b4d;--line:#dddfd3;--ease:cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button{border:0}button:disabled{cursor:default}a{color:inherit}header{max-width:1280px;margin:auto;height:100px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;font-size:15px;letter-spacing:1.3px;font-weight:800;gap:12px}.branddot{font-size:10px;align-self:flex-start;margin-left:-7px}.brandmark{display:flex;align-items:flex-end;gap:3px;height:25px}.brandmark i{width:5px;background:var(--ink);height:13px}.brandmark i:nth-child(2){height:25px}.brandmark i:nth-child(3){height:19px}.top-actions{display:flex;gap:22px;align-items:center}.plain{background:transparent;padding:8px 0;font-size:13px}.plain:hover{text-decoration:underline;text-underline-offset:4px}.icon-button{width:36px;height:36px;background:transparent;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.icon-button svg{width:17px;height:17px}main{max-width:1112px;padding:0 40px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;padding:49px 0 35px}.eyebrow,.tiny{font-size:10px;font-weight:700;letter-spacing:1.7px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted)}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--orange)}h1{font-family:'Manrope',Arial,sans-serif;font-size:clamp(38px,5.3vw,66px);line-height:1.12;font-weight:600;letter-spacing:-3.7px;margin:13px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--orange)}.intro p{font-size:14px;color:var(--muted);margin:13px 0 0}.intro-stamp{display:flex;align-items:center;gap:12px;transform:rotate(-7deg);margin:0 21px 0 0;color:#8e9880}.intro-stamp svg{width:65px;height:65px}.intro-stamp span{font-size:9px;font-weight:700;letter-spacing:1.5px;line-height:1.7}.game{background:#fcfcf7;border:1px solid #d9ddce;border-radius:18px;overflow:hidden;box-shadow:0 8px 0 -5px #e5e8dc}.gamebar{height:65px;padding:0 29px;display:flex;align-items:center;justify-content:space-between}.mode-controls{display:flex;gap:13px;align-items:center}.mode-controls button{background:transparent;font-size:13px;font-weight:600;padding:8px 0}.mode-controls button span{margin-left:11px;color:var(--muted)}.mode-tag{font-size:8px;letter-spacing:1px;background:#eff0e6;color:#7c8573;padding:5px 7px;border-radius:3px}.game-stats{display:flex;align-items:center;gap:27px;font-size:9px;letter-spacing:1px;color:var(--muted)}.score-label strong{font-size:14px;color:var(--ink);margin-left:7px;font-weight:600;font-variant-numeric:tabular-nums}.round-count strong{color:var(--ink);font-size:12px;margin-left:8px}.round-count>span{margin-left:4px;color:#a0a594}.progress{display:flex;height:3px;gap:4px;padding:0 29px}.progress i{flex:1;background:#eaecdf;transition:background .5s}.progress i.active{background:var(--orange)}.progress i.done{background:var(--green)}.question{text-align:center;padding:28px 20px 0}.question .tiny{color:#8b937f;font-size:9px}.question h2{font-size:24px;letter-spacing:-.8px;font-weight:600;margin:10px 0 8px}.question p{font-size:12px;color:var(--muted);margin:0}.stage{position:relative;margin:22px 24px 0;height:340px;background-image:linear-gradient(#e8eadc80 1px,transparent 1px),linear-gradient(90deg,#e8eadc80 1px,transparent 1px);background-size:28px 28px;background-position:50% 0;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 95%,transparent)}.stage-note{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-size:7px;white-space:nowrap;letter-spacing:1.2px;color:#97a087;background:#fcfcf7;padding:5px 9px;z-index:3}.green-dot{display:inline-block;background:#8ea77a;width:4px;height:4px;border-radius:50%;margin-right:5px}.scene{position:absolute;bottom:0;left:10%;right:10%;height:100%;display:flex;justify-content:center;align-items:flex-end;gap:55px}.object-slot{width:42%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.art-wrap{position:relative;display:flex;align-items:flex-end;justify-content:center;transform-origin:center bottom;will-change:width,height;flex-shrink:0;z-index:2;transition:width .12s var(--ease),height .12s var(--ease);filter:drop-shadow(0 5px 3px #344b3610)}.art-wrap svg{width:100%;height:100%;display:block;overflow:visible}.art-wrap.enter{animation:object-enter .7s var(--ease) both}.target .art-wrap{cursor:ns-resize;touch-action:none}.target.revealed .art-wrap{cursor:default;transition:width 1s cubic-bezier(.3,1.35,.45,1),height 1s cubic-bezier(.3,1.35,.45,1)}.target-stack{position:relative;display:flex;justify-content:center;align-items:flex-end}.ghost{position:absolute;bottom:0;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;z-index:1;color:var(--orange);transition:opacity .5s}.ghost svg{width:100%;height:100%;filter:grayscale(1);opacity:.25}.ghost.shown{opacity:1}.drag-hint{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:7px;letter-spacing:.7px;white-space:nowrap;color:var(--orange);opacity:.8;transition:opacity .2s}.object-caption{text-align:center;position:relative;height:78px;padding-top:24px;flex-shrink:0;z-index:3;min-width:200px}.object-role{font-size:7px;color:#8d987d;letter-spacing:1.2px;font-weight:700}.target-role{color:var(--orange)}.object-caption h3{font-size:12px;margin:6px 0 4px;font-weight:600}.size-label{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.versus{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);font-family:Georgia,serif;font-style:italic;font-size:25px;color:#ccd1c0}.baseline{position:absolute;bottom:78px;left:4%;right:4%;height:1px;background:#aeb9a0}.baseline:before,.baseline:after{content:'';position:absolute;bottom:0;width:1px;height:6px;background:#aeb9a0}.baseline:after{right:0}.control-panel,.result-panel{display:flex;align-items:center;gap:36px;padding:25px 33px 28px;border-top:1px solid #e5e8db;background:#f9faf2;min-height:133px}.resize-control{flex:1}.control-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:15px}.control-label label{font-weight:600}.control-label>span{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.slider-row{display:flex;gap:14px;align-items:center}.step-button{width:23px;height:23px;border:1px solid #d9decc;border-radius:50%;background:transparent;font-size:16px;display:grid;place-items:center;padding:0;line-height:1}.step-button:hover{background:var(--lime)}input[type=range]{appearance:none;-webkit-appearance:none;flex:1;width:100%;height:4px;background:linear-gradient(to right,var(--green) var(--fill,50%),#dce1d0 var(--fill,50%));border-radius:8px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:23px;border:5px solid #fcfcf7;border-radius:50%;background:var(--green);box-shadow:0 1px 5px #253e3340;transition:box-shadow .15s,transform .15s}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:5px solid #fcfcf7;border-radius:50%;background:var(--green);box-shadow:0 1px 5px #253e3340}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 5px #dfeacb}.range-labels{display:flex;justify-content:space-between;margin:7px 38px 0;font-size:8px;color:#9da68c}.primary{background:var(--green);color:#fbfcf5;border-radius:9px;padding:17px 23px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:48px;min-width:180px;box-shadow:0 3px 0 #173327;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}.primary span{font-size:19px;font-weight:400;line-height:16px}.primary:hover{background:#35694e;transform:translateY(-2px);box-shadow:0 5px 0 #173327}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #173327}.result-panel{justify-content:space-between;animation:panel-in .45s var(--ease)}[hidden]{display:none!important}.result-panel .tiny{font-size:8px;color:var(--green)}.result-title{display:flex;gap:15px;align-items:center;margin:3px 0}.result-title strong{font-family:Manrope,Arial,sans-serif;font-size:33px;letter-spacing:-1px;line-height:1.2}.result-title span{font-family:Georgia,serif;font-size:22px;font-style:italic;color:var(--orange)}.result-panel p{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.5}.under-game{display:flex;justify-content:space-between;margin-top:18px;color:var(--muted);font-size:9px}.keyboard{display:inline-grid;place-items:center;width:23px;height:18px;border:1px solid var(--line);border-radius:4px;margin-right:7px;font-size:11px}#best{letter-spacing:1px;font-size:8px}#best b{font-size:11px;color:var(--ink);margin-left:8px;font-weight:600}.shelf{display:flex;align-items:center;justify-content:space-between;min-height:180px;margin:35px 0 12px;gap:25px}.shelf .tiny{color:#a0a78f;font-size:8px}.shelf h2{font-size:20px;letter-spacing:-.6px;line-height:1.3;font-weight:500;margin:9px 0}.shelf p{font-size:10px;color:var(--muted)}.shelf-art{display:flex;align-items:flex-end;gap:24px;position:relative;padding:15px 20px 24px;flex:1;max-width:540px;justify-content:center}.shelf-art:after{content:'';height:1px;background:var(--line);position:absolute;bottom:20px;left:0;right:0}.shelf-art>div{position:relative;transition:transform .35s var(--ease)}.shelf-art>div:hover{transform:translateY(-7px) rotate(-5deg)}.shelf-art svg{display:block;width:100%;height:100%}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#929a84;font-size:9px;margin-top:5px;padding:24px 0 30px}footer>span:first-child{font-size:8px;letter-spacing:1.4px;font-weight:700}footer button{font-size:9px}dialog{border:1px solid #d9ddce;border-radius:20px;background:var(--paper);color:var(--ink);padding:38px;width:min(470px,calc(100% - 28px));max-height:calc(100svh - 40px);overflow:auto;box-shadow:0 25px 100px #203a3333}dialog[open]{animation:dialog-in .3s var(--ease)}dialog::backdrop{background:#23372d60;backdrop-filter:blur(7px)}dialog .close{position:absolute;top:14px;right:18px;font-size:25px;background:transparent;color:var(--muted)}dialog h2{font-family:Manrope,Arial,sans-serif;font-size:30px;letter-spacing:-1.2px;font-weight:500;line-height:1.2;margin:17px 0 23px}dialog .tiny{color:var(--orange);font-size:8px}dialog p{font-size:12px;line-height:1.7;color:var(--muted)}dialog ol{padding:0;list-style:none;counter-reset:help}dialog li{counter-increment:help;padding:0 0 20px 37px;position:relative}dialog li:before{content:counter(help);position:absolute;top:0;left:0;display:grid;place-items:center;width:23px;height:23px;background:var(--lime);border-radius:50%;font-size:11px}dialog li b{font-size:13px;display:block;margin-bottom:5px}dialog li span{font-size:12px;color:var(--muted);line-height:1.6;display:block}.dialog-note{font-size:11px!important;border-top:1px solid var(--line);padding-top:15px}.close-help{width:100%;margin-top:23px}.mode-list{display:flex;flex-direction:column;gap:9px}.mode-option{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;border:1px solid var(--line);text-align:left;background:#fcfcf7}.mode-option.active{background:var(--lime);border-color:#c8d5b1}.mode-option:hover{border-color:var(--green)}.mode-option .mode-symbol{font-size:22px;width:32px;text-align:center}.mode-option b{display:block;font-size:13px;margin-bottom:4px}.mode-option small{color:var(--muted);font-size:10px}.mode-option .mode-arrow{margin-left:auto}#finish-dialog{text-align:center}.finish-mark{font-size:75px;color:var(--orange);line-height:1.2;margin-top:12px}.final-score{font-size:50px;font-weight:500;letter-spacing:-2px}.final-score>span{font-size:15px;color:var(--muted);letter-spacing:0;margin-left:8px}#finish-title{font-size:27px;margin:5px 0 15px}#round-recap{display:flex;justify-content:center;gap:7px;margin:24px 0}#round-recap i{width:25px;height:36px;border-radius:5px;display:block;background:var(--green);position:relative;align-self:flex-end}#round-recap i:after{content:attr(data-round);position:absolute;bottom:-15px;left:0;right:0;font-size:8px;font-style:normal;color:var(--muted)}#replay{width:100%;margin-top:34px}#share{display:block;margin:18px auto 0}#share-status{font-size:10px;color:var(--muted)}.source-links{display:flex;flex-direction:column;gap:12px;margin:18px 0;font-size:12px}.source-links a{text-underline-offset:4px}.particle{position:absolute;left:50%;bottom:80px;width:7px;height:12px;border-radius:2px;background:var(--orange);animation:confetti 1.2s ease-out forwards;z-index:5;pointer-events:none}@keyframes object-enter{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}.count-pop{animation:count-pop .45s var(--ease)}@keyframes count-pop{40%{transform:scale(1.25)}}
@media(min-width:1400px){header{max-width:1330px}main{max-width:1160px}.intro{padding-top:60px}.stage{height:360px}}
@media(max-width:720px){header{height:73px;padding:0 22px}.brand{font-size:12px;letter-spacing:1px;gap:9px}.brandmark{height:21px}.brandmark i:nth-child(2){height:21px}.top-actions{gap:16px}.top-actions .plain{font-size:11px}main{padding:0 18px}.intro{padding:29px 2px 26px}h1{font-size:43px;letter-spacing:-2.5px;margin:12px 0}.eyebrow{font-size:7px;letter-spacing:1.3px}.intro p{font-size:11px;max-width:240px;line-height:1.5}.intro-stamp{margin-right:3px;gap:4px}.intro-stamp svg{width:45px;height:45px}.intro-stamp span{font-size:6px;letter-spacing:.8px}.game{border-radius:14px}.gamebar{padding:0 16px;height:55px}.mode-controls{gap:8px}.mode-controls button{font-size:11px}.mode-tag{font-size:6px;padding:4px}.game-stats{gap:12px;font-size:7px;letter-spacing:.6px}.score-label strong{font-size:12px;margin-left:4px}.round-count strong{font-size:10px;margin-left:4px}.progress{padding:0 16px;gap:3px}.question{padding:24px 14px 0}.question h2{font-size:19px;letter-spacing:-.5px;margin:9px 0}.question p{font-size:10px;max-width:300px;margin:auto;line-height:1.5}.question .tiny{font-size:7px}.stage{margin:17px 8px 0;height:300px;background-size:23px 23px}.scene{left:3%;right:3%;gap:32px}.object-slot{width:45%}.object-caption{min-width:120px;height:74px;padding-top:25px}.object-caption h3{font-size:10px}.object-role{font-size:6px;letter-spacing:.7px}.size-label{font-size:9px}.drag-hint{font-size:6px;bottom:-19px}.baseline{bottom:74px;left:3%;right:3%}.versus{bottom:145px;font-size:22px}.control-panel{gap:19px;padding:20px 19px 23px;flex-direction:column;align-items:stretch}.resize-control{width:100%}.control-label{font-size:10px;margin-bottom:12px}.control-label>span{font-size:9px}.primary{justify-content:space-between;font-size:12px;padding:16px 20px}.range-labels{margin-top:5px}.result-panel{padding:20px 19px 23px;min-height:175px;gap:16px;align-items:stretch;flex-direction:column}.result-title strong{font-size:31px}.result-title span{font-size:21px}.result-panel p{font-size:10px}.under-game{font-size:8px;gap:8px;margin-top:16px}#best{font-size:6px;letter-spacing:.7px;white-space:nowrap}#best b{font-size:10px;margin-left:4px}.keyboard{width:19px;height:15px;margin-right:4px}.shelf{margin-top:29px;gap:10px;min-height:150px}.shelf h2{font-size:16px}.shelf .tiny{font-size:6px;letter-spacing:1px}.shelf p{font-size:8px;max-width:150px;line-height:1.6}.shelf-art{gap:10px;padding:10px 5px 24px;max-width:210px}.shelf-art>div:nth-child(n+4){display:none}.shelf-art>div{max-width:53px;max-height:80px}footer{flex-wrap:wrap;gap:12px;padding:20px 0 25px}footer>span:nth-child(2){display:none}footer button{font-size:8px}dialog{padding:31px 25px}dialog h2{font-size:27px}#round-recap{gap:6px}.stage-note{font-size:6px;letter-spacing:.8px}}
@media(max-width:375px){.intro-stamp{display:none}.mode-tag{display:none}.brand{font-size:11px}.top-actions{gap:10px}.stage{height:275px}.question h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.particle{display:none}}
