*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;color:#36594a;background:#f7f4e9;font-family:'Microsoft YaHei',sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;color:#36594a;background:transparent;min-height:48px;padding:12px 26px;font-weight:600;background-size:100% 100%;background-repeat:no-repeat}button:focus-visible{outline:3px solid #648b74;outline-offset:2px}button.active{color:#8a533c}header{position:absolute;top:14px;left:0;width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}h1{font-family:STZhongsong,'Microsoft YaHei';font-weight:400;font-size:clamp(25px,3vw,46px);width:610px;max-width:70vw;height:90px;margin:0;display:flex;align-items:center;justify-content:center;background-size:100% 100%;padding-bottom:3px}#full{position:absolute;right:20px;top:8px;pointer-events:auto}#stage{position:absolute;inset:0}canvas{display:block;touch-action:none}#nav{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}#nav button{font-size:17px}#controls{position:absolute;left:22px;top:140px;display:flex;flex-direction:column;gap:12px;max-width:230px}#controls button{font-size:18px}#hint{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);margin:0;text-align:center;pointer-events:none;color:#506452;background:#fff9eccc;padding:9px 20px;font-size:16px;max-width:90vw}dialog{border:0;padding:24px;background:#faf6e9;width:min(85vw,1000px);height:88vh;color:#36594a;overflow:auto;text-align:center}dialog::backdrop{background:#102820bd}dialog img{display:block;max-width:80%;height:65%;object-fit:contain;margin:auto;transform-origin:center}dialog h2{margin:0 0 12px;font-family:STZhongsong;font-weight:400}.close{position:absolute;right:10px;top:4px}dialog p{margin:12px 0}dialog input{width:50%}.palette{position:absolute;right:2vw;top:155px;width:min(24vw,320px);display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:63vh;overflow:auto}.palette button{height:100px;padding:9px;background-size:100% 100%}.palette img{width:100%;height:100%;object-fit:contain}.designer{position:absolute;left:26%;top:115px;width:min(43vw,620px);height:calc(100vh - 240px);object-fit:contain}.helper{position:absolute;left:13%;bottom:115px;height:68vh;object-fit:contain}.questions{position:absolute;left:48%;top:170px;display:flex;flex-direction:column;gap:16px;width:43%}.questions button{font-size:22px;padding:20px 35px;min-height:76px}.answer{font-size:25px;line-height:1.7;margin:8px 22px;min-height:95px}.works{position:absolute;inset:130px 200px 135px 220px;overflow:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.work{height:270px;background-size:100% 100%;padding:26px 30px;text-align:center}.work img{width:100%;height:100%;object-fit:contain}.empty{grid-column:1/-1;font-size:26px;text-align:center;padding:100px 0}.color-row{display:flex;gap:4px}.color-row button{padding:8px 12px;min-width:52px}.slider{padding:8px;width:190px}.slide-nav{position:absolute;bottom:20px}.voice-note{font-size:14px;opacity:.8;margin:0 22px}.room-label{position:absolute;top:113px;right:28px;font-size:16px;background:#fbf7e9dd;padding:10px 18px}
@media(max-width:900px){#nav{gap:0;bottom:8px}#nav button{font-size:12px;padding:10px 14px;min-height:42px}#controls{left:8px;top:115px;max-width:165px;gap:6px}#controls button{font-size:14px;padding:9px 14px}h1{height:75px}#hint{bottom:60px;font-size:12px}.palette{top:115px}.palette button{height:68px}.questions{top:120px}.questions button{font-size:16px}.answer{font-size:18px}.works{inset:110px 20px 95px 180px;grid-template-columns:repeat(3,1fr)}.work{height:200px}}