:root{color-scheme:dark;--panel-bg: rgba(18, 20, 24, .82);--panel-border: rgba(255, 255, 255, .08);--text: #eef1f5;--text-dim: #99a1ad;--accent: #4f8cff;font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0c0d10;color:var(--text)}#app{position:relative;width:100vw;height:100vh}#scene{display:block;width:100%;height:100%}.panel{position:absolute;top:0;right:0;width:300px;max-width:86vw;height:100%;padding:20px 18px 28px;overflow-y:auto;background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid var(--panel-border);display:flex;flex-direction:column;gap:22px}.panel__title{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text)}.panel__title small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--text-dim)}.group{display:flex;flex-direction:column;gap:8px}.group__label{margin:0;font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.options{display:flex;flex-wrap:wrap;gap:6px}.opt{flex:1 1 auto;min-width:64px;padding:8px 10px;font-size:12px;color:var(--text);background:#ffffff0d;border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;transition:background .12s,border-color .12s}.opt:hover{background:#ffffff1a}.opt.is-active{background:#4f8cff2e;border-color:var(--accent);color:#cfe0ff}.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.swatch{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--panel-border);cursor:pointer;transition:transform .1s}.swatch:hover{transform:scale(1.08)}.swatch.is-active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}.swatch--custom{position:relative;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch--custom input{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer}.viewbar{position:absolute;bottom:22px;left:22px;display:flex;gap:6px;padding:6px;background:var(--panel-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:12px}.viewbar__btn{padding:8px 14px;font-size:12px;color:var(--text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background .12s,color .12s}.viewbar__btn:hover{background:#ffffff14}.viewbar__btn.is-active{background:#4f8cff33;color:#cfe0ff}.anim-row{display:flex;align-items:center;gap:10px}.anim-play{flex:0 0 auto;min-width:72px}.anim-slider{flex:1 1 auto;accent-color:var(--accent);cursor:pointer}.load-error{position:absolute;top:16px;left:16px;padding:10px 14px;background:#961e1ee6;color:#fff;font-size:13px;border-radius:8px}.opt--pattern{flex:0 0 auto;min-width:0;padding:6px 12px;border-radius:14px;height:28px}