:root{color-scheme:light;--paper:#f4f0e8;--ink:#3c352c;--muted:#807365;--line:#d9d0c2;--walnut:#70533c;--cream:#ede7dc;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#e9e3d8;color:var(--ink)}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a77e4b;outline-offset:3px}button{touch-action:manipulation}button[disabled]{opacity:.5}#app{height:100vh;height:100dvh;position:relative;overflow:hidden}#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(20px + env(safe-area-inset-top)) 26px 12px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center}.brand-mark{height:44px;width:44px;display:grid;place-items:center;background:var(--walnut);color:#fbf8f1;border-radius:14px;font-family:Georgia,serif;font-size:26px}.brand h1{font-size:19px;letter-spacing:.08em;margin:0;font-weight:600}.brand p{font-size:11px;letter-spacing:.14em;margin:4px 0 0;color:var(--muted)}.header-actions{display:flex;gap:10px;align-items:center}.button,.icon-button{border:1px solid #ffffffa6;background:#f9f6efdc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 3px 15px #5c4c3010}.button{border-radius:24px;padding:11px 18px}.small{padding:10px 17px;font-size:13px}.icon-button{border-radius:50%;height:38px;width:38px;font-size:19px;display:grid;place-items:center}.top-controls{position:absolute;top:calc(90px + env(safe-area-inset-top));left:26px;right:26px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.top-controls>*{pointer-events:auto}.segmented{display:flex;border-radius:28px;padding:4px;background:#f9f6efda;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 3px 16px #5c4c3010}.segmented button{border:0;background:transparent;color:var(--muted);border-radius:24px;font-size:13px;padding:9px 16px}.segmented button[aria-pressed=true]{background:var(--walnut);color:#fffaf2}.view-caption{position:absolute;left:26px;top:calc(151px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:6px;pointer-events:none}#room-name{font-size:13px;font-weight:600}.estimate{font-size:10px;color:#796e60}.bottom-panel{position:absolute;bottom:0;left:0;right:0;padding:10px 26px calc(13px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#f3eee4e6 22%);pointer-events:none}.bottom-panel>*{pointer-events:auto}.rooms{max-width:650px;margin:auto;display:grid;grid-template-columns:repeat(7,1fr);background:#faf7f0e8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #fff9;border-radius:22px;padding:7px;box-shadow:0 12px 40px #3b2a1820}.room-button{border:0;background:transparent;color:var(--muted);border-radius:16px;padding:9px 6px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:12px;min-height:58px}.room-button>span{font-size:20px;line-height:22px}.room-button.active{background:#e9e0d0;color:var(--ink)}.bottom-row{display:flex;justify-content:space-between;align-items:center;gap:8px;max-width:650px;margin:10px auto 0}.bottom-row p{margin:0;font-size:11px;color:var(--muted)}.utilities{display:flex;gap:13px}.utilities button{border:0;background:transparent;color:var(--walnut);font-size:11px;padding:5px 0;white-space:nowrap}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#eee8de;z-index:20;transition:opacity .4s}#loading p{font-size:14px;letter-spacing:.08em}.loading-ring{height:38px;width:38px;border-radius:50%;border:2px solid #d7c9b7;border-top-color:#7a5b3d;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.move-pad{position:absolute;bottom:calc(145px + env(safe-area-inset-bottom));left:26px;display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,45px);gap:5px;touch-action:none}.move-key{border:1px solid #fff8;background:#f8f4e9dd;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);border-radius:15px;font-size:23px;touch-action:none;user-select:none;-webkit-user-select:none}.move-key:active{background:#c8b495}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:2/2}.right{grid-area:2/3}.walk-hint{position:absolute;right:26px;bottom:calc(158px + env(safe-area-inset-bottom));color:#6e6255;font-size:12px;line-height:1.8;background:#faf7efc9;padding:9px 12px;border-radius:12px;pointer-events:none}dialog{width:min(440px,calc(100% - 32px));max-height:80dvh;border:1px solid #fff9;border-radius:22px;padding:24px;background:#faf7ef;color:var(--ink);box-shadow:0 20px 100px #30241430;overflow:auto}dialog::backdrop{background:#30251855;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.dialog-header h2{font-size:18px;font-weight:600;margin:0}.dialog-header .icon-button{height:32px;width:32px;box-shadow:none}.field-label{display:block;font-size:13px;margin:18px 0 9px}select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fffaf3;color:var(--ink);font-size:14px}.field-note{font-size:12px!important;color:var(--muted);line-height:1.7}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0;font-size:13px}.switch-row input{width:21px;height:21px;accent-color:var(--walnut)}.export-button{width:100%;margin-top:3px}dialog p,dialog li{font-size:13px;line-height:1.85}dialog ul{padding-left:20px}dialog li{margin:8px 0}#toast{position:absolute;left:50%;bottom:calc(145px + env(safe-area-inset-bottom));transform:translateX(-50%);border-radius:14px;background:#423529ed;color:#fff8ed;padding:12px 18px;font-size:12px;max-width:calc(100% - 40px);width:max-content;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}#toast.visible{opacity:1}[hidden]{display:none!important}noscript{position:absolute;top:45%;left:10%;right:10%;text-align:center}.error-message{position:absolute;inset:30% 10%;background:#faf6ed;padding:30px;border-radius:20px;line-height:1.8}
@media(max-width:600px){.topbar{padding:calc(14px + env(safe-area-inset-top)) 16px 10px}.brand{gap:9px}.brand-mark{height:38px;width:38px;border-radius:12px;font-size:24px}.brand h1{font-size:16px;letter-spacing:.04em}.brand p{font-size:10px;letter-spacing:.08em}.header-actions{gap:7px}.top-controls{top:calc(79px + env(safe-area-inset-top));left:16px;right:16px}.segmented button{font-size:12px;padding:9px 12px}.small{font-size:12px;padding:9px 13px}.view-caption{top:calc(136px + env(safe-area-inset-top));left:16px}.bottom-panel{padding:8px 12px calc(10px + env(safe-area-inset-bottom))}.rooms{border-radius:19px;padding:5px}.room-button{font-size:11px;padding:7px 3px;min-height:56px;gap:3px}.room-button>span{font-size:19px}.bottom-row{margin-top:7px;padding:0 4px;align-items:center}.bottom-row p{font-size:10px;max-width:50%;line-height:1.5}.utilities{gap:12px}.utilities button{font-size:11px}.move-pad{left:16px;bottom:calc(139px + env(safe-area-inset-bottom))}.walk-hint{right:16px;bottom:calc(145px + env(safe-area-inset-bottom));font-size:11px}dialog{padding:21px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}