/* Tanshi Studio — static site. Fonts self-hosted (SIL OFL 1.1, see /assets/fonts/LICENSE-*.txt) */
@font-face{font-family:"TS Outfit";src:url(/assets/fonts/outfit-latin.woff2) format("woff2");font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2122}
@font-face{font-family:"TS Rounded";src:url(/assets/fonts/ts-rounded-sub.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --bg:#F2F2EE;--bg2:#E9EAE3;--card:#FFFFFF;--ink:#1F211C;--mute:#5C5F57;--line:#DCDDD4;
  --lime:#B9CF6A;--lime2:#AAC059;--limeL:#EEF3DC;--ink-on-lime:#232B0B;--acc:#4E6418;
  --warm:#F6EAD7;--warm-ink:#6E4F22;
  --sh:8px 8px 20px rgba(60,64,50,.12),-6px -6px 16px rgba(255,255,255,.9);
  --sh-in:inset 3px 3px 7px rgba(60,64,50,.10),inset -3px -3px 7px rgba(255,255,255,.9);
  --r:24px;--max:1080px;
  font-family:"TS Outfit","TS Rounded","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.7;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-underline-offset:3px}
a:hover{color:#2F3A10}
:focus-visible{outline:3px solid #6F8C22;outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:8px 14px;border-radius:12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:rgba(242,242,238,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(220,221,212,.7)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px}
.brand img{width:34px;height:34px;border-radius:10px}
.brand small{display:block;font-size:11px;color:var(--mute);font-weight:400;letter-spacing:.08em;line-height:1.2}
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
nav.main a{text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:999px;font-size:14px}
nav.main a[aria-current=page]{background:var(--limeL)}
nav.main a.lang{border:1.5px solid var(--line);font-size:13px}
@media (max-width:560px){nav.main .hide-s{display:none}}
main{display:block;padding:28px 0 40px}
h1,h2,h3{line-height:1.3;font-weight:600;letter-spacing:.02em}
h1{font-size:clamp(28px,7vw,46px);margin:.2em 0 .4em}
h2{font-size:clamp(21px,4.6vw,28px);margin:1.6em 0 .6em}
h3{font-size:18px;margin:1.2em 0 .4em}
.lead{font-size:clamp(16px,3.8vw,19px);color:var(--mute);max-width:40em}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:22px}
.soft{background:var(--bg);border-radius:var(--r);box-shadow:var(--sh-in);padding:18px}
.hero{padding:24px 0 8px}
.pill{display:inline-block;background:var(--limeL);color:var(--acc);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:500}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--ink-on-lime);text-decoration:none;font-weight:600;padding:12px 22px;border-radius:999px;box-shadow:0 8px 16px -8px rgba(110,130,40,.7)}
.btn:hover{background:var(--lime2);color:var(--ink-on-lime)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.grid{display:grid;gap:18px}
@media (min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.app{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit}
.app .ic{width:72px;height:72px;border-radius:20px;flex:none;box-shadow:var(--sh)}
.app h3{margin:0}
.app p{margin:.2em 0 0;color:var(--mute);font-size:15px}
.app.soon .ic{display:grid;place-items:center;background:var(--bg);box-shadow:var(--sh-in);color:var(--mute);font-size:26px}
.feat{display:grid;gap:22px;align-items:center}
@media (min-width:760px){.feat{grid-template-columns:1fr 1fr}.feat.rev .shot{order:2}}
.shot{max-width:320px;margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:var(--sh);background:var(--card)}
.price{display:flex;gap:14px;flex-wrap:wrap}
.price .card{flex:1 1 200px}
.price b{font-size:28px;font-weight:600}
.price .per{color:var(--mute)}
ul.ticks{padding-left:0;list-style:none}
ul.ticks li{padding-left:28px;position:relative;margin:.35em 0}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23232B0B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:10px;background:#1F211C;color:#fff;border-radius:14px;padding:9px 16px;font-size:14px;line-height:1.25}
.badge small{display:block;font-size:11px;opacity:.85}
.badge svg{width:22px;height:22px;fill:#fff}
.note{background:var(--warm);color:var(--warm-ink);border-radius:18px;padding:14px 18px;font-size:15px}
.doc{max-width:760px}
.doc h2{font-size:21px;margin-top:1.8em}
.doc p,.doc li{color:#2C2E28}
.doc .meta{color:var(--mute);font-size:14px}
details{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:4px 18px;margin:12px 0}
summary{cursor:pointer;font-weight:600;padding:12px 0;list-style-position:outside}
details p{margin-top:0}
footer.site{border-top:1px solid var(--line);background:var(--bg2);padding:28px 0 36px;font-size:14px;color:#3E4139}
footer.site .cols{display:grid;gap:18px}
@media (min-width:720px){footer.site .cols{grid-template-columns:1.4fr 1fr}}
footer.site address{font-style:normal;line-height:1.85}
footer.site a{color:#3F5213}
footer.site nav a{margin-right:14px;display:inline-block}
.copy{margin-top:16px;color:var(--mute);font-size:13px}
.center{text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){.btn,.card,details{transition:transform .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px)}}
/* header + mobile tuning */
.brand>span{white-space:nowrap;line-height:1.2}
nav.main a{white-space:nowrap}
@media (max-width:420px){header.top .wrap{gap:8px;padding:0 14px}.brand{font-size:16px}.brand img{width:30px;height:30px}nav.main a{padding:6px 8px;font-size:13px}}
@media (max-width:759px){.shot{max-width:270px}.hero.feat .shot{max-width:280px}}
.pill{line-height:1.5}