/* ============ tokens ============ */
:root{
  --paper:#fbfaf7; --surface:#ffffff; --surface-2:#f4f2ec; --surface-3:#eae7de;
  --ink:#17161a; --ink-2:#4c4954; --ink-3:#807c8a;
  --line:#e3dfd6; --line-2:#d3cec2;
  --accent:#c8571f; --accent-soft:#f7e6da;
  --teal:#1c6f6a; --mark:#ffe8a3; --mark-line:#e8c766;
  --shadow:0 1px 2px rgba(24,20,14,.05), 0 8px 24px -12px rgba(24,20,14,.18);
  --r:14px; --r-sm:9px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --deva:'Noto Serif Devanagari','Nirmala UI',sans-serif;
}
:root[data-theme="dark"]{
  --paper:#100f14; --surface:#17161d; --surface-2:#1e1d26; --surface-3:#282734;
  --ink:#f3f1ee; --ink-2:#bbb7c3; --ink-3:#8a8693;
  --line:#2a2833; --line-2:#3a3846;
  --accent:#f08a4b; --accent-soft:#38221a;
  --teal:#4fd1c5; --mark:#4b3a14; --mark-line:#8a6c22;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#100f14; --surface:#17161d; --surface-2:#1e1d26; --surface-3:#282734;
    --ink:#f3f1ee; --ink-2:#bbb7c3; --ink-3:#8a8693;
    --line:#2a2833; --line-2:#3a3846;
    --accent:#f08a4b; --accent-soft:#38221a;
    --teal:#4fd1c5; --mark:#4b3a14; --mark-line:#8a6c22;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ============ header ============ */
.site-header{
  max-width:1240px; margin:0 auto; padding:22px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:baseline; gap:11px; text-decoration:none; color:inherit}
.brand-mark{font-family:var(--deva); font-size:23px; font-weight:700; color:var(--accent); line-height:1}
.brand-name{font-family:var(--serif); font-size:25px; letter-spacing:.01em}
.header-actions{display:flex; align-items:center; gap:6px}
.ghost-link{
  color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500;
  padding:8px 12px; border-radius:var(--r-sm);
}
.ghost-link:hover{color:var(--ink); background:var(--surface-2)}
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-2); transition:.15s;
}
.icon-btn:hover{color:var(--ink); background:var(--surface-2); border-color:var(--line-2)}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:none}
  :root:not([data-theme="light"]) .i-moon{display:block}
}

/* ============ hero ============ */
main{max-width:1240px; margin:0 auto; padding:0 28px}
.hero{padding:48px 0 40px; max-width:720px}
h1{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(42px,6.4vw,68px); line-height:1.06; margin-bottom:22px;
}
h1 em{font-style:italic; color:var(--accent)}
.lede{font-size:clamp(16px,2vw,18.5px); color:var(--ink-2); max-width:60ch; margin-bottom:20px}
.assurance{
  display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500;
  color:var(--teal); background:var(--surface-2); border:1px solid var(--line);
  padding:8px 15px 8px 12px; border-radius:100px;
}
.assurance svg{flex-shrink:0}

/* ============ workspace ============ */
.workspace{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;
  padding-bottom:20px;
}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.panel-head h2{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); font-family:var(--sans);
}
.panel-head h2.head-deva{
  font-family:var(--deva); font-size:17px; text-transform:none; letter-spacing:0;
  color:var(--accent); font-weight:700;
}
.panel-actions{display:flex; gap:6px}
.mini{
  font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
  padding:6px 11px; border-radius:7px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid transparent; transition:.15s;
}
.mini:hover{background:var(--surface-3); color:var(--ink)}
.mini:active{transform:translateY(1px)}

.editor-wrap{flex:1; display:flex; min-height:0}
#input{
  flex:1; width:100%; min-height:400px; height:46vh; resize:vertical;
  font-family:inherit; font-size:15.5px; line-height:1.72; color:var(--ink);
  background:transparent; border:0; padding:20px 22px;
}
#input::placeholder{color:var(--ink-3); line-height:1.75}
#input:focus{outline:0}

