:root{--ink:#07151f;--paper:#f2f4ef;--white:#fff;--cyan:#76e4f7;--green:#c8f33d;--yellow:#ffd353;--line:rgba(7,21,31,.2)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;margin:0}a{color:inherit;text-decoration:none}button{font:inherit}.skip{clip-path:inset(50%);height:1px;overflow:hidden;position:fixed;white-space:nowrap;width:1px}.skip:focus{background:var(--green);clip-path:none;height:auto;left:12px;overflow:visible;padding:10px 14px;top:12px;width:auto;z-index:20}header{align-items:center;background:var(--ink);color:var(--white);display:flex;height:68px;justify-content:space-between;padding:0 4vw}.brand{align-items:baseline;display:flex;gap:12px}.brand b{font-size:25px}.brand span,.header-state{font-size:10px;font-weight:800;letter-spacing:.12em}.header-state{align-items:center;display:flex;gap:8px}.header-state i{background:var(--yellow);border-radius:50%;height:8px;width:8px}.intro{background:var(--ink);color:var(--white);display:grid;gap:6vw;grid-template-columns:1.15fr .85fr;padding:80px 4vw 64px}.eyebrow{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.12em;margin:0 0 20px}.intro h1,.method h2{font-size:clamp(48px,7vw,92px);letter-spacing:0;line-height:.92;margin:0}.intro-copy{align-self:end}.intro-copy>p{font-size:18px;line-height:1.5;max-width:620px}.intro dl{border-top:1px solid rgba(255,255,255,.35);display:grid;grid-template-columns:repeat(3,1fr);margin:35px 0 0}.intro dl div{padding:18px 0}.intro dt{font-size:10px;text-transform:uppercase}.intro dd{font-size:28px;font-weight:900;margin:8px 0 0}.roles{border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.roles button{background:transparent;border:0;border-right:1px solid var(--line);cursor:pointer;display:grid;gap:10px;min-height:164px;padding:24px;text-align:left}.roles button.active{background:var(--green)}.roles span{font-size:11px;font-weight:900}.roles strong{font-size:24px}.roles small{font-size:12px}.viewer{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(520px,1.28fr);min-height:850px}.viewer-copy{padding:65px 4vw}.role-code{color:#006a84;font-size:12px;font-weight:900;letter-spacing:.1em}.viewer h2{font-size:54px;line-height:.98;margin:15px 0}.viewer-copy>p:not(.role-code):not(.boundary){font-size:17px}.gate{border-left:4px solid var(--yellow);display:grid;gap:7px;margin:30px 0;padding:2px 0 2px 15px}.gate span{font-size:10px;text-transform:uppercase}.gate strong{font-size:13px;text-transform:lowercase}.surfaces{border-top:2px solid var(--ink)}.surfaces button{background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer;display:block;padding:15px 0;text-align:left;width:100%}.surfaces button.active{color:#006a84;font-weight:900}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.actions a{border:1px solid var(--ink);font-size:12px;font-weight:800;padding:13px 15px}.actions .primary{background:var(--ink);color:var(--white)}.boundary{border-top:1px solid var(--line);font-size:11px;line-height:1.5;margin-top:26px;padding-top:18px}.preview{background:#d9ded8;padding:30px}.preview>div{display:flex;font-size:10px;font-weight:800;justify-content:space-between;margin-bottom:12px;text-transform:uppercase}.preview iframe{background:white;border:0;height:760px;width:100%}.preview>p{display:none}.method{background:#006a84;color:var(--white);padding:90px 4vw}.method h2{font-size:70px}.method ol{border-top:1px solid rgba(255,255,255,.4);display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:55px 0 0;padding:0}.method li{border-right:1px solid rgba(255,255,255,.25);min-height:190px;padding:20px}.method li:first-child{padding-left:0}.method b{font-size:10px}.method span{display:block;font-size:22px;font-weight:900;margin-top:50px}.method p{font-size:12px;line-height:1.45}footer{background:var(--ink);color:var(--white);display:flex;justify-content:space-between;padding:35px 4vw}footer span,footer a{font-size:11px;font-weight:800;letter-spacing:.08em}
@media(max-width:900px){.intro,.viewer{grid-template-columns:1fr}.roles{grid-template-columns:1fr}.roles button{border-bottom:1px solid var(--line);min-height:120px}.preview iframe{height:700px}.method ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){header{padding:0 20px}.header-state span{display:none}.intro,.viewer-copy,.method{padding-left:20px;padding-right:20px}.intro dl{grid-template-columns:1fr}.viewer h2{font-size:42px}.preview{padding:20px}.preview iframe{display:none}.preview>p{background:white;display:block;margin:0;padding:24px}.method ol{grid-template-columns:1fr}.method li,.method li:first-child{border-bottom:1px solid rgba(255,255,255,.25);border-right:0;min-height:140px;padding:18px 0}.method span{margin-top:30px}.actions{flex-direction:column}.actions a{text-align:center}footer{gap:16px;flex-direction:column;padding:30px 20px}}

/* Package 001-style complete-page previews. */
.preview-sheet{background:#fff;box-shadow:0 18px 48px rgba(7,21,31,.18);display:block;margin:0 auto;max-width:820px;width:100%}
.preview img{aspect-ratio:210/297;background:#fff;display:block;height:auto;object-fit:contain;width:100%}
.preview>p{background:transparent;display:block;font-size:11px;margin:14px auto 0;max-width:820px;padding:0}
@media(max-width:560px){.preview{padding:16px}.preview img{display:block}.preview>p{background:transparent;margin:12px 0 0;padding:0}}