:root{color:#17313c;background:#eef9fd;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px}.playground{min-height:100vh;padding:16px}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}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}.rotate-hint{display:none}#canvas{min-height:480px;touch-action:none}#canvas canvas{display:block;width:100%;height:100%}aside{padding:10px 16px;background:#f7fcff;border-left:1px solid #d8eaf0}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}@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)}}