/* Draft D - light warm-paper, mono-labelled "live demo" style. Overrides the shared tokens from site.css. */
:root{
  --terra:#c4623f;--terra-btn:#b5532f;--terra-btn-hover:#c4623f;--terra-soft:#f8e9e2;--terra-on-dark:#b5532f;
  --bg:#faf7f2;--fg:#1c1b19;--muted:#655f56;--card:#fff;--card-2:#fff;--line:#e9e2d6;--line-strong:#d6cbbb;
  --accent:var(--terra-btn);--on-accent:#fff;--accent-text:var(--terra-on-dark);--link:var(--terra-on-dark);--focus:#1a5fb4;
  --hdr-bg:rgba(250,247,242,.86);--radius:12px;--radius-lg:20px;--shadow:0 30px 70px -30px rgba(90,50,25,.28);--warn-bg:#fff0c2;--warn-fg:#5c4400;
  --font:Inter,"Noto Sans JP",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --m-bg:#faf8f4;--m-ink:#1c1b19;--m-mute:#6b665e;--m-line:#e7e1d7;--ok:#1f7a46;--wait:#a86400;
}
body{background:radial-gradient(rgba(90,60,35,.11) 1px,transparent 1.3px) 0 0/24px 24px,var(--bg)}
h1,h2,h3{font-family:var(--font);font-weight:800;letter-spacing:-.035em}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{letter-spacing:-.01em}
h2{font-size:clamp(2rem,5vw,3.8rem);line-height:1.05}
html[lang="ja"] h2{font-size:clamp(1.6rem,3.8vw,2.8rem);line-height:1.3}
h3{font-size:1.5rem}
html[lang="ja"] h3{font-size:1.25rem}
section{padding:clamp(4rem,9vw,7rem) 0;border-top:1px solid var(--line)}
.hero{border-top:0}
.eyebrow,.mono{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.eyebrow{color:var(--terra-on-dark)}
.btn{background:var(--terra-btn);border-color:var(--terra-btn);border-radius:999px}
.btn:hover{filter:none;background:var(--terra-btn-hover);border-color:var(--terra-btn-hover)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn.ghost:hover{background:#f3ece2;border-color:var(--fg)}
.nav a.btn.ghost:hover{color:var(--fg)}
.nav a.btn.white,.btn.white{background:var(--terra-btn);border-color:var(--terra-btn);color:#fff}
.nav a.btn.white:hover{background:var(--terra-btn-hover);border-color:var(--terra-btn-hover);color:#fff}
.brand svg{width:1.9rem;height:1.9rem;flex:none}
.brand{font-weight:800;letter-spacing:-.02em}
.sym{position:absolute;width:0;height:0;overflow:hidden}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--fg)}
@media(max-width:520px){.hdr .nav{gap:.6rem}.hdr .nav a.btn.ghost{display:none}.lang button{padding:.25rem .55rem;font-size:.75rem}.hdr .nav a.btn.white{padding:.35rem .8rem!important;font-size:.8rem!important}.hdr .wrap{flex-wrap:nowrap}.hdr .nav{flex-wrap:nowrap;margin-left:auto}.hdr .nav a.btn.white,.hdr .lang button{white-space:nowrap}.hdr .brand{font-size:1.05rem}}

/* hero */
.hero{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden;background:radial-gradient(50rem 26rem at 85% 0,rgba(196,98,63,.16),transparent 70%)}
.hero-g{display:grid;gap:2.5rem 4rem;align-items:center}
@media(min-width:960px){.hero-g{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero h1{font-size:clamp(2.6rem,11vw,5.6rem);line-height:.98;letter-spacing:-.05em;margin:1.2rem 0 0}
.hero h1 span.ln{display:block}
.hero h1 .hl{color:var(--terra-on-dark);position:relative;display:inline-block}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.07em;border-radius:9px;background:currentColor;transform-origin:left;animation:ul 1s .5s cubic-bezier(.2,.8,.2,1) backwards}
@media(min-width:960px){html[lang="ja"] .hero h1{font-size:clamp(1.8rem,3.7vw,2.7rem)}}
@keyframes ul{from{transform:scaleX(0)}}
html[lang="ja"] .hero h1{font-size:clamp(1.45rem,6.2vw,2.7rem);line-height:1.3;letter-spacing:-.02em}
.hero .lead{font-size:clamp(1.05rem,1.8vw,1.25rem);margin-bottom:1.5rem}
.hero .cta{margin-bottom:1.5rem;gap:.75rem}
.hero .cta .btn.lg{font-size:1rem;padding:.85rem 1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--mono);font-size:.75rem;color:var(--fg);border:1px solid var(--line-strong);border-radius:999px;padding:.3rem .8rem;background:#fff;white-space:nowrap}
.chip::before{content:"\2713\00a0";color:var(--terra-on-dark)}
.chips.plain .chip::before{content:none}

/* demo */
.demo{padding-top:0;border-top:0}
.frame{border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;background:var(--card-2);box-shadow:var(--shadow),0 0 120px -40px rgba(196,98,63,.35)}
.f-bar{display:flex;align-items:center;gap:.5rem 1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);flex-wrap:wrap;background:#f3eee6}
.f-dots{display:flex;gap:.4rem}
.f-dots i{width:.7rem;height:.7rem;border-radius:50%;background:#d6cbbb}
.f-dots i:first-child{background:#e0785a}
.f-pills{display:flex;gap:.4rem;flex-wrap:wrap}
.f-pills span{font-family:var(--mono);font-size:.72rem;padding:.2rem .7rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.f-pills span:first-child{color:var(--terra-btn);border-color:var(--terra-btn);background:var(--terra-soft)}
.f-hint{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--terra-on-dark)}
.mock{background:var(--m-bg);color:var(--m-ink);padding:1rem;display:grid;gap:1rem}
.mock{color-scheme:light}
.mock button{font:inherit;color:inherit;cursor:pointer}
.m-tabs{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--m-line);padding-bottom:.8rem}
.m-tabs button{background:transparent;border:1px solid transparent;border-radius:8px;padding:.3rem .8rem;font-size:.85rem;color:var(--m-mute)}
.m-tabs button[aria-pressed="true"]{background:#fff;border-color:var(--m-line);color:var(--m-ink);font-weight:600;box-shadow:0 1px 3px rgba(60,40,25,.1)}
.m-body{display:grid;gap:1rem}
@media(min-width:900px){.m-body{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr)}}
.m-card{background:#fff;border:1px solid var(--m-line);border-radius:14px;padding:1rem 1.1rem;font-size:.9rem;line-height:1.5}
html[lang] .m-card h3,.m-card h3{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--m-mute);margin:0 0 .7rem}
.m-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.m-card li{display:flex;gap:.6rem;align-items:center}
.m-card p{margin:0 0 .8rem}
.mock .st{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--m-mute);text-align:right}
.mock .dot{width:.6rem;height:.6rem;border-radius:50%;flex:none;background:var(--ok);position:relative}
.mock .dot.run::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);animation:ping 1.8s ease-out infinite}
.mock .dot.wait{background:#d98a00}
.mock .dot.done{background:#b9b2a5}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.8);opacity:0}}
.m-q b{display:block;margin-bottom:.2rem}
.m-q .m{color:var(--m-mute);font-size:.85rem}
.mock .go{display:inline-flex;align-items:center;gap:.4rem;background:var(--terra-btn);color:#fff;border:0;border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.85rem}
.mock .go:hover{background:#94431f}
.mock .go:focus-visible,.mock button:focus-visible,.mock input:focus-visible{outline:3px solid #1a5fb4;outline-offset:2px}
.m-q.is-done .go{background:var(--ok)}
.m-tasks label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.m-tasks input{width:1.1rem;height:1.1rem;margin:.2rem 0 0;accent-color:var(--terra-btn);flex:none}
.m-tasks input:checked+span{text-decoration:line-through;color:var(--m-mute)}
.m-count{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;color:var(--m-mute)}
.log{background:#1c1b19;border-top:1px solid var(--line);padding:.9rem 1rem 1rem;font-family:var(--mono);font-size:.78rem;color:#c9c4b9}
.log .mono{color:#a09b91;font-size:.7rem;margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}
.log .mono::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#3fb676}
.log-lines{height:7.4rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0;list-style:none}
.log-lines li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.log-lines li.new{animation:lg .5s ease-out}
.log-lines .t{color:#7d796f}.log-lines .k{color:#e08a6a;display:inline-block;min-width:4.5rem}
@keyframes lg{from{opacity:0;transform:translateY(8px)}}

/* stats */
.stats{padding:0;border-top:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.stats .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:2rem 1.5rem 2rem 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat:nth-child(2n){padding-left:1.5rem;border-right:0}
@media(min-width:900px){.stat{border-bottom:0;padding-left:1.5rem}.stat:first-child{padding-left:0}.stat:nth-child(2n){border-right:1px solid var(--line)}.stat:last-child{border-right:0}}
.stat .mono{color:var(--muted);font-size:.7rem}
.stat .n{font-size:clamp(3rem,7vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1;margin:.4rem 0;color:var(--fg)}
.stat .n small{font-size:.4em;letter-spacing:0;color:var(--terra-on-dark);margin-left:.15em}
.stat p{color:var(--muted);font-size:.9rem;margin:0;max-width:16rem}

/* features */
.sec-head h2{margin-top:.8rem;max-width:18ch}
html[lang="ja"] .sec-head h2{max-width:none}
.feats{margin-top:3.5rem;display:grid;gap:0}
.feat-d{display:grid;gap:1.5rem 3.5rem;grid-template-columns:minmax(0,1fr);padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line);align-items:center}
@media(min-width:900px){.feat-d{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.feat-d .num{font-family:var(--mono);font-size:.85rem;color:var(--terra-on-dark);margin:0 0 .8rem;letter-spacing:.1em}
.feat-d p{color:var(--muted)}
.feat-d .chips{margin-top:1.2rem}
.win{margin:0;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.win-bar{display:flex;gap:.4rem;align-items:center;height:1.9rem;padding:0 .8rem;background:#f3eee6;border-bottom:1px solid var(--line)}
.win-bar i{width:.65rem;height:.65rem;border-radius:50%;background:#d6cbbb}
.win-bar i:first-child{background:#e0785a}
.win img{width:100%}

/* who */
.who{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:3rem}
.role{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.8rem 1.6rem}
.role .eyebrow{margin-bottom:1rem}
.role h3{margin-bottom:.7rem}
.role p{color:var(--muted);margin:0}

/* privacy */
.priv{background:linear-gradient(135deg,#fbece4,#fff 70%);border:1px solid #efd3c5;border-radius:28px;padding:clamp(1.8rem,5vw,4rem);display:grid;gap:2.5rem;align-items:center;box-shadow:0 30px 90px -50px rgba(196,98,63,.45)}
@media(min-width:900px){.priv{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.priv h2{margin:.8rem 0 1rem}
.priv ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.priv li{display:flex;gap:.8rem;color:var(--fg)}
.priv li svg{flex:none;width:1.3rem;height:1.3rem;color:var(--terra-on-dark);margin-top:.2rem}
.vault{overflow:hidden;position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:18rem;width:100%;margin-inline:auto}
.vault i{position:absolute;inset:0;border:1.5px dashed #e2b39e;border-radius:50%;animation:spin 60s linear infinite}
.vault i:nth-child(2){inset:14%;border-style:solid;border-color:#f1d9cc;animation-direction:reverse}
.vault svg{width:46%;height:46%;position:relative;filter:drop-shadow(0 12px 40px rgba(196,98,63,.35))}
@keyframes spin{to{transform:rotate(360deg)}}

/* faq */
.faq{max-width:52rem}
details{background:var(--card);border-color:var(--line)}
summary{font-weight:700}
details>div{color:var(--muted)}
details code{font-family:var(--mono);color:var(--fg)}

/* final */
.final{text-align:center;background:radial-gradient(40rem 20rem at 50% 25%,rgba(196,98,63,.22),transparent 70%)}
.final .logo{width:clamp(6rem,15vw,8.5rem);height:auto;margin:0 auto 1.5rem;filter:drop-shadow(0 24px 50px rgba(196,98,63,.45));animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-10px) rotate(3deg)}}
.final h2{font-size:clamp(2.4rem,7vw,5rem);margin-inline:auto}
html[lang="ja"] .final h2{font-size:clamp(1.7rem,5vw,3.2rem)}
.final .cta{justify-content:center;margin-top:1.5rem}
.final .chips{justify-content:center;margin-top:1.4rem}

/* reveal (only when JS runs) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .mock .dot.run::after,.vault i,.final .logo,.hero h1 .hl::after,.log-lines li.new{animation:none}
}