/* NimbusName — D7 Warm Paper variant */
:root{
  --paper:#f0e0d0; --paper-deep:#e6d2b8; --card:#f8efe1; --card-edge:#d8c3a8;
  --ink:#3d2b1f; --ink-soft:#6b5540; --accent:#b4552d; --accent-deep:#8f3f20;
  --stamp:#fbf6ec; --ok:#2f7d4f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65;
  background-image:radial-gradient(rgba(61,43,31,.05) 1px, transparent 1.4px);
  background-size:22px 22px;
}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; line-height:1.2; letter-spacing:-.01em}
a{color:var(--accent-deep)}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px}
/* header */
.site-header{background:rgba(248,239,225,.92); border-bottom:1px solid var(--card-edge); position:sticky; top:0; z-index:50; backdrop-filter:blur(6px)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{width:38px; height:38px}
.brand-name{font-family:"Fraunces",Georgia,serif; font-size:1.5rem; font-weight:700}
.brand-name em{font-style:normal; color:var(--accent)}
.nav{display:flex; gap:4px 16px; flex-wrap:wrap; align-items:center}
.nav a{color:var(--ink-soft); text-decoration:none; font-size:.95rem; padding:6px 2px; border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent-deep); border-bottom-color:var(--accent)}
.nav a.cta{background:var(--accent); color:#fff; padding:8px 16px; border-radius:999px; border:none; font-weight:600}
.nav a.cta:hover{background:var(--accent-deep); color:#fff}
/* hero */
.hero{text-align:center; padding:64px 0 10px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px}
.eyebrow .dot{width:9px; height:9px; border-radius:50%; background:var(--accent)}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem); margin:0 0 16px}
.hero h1 .hl{color:var(--accent-deep); font-style:italic}
.lede{max-width:720px; margin:0 auto; font-size:1.12rem; color:var(--ink-soft)}
/* deckled divider */
.deckle{margin:34px 0 0; line-height:0}
.deckle svg{display:block; width:100%; height:26px}
.deckle path{fill:var(--card)}
/* tool card */
.tool-card{background:var(--card); border:1px solid var(--card-edge); border-radius:6px; padding:34px 34px 30px; margin:0 0 8px; box-shadow:0 10px 30px rgba(61,43,31,.10); position:relative}
.tool-card::before{content:""; position:absolute; inset:8px; border:1px dashed var(--card-edge); border-radius:3px; pointer-events:none}
.tool-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.tool-head h2{margin:0; font-size:1.6rem}
.stamp{display:inline-block; background:var(--stamp); border:2px dashed var(--accent); outline:3px solid var(--stamp); outline-offset:3px; padding:8px 14px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); transform:rotate(-2.5deg); white-space:nowrap}
.stamp svg{width:15px; height:15px; vertical-align:-2px; margin-right:6px}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px 22px; margin-bottom:20px}
.opt-label{display:block; font-weight:600; font-size:.92rem; margin-bottom:8px}
.opt-hint{font-size:.82rem; color:var(--ink-soft); margin:8px 0 0}
select,input[type=text],input[type=number]{width:100%; padding:10px 12px; border:1px solid var(--card-edge); border-radius:6px; background:#fffdf8; color:var(--ink); font-size:.95rem; font-family:inherit}
select:focus,input:focus{outline:2px solid var(--accent); outline-offset:1px}
.num-row{display:flex; align-items:center; gap:10px}
.num-row input[type=range]{flex:1; accent-color:var(--accent)}
.num-row input[type=number]{width:74px}
.range-val{font-family:"Fraunces",serif; font-weight:700; min-width:2ch; text-align:right}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{border:1px solid var(--card-edge); background:#fffdf8; color:var(--ink); padding:8px 14px; border-radius:999px; font-size:.88rem; cursor:pointer; font-family:inherit}
.seg button[aria-pressed=true]{background:var(--ink); color:#f8efe1; border-color:var(--ink); font-weight:600}
.check{display:flex; align-items:center; gap:10px; font-size:.95rem; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--accent)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 22px}
.btn{border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:1rem; padding:13px 26px; border-radius:999px; display:inline-flex; align-items:center; gap:8px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--card-edge)}
.btn-ghost:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn svg{width:17px; height:17px}
/* output */
.output{border:1px solid var(--card-edge); border-radius:6px; background:#fffdf8; min-height:180px}
.output-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px dashed var(--card-edge); font-size:.85rem; color:var(--ink-soft); flex-wrap:wrap}
#nameList{list-style:none; margin:0; padding:8px}
#nameList li{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:6px; cursor:pointer; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.98rem}
#nameList li:hover{background:#f4e8d4}
#nameList li .idx{font-family:"Fraunces",serif; color:var(--accent); font-weight:700; min-width:2.2ch}
#nameList li .txt{flex:1; word-break:break-all}
#nameList li .mini-copy{font-family:"Inter",sans-serif; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--card-edge); border-radius:4px; padding:3px 8px; white-space:nowrap}
#nameList li:hover .mini-copy{color:var(--accent-deep); border-color:var(--accent)}
.placeholder{padding:44px 20px; text-align:center; color:var(--ink-soft)}
.placeholder svg{width:44px; height:44px; opacity:.5; margin-bottom:10px}
/* limits box */
.limits{margin-top:20px; border:1px dashed var(--accent); background:#fbf3e4; border-radius:6px; padding:16px 18px; font-size:.9rem}
.limits strong{display:block; font-family:"Fraunces",serif; font-size:1rem; margin-bottom:6px}
.limits ul{margin:8px 0 0; padding-left:20px}
.limits li{margin:4px 0}
/* content sections */
.section{padding:44px 0}
.section h2{font-size:1.9rem; margin:0 0 14px}
.section h3{font-size:1.3rem; margin:28px 0 10px}
.section p{margin:0 0 14px}
.section ul,.section ol{margin:0 0 16px; padding-left:24px}
.section li{margin:6px 0}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:22px 0}
.mini-card{background:var(--card); border:1px solid var(--card-edge); border-radius:6px; padding:20px}
.mini-card h3{margin:0 0 8px; font-size:1.15rem}
.mini-card p{margin:0; font-size:.94rem; color:var(--ink-soft)}
.mini-card code{font-family:"JetBrains Mono",monospace; background:#efe2cc; padding:2px 7px; border-radius:4px; font-size:.85rem; color:var(--accent-deep)}
table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.94rem; background:#fffdf8}
th,td{border:1px solid var(--card-edge); padding:10px 12px; text-align:left; vertical-align:top}
th{background:#efe2cc; font-family:"Fraunces",serif}
td code{font-family:"JetBrains Mono",monospace; font-size:.85rem; color:var(--accent-deep); white-space:nowrap}
code.inline{font-family:"JetBrains Mono",monospace; background:#efe2cc; padding:2px 7px; border-radius:4px; font-size:.86em}
pre{background:#2e2117; color:#f0e0d0; padding:18px; border-radius:6px; overflow-x:auto; font-size:.88rem}
pre code{color:inherit}
.note{background:#fbf3e4; border-left:4px solid var(--accent); padding:14px 18px; border-radius:0 6px 6px 0; margin:18px 0; font-size:.95rem}
/* faq */
.faq-item{background:var(--card); border:1px solid var(--card-edge); border-radius:6px; margin:0 0 12px; padding:20px 22px}
.faq-item h3{margin:0 0 8px; font-size:1.15rem}
.faq-item p{margin:0; color:var(--ink-soft)}
.faq-item p strong{color:var(--ink)}
/* footer */
.site-footer{border-top:1px solid var(--card-edge); margin-top:40px; padding:30px 0 44px; font-size:.9rem; color:var(--ink-soft)}
.site-footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.site-footer nav{display:flex; gap:18px; flex-wrap:wrap}
.site-footer a{color:var(--ink-soft); text-decoration:none}
.site-footer a:hover{color:var(--accent-deep)}
/* toast */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#f8efe1; padding:12px 22px; border-radius:999px; font-size:.92rem; opacity:0; pointer-events:none; transition:all .25s ease; z-index:99}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media(max-width:640px){.tool-card{padding:24px 18px}.nav{gap:4px 10px}}