:root{
  --paper:#f2eadb; --paper2:#e9dfcc; --ink:#1c1a16; --ink2:#4a443a; --mute:#8a8070;
  --cinnabar:#b0341f; --gold:#a07c3f; --line:rgba(28,26,22,.18);
  --serif:"Chiron Sung HK","Noto Serif TC",serif; --brush:"LXGW WenKai TC","Noto Serif TC",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.85;font-size:17px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* header */
header{position:sticky;top:0;z-index:10;background:rgba(242,234,219,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;letter-spacing:.12em}
.seal{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--cinnabar);color:#f7efe0;font-size:15px;line-height:1;border-radius:3px;
  font-family:var(--serif);font-weight:700;letter-spacing:0;box-shadow:inset 0 0 0 2px var(--cinnabar),inset 0 0 0 3px #f2d9c8;grid-template-columns:1fr 1fr;padding:3px;gap:0}
.seal span{display:block;text-align:center}
.logo small{font-size:11px;letter-spacing:.3em;color:var(--mute);font-weight:400;display:block;margin-top:-4px}
nav.main{display:flex;gap:28px;font-size:15px;color:var(--ink2)}
nav.main a:hover{color:var(--cinnabar)}
.tools{display:flex;align-items:center;gap:18px;font-size:13px}
.lang a{color:var(--mute);padding:0 3px}.lang a.on{color:var(--ink);border-bottom:1px solid var(--cinnabar)}
.btn{display:inline-block;padding:10px 22px;border:1px solid var(--ink);font-size:15px;letter-spacing:.1em;transition:.25s}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--cinnabar);border-color:var(--cinnabar)}
.btn:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.btn.solid:hover{color:var(--paper)}
.menu-btn{display:none}

/* hero */
.hero{position:relative;padding:90px 0 110px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kicker{font-size:14px;letter-spacing:.5em;color:var(--cinnabar);margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.2vw,84px);line-height:1.18;font-weight:900;font-family:"Noto Serif TC",serif;letter-spacing:.04em}
.hero h1 em{font-style:normal;color:var(--cinnabar)}
.hero p.lead{margin-top:30px;max-width:30em;color:var(--ink2);font-size:18px}
.cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.free{margin-top:22px;font-size:14px;color:var(--mute);display:flex;align-items:center;gap:10px}
.free::before{content:"";width:28px;height:1px;background:var(--cinnabar)}
.luoshu{position:relative;max-width:500px;justify-self:end;width:100%;padding-right:48px}
.luoshu svg{width:100%;height:100%;overflow:visible}
.vert{position:absolute;right:0;top:0;writing-mode:vertical-rl;font-family:var(--brush);font-size:20px;letter-spacing:.5em;color:var(--ink2)}
@keyframes ink{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{opacity:0;animation:ink 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.3s}.d3{animation-delay:.5s}.d4{animation-delay:.7s}.d5{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.stroke{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.8s ease forwards .3s}
.num{opacity:0;animation:ink .8s ease forwards}

/* sections */
section{padding:110px 0;position:relative}
.rule{height:7px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);opacity:.5}
.shead{display:flex;align-items:baseline;gap:22px;margin-bottom:56px}
.shead .no{font-family:var(--brush);font-size:15px;color:var(--cinnabar);letter-spacing:.3em;white-space:nowrap}
.shead h2{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:.06em;line-height:1.35}
.shead p{color:var(--ink2);max-width:34em;margin-top:12px}

.arts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.art{padding:52px 48px;position:relative}
.art+.art{border-left:1px solid var(--ink)}
.art .big{position:absolute;right:32px;top:26px;font-size:120px;line-height:1;color:var(--paper2);font-weight:900;font-family:"Noto Serif TC",serif;z-index:-1;
  -webkit-text-stroke:1px rgba(28,26,22,.12)}
.art h3{font-size:34px;letter-spacing:.12em;margin-bottom:6px}
.art .tag{font-family:var(--brush);color:var(--cinnabar);font-size:19px;margin-bottom:24px}
.art ul{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.art li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;font-size:16px}
.art li::before{content:"";position:absolute;left:4px;top:24px;width:7px;height:7px;background:var(--cinnabar);transform:rotate(45deg)}

.demo{background:var(--ink);color:var(--paper);overflow:hidden}
.demo .shead p{color:#b9ae99}
.demo .shead .no{color:#d98b6e}
.slips{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.slip{background:var(--paper);color:var(--ink);padding:38px 36px 30px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.slip::after{content:"";position:absolute;left:14px;right:14px;top:14px;bottom:14px;border:1px solid var(--line);pointer-events:none}
.slip .q{font-size:13px;letter-spacing:.3em;color:var(--mute)}
.slip .qt{font-size:25px;font-weight:700;margin:4px 0 18px;letter-spacing:.06em}
.verdict{position:absolute;right:34px;top:30px;width:62px;height:62px;border:2px solid var(--cinnabar);color:var(--cinnabar);display:grid;place-items:center;
  font-size:30px;font-weight:900;border-radius:50%;transform:rotate(-8deg);font-family:"Noto Serif TC",serif}
.it{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:15px 0;border-top:1px dashed var(--line)}
.tone{width:30px;height:30px;display:grid;place-items:center;font-size:15px;font-weight:700;color:#f7efe0;background:var(--ink2);border-radius:2px}
.tone.j{background:var(--cinnabar)}.tone.x{background:#2f2b25}.tone.z{background:var(--gold)}
.it p{font-size:16.5px;line-height:1.7}
.it .why{font-size:13.5px;color:var(--mute);margin-top:3px;font-family:var(--brush)}
.it .why::before{content:"盤面　";color:var(--gold)}
.note{margin-top:14px;font-size:12.5px;color:var(--mute);text-align:right}
.demo .foot{margin-top:40px;color:#b9ae99;font-size:15px;text-align:center}

.two{display:grid;grid-template-columns:1fr 1fr;gap:0}
.use{padding:10px 48px 10px 0}
.use+.use{padding:10px 0 10px 48px;border-left:1px solid var(--line)}
.use .who{font-family:var(--brush);color:var(--cinnabar);font-size:18px}
.use h3{font-size:30px;margin:6px 0 16px;letter-spacing:.08em}
.use p{color:var(--ink2)}

.ways{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.way{padding:34px 26px 10px 0}
.way b{display:block;font-size:44px;font-family:"Noto Serif TC",serif;color:var(--cinnabar);font-weight:400;line-height:1}
.way h4{font-size:20px;margin:18px 0 10px;letter-spacing:.08em}
.way p{font-size:15px;color:var(--ink2)}

.free-band{text-align:center;padding:100px 0;background:
  radial-gradient(circle at 50% 50%,rgba(176,52,31,.08),transparent 60%)}
.free-band h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:.1em;font-weight:900;font-family:"Noto Serif TC",serif}
.free-band h2 span{color:var(--cinnabar)}
.free-band p{color:var(--ink2);margin:16px auto 36px;max-width:30em}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{border-top:3px solid var(--ink);padding-top:20px}
.post .cat{font-size:13px;color:var(--cinnabar);letter-spacing:.2em}
.post h4{font-size:21px;line-height:1.5;margin:10px 0 12px}
.post .soon{font-size:13px;color:var(--mute)}

.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.about .quote{font-family:var(--brush);font-size:26px;line-height:1.7;border-left:3px solid var(--cinnabar);padding-left:26px}
.about p{color:var(--ink2);margin-bottom:16px}

footer{border-top:1px solid var(--ink);padding:48px 0 60px;font-size:14px;color:var(--mute);position:relative;z-index:1}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{margin-right:22px}footer a:hover{color:var(--cinnabar)}

@media (max-width:860px){
  body{font-size:16px}
  nav.main,.tools .lang{display:none}
  .menu-btn{display:block;font-size:22px}
  .tools .btn{display:none}
  .hero{padding:48px 0 70px}
  .hero .grid,.arts,.slips,.two,.about{grid-template-columns:1fr}
  .luoshu{justify-self:center;max-width:320px;margin-top:10px;padding-right:0}
  .vert{display:none}
  .art{padding:38px 26px}.art+.art{border-left:0;border-top:1px solid var(--ink)}
  .use,.use+.use{padding:0 0 30px;border-left:0}
  .use+.use{padding-top:30px;border-top:1px solid var(--line)}
  .ways{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr}
  section{padding:72px 0}
  .shead{flex-direction:column;gap:6px;margin-bottom:36px}
  .slip{padding:32px 24px 24px}
}

/* ---- shared additions for inner pages ---- */
nav.main a.on{color:var(--cinnabar)}
.lang a{cursor:pointer}
.mnav{display:none}
@media (max-width:860px){
  header.open .mnav{display:block;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--ink);padding:10px 28px 26px}
  .mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .mnav .lang{display:flex;gap:18px;padding-top:16px;font-size:15px}
  .mnav .btn{display:block;text-align:center;margin-top:18px}
  .menu-btn{cursor:pointer;background:none;border:0;color:var(--ink)}
}
.page-hero{padding:84px 0 64px;border-bottom:1px solid var(--line)}
.page-hero .kicker{margin-bottom:18px}
.page-hero h1{font-size:clamp(36px,5vw,64px);line-height:1.25;font-weight:900;font-family:"Noto Serif TC",serif;letter-spacing:.05em}
.page-hero h1 em{font-style:normal;color:var(--cinnabar)}
.page-hero p{margin-top:22px;max-width:34em;color:var(--ink2);font-size:18px}
.prose{max-width:46em}
.prose h2{font-size:28px;letter-spacing:.06em;margin:56px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:30px 0 8px;letter-spacing:.04em}
.prose p{color:var(--ink2);margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 1.4em;color:var(--ink2)}
.prose li{margin-bottom:6px}
.prose .draft{border:1px dashed var(--cinnabar);color:var(--cinnabar);padding:12px 16px;font-size:14px;margin-bottom:34px}
.prose small{color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.step{padding:30px 28px 10px 0}
.step+.step{padding-left:28px;border-left:1px solid var(--line)}
.step b{font-family:"Noto Serif TC",serif;font-size:44px;color:var(--cinnabar);font-weight:400;line-height:1}
.step h4{font-size:21px;margin:14px 0 8px;letter-spacing:.06em}
.step p{font-size:15.5px;color:var(--ink2)}
.qgroups{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink)}
.qg{padding:30px 32px}
.qg:nth-child(even){border-left:1px solid var(--ink)}
.qg:nth-child(n+3){border-top:1px solid var(--ink)}
.qg h4{font-size:19px;letter-spacing:.1em;margin-bottom:14px;color:var(--cinnabar);font-family:var(--brush);font-weight:400}
.chips span{display:inline-block;border:1px solid var(--line);padding:3px 13px;margin:0 8px 10px 0;font-size:15px;background:rgba(255,255,255,.35)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.feature .slip{box-shadow:0 30px 60px -34px rgba(0,0,0,.35)}
.callout{border-left:3px solid var(--cinnabar);padding:6px 0 6px 22px;color:var(--ink2);margin:26px 0}
.terms{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.term{padding:34px 30px}
.term+.term{border-left:1px solid var(--ink)}
.term .t{font-family:var(--brush);color:var(--cinnabar);font-size:17px}
.term h3{font-size:26px;margin:4px 0 12px;letter-spacing:.06em}
.term ul{list-style:none;border-top:1px solid var(--line)}
.term li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative;font-size:15.5px}
.term li::before{content:"";position:absolute;left:3px;top:21px;width:6px;height:6px;background:var(--cinnabar);transform:rotate(45deg)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"＋";color:var(--cinnabar)}
.faq details[open] summary::after{content:"－"}
.faq details p{color:var(--ink2);margin-top:10px}
.cta-band{text-align:center;padding:90px 0;border-top:1px solid var(--line)}
.cta-band h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:.08em;font-family:"Noto Serif TC",serif;font-weight:900}
.cta-band p{color:var(--ink2);margin:12px auto 30px;max-width:30em}
@media (max-width:860px){
  .page-hero{padding:48px 0 40px}
  .steps,.qgroups,.feature,.terms{grid-template-columns:1fr}
  .step,.step+.step{padding:24px 0 8px;border-left:0}
  .step+.step{border-top:1px solid var(--line)}
  .qg{padding:24px 22px}.qg:nth-child(even){border-left:0}.qg:nth-child(n+2){border-top:1px solid var(--ink)}
  .term+.term{border-left:0;border-top:1px solid var(--ink)}
  .term{padding:28px 22px}
  .feature{gap:30px}
  .prose h2{margin-top:40px}
}
.mnav .lang a{border-bottom:0;padding:0 0 2px;display:inline;font-size:15px}
.mnav .lang a.on{border-bottom:1px solid var(--cinnabar)}
html[lang=en] .kicker{letter-spacing:.22em}
html[lang=en] .shead .no{letter-spacing:.14em}
html[lang=en] .hero h1,html[lang=en] .page-hero h1{letter-spacing:.01em}