:root{color-scheme:dark;--bg:#050711;--panel:rgba(17,22,36,.82);--panel2:rgba(8,12,25,.88);--text:#f8f9ff;--muted:#aab4cc;--line:rgba(139,156,210,.22);--accent:#735cff;--cyan:#26d5ff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 85% 2%,rgba(16,163,184,.22),transparent 35%),radial-gradient(circle at 8% 35%,rgba(115,92,255,.20),transparent 34%),var(--bg);color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif}
body:before{content:"";position:fixed;inset:-20%;z-index:-1;opacity:.42;background:conic-gradient(from 180deg at 50% 50%,transparent,#735cff22,transparent,#26d5ff22,transparent);animation:ambient 18s linear infinite}
nav{max-width:1180px;margin:auto;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);font-weight:900;text-decoration:none;letter-spacing:-.03em}
.brand:before{content:"";width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#8d65ff,#27d9ff);box-shadow:0 0 26px #5e83ff66;animation:logoFloat 3.2s ease-in-out infinite,logoHue 9s linear infinite}
nav a{color:#8be2ff;text-decoration:none;font-weight:700}
.intro{max-width:920px;margin:48px auto 18px;padding:0 22px;animation:enter .65s ease both}
.intro h1{font-size:clamp(38px,7vw,70px);line-height:.98;letter-spacing:-.055em;margin:12px 0;background:linear-gradient(110deg,#fff 15%,#a9b8ff 48%,#43dcff 80%);background-clip:text;color:transparent}
.intro p{max-width:720px;color:var(--muted);font-size:17px}
.btn{border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);padding:12px 17px;font-weight:800;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);border-color:#58d9ff88;box-shadow:0 12px 35px #18266755}
.btn.primary{border:0;background:linear-gradient(120deg,var(--accent),var(--cyan));box-shadow:0 14px 40px #586aff44}
.tool-dialog{display:none;max-width:1180px;margin:24px auto 80px;padding:0 22px}.tool-dialog.visible{display:block;animation:enter .45s ease both}
.tool-dialog-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:25px;padding:26px;box-shadow:0 34px 110px #000a;backdrop-filter:blur(22px)}
.tool-dialog-card,.tool-grid,.tool-controls,.tool-preview{width:100%;min-width:0;max-width:100%}
.tool-dialog-head,.tool-dialog-head>div{min-width:0;max-width:100%}.tool-dialog-head>div{flex:1 1 auto}.tool-close{flex:0 0 42px}
.tool-dialog-card:before{content:"";position:absolute;width:360px;height:360px;right:-180px;top:-220px;border-radius:50%;background:#3dd9ff16;filter:blur(8px);pointer-events:none}
.tool-dialog-head{display:flex;justify-content:space-between;gap:18px}.tool-dialog-head h2{margin:0}.tool-dialog-head p{color:var(--muted);margin:5px 0 20px}
.tool-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:24px}.tool-controls,.tool-preview{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:19px}
.field{display:grid;gap:7px;margin-bottom:14px;color:var(--muted);font-weight:680}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{width:100%;min-width:0;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#070b16;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#48d5ff99;box-shadow:0 0 0 3px #31c8ff16}input[type=checkbox]{width:auto}input[type=file]{overflow:hidden}
.tool-preview img,.tool-preview video{max-width:100%;max-height:560px;border-radius:13px}.tool-preview audio{width:100%}.tool-output{white-space:pre-wrap;color:var(--muted);margin-top:12px}.tool-close{font-size:22px;height:42px}
@keyframes ambient{to{transform:rotate(360deg)}}@keyframes logoFloat{50%{transform:translateY(-4px) rotate(7deg);box-shadow:0 8px 36px #36cfff88}}@keyframes logoHue{to{filter:hue-rotate(360deg)}}@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){
  nav{padding:12px 16px;gap:10px 12px;flex-wrap:wrap}
  nav a{min-width:0;overflow-wrap:anywhere}
  .brand{flex:1 0 100%}
  nav>a:not(.brand){flex:1 0 100%;text-align:start}
  nav>.storydrop-language-control{flex:1 0 100%;width:100%;max-width:100%}
  nav>.storydrop-language-control select{width:100%;max-width:100%}
  .brand:before{width:30px;height:30px}
  .tool-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .intro{margin:10px auto 12px;padding:0 14px}
  .intro h1{font-size:38px;margin:6px 0}
  .intro p{font-size:15px;margin:8px 0 12px}
  .tool-dialog-card{padding:14px;border-radius:18px}
  .tool-dialog{width:100%;max-width:100vw;padding:0 10px}
  .field{gap:5px;margin-bottom:10px}
  input,select,textarea{padding:10px}
  textarea{min-height:110px!important}
  .btn{padding:10px 15px}
}