/* ---- controls ---- */
.controls{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.control-length{display:flex; align-items:center; gap:11px}
.control-length label{font-size:12.5px; font-weight:500; color:var(--ink-2)}
#ratio{
  -webkit-appearance:none; appearance:none; width:118px; height:4px;
  background:var(--line-2); border-radius:3px; cursor:pointer;
}
#ratio::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
#ratio::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface); cursor:pointer;
}
#ratioVal{
  font-size:12.5px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums; min-width:34px;
}
.seg{display:flex; background:var(--surface-3); border-radius:8px; padding:2.5px; gap:2px}
.seg button{
  font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
  padding:5px 12px; border:0; border-radius:6px; background:transparent;
  color:var(--ink-2); transition:.15s;
}
.seg button.is-on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600}

/* ---- result ---- */
.result-scroll{flex:1; overflow-y:auto; max-height:46vh; min-height:200px}
.output{padding:20px 22px; font-size:15.5px; line-height:1.75}
.output p{margin-bottom:15px}
.output p:last-child{margin-bottom:0}
.output.is-context p{color:var(--ink-3)}
.output mark{
  background:var(--mark); color:var(--ink); padding:1px 0;
  box-shadow:0 1px 0 var(--mark-line); border-radius:2px;
}
.empty{color:var(--ink-3); font-size:14.5px; padding:6px 0}
.empty b{color:var(--ink-2); font-weight:600}
.notice{
  font-size:13px; color:var(--ink-2); background:var(--accent-soft);
  border-left:2.5px solid var(--accent); padding:9px 13px;
  border-radius:0 7px 7px 0; margin-bottom:15px;
}

/* ---- keywords ---- */
.keywords{padding:15px 18px; border-top:1px solid var(--line)}
.keywords h3{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:10px;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font-size:12.5px; padding:4.5px 11px; border-radius:100px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
}
.chip.hot{background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600}

/* ---- stats ---- */
.statbar{
  display:flex; flex-wrap:wrap; gap:5px 20px; padding:12px 18px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3);
}
.statbar .s b{
  color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
  margin-right:4px;
}
.statbar:empty{display:none}

/* ============ how ============ */
.how{
  display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center;
  padding:88px 0 76px; margin-top:32px; border-top:1px solid var(--line);
}
.eyebrow{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); margin-bottom:14px;
}
.how h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,37px);
  line-height:1.2; letter-spacing:-.01em; margin-bottom:22px;
}
.how p{color:var(--ink-2); margin-bottom:15px; max-width:60ch; font-size:15.5px}
.how p em{color:var(--ink); font-style:italic}
.how-figure{color:var(--line-2)}
.how-figure svg{display:block; overflow:visible}
.how-figure .edges{opacity:.75}
.n-hot{fill:var(--accent)}
.n-warm{fill:var(--accent); opacity:.55}
.n-mid{fill:var(--teal); opacity:.5}
.n-cool{fill:var(--ink-3); opacity:.4}
.how-figure figcaption{
  font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:18px; font-style:italic;
}

/* ============ footer ============ */
.site-footer{
  max-width:1240px; margin:0 auto; padding:34px 28px 60px;
  border-top:1px solid var(--line); text-align:center;
}
.etym{font-size:14px; color:var(--ink-2); margin-bottom:8px}
.etym span{font-family:var(--deva); color:var(--accent); font-weight:700; font-size:16px}
.colophon{font-size:12.5px; color:var(--ink-3)}

/* ============ drop + toast ============ */
.drop-veil{
  position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(3px);
}
.drop-veil.on{display:grid}
.drop-card{
  border:2px dashed var(--accent); color:var(--accent); background:var(--surface);
  padding:34px 52px; border-radius:var(--r); font-size:16px; font-weight:500;
}
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,16px);
  background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:500;
  padding:10px 20px; border-radius:100px; z-index:70;
  opacity:0; pointer-events:none; transition:.22s;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ============ responsive ============ */
@media (max-width:980px){
  .workspace{grid-template-columns:1fr}
  .how{grid-template-columns:1fr; gap:40px; padding:64px 0 56px}
  .how-figure{max-width:340px; margin:0 auto}
  #input{min-height:280px; height:34vh}
  .result-scroll{max-height:none}
}
@media (max-width:560px){
  main,.site-header,.site-footer{padding-left:18px; padding-right:18px}
  .hero{padding:32px 0 30px}
  .ghost-link{display:none}
  .controls{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}