:root{color:#17313c;background:#eef9fd;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}.playground{min-height:100vh;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;margin:auto auto 12px}.scene-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}#frame-metrics{color:#52717d;font-size:.85rem}button{min-width:44px;min-height:44px;border:1px solid #78aeba;border-radius:999px;padding:8px 12px;color:#17404c;background:#fff;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}button:focus-visible{outline:3px solid #ffbb3f;outline-offset:2px}.danger-button{border-color:#bd3d4c;color:#9f2635;background:#fff5f5}.danger-button:not(:disabled):hover{background:#ffe4e6}.danger-button:disabled{opacity:.45;cursor:not-allowed}h1,h2,p{margin:0}h1{font-size:clamp(1.5rem,4vw,2.3rem)}h2{font-size:1rem;margin-top:18px}.eyebrow{color:#39798a;font-weight:700;font-size:.8rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;max-width:1280px;min-height:calc(100vh - 105px);margin:auto;overflow:hidden;border:1px solid #b6dce8;border-radius:20px;background:#fff;box-shadow:0 16px 50px #5590a122}.canvas-container{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden}#canvas{width:100%;height:100%;min-height:480px;touch-action:none}#canvas canvas{display:block;width:100%;height:100%;touch-action:none}.floating-touch-bar{position:absolute;bottom:20px;display:flex;align-items:center;gap:12px;z-index:20;pointer-events:auto}.floating-left{left:20px}.floating-right{right:20px}.touch-btn{width:56px;height:56px;min-width:56px;min-height:56px;border-radius:50%;border:1.5px solid rgba(120,174,186,.45);background:#fffffff0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 6px 20px #17313c29,0 2px 4px #17313c14;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#17404c;cursor:pointer;padding:0;transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .15s ease,box-shadow .15s ease}.touch-btn:active:not(:disabled){transform:scale(.9);background:#eef9fd;box-shadow:0 2px 8px #17313c33}.touch-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.touch-btn-undo{border-color:#ffbb3f;background:#fffdf5}.touch-btn-undo:active:not(:disabled){background:#fffae0}.mode-switch-group{display:flex;background:#fffffff0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;border:1.5px solid rgba(120,174,186,.45);box-shadow:0 6px 20px #17313c29;padding:4px;gap:4px}.mode-btn{min-width:82px;min-height:48px;border-radius:999px;border:none;background:transparent;color:#39798a;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;transition:all .18s cubic-bezier(.34,1.56,.64,1)}.mode-btn.is-active{background:#ffbb3f;color:#17313c;box-shadow:0 3px 10px #ffbb3f73;transform:scale(1.02)}aside{padding:10px 16px;background:#f7fcff;border-left:1px solid #d8eaf0;overflow-y:auto}ul{padding-left:18px;line-height:1.7;margin:8px 0}aside p{margin-top:18px;color:#52717d;font-size:.85rem}.piece-picker{display:grid;gap:6px;margin-top:10px}.piece-choice{border-radius:10px;padding:6px 8px;text-align:left;font-size:.82rem}.piece-choice.is-selected,.color-choice.is-selected{outline:3px solid #ffbb3f;outline-offset:2px}.palette{display:grid;grid-template-columns:repeat(4,44px);gap:8px;margin-top:10px}.color-choice{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;border:6px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1px #8ca8b2}#more-colors{margin-top:10px}.advanced-palette{max-height:260px;overflow-y:auto;padding:2px;grid-template-columns:repeat(4,44px)}dialog{width:min(420px,calc(100vw - 32px));border:0;border-radius:18px;padding:24px;color:#17313c;box-shadow:0 24px 80px #17313c55}dialog::backdrop{background:#17313c88}dialog h2{margin:0 0 10px;font-size:1.25rem}dialog p{color:#52717d;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#login-form{display:grid;gap:14px}#login-form label{display:grid;gap:6px;color:#39798a;font-weight:700}#login-form input:not([type=checkbox]){min-height:44px;border:1px solid #78aeba;border-radius:10px;padding:8px 10px;font:inherit;color:#17313c}#login-form .check-field{display:flex;align-items:center;gap:8px;font-size:.9rem}.form-error{min-height:1.4em;color:#b42332!important;font-weight:700}.guide-choices,.project-choices{display:grid;gap:8px;margin:12px 0}.guide-choices button{text-align:left;border-radius:10px}#guide-status,#guide-help{margin-top:8px}.project-row{display:grid;grid-template-columns:1fr auto auto;gap:6px}#new-profile-form,#new-project-form{display:grid;gap:8px;margin-top:14px}#new-profile-form label,#new-project-form label{display:grid;gap:6px;color:#39798a;font-weight:700}#new-profile-form input,#new-project-form input{min-height:44px;border:1px solid #78aeba;border-radius:10px;padding:8px 10px;font:inherit}.rotate-hint{display:none}@media(orientation:portrait)and (max-width:900px){.workspace,.scene-actions{display:none}.rotate-hint{min-height:calc(100vh - 92px);display:grid;place-content:center;gap:12px;text-align:center;color:#39798a}.rotate-hint span{display:block;font-size:4rem;animation:rotate-device 1.6s ease-in-out infinite}.rotate-hint p{font-weight:700}}@keyframes rotate-device{50%{transform:rotate(90deg)}}