:root{--paper:#f2f0e9;--ink:#111210;--muted:#77776f;--line:rgba(17,18,16,.18);--signal:#d7ff3f;--blue:#2f5cff}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit}
    .topbar{position:fixed;z-index:20;left:0;right:0;top:0;height:72px;padding:0 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);mix-blend-mode:difference;color:#fff;pointer-events:none}
    .brand,.nav,.counter{pointer-events:auto}
    .brand{font-size:14px;font-weight:800;letter-spacing:.08em}
    .nav{display:flex;gap:26px;font-size:12px;letter-spacing:.08em}
    .nav a{opacity:.62;transition:.2s}
    .nav a:hover{opacity:1}
    .counter{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.16em}
    .page-rail{position:fixed;z-index:25;right:22px;top:50%;transform:translateY(-50%);display:grid;gap:13px}
    .page-dot{width:10px;height:10px;border:1px solid currentColor;border-radius:50%;color:#fff;mix-blend-mode:difference;position:relative;transition:.2s}
    .page-dot:before{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor;transform:scale(0);transition:.2s}
    .page-dot.active:before,.page-dot:hover:before{transform:scale(1)}
    .page-dot span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:.12em;white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
    .page-dot:hover span{opacity:1}
    .panel{min-height:100vh;scroll-snap-align:start;position:relative;padding:118px 6vw 54px;overflow:hidden}
    .eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
    .eyebrow:before{content:"";width:30px;height:2px;background:currentColor}
    .hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:8vw;align-items:end}
    .hero-title{margin:12vh 0 0;font-size:clamp(70px,10vw,164px);line-height:.88;letter-spacing:-.075em;font-weight:900}
    .hero-title span{display:block}
    .hero-title .accent{display:inline-block;background:var(--signal);padding:.04em .11em .1em;margin-left:.68em;transform:rotate(-1.6deg)}
    .hero-copy{padding-bottom:2.5vh}
    .hero-copy p{max-width:390px;font-size:clamp(17px,1.5vw,24px);line-height:1.6;margin:0 0 40px}
    .cta{display:inline-flex;align-items:center;gap:20px;border:1px solid currentColor;padding:15px 18px 15px 22px;font-size:13px;font-weight:800;letter-spacing:.08em;transition:.2s}
    .cta:hover{background:var(--ink);color:var(--paper)}
    .arrow{display:inline-grid;place-items:center;width:27px;height:27px;background:var(--ink);color:var(--paper);border-radius:50%}
    .hero-foot{position:absolute;left:6vw;right:6vw;bottom:32px;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:15px;font-size:11px;color:var(--muted);letter-spacing:.12em}

    .works{background:#111210;color:#f2f0e9;padding:90px 0 18px;display:flex;flex-direction:column;height:100vh;min-height:680px}
    .works-head{height:86px;flex:0 0 auto;padding:0 6vw 16px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid rgba(255,255,255,.2)}
    .works-kicker{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.54);margin-bottom:6px}
    .works-head h2{font-size:clamp(30px,3.6vw,58px);line-height:.9;letter-spacing:-.05em;margin:0}
    .poster-wall{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:9px;padding:9px 0;overflow:hidden}
    .poster-row{min-height:0;overflow:hidden}
    .poster-track{display:flex;width:max-content;height:100%;will-change:transform;animation:poster-left var(--speed,48s) linear infinite;animation-play-state:paused}
    .poster-wall.loaded .poster-track{animation-play-state:running}
    .poster-row.reverse .poster-track{animation-name:poster-right}
    .poster-wall.loaded .poster-row:hover .poster-track,.poster-wall.loaded .poster-row:focus-within .poster-track{animation-play-state:paused}
    .poster-set{display:flex;height:100%;gap:9px;padding-right:9px}
    .poster-card{position:relative;height:100%;aspect-ratio:.62;flex:0 0 auto;padding:0;border:0;background:#242522;overflow:hidden;cursor:zoom-in}
    .poster-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.84);transform:scale(1.002);transition:filter .25s,transform .25s}
    .poster-card:hover img,.poster-card:focus-visible img{filter:saturate(1.05) brightness(1);transform:scale(1.045)}
    .poster-card:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
    .poster-index{position:absolute;left:8px;top:8px;background:#111210;color:#fff;padding:4px 6px;font-size:8px;font-weight:800;letter-spacing:.1em;opacity:0;transition:opacity .2s}
    .poster-card:hover .poster-index,.poster-card:focus-visible .poster-index{opacity:1}
    .works-foot{height:22px;flex:0 0 auto;padding:4px 6vw 0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em;color:rgba(255,255,255,.48)}
    @keyframes poster-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @keyframes poster-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
    .poster-dialog{width:min(92vw,820px);height:min(92vh,1120px);padding:0;border:1px solid rgba(255,255,255,.28);background:#0b0c0b;color:#fff;overflow:hidden}
    .poster-dialog::backdrop{background:rgba(0,0,0,.88)}
    .poster-dialog img{display:block;width:100%;height:100%;object-fit:contain}
    .poster-close{position:absolute;z-index:2;right:12px;top:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:#111210;color:#fff;font-size:24px;line-height:1;cursor:pointer}

    .product{background:var(--blue);color:#fff}
    .product-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:6vw;align-items:center;height:calc(100vh - 170px)}
    .product-copy h2{font-size:clamp(52px,6vw,98px);line-height:.95;letter-spacing:-.06em;margin:22px 0 28px}
    .product-copy p{max-width:470px;font-size:17px;line-height:1.75;color:rgba(255,255,255,.76)}
    .download{display:inline-flex;align-items:center;gap:20px;background:var(--signal);color:#111210;padding:16px 22px;margin-top:22px;font-weight:800;font-size:14px}
    .download[aria-disabled="true"]{cursor:not-allowed;opacity:.86}
    .version{display:block;margin-top:13px;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.68)}
    .checksum{display:block;margin-top:8px;max-width:460px;font-size:9px;line-height:1.5;letter-spacing:.04em;color:rgba(255,255,255,.46);overflow-wrap:anywhere}
    .app-window{background:#101722;border:1px solid rgba(255,255,255,.36);box-shadow:20px 24px 0 rgba(0,0,0,.16);min-height:500px;border-radius:10px;overflow:hidden;transform:rotate(1deg)}
    .app-head{height:48px;border-bottom:1px solid #2f3b4c;display:flex;align-items:center;gap:7px;padding:0 16px}
    .dot{width:8px;height:8px;border-radius:50%;background:#5b6878}.dot:first-child{background:var(--signal)}
    .app-body{display:grid;grid-template-columns:110px 1fr 170px;height:452px}
    .app-side,.app-inspector{background:#151e2a;padding:18px 14px}
    .app-side div{height:9px;background:#39485b;margin-bottom:16px;border-radius:2px}
    .app-main{padding:22px;display:flex;flex-direction:column}
    .screen{flex:1;background:#06080b;border:1px solid #303b49;display:grid;place-items:center;color:#6d7c8e;font-size:11px;letter-spacing:.16em}
    .timeline{height:4px;background:#344457;margin-top:18px;position:relative}.timeline:before{content:"";position:absolute;width:45%;height:100%;background:var(--blue)}
    .app-inspector{border-left:1px solid #2f3b4c}.app-inspector b{font-size:11px}.field{height:55px;border:1px solid #3a4758;margin-top:14px}.action{height:30px;background:var(--blue);margin-top:14px}
    .features{position:absolute;bottom:31px;left:6vw;right:6vw;display:flex;gap:28px;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72)}

    .contact{background:var(--signal);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between}
    .contact h2{font-size:clamp(58px,8.8vw,146px);line-height:.9;letter-spacing:-.07em;margin:8vh 0 0;max-width:1180px}
    .contact h2 .outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
    .mail{display:grid;grid-template-columns:1fr auto;align-items:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:24px 0;font-size:clamp(22px,3vw,48px);font-weight:800;letter-spacing:-.03em}
    .mail span:last-child{font-size:34px}
    .contact-foot{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.12em}
    .legal{display:flex;gap:20px;align-items:center}.legal a{border-bottom:1px solid currentColor}
    .copy-mail{border:1px solid var(--ink);background:transparent;padding:11px 15px;font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer;margin-left:auto;margin-top:18px;display:block}
    .toast{position:fixed;z-index:40;left:50%;bottom:28px;transform:translate(-50%,18px);background:#111210;color:#fff;padding:12px 18px;font-size:12px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:.22s}
    .toast.show{opacity:1;transform:translate(-50%,0)}
    @media(max-width:800px){html{scroll-snap-type:y proximity}.topbar{grid-template-columns:1fr auto;height:60px;padding:0 18px}.nav{display:none}.page-rail{display:none}.hero,.product-layout{grid-template-columns:1fr}.hero{align-content:center}.hero-title{margin-top:9vh}.hero-copy{padding:0}.works{padding:72px 0 12px;height:100svh;min-height:660px}.works-head{height:72px;padding:0 18px 12px}.works-head h2{font-size:34px}.poster-wall{gap:7px;padding:7px 0}.poster-set{gap:7px;padding-right:7px}.works-foot{padding-left:18px;padding-right:18px}.product-layout{height:auto}.app-window{min-height:390px;transform:none}.app-body{height:340px;grid-template-columns:78px 1fr}.app-inspector{display:none}.features{position:static;margin-top:28px;flex-wrap:wrap}.contact h2{margin-top:14vh}.mail{grid-template-columns:1fr;gap:18px;font-size:clamp(18px,6vw,32px)}.contact-foot{align-items:flex-start;gap:12px}.legal{display:grid;gap:7px;text-align:right}.panel{padding:94px 24px 34px}.works.panel{padding-left:0;padding-right:0}.hero-foot{left:24px;right:24px}.hero-foot span:last-child{display:none}.copy-mail{margin-left:0}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-dot,.page-dot:before,.toast{transition:none}.poster-track{animation-play-state:paused}}