@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap";*,:before,:after{box-sizing:border-box}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,a{font:inherit}:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}:root{--coral:#ff7a59;--teal:#2bb3a3;--gold:#f4b740;--sky:#7ec8f5;--ink:#17324d;--ink-soft:#3b5570;--card:#fff;--radius:18px;--shadow:0 20px 44px -18px #17324d59;--shadow-sm:0 8px 20px -12px #17324d38}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100dvh;color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(180% 100% at 50% 0,#9bd7ff 0%,#4fa3e3 55%,#2b6cb0 100%);margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{min-height:100dvh}.site{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom,0);position:relative;overflow:hidden}.door-scene{background:radial-gradient(60% 60% at 50% 40%,#ffffff59,#0000 70%),linear-gradient(#7ec8f5 0%,#4fa3e3 55%,#2c5aa2 100%);place-items:center;min-height:100dvh;padding:24px;display:grid;position:relative}.door-scene:before{content:"";pointer-events:none;opacity:.7;background:radial-gradient(circle at 20% 20%,#fffffff2 0 24px,#0000 26px),radial-gradient(circle at 80% 15%,#ffffffd9 0 30px,#0000 32px),radial-gradient(circle at 60% 80%,#ffffffbf 0 20px,#0000 22px);position:absolute;inset:0}.door-hint{text-align:center;color:#e8f6ff;font-weight:800}.door-hint h1{color:#fff;text-shadow:0 4px 16px #0003;margin:0 0 8px;font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(2.2rem,9vw,3rem)}.door-hint p{color:#d2ebff;margin:0;font-size:1.05rem;font-weight:700}.door-door{perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:6px solid #573214;border-radius:18px;width:clamp(180px,50vw,260px);height:clamp(280px,62vh,380px);margin-top:28px;padding:0;position:relative;overflow:hidden;box-shadow:0 40px 60px -20px #14285a80}.door-main{transform-origin:0;z-index:2;background:linear-gradient(170deg,#ffcf6f 0%,#ffc35c 100%),repeating-linear-gradient(90deg,#ffffff26 0 8px,#0000 8px 22px);transition:transform .85s cubic-bezier(.22,.85,.26,1);position:absolute;inset:0;transform:rotateY(0)}.door-door:hover .door-main{transform:rotateY(-40deg)}.door-door:active .door-main{transform:rotateY(-18deg)}.door-hanger{z-index:4;pointer-events:none;background:radial-gradient(circle at 30% 30%,#fff4bf,#d99b24);border-radius:50%;width:28px;height:28px;position:absolute;top:44%;right:24px;box-shadow:0 4px 8px #0000004d}.door-label{z-index:5;pointer-events:none;color:#4a2a16;background:#ffffff8c;border-radius:16px;padding:12px 24px;font-family:"Baloo 2",Nunito,sans-serif;font-size:1.5rem;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 22px -10px #281e5080}.door-lamp{filter:blur(.5px);background:radial-gradient(circle at 30% 30%,#fff4bf,#ffdb6b);border-radius:50%;width:60px;height:60px;position:absolute;top:10%;right:10%;box-shadow:0 0 60px 10px #ffe182d9}.room-stage{background:linear-gradient(#8ed5ff 0%,#4fa3e3 38%,#ffd79e 72%,#cfa36b 100%);flex-direction:column;gap:14px;min-height:100dvh;padding:16px 14px 24px;animation:.6s both roomIn;display:flex}@keyframes roomIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.room-topbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.room-topbar h1{color:#fff;text-shadow:0 3px 10px #0003;margin:0;font-family:"Baloo 2",Nunito,sans-serif;font-size:1.5rem}.room-actions{gap:8px;display:flex}.interior-room{width:100%;max-width:880px;box-shadow:var(--shadow);perspective:800px;background:linear-gradient(#ffffff59 0%,#fff0 100%),linear-gradient(#c9e9ff 0 60%,#dbb276 60% 100%);border:4px solid #fff7ea;border-radius:26px;grid-template-columns:repeat(3,minmax(0,1fr));place-items:start center;gap:18px 12px;margin:0 auto;padding:18px 12px 30px;display:grid;position:relative;overflow:hidden}.room-backlight{pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 15%,#ffffffd9 0 80px,#0000 82px),radial-gradient(circle at 80% 20%,#ffdc96cc 0 90px,#0000 92px);position:absolute;inset:0}.furniture-slot{z-index:2;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.furniture{color:#1f3048;cursor:pointer;width:100%;max-width:108px;min-height:118px;box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent;background:linear-gradient(#fff 0%,#f0f8ff 100%);border:3px solid #ffffff8c;border-radius:20px;flex-direction:column;justify-content:end;align-items:center;gap:4px;padding:14px 8px;transition:transform .15s,box-shadow .15s;display:flex;transform:translateY(0)scale(1)}.furniture:hover{transform:translateY(-6px)scale(1.04);box-shadow:0 18px 30px -12px #17324d59}.furniture:active{transform:scale(.96)}.station-sticker{filter:drop-shadow(0 6px 8px #17324d33);font-size:2.4rem;line-height:1}.furniture strong{color:var(--ink);font-family:"Baloo 2",Nunito,sans-serif;font-size:1rem;font-weight:800}.furniture small{color:var(--ink-soft);font-size:.78rem;font-weight:800}.furniture-slot.music .furniture{background:linear-gradient(#ffe9e2 0%,#ffd0c4 100%)}.furniture-slot.art .furniture{background:linear-gradient(#e6f8f3 0%,#c9f0e6 100%)}.furniture-slot.book .furniture{background:linear-gradient(#fff2d6 0%,#ffe5b0 100%)}.furniture-slot.game .furniture{background:linear-gradient(#e8e6ff 0%,#d8d3ff 100%)}.furniture-slot.space .furniture{background:linear-gradient(#e2f1ff 0%,#bfe3ff 100%)}.furniture-slot.animals .furniture{background:linear-gradient(#ffeaf3 0%,#ffd2e5 100%)}.css-toy{width:58px;height:58px;box-shadow:var(--shadow-sm);cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent;background:#fff;border:none;border-radius:50%;place-items:center;font-size:1.8rem;transition:transform .12s;display:grid;position:absolute}.css-toy:hover{transform:scale(1.12)}.css-toy:active{transform:scale(.94)}.toy-box{z-index:3;color:var(--ink);box-shadow:var(--shadow-sm);background:#ffffffe6;border:2px solid #17324d0f;border-radius:999px;grid-column:1/-1;padding:10px 16px;font-size:.95rem;font-weight:900}.btn{cursor:pointer;border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-size:.95rem;font-weight:800;text-decoration:none;transition:transform .15s,background .15s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--coral);color:#fff}.btn-ghost{color:var(--ink);background:#fff;border-color:#17324d26}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#070f1da6;place-items:center;padding:16px;animation:.2s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{border-radius:var(--radius);width:100%;max-width:760px;max-height:90vh;box-shadow:var(--shadow);background:#fff;padding:26px;animation:.25s cubic-bezier(.2,.9,.3,1.2) pop;position:relative;overflow:auto}@keyframes pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-close{cursor:pointer;width:40px;height:40px;color:var(--ink);background:#f1f5f9;border:none;border-radius:50%;font-size:1.2rem;font-weight:800;position:absolute;top:14px;right:14px}.modal h2{color:var(--ink);margin:0 0 12px;padding-right:40px;font-family:"Baloo 2",Nunito,sans-serif;font-size:1.6rem}.modal p,.modal li{color:var(--ink-soft);line-height:1.6}.modal-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0;display:grid}.modal-card{background:#f8fafc;border:1px solid #17324d14;border-radius:14px;padding:14px}.modal-card h3{color:var(--ink);margin:0 0 4px;font-family:"Baloo 2",Nunito,sans-serif}.modal-card p{margin:0;font-size:.92rem}.fact-list{flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.fact-list li{color:var(--ink-soft);background:#f8fafc;border:1px solid #17324d0f;border-radius:10px;padding:10px 14px;font-weight:600}.pad-grid{grid-template-columns:repeat(2,1fr);gap:12px;max-width:360px;margin:16px 0;display:grid}.pad{color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent;border:none;border-radius:16px;padding:22px 10px;font-family:"Baloo 2",Nunito,sans-serif;font-size:1.1rem;font-weight:800;transition:transform .12s}.pad:hover{transform:scale(1.04)}.pad:active{transform:scale(.96)}.pad-do{background:var(--coral)}.pad-mi{background:var(--teal)}.pad-so{background:var(--gold);color:var(--ink)}.pad-high{background:#1f3a5f}.chips{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.chip{color:var(--ink);background:#f8fafc;border:1px solid #17324d14;border-radius:999px;padding:8px 12px;font-size:.85rem;font-weight:700}.canvas-wrap{flex-direction:column;align-items:center;gap:10px;display:flex}.draw-canvas{aspect-ratio:4/3;touch-action:none;cursor:crosshair;background:#fff;border:3px solid #2c180c;border-radius:12px;width:100%;max-width:520px}.draw-tools{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.color-dot{cursor:pointer;border:3px solid #0000;border-radius:50%;width:32px;height:32px}.color-dot.active{border-color:var(--ink);transform:scale(1.15)}.toast{color:#fff;box-shadow:var(--shadow);z-index:200;background:#1f3a5f;border-radius:999px;padding:12px 20px;font-weight:800;animation:.3s up;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}@keyframes up{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@media (width<=560px){.modal{max-height:92vh;padding:20px 16px}.modal-grid{grid-template-columns:1fr}}@media (width<=420px){.interior-room{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;padding:12px 8px 24px}.furniture{max-width:96px;min-height:108px;padding:10px 6px}.furniture strong{font-size:.84rem}.furniture small{font-size:.7rem}.css-toy{width:50px;height:50px;font-size:1.6rem}.door-hint h1{font-size:2rem}}html,body{height:100%}
