:root{--bg: #050508;--panel: rgba(20, 20, 30, .6);--text: #e7e9ee;--muted: #8a95a5;--accent: #a2d2ff;--accent-glow: rgba(162, 210, 255, .5);--accent-2: #bde0fe;--danger: #ff8fa3;--border: rgba(255, 255, 255, .1);--font-main: "Inter", system-ui, sans-serif;--fs-h1: clamp(2.5rem, 5vw + 1rem, 4rem);--fs-h2: clamp(1.5rem, 3vw + 1rem, 2rem);--fs-body: clamp(1rem, 2vw + .5rem, 1.1rem);--space-container: clamp(16px, 5vw, 24px);--header-height: 70px}*{box-sizing:border-box}html,body,#root{height:100%}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes twinkle{0%,to{opacity:.8}50%{opacity:.4}}body{margin:0;font-family:var(--font-main);background-color:var(--bg);background-image:radial-gradient(white,rgba(255,255,255,.2) 2px,transparent 3px),radial-gradient(white,rgba(255,255,255,.15) 1px,transparent 2px),radial-gradient(white,rgba(255,255,255,.1) 2px,transparent 3px);background-size:550px 550px,350px 350px,250px 250px;background-position:0 0,40px 60px,130px 270px;color:var(--text);overflow-x:hidden}a{color:var(--accent);text-decoration:none;transition:text-shadow .3s ease}a:hover{text-shadow:0 0 8px var(--accent-glow)}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.pulse-text{animation:pulse 2s infinite ease-in-out}.processing-pulse{animation:spin 10s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{max-width:1100px;margin:0 auto;padding:var(--space-container);min-height:100vh;display:flex;flex-direction:column}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;z-index:100;position:relative}.nav a.brand{font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:1.1rem;z-index:102}.nav .links{display:flex;gap:24px;align-items:center}.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;z-index:102;padding:8px}.mobile-menu{display:none}@media (max-width: 768px){.nav .links{display:none}.menu-toggle{display:block}.mobile-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#050508f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:101;opacity:0;pointer-events:none;transition:opacity .3s ease}.mobile-menu.open{opacity:1;pointer-events:all}.mobile-menu a{font-size:2rem;font-weight:200;color:var(--text)}.mobile-menu a:hover{color:var(--accent)}}.panel{background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:24px;padding:clamp(20px,4vw,32px);box-shadow:0 20px 50px #00000080;animation:float 6s ease-in-out infinite}.hero{padding:48px 0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}@media (max-width: 900px){.hero{grid-template-columns:1fr}}h1{margin:0 0 16px;font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#a2d2ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(162,210,255,.3)}h2{margin:16px 0;font-size:28px;font-weight:600}h3{margin:8px 0;font-size:18px;color:var(--muted);font-weight:500;letter-spacing:.5px}p.muted{color:var(--muted);line-height:1.6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:99px;border:1px solid var(--border);background:#ffffff0d;color:var(--text);cursor:pointer;transition:all .3s ease;font-weight:600;font-size:15px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px var(--accent-glow);border-color:var(--accent);background:#a2d2ff1a}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#050508;box-shadow:0 0 15px var(--accent-glow)}.btn.primary:hover{box-shadow:0 0 30px var(--accent-glow);transform:translateY(-2px) scale(1.02)}.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:#ffffff0d;box-shadow:none}.btn.danger{background:#ff8fa31a;color:var(--danger);border-color:#ff8fa34d}.btn.danger:hover{background:#ff8fa333;box-shadow:0 0 15px #ff8fa34d}.grid{display:grid;gap:24px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}@media (max-width: 900px){.grid.two,.grid.three{grid-template-columns:1fr}}.field{display:grid;gap:10px;margin-bottom:20px}label{font-weight:600;font-size:14px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}input[type=text],input[type=number],select,textarea{width:100%;padding:14px 16px;background:#0000004d;border:1px solid var(--border);border-radius:12px;color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease;font-family:var(--font-main);font-size:16px}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #a2d2ff33}textarea{min-height:120px;resize:vertical}.chips{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:#ffffff08;color:var(--muted);padding:10px 18px;border-radius:9999px;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease}.chip:hover{background:#ffffff14;border-color:#ffffff4d;transform:translateY(-1px)}.chip.active{background:var(--accent);color:#050508;border-color:transparent;box-shadow:0 0 15px var(--accent-glow);font-weight:600}.stepper{display:flex;gap:8px;margin-bottom:24px}.step{flex:1;height:4px;border-radius:999px;background:#ffffff1a}.step.active{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.card{border:1px solid var(--border);background:#14141e66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:24px;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000004d;border-color:#fff3}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}.table th{color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.badge{font-size:12px;padding:4px 10px;border-radius:999px;background:#ffffff1a;border:1px solid transparent;font-weight:600}.badge.ok{background:#10b9811a;color:#6ee7b7;border-color:#10b98133}.badge.warn{background:#ef44441a;color:#fca5a5;border-color:#ef444433}.audio{display:grid;gap:12px;padding:16px;border:1px dashed var(--border);border-radius:16px;background:#0003}.audio .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.progress{height:6px;background:#ffffff1a;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;width:0%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);transition:width .2s ease}.small{font-size:13px;color:var(--muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .8s ease-out forwards}.step-container{max-width:600px;margin:0 auto;min-height:calc(100vh - 100px);display:flex;flex-direction:column;justify-content:center;text-align:center;padding:20px}.narrative-text{font-size:clamp(1.5rem,4vw,2rem);font-weight:300;line-height:1.4;margin-bottom:32px;background:linear-gradient(135deg,#fff,#e7e9ee);-webkit-background-clip:text;background-clip:text;color:transparent}.narrative-text b{font-weight:700;color:var(--accent);-webkit-text-fill-color:var(--accent)}.narrative-input-group{margin-top:32px;display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}.narrative-input-group label{font-size:clamp(1rem,3vw,1.2rem);color:var(--accent-2);text-transform:none;font-weight:400}.narrative-input-group input,.narrative-input-group select{font-size:clamp(1.2rem,4vw,1.5rem);padding:16px 24px;text-align:center;background:#ffffff0d;border:1px solid var(--border);border-radius:16px;width:100%;max-width:400px}.narrative-input-group input:focus,.narrative-input-group select:focus{background:#ffffff1a;border-color:var(--accent);box-shadow:0 0 30px #a2d2ff1a}@keyframes pulseRed{0%{box-shadow:0 0 #ff646400}50%{box-shadow:0 0 40px 10px #ff64641a}to{box-shadow:0 0 #ff646400}}@keyframes ambientPulse{0%{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.5}to{transform:scale(1);opacity:.3}}.recording-pulse{animation:pulseRed 3s infinite ease-in-out;border-color:#ff64644d!important}.waveform-canvas{width:100%;height:100px;background:#0003;border-radius:12px;margin-top:16px;border:1px solid var(--border)}.ambient-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;background:radial-gradient(circle at center,rgba(200,50,50,.15) 0%,transparent 70%);z-index:-1;opacity:0;transition:opacity 1s ease}.ambient-overlay.active{opacity:1;animation:ambientPulse 4s infinite ease-in-out}.gallery-overlay-header{position:absolute;top:30px;left:40px;z-index:10;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 80px);pointer-events:none}.gallery-overlay-header a,.gallery-overlay-header button,.gallery-overlay-header input{pointer-events:auto}.gallery-title{margin:0;font-size:var(--fs-h1);font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#a2d2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(162,210,255,.3));pointer-events:auto}.gallery-controls-bottom{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:20px;z-index:10;display:flex;gap:10px;flex-wrap:wrap;pointer-events:none}.gallery-controls-bottom a,.gallery-controls-bottom button{pointer-events:auto}.gallery-reset{position:absolute;top:20px;right:20px;z-index:10;pointer-events:none}.gallery-reset button{pointer-events:auto}.gallery-instructions{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom,20px));left:50%;transform:translate(-50%);z-index:10;pointer-events:none;text-align:center;opacity:.7;width:100%;padding:0 20px}.gallery-datasource-toggles{position:absolute;top:80px;left:40px;display:flex;gap:8px;z-index:11;pointer-events:none}.gallery-datasource-toggles button{pointer-events:auto}@media (max-width: 900px){.gallery-datasource-toggles{position:static;margin-top:8px;padding-left:0}}.detail-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;display:flex;align-items:center;justify-content:center}.detail-modal-panel{max-width:1200px;width:95%;max-height:95vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:#050508;border:1px solid var(--border)}.detail-visual{position:relative;background:#000;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}.detail-content{padding:32px;overflow-y:auto;border-left:1px solid var(--border)}@media (max-width: 900px){.gallery-overlay-header{flex-direction:column;align-items:flex-start;gap:16px;left:20px;width:calc(100% - 40px)}.gallery-controls-bottom{bottom:calc(120px + env(safe-area-inset-bottom,20px));left:20px;right:20px;justify-content:center}.gallery-instructions{bottom:calc(30px + env(safe-area-inset-bottom,20px))}.detail-modal-panel{grid-template-columns:1fr;max-height:100dvh;height:100dvh;border-radius:0;display:flex;flex-direction:column}.detail-visual{min-height:45vh;height:45vh;flex-shrink:0}.detail-visual svg,.detail-visual canvas{width:100%!important;height:100%!important;object-fit:contain;max-height:100%}.detail-content{border-left:none;border-top:1px solid var(--border);flex-grow:1;overflow-y:auto;padding-bottom:80px}}