:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --ink:#211D2B; --muted:#726E7B;
  --line:#E7E3DA; --accent:#4B3B72; --accent-soft:#EFEAF7;
  --warm:#D98A3D; --warm-soft:#FBEBD8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.mono{font-family:'JetBrains Mono', monospace;}

.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:19px; font-weight:500;}
.logo-mark{width:26px; height:26px; flex-shrink:0;}

header{position:sticky; top:0; z-index:50; background:rgba(250,249,245,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.balance-pill{font-family:'JetBrains Mono',monospace; font-size:13px; background:var(--accent-soft); color:var(--accent); padding:7px 14px; border-radius:100px;}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:9px; font-size:14.5px; font-weight:500; cursor:pointer; border:none; transition:transform .15s, box-shadow .15s, opacity .15s;}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(33,29,43,0.18);}
.btn-primary:disabled{opacity:0.35; cursor:not-allowed; transform:none; box-shadow:none;}

footer{padding:64px 0 36px; border-top:1px solid var(--line); margin-top:40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; margin-bottom:28px;}
.footer-links{display:flex; gap:24px; font-size:13px; color:var(--muted);}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:20px;}

section{padding:88px 0;}
.section-head{max-width:600px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:34px; letter-spacing:-0.015em; margin-bottom:14px;}

.hero{padding:96px 0 80px; text-align:center;}
.hero h1{font-size:50px; line-height:1.1; letter-spacing:-0.02em; max-width:720px; margin:0 auto 22px;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero p.lead{font-size:18px; color:var(--muted); max-width:560px; margin:0 auto 36px;}
.hero-ctas{display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:20px;}

.explain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.explain-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px 26px; text-align:left; transition:border-color .15s;}
.explain-card:hover{border-color:var(--accent);}
.card-dot{display:block; width:10px; height:10px; border-radius:50%; margin-bottom:18px;}
.dot-ready{background:var(--accent);}
.dot-soon{background:var(--warm);}
.explain-card h4{font-size:16px; font-weight:500; margin-bottom:8px; font-family:'Inter',sans-serif;}
.explain-card p{font-size:13.5px; color:var(--muted); line-height:1.55;}
.soon-badge{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--warm); background:var(--warm-soft); padding:2px 8px; border-radius:100px; margin-left:6px; vertical-align:middle;}

