:root{
  --z-bg:#07090d;
  --z-panel:#0f131a;
  --z-panel-2:#131823;
  --z-border:#232b3a;
  --z-text:#f5f7fb;
  --z-muted:#9aa4b5;
  --z-cyan:#21d4fd;
  --z-blue:#1677ff;
  --z-purple:#7a20ff;
  --z-grad:linear-gradient(135deg,var(--z-cyan),var(--z-blue) 55%,var(--z-purple));
}
html,body,#root{background:var(--z-bg)!important}
body{font-family:Montserrat,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:var(--z-text)!important}
.app-shell,.guide-shell{
  background:
    radial-gradient(circle at 18% -8%,rgba(33,212,253,.10),transparent 30%),
    radial-gradient(circle at 82% 10%,rgba(122,32,255,.12),transparent 34%),
    linear-gradient(180deg,#080a0f 0%,#0a0d13 42%,#080a0f 100%)!important;
  color:var(--z-text)!important;
  padding-top:26px!important;
}
.zosma-topbar{width:min(100%,920px);margin:0 auto 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4px}
.zosma-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.05em}
.zosma-brand svg{width:34px;height:34px;display:block}.zosma-brand-name{font-size:18px}.zosma-tool-tag{font-size:12px;color:var(--z-muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.zosma-site-link{color:var(--z-muted);font-size:13px;text-decoration:none}.zosma-site-link:hover{color:#fff}
.app-header{max-width:820px!important;margin-bottom:34px!important}.main-note{display:none!important}.app-header h1{font-size:clamp(46px,8vw,76px)!important;letter-spacing:-.045em!important;margin:0 0 12px!important;background:linear-gradient(90deg,#fff 0%,#d9f8ff 35%,#a9bfff 68%,#b691ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}.app-header p{color:var(--z-muted)!important;font-size:clamp(17px,2.8vw,22px)!important;max-width:680px;margin:0 auto!important;line-height:1.55!important}
.app-card{background:linear-gradient(180deg,rgba(18,23,32,.98),rgba(12,16,23,.98))!important;border:1px solid var(--z-border)!important;border-radius:24px!important;width:min(100%,820px)!important;box-shadow:0 24px 80px rgba(0,0,0,.28)!important;color:var(--z-text)!important;padding:clamp(24px,4vw,34px)!important}
.card-title-row{margin-bottom:24px!important}.card-title-row h2{color:#fff!important;font-size:clamp(23px,4vw,31px)!important}.icon-tile{border-radius:16px!important;background:linear-gradient(145deg,#151c28,#0d1118)!important;border:1px solid #2c3545!important;color:#8fdfff!important;box-shadow:inset 0 0 20px rgba(33,212,253,.05)!important}
.file-name,.time-row,.tone-columns strong,.about-content h3,.about-content>strong,.about-content h4{color:#fff!important}.detected-output span,.tone-columns span,.about-version,.about-developed,.credits-list{color:var(--z-muted)!important}
.action-button,.tone-button,.reset-button,.download-link{border-radius:16px!important;min-height:64px!important}.action-button{font-size:clamp(17px,3vw,20px)!important}.purple-gradient,.guide-button,.tutorial-button,.detect-button,.result-button-active,.export-button-active,.tone-button.down,.tone-button.up,.reset-button-active,.download-link,.about-link{background:var(--z-grad)!important;box-shadow:0 14px 30px rgba(22,119,255,.18)!important}.neutral-button,.reset-button{background:#202632!important;color:#d7dce5!important}.round-play{width:120px!important;height:120px!important;background:var(--z-grad)!important;box-shadow:0 18px 40px rgba(22,119,255,.22)!important}.pause-button{background:#1b212d!important;color:#d8deea!important}.progress-slider{accent-color:var(--z-blue)!important}.detect-progress-info,.detected-output strong,.detected-output small{color:#63e6d0!important}.detect-progress-track{background:#17241f!important}.detect-progress-fill{background:linear-gradient(90deg,#21d4fd,#16c79a)!important}.detected-output small{background:#10251f!important;border:1px solid #1f4f43!important}.tone-summary{background:#121821!important;border:1px solid #30394a!important}.tone-summary h3,.choose-title,.tone-summary p{color:#b9c3d2!important}.tone-columns div+div{border-left-color:#2b3442!important}.note-button{background:#111722!important;color:#b9c3d2!important;border:1px solid #293244!important;border-radius:15px!important}.note-button.active{background:var(--z-grad)!important;color:#fff!important;border-color:transparent!important}.about-card{display:none!important}
.guide-topbar{background:rgba(8,10,15,.94)!important;border-bottom:1px solid var(--z-border)!important}.guide-hero h1,.guide-info-card p,.tutorial-step h2{color:#fff!important}.guide-note,.guide-hero strong,.guide-info-title,.tutorial-note-card h2{color:#7ddfff!important}.guide-list-card,.guide-info-card,.tutorial-card,.tutorial-note-card{background:linear-gradient(180deg,#121721,#0d1118)!important;border:1px solid var(--z-border)!important}.guide-note-row,.tutorial-step,.guide-footer-tags div{background:#121823!important;border:1px solid #263042!important}.guide-note-flat,.tutorial-step p,.tutorial-note-card p{color:#b7c0cf!important}.tutorial-step>span{background:var(--z-grad)!important;color:#fff!important}.enharmonic-box{background:#0d121a!important}
.zosma-footer{width:min(100%,820px);margin:8px auto 0;padding:28px 12px 4px;border-top:1px solid #171d27;color:#778294;text-align:center;font-size:13px;line-height:1.6}.zosma-footer strong{color:#cfd6e2}.zosma-footer a{color:#8fdfff;text-decoration:none}
@media (max-width:600px){.zosma-topbar{margin-bottom:24px}.zosma-site-link{display:none}.zosma-brand-name{font-size:16px}.app-shell{padding-left:14px!important;padding-right:14px!important}.app-card{border-radius:20px!important}.tone-actions{grid-template-columns:1fr!important}.note-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.note-button{min-height:62px!important}.zosma-footer{padding-bottom:12px}}