:root{--accent: #e66a3b;--panel-bg: rgba(255, 255, 255, .96);--panel-border: #e2c79a;--text: #1e1e1e;--hint-bg: rgba(255, 255, 255, .85);--hint-fg: #333;--shadow: rgba(0, 0, 0, .25)}html[data-theme=night]{--panel-bg: rgba(28, 28, 42, .96);--panel-border: #5a4a2a;--text: #f0f0f0;--hint-bg: rgba(20, 20, 30, .85);--hint-fg: #eee;--shadow: rgba(0, 0, 0, .6)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#000}#root{width:100%;height:100%}.scene-container{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh}canvas{display:block;outline:none}#welcome{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#0e0e1f,#2a2a4a,#4a2a6a);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:opacity .8s ease,visibility .8s ease}#welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}#welcome h1{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:2px;margin-bottom:.5rem;text-align:center}#welcome p{opacity:.8;margin-bottom:2.5rem;font-size:1.05rem;text-align:center;padding:0 1rem;max-width:540px}#enter-btn{padding:16px 38px;border-radius:999px;border:2px solid rgba(255,255,255,.4);background:linear-gradient(135deg,#e66a3b,#f59e54);color:#fff;cursor:pointer;font-size:1.15rem;font-weight:700;letter-spacing:1px;box-shadow:0 12px 32px #e66a3b59;transition:transform .25s,box-shadow .25s;font-family:inherit}#enter-btn:hover{transform:translateY(-3px);box-shadow:0 18px 42px #e66a3b8c}#speech-bubble{position:fixed;background:#fff;color:#1e1e1e;padding:12px 18px;border-radius:18px;border:2px solid var(--accent);font-size:14px;font-weight:500;line-height:1.45;max-width:300px;text-align:center;transform:translate(-50%,calc(-100% - 24px));box-shadow:0 10px 30px #00000059;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s;z-index:80}#speech-bubble:after{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:14px solid var(--accent)}#speech-bubble:before{content:"";position:absolute;bottom:-9px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid #fff;z-index:1}#speech-bubble.show{opacity:1;visibility:visible}#intro-card{position:fixed;left:50%;bottom:90px;transform:translate(-50%) translateY(20px);width:min(520px,calc(100% - 40px));background:#fffffff7;color:#1e1e1e;border:2px solid var(--accent);border-radius:18px;box-shadow:0 18px 48px #0006;padding:22px 26px 18px;z-index:200;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s,transform .4s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:inherit}#intro-card.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}#intro-card .intro-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}#intro-card .intro-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#e66a3b,#f59e54);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex-shrink:0}#intro-card .intro-name{font-weight:700;font-size:16px}#intro-card .intro-role{font-size:12px;opacity:.7}#intro-card .intro-text{font-size:16px;line-height:1.55;min-height:50px;margin-bottom:12px}#intro-card .intro-progress{height:3px;background:#00000014;border-radius:999px;overflow:hidden;margin-bottom:14px}#intro-card .intro-progress:after{content:"";display:block;height:100%;width:var(--p, 0%);background:var(--accent);border-radius:999px;transition:width .35s}#intro-card .intro-controls{display:flex;justify-content:flex-end;gap:8px}#intro-card button{padding:7px 14px;font-size:12px;font-weight:600;border-radius:999px;border:1px solid var(--accent);background:#fff;color:var(--accent);cursor:pointer;font-family:inherit;transition:background .2s,color .2s}#intro-card button:hover{background:var(--accent);color:#fff}#intro-card button:disabled{opacity:.4;cursor:not-allowed}html[data-theme=night] #intro-card{background:#1c1c2af7;color:#f0f0f0}html[data-theme=night] #intro-card .intro-progress{background:#ffffff1a}html[data-theme=night] #intro-card button{background:#ffffff0d}.welcome-hint{margin-top:2.5rem;font-size:.85rem;opacity:.55;letter-spacing:1px}#joystick{position:fixed;left:24px;bottom:100px;width:120px;height:120px;border-radius:50%;background:#ffffff2e;border:2px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);touch-action:none;z-index:95;display:none;box-shadow:0 4px 16px #00000059}#joystick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin-left:-28px;margin-top:-28px;border-radius:50%;background:#ffffff8c;border:2px solid rgba(255,255,255,.85);pointer-events:none;transition:transform .05s linear;box-shadow:0 2px 8px #0006}@media (hover: none) and (pointer: coarse){#joystick{display:block}}.desktop-only{display:inline}.mobile-only{display:none}@media (hover: none) and (pointer: coarse){.desktop-only{display:none}.mobile-only{display:inline}}#hint{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--hint-bg);color:var(--hint-fg);padding:12px 22px;border-radius:999px;font-size:13px;letter-spacing:.4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--panel-border);box-shadow:0 6px 22px var(--shadow);z-index:100;text-align:center}#hint b{color:var(--accent)}#object-label{position:fixed;pointer-events:none;background:var(--hint-bg);color:var(--hint-fg);padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--panel-border);box-shadow:0 4px 12px var(--shadow);transform:translate(-50%,-120%);z-index:90;opacity:0;transition:opacity .2s;white-space:nowrap}#object-label.show{opacity:1}#object-label.in-range{border-color:var(--accent);color:#fff;background:var(--accent);box-shadow:0 4px 18px #e66a3b8c}#panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);background:var(--panel-bg);color:var(--text);padding:32px 36px;border-radius:20px;border:1px solid var(--panel-border);box-shadow:0 24px 60px var(--shadow);max-width:640px;width:calc(100% - 40px);max-height:80vh;overflow-y:auto;z-index:500;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#panel.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}#panel h2{color:var(--accent);margin-bottom:12px;font-size:1.6rem}#panel h3{margin:16px 0 6px;font-size:1.05rem}#panel p{line-height:1.6;margin-bottom:10px}#panel ul{margin:8px 0 12px 20px;line-height:1.7}#panel a{color:var(--accent);text-decoration:none;font-weight:600}#panel a:hover{text-decoration:underline}#panel .close{position:absolute;top:14px;right:18px;background:transparent;border:none;color:var(--text);font-size:28px;cursor:pointer;line-height:1;opacity:.6}#panel .close:hover{opacity:1}.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}.project-card{border:1px solid var(--panel-border);border-radius:10px;padding:12px;background:#0000000a}html[data-theme=night] .project-card{background:#ffffff0a}.project-card strong{display:block;margin-bottom:4px;color:var(--accent)}.project-card span{font-size:.85rem;opacity:.8}.socials{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}.socials a{padding:8px 14px;border:1px solid var(--panel-border);border-radius:8px}#backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:400;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}#backdrop.show{opacity:1;visibility:visible}#settings-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);background:var(--panel-bg);color:var(--text);padding:32px 36px;border-radius:20px;border:1px solid var(--panel-border);box-shadow:0 24px 60px var(--shadow);max-width:520px;width:calc(100% - 40px);max-height:85vh;overflow-y:auto;z-index:600;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#settings-panel.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}#settings-panel h2{color:var(--accent);margin-bottom:6px;font-size:1.45rem}#settings-panel h3{margin:22px 0 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:1.2px;opacity:.65}#settings-panel .close{position:absolute;top:14px;right:18px;background:transparent;border:none;color:var(--text);font-size:28px;cursor:pointer;line-height:1;opacity:.6}#settings-panel .close:hover{opacity:1}.settings-group{display:flex;align-items:center;gap:14px;margin-bottom:12px}.settings-group label{width:60px;font-size:13px;font-weight:600;opacity:.85}.swatch-row{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:32px;height:32px;border-radius:8px;border:2px solid rgba(0,0,0,.18);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}.swatch:hover{transform:scale(1.1)}.swatch.active{border-color:var(--accent);box-shadow:0 0 0 3px #e66a3b59}html[data-theme=night] .swatch{border-color:#ffffff2e}.settings-hint{font-size:13px;opacity:.7;margin-bottom:10px;line-height:1.5}.settings-btn{display:inline-block;padding:10px 18px;border-radius:999px;border:1px solid var(--panel-border);background:var(--hint-bg);color:var(--text);cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;margin-top:4px;transition:background .2s,color .2s,border-color .2s}.settings-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.settings-btn.primary{background:linear-gradient(135deg,#e66a3b,#f59e54);color:#fff;border-color:var(--accent);padding:12px 22px}.settings-btn.primary:hover{filter:brightness(1.1)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--panel-border);border-radius:12px;margin-bottom:10px}.toggle-row .toggle-label{display:flex;flex-direction:column;font-size:13px;font-weight:600}.toggle-row .toggle-sub{font-weight:400;font-size:11px;opacity:.65;margin-top:2px}.toggle-switch{position:relative;width:46px;height:26px;border-radius:999px;border:none;background:#0000002e;cursor:pointer;transition:background .2s;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.toggle-switch.on{background:var(--accent)}.toggle-switch.on:after{transform:translate(20px)}html[data-theme=night] .toggle-switch{background:#ffffff2e}#outfit-picker{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);background:var(--panel-bg);color:var(--text);padding:32px 36px;border-radius:20px;border:1px solid var(--panel-border);box-shadow:0 24px 60px var(--shadow);max-width:580px;width:calc(100% - 40px);max-height:85vh;overflow-y:auto;z-index:600;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#outfit-picker.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}#outfit-picker h2{color:var(--accent);margin-bottom:6px;font-size:1.45rem}#outfit-picker h3{margin:22px 0 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:1.2px;opacity:.65}#outfit-picker .close{position:absolute;top:14px;right:18px;background:transparent;border:none;color:var(--text);font-size:28px;cursor:pointer;line-height:1;opacity:.6}#outfit-picker .close:hover{opacity:1}.outfit-row{display:flex;gap:12px;flex-wrap:wrap}.outfit-item{background:#0000000a;border:2px solid transparent;border-radius:12px;padding:10px 8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text);font-family:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}html[data-theme=night] .outfit-item{background:#ffffff0a}.outfit-item:hover{transform:translateY(-3px);border-color:var(--panel-border)}.outfit-item.active{border-color:var(--accent);box-shadow:0 0 0 3px #e66a3b4d}.outfit-item span{opacity:.8}