.examples{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:96px 0 104px;}
.carousel-track{max-width:1120px; margin:0 auto; display:flex; gap:16px; overflow-x:auto; padding:0 32px 8px; scroll-snap-type:x mandatory;}
.ex-card{flex:0 0 168px; scroll-snap-align:start;}
.ex-thumb{width:168px; height:298px; border-radius:14px; position:relative; overflow:hidden; background:linear-gradient(165deg,#5B4783 0%, #3A2E58 55%, #241B38 100%);}
.ex-thumb::after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4);}
.ex-thumb::before{content:''; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #fff; z-index:1;}
.ex-dur{position:absolute; bottom:10px; right:10px; font-family:'JetBrains Mono',monospace; font-size:10px; color:#fff; background:rgba(0,0,0,0.35); padding:3px 7px; border-radius:100px; z-index:2;}
.ex-cap{font-size:12px; color:var(--muted); margin-top:8px; padding:0 2px;}

.shell{display:grid; grid-template-columns:1fr 336px; gap:40px; padding:44px 0 96px; align-items:start;}
.page-title{font-size:32px; margin-bottom:32px;}
.field{margin-bottom:34px;}
.field-label{font-size:14px; font-weight:500; margin-bottom:6px; display:block;}
.field-hint{font-size:12.5px; color:var(--muted); margin-bottom:14px;}

.source-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.opt{border:1.5px solid var(--line); border-radius:13px; padding:18px; cursor:pointer; transition:border-color .15s, background .15s; background:var(--surface);}
.opt:hover{border-color:#C9C2B4;}
.opt.on{border-color:var(--accent); background:var(--accent-soft);}
.opt-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;}
.opt-name{font-size:15px; font-weight:500;}
.opt-price{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--warm);}
.opt-desc{font-size:12.5px; color:var(--muted); line-height:1.5;}

.dur-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.dur-opt{border:1.5px solid var(--line); border-radius:13px; padding:16px; cursor:pointer; text-align:center; background:var(--surface); transition:border-color .15s, background .15s;}
.dur-opt:hover{border-color:#C9C2B4;}
.dur-opt.on{border-color:var(--accent); background:var(--accent-soft);}
.dur-time{font-family:'JetBrains Mono',monospace; font-size:16px; margin-bottom:3px;}
.dur-sub{font-size:11.5px; color:var(--muted);}

.voice-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.voice-opt{border:1.5px solid var(--line); border-radius:11px; padding:14px 16px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s;}
.voice-opt:hover{border-color:#C9C2B4;}
.voice-opt.on{border-color:var(--accent); background:var(--accent-soft);}
.voice-name{font-size:14px; font-weight:500; margin-bottom:2px;}
.voice-desc{font-size:11.5px; color:var(--muted); line-height:1.45;}

textarea, input[type=text]{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:15px; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink); background:var(--surface); resize:vertical;}
textarea{min-height:110px;}
textarea:focus, input:focus{outline:none; border-color:var(--accent);}
.char-count{font-size:11.5px; color:var(--muted); margin-top:7px; text-align:right;}

.upload-zone{border:1.5px dashed var(--line); border-radius:13px; padding:32px 24px; text-align:center; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s;}
.upload-zone:hover{border-color:var(--accent); background:var(--accent-soft);}
.upload-main{font-size:14px; font-weight:500; margin-bottom:5px;}
.upload-sub{font-size:12.5px; color:var(--muted);}
.upload-tips{margin-top:12px; font-size:12px; color:var(--muted); line-height:1.6; padding-left:16px;}
.upload-tips li{margin-bottom:2px;}

.music-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px;}

.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1.5px solid var(--line); border-radius:13px; background:var(--surface);}
.switch{position:relative; width:44px; height:25px; border-radius:100px; background:var(--line); cursor:pointer; transition:background .15s; flex-shrink:0;}
.switch.on{background:var(--accent);}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .15s;}
.switch.on::after{transform:translateX(19px);}

.summary{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; position:sticky; top:96px;}
.summary h3{font-size:12px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-bottom:18px; letter-spacing:0.04em;}
.srow{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-size:13px;}
.srow:first-of-type{border-top:none;}
.srow .k{color:var(--muted); flex-shrink:0;}
.srow .v{font-weight:500; text-align:right;}
.stotal{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:8px; border-top:1.5px solid var(--ink);}
.stotal .k{font-size:14px; font-weight:500;}
.stotal .v{font-family:'Fraunces',serif; font-size:24px;}
.summary .btn{width:100%; margin-top:20px;}
.balance-note{font-size:11.5px; color:var(--muted); text-align:center; margin-top:10px;}

.progress-list{display:flex; flex-direction:column; margin:4px 0 0;}
.prow{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted);}
.prow:first-child{border-top:none;}
.pdot{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px;}
.prow.active{color:var(--ink); font-weight:500;}
.prow.active .pdot{border-color:var(--accent); color:var(--accent);}
.prow.done .pdot{background:var(--accent); border-color:var(--accent); color:#fff;}

@media (max-width:900px){
  .explain-grid{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
  .footer-top{flex-direction:column;}
  .shell{grid-template-columns:1fr; gap:28px; padding-top:28px;}
  .summary{position:static;}
  .source-grid, .voice-grid, .music-grid{grid-template-columns:1fr;}
  .page-title{font-size:26px;}
}
@media (max-width:560px){
  .hero{padding:64px 0 56px;}
  .hero h1{font-size:30px;}
  section{padding:64px 0;}
}