@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#07101d;--ink2:#0b1727;--panel:#0e1d2e;--line:#243448;--paper:#f3efe4;--muted:#9aa8b9;--amber:#ffbd59;--amber2:#f48d3e;--blue:#6aa8ff;--danger:#ff7b6e;--ok:#70d7a5;--radius:20px;color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:var(--ink);color:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,#112b4f 0,transparent 31rem),var(--ink);line-height:1.55}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.skip{position:fixed;left:1rem;top:-5rem;background:var(--paper);color:var(--ink);padding:.7rem 1rem;z-index:99}.skip:focus{top:1rem}.site-head{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,5vw,5rem);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;background:rgba(7,16,29,.86);backdrop-filter:blur(18px);z-index:20}.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--amber);border-radius:50%;font:600 .76rem Fraunces;color:var(--amber)}.site-head nav{display:flex;gap:2rem;color:#c2cad5;font-size:.88rem}.site-head nav a:hover,.site-head nav a:focus-visible{color:var(--amber)}.lang,.text-button{border:0;background:transparent;color:var(--paper);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.hero{min-height:calc(100svh - 74px);display:grid;grid-template-columns:minmax(310px,.83fr) minmax(420px,1.17fr);align-items:center;gap:clamp(2rem,4vw,5rem);padding:clamp(3rem,7vw,8rem) clamp(1.2rem,5vw,5rem);overflow:hidden}.hero-copy{position:relative;z-index:2;max-width:720px}.eyebrow,.step{font-size:.72rem;font-weight:700;letter-spacing:.19em;color:var(--amber)}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px rgba(255,189,89,.12);margin-right:.8rem}h1,h2{font-family:Fraunces,Georgia,serif;line-height:.98;letter-spacing:-.045em;margin:.45rem 0 1.4rem}h1{font-size:clamp(4rem,7.5vw,8.5rem);max-width:8ch}h2{font-size:clamp(2.6rem,5vw,5.3rem)}h3{line-height:1.2}.lede{font-size:clamp(1rem,1.3vw,1.25rem);color:#c4ceda;max-width:620px}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;padding:.8rem 1.35rem;border:1px solid var(--line);font-weight:700;cursor:pointer}.button.primary{background:var(--amber);border-color:var(--amber);color:#231508;box-shadow:0 10px 35px rgba(244,141,62,.18)}.button.primary:hover{background:#ffd18b}.button.ghost{background:rgba(255,255,255,.03)}.honesty{font-size:.78rem;color:var(--muted)}.hero-media{margin:0;position:relative;min-height:560px;border-radius:28px;overflow:hidden;background:#08101c;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.45)}.hero-media img{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,16,29,.32),transparent 38%,rgba(7,16,29,.04))}.scan-line{position:absolute;z-index:2;top:0;bottom:0;width:2px;left:18%;background:linear-gradient(transparent,var(--amber),transparent);box-shadow:0 0 28px 6px rgba(255,189,89,.42)}.hero-media figcaption{position:absolute;z-index:3;left:1.2rem;right:1.2rem;bottom:1.2rem;display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;padding:1rem;background:rgba(7,16,29,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);border-radius:14px}.hero-media figcaption span{grid-row:1/3;color:var(--amber);font-weight:700}.hero-media figcaption small{color:var(--muted)}@keyframes scan{0%,8%{left:10%;opacity:0}20%,80%{opacity:1}92%,100%{left:90%;opacity:0}}.signal-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 clamp(1.2rem,5vw,5rem)}.signal-strip div{padding:1.8rem;border-right:1px solid var(--line)}.signal-strip div:last-child{border:0}.signal-strip strong{display:block;font:600 2.1rem Fraunces;color:var(--amber)}.signal-strip span{font-size:.78rem;color:var(--muted)}.workbench,.method,.proof,.commerce,.faq{padding:clamp(5rem,9vw,10rem) clamp(1.2rem,7vw,8rem)}.section-intro{display:grid;grid-template-columns:.45fr 1.2fr .8fr;gap:2rem;align-items:start}.section-intro h2{margin-top:0}.section-intro>p:last-child{color:var(--muted);max-width:520px}.case-form{margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem}.field-grid{display:grid;grid-template-columns:1.35fr 1fr .7fr .8fr;gap:1rem}label span,legend{display:block;font-size:.75rem;font-weight:700;letter-spacing:.03em;margin-bottom:.5rem;color:#c8d1dd}input,select,textarea{width:100%;background:#0a1421;color:var(--paper);border:1px solid #35485e;border-radius:10px;padding:.85rem}textarea{resize:vertical}.wide{display:block;margin-top:1rem}.wide small{display:block;margin-top:.45rem;color:var(--muted)}fieldset{border:0;padding:1.5rem 0;margin:0}.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.checks label{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:10px;padding:.9rem}.checks input{width:auto;accent-color:var(--amber)}.checks span{margin:0}.build{border:0}.result{margin-top:2rem;display:grid;grid-template-columns:auto 1.5fr .8fr;gap:2rem;padding:2rem;border:1px solid #4d6076;border-radius:var(--radius);background:linear-gradient(145deg,#111f31,#09131f)}.score-ring{width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;border:8px solid rgba(255,189,89,.17);outline:2px solid var(--amber);outline-offset:-8px}.score-ring span{font:650 2.8rem Fraunces}.score-ring small{color:var(--muted)}.status-label{color:var(--amber);font-size:.75rem;letter-spacing:.14em}.timeline{list-style:none;padding:0;margin:1rem 0}.timeline li{position:relative;padding:0 0 1.2rem 2rem;color:#d4dbe4}.timeline li:before{content:"";position:absolute;left:3px;top:.45rem;width:8px;height:8px;border-radius:50%;background:var(--amber)}.timeline li:after{content:"";position:absolute;left:6px;top:1rem;bottom:0;border-left:1px solid #4d6076}.gaps{border-left:1px solid var(--line);padding-left:1.5rem}.gaps ul{padding-left:1.1rem;color:var(--muted)}.method{background:var(--paper);color:#132033}.method .step{color:#9a560f}.method-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,8vw,9rem)}.rail-steps{border-top:1px solid #aab0b5}.rail-steps article{display:grid;grid-template-columns:48px .8fr 1.2fr;gap:1rem;padding:1.5rem 0;border-bottom:1px solid #c8c4ba;align-items:start}.rail-steps article>span{color:#9a560f;font-weight:700}.rail-steps h3,.rail-steps p{margin:0}.rail-steps p{color:#4a5561}.proof{background:linear-gradient(180deg,#07101d,#0e1c2c)}.proof-copy{max-width:850px}.matrix{border-top:1px solid var(--line);margin-top:3rem}.matrix>div{display:grid;grid-template-columns:.6fr 1.2fr 1fr;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--line)}.matrix-head{color:var(--muted);font-size:.72rem;letter-spacing:.12em}.commerce{background:#0b1727}.commerce-head{max-width:1000px}.account-shell{display:grid;grid-template-columns:1.4fr .6fr;margin-top:3rem;border:1px solid #45566b;border-radius:22px;overflow:hidden}.auth-panel{padding:2rem;background:#f3efe4;color:#111927}.oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.auth-button{display:flex;gap:.7rem;justify-content:center;padding:.85rem;border:1px solid #b5afa3;border-radius:999px;font-weight:700}.auth-button.github{background:#111927;color:white}.divider{display:flex;align-items:center;gap:.8rem;color:#6b7078;margin:1.2rem 0}.divider:before,.divider:after{content:"";height:1px;background:#cac4b8;flex:1}.inline-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.7rem;margin-bottom:.8rem}.inline-form button,.password-form button{height:46px;border:0;border-radius:999px;background:#111927;color:#fff;padding:0 1rem;font-weight:700;cursor:pointer}.auth-panel input{background:#fff;color:#111927;border-color:#c3bdae}.password-form{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;border-top:1px solid #cac4b8;padding-top:1rem}.password-form>div{grid-column:1/-1;display:flex;gap:1rem;align-items:center}.password-form .text-button{background:transparent;color:#111927}.auth-message{font-size:.78rem;color:#59606a}.user-center{padding:2rem;background:#c8c0b0;color:#172132}.user-top{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.12em}.user-center button{border:0;background:transparent;text-decoration:underline;cursor:pointer}.user-center p{margin-top:4rem}.admin-link{display:inline-block;margin-top:2rem;text-decoration:underline}.price-rail{display:grid;grid-template-columns:.65fr 1.35fr;margin-top:1.5rem;border:1px solid var(--line);border-radius:20px;overflow:hidden}.price-rail>div{padding:2rem}.price-rail>div+div{border-left:1px solid var(--line)}.price-rail span{font-size:.72rem;color:var(--amber);letter-spacing:.15em}.price-rail strong{display:block;font:650 4.5rem Fraunces;margin:.5rem 0}.price-rail p,.price-rail small{color:var(--muted)}.paid{background:linear-gradient(135deg,#16283b,#111c2b)}.paid .button{display:flex;margin:1rem 0;width:max-content}.faq details{border-top:1px solid var(--line);padding:1.2rem 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{font:500 clamp(1.2rem,2vw,1.7rem) Fraunces;cursor:pointer}.faq details p{color:var(--muted);max-width:780px}footer{display:grid;grid-template-columns:1fr auto auto;gap:3rem;align-items:end;padding:3rem clamp(1.2rem,5vw,5rem);border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}footer nav{display:flex;gap:1rem;flex-wrap:wrap}footer .brand{color:var(--paper)}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}@media(max-width:1050px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-top:2rem}.hero-media{min-height:480px}.hero-media img{min-height:480px}.section-intro,.method-grid{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr 1fr}.checks{grid-template-columns:1fr 1fr}.result{grid-template-columns:auto 1fr}.gaps{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:1rem 0 0}.account-shell{grid-template-columns:1fr}.price-rail{grid-template-columns:1fr 1fr}}@media(max-width:700px){.site-head nav{display:none}.hero{padding-top:3rem}.hero-media,.hero-media img{min-height:360px}.hero-media{transform:none}.signal-strip{grid-template-columns:1fr 1fr}.signal-strip div:nth-child(2){border-right:0}.field-grid,.checks,.oauth-row,.password-form,.price-rail{grid-template-columns:1fr}.inline-form{grid-template-columns:1fr}.result{grid-template-columns:1fr}.score-ring{width:92px;height:92px}.rail-steps article,.matrix>div{grid-template-columns:1fr}.matrix-head{display:none!important}.account-shell{border-radius:14px}.price-rail>div+div{border-left:0;border-top:1px solid var(--line)}footer{grid-template-columns:1fr;align-items:start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scan-line{animation:none;left:70%}}
@media print{.site-head,.hero,.signal-strip,.case-form,.method,.proof,.commerce,.faq,footer{display:none!important}.workbench{padding:0}.section-intro{display:none}.result{display:grid!important;border:0;background:white;color:black}.gaps ul,.timeline li{color:#222}.text-button{display:none}}
 [hidden]{display:none!important}
 .hero-media video{width:100%;height:100%;min-height:560px;object-fit:cover;display:block}@media(max-width:1050px){.hero-media video{min-height:480px}}@media(max-width:700px){.hero-media video{min-height:360px}}


/* Hero balance — shouyi 2026-08-18.
   Original problem: .hero was a grid with no max-width, so it grew with the viewport
   while .hero-copy stayed capped, and the right column carried a larger fr. The whole
   composition leaned right as the screen widened.
   Fix: cap and centre the hero, and even out the columns above 1100px. The section keeps
   its own background full-bleed because only the grid box is capped, not the section. */
.hero {
  max-width: 1520px;
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

/* The paid export sits beside the free draft so the difference between the two is visible
   at the moment it matters. Locked until the customer holds the case-pack grant, and it
   says so on hover rather than failing silently when clicked. */
#exportPack[data-tj-unlocked="0"] { opacity: .45; cursor: not-allowed; }
/* Fed by tj-suite from /api/catalog. A price written here survived a full repricing
   because nobody greps a stylesheet for money. */
#exportPack[data-tj-unlocked="0"]::after { content: attr(data-tj-price-suffix); opacity: .8; }
#exportPack[data-tj-unlocked="1"]::after { content: " ↓"; }

/* 🔴 2026-09-08 守一：语言块显隐规则。原来只写在 tj-base.css 里，
   而【67/80 个带中文块的页面根本不链 tj-base.css】—— 那些页一直中英同屏。
   规则本身对 en/zh 行为不变，只是补上第三种语言（ja/de/… 两条都不匹配时中英全露）。 */
html:not([lang^="zh"]) [data-lang="zh"] { display: none; }
html[lang^="zh"] [data-lang="en"] { display: none; }