@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Regular.woff") format("woff");font-weight:350 500;font-display:swap}
@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Bold.woff") format("woff");font-weight:600 900;font-display:swap}
@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans.ttf") format("truetype");font-weight:300 800;font-display:swap}
@font-face{font-family:"Syncopate";src:url("assets/fonts/Syncopate-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--scale:1;--orange:#ff5b2e;--header-height:calc(55px * var(--scale));--page-x:3.35vw;--ease:cubic-bezier(.2,.75,.15,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header-height)}
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;overflow-x:hidden;background:#080808;color:#fff;font-family:"Source Han Sans CN","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
::selection{background:var(--orange);color:#080808}
.skip-link{position:fixed;z-index:300;left:20px;top:-80px;padding:12px 18px;background:var(--orange);color:#080808}
.skip-link:focus{top:10px}
.site-header{position:fixed;z-index:100;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--header-height);padding:0 3.35vw;background:rgba(17,12,10,.58);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);border-bottom:1px solid rgba(255,255,255,.06);font-size:calc(13px * var(--scale))}
.back-link{display:flex;align-items:center;gap:calc(10px * var(--scale));justify-self:start}
.back-link img{display:block;width:9px;height:auto}
.back-link span:last-child{position:relative}
.back-link span:last-child:after,.language-control button:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .25s ease}
.back-link:hover span:last-child:after,.back-link:focus-visible span:last-child:after,.language-control button:hover:after,.language-control button:focus-visible:after{right:0}
.project-name{justify-self:center}
.language-control{justify-self:end;display:flex;align-items:center;gap:calc(7px * var(--scale));font-size:calc(12px * var(--scale))}
.language-control button{position:relative;padding:0;border:0;background:none;opacity:.55}
.language-control button.active{font-weight:700;opacity:1}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:1.5px;pointer-events:none}
.reading-progress>img{position:absolute;left:0;top:0;width:82.5px;height:1.5px}
.reading-progress span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(.0572917);transform-origin:left;will-change:transform}
.panel{position:relative;width:100%;height:calc(785px * var(--scale));overflow:hidden;background:#080808}
.panel:focus{outline:none}
.panel .artboard{position:relative;width:1440px;height:785px;overflow:hidden;transform:scale(var(--scale));transform-origin:top left;background:#080808}
.cover{height:100vh;min-height:calc(785px * var(--scale));background:#0c0807}
.cover-photo{position:absolute;inset:0;background-image:url("assets/05f6c.png");background-size:121.52% auto;background-position:21% top;background-repeat:no-repeat}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 38%,rgba(0,0,0,.03));pointer-events:none}
.cover-content{position:absolute;z-index:1;left:50%;top:35.2%;width:min(96vw,1100px);transform:translateX(-50%);text-align:center}
.cover-content h1{margin:0;white-space:nowrap;font-family:"Syncopate","Arial Black",sans-serif;font-size:clamp(48px,6.24vw,90px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.cover-content h1 span:last-child{color:#00a6ff}
.cover-content p{margin:1px 0 0;font:400 clamp(13px,1.36vw,19.661px)/1.5 "Open Sans",sans-serif}
.cover-meta{position:absolute;z-index:1;left:4.65%;bottom:6%;display:flex;gap:56px;color:#9a9a9a;font-size:13px;font-weight:300}
.round-arrow{display:grid;place-items:center;width:58px;height:58px;border:1.2px solid #9a9a9a;border-radius:50%;color:#9a9a9a;font-size:24px;line-height:1;transition:background .25s ease,color .25s ease,border-color .25s ease}
.cover-arrow{position:absolute;z-index:1;right:4.5%;bottom:6%}
.cover-arrow span{display:block;transition:transform .25s ease}
.cover-arrow:hover,.cover-arrow:focus-visible,.cover-arrow.is-scroll-active{background:var(--orange);border-color:var(--orange);color:#080808}
.cover-arrow:hover span,.cover-arrow:focus-visible span,.cover-arrow.is-scroll-active span{transform:rotate(45deg)}
.chapter-nav{position:fixed;z-index:50;left:calc(48px * var(--scale));top:50%;transform:translateY(-50%);display:grid;gap:calc(14px * var(--scale));opacity:0;visibility:hidden;transition:opacity .08s ease,visibility 0s linear .08s}
.chapter-nav.is-visible{opacity:1;visibility:visible;transition:opacity .08s ease,visibility 0s}
.chapter-nav a{display:flex;align-items:center;gap:calc(9px * var(--scale));white-space:nowrap;color:#8d8d8d;font-size:calc(11px * var(--scale));font-weight:300;line-height:calc(13px * var(--scale));transition:color .22s ease,transform .22s ease}
.chapter-dot{width:calc(8px * var(--scale));height:calc(8px * var(--scale));border-radius:50%;flex-shrink:0;background:url("assets/9fbaf.svg") center/contain no-repeat;transition:background .2s ease}
.chapter-nav a[aria-current=location]{color:#fff;font-weight:600}
.chapter-nav a[aria-current=location] .chapter-dot{background:#fff url("assets/8ee66.svg") center/contain no-repeat}
.chapter-nav a:hover,.chapter-nav a:focus-visible{color:var(--orange);transform:translateX(3px)}
.chapter-nav a:hover .chapter-dot,.chapter-nav a:focus-visible .chapter-dot{background:var(--orange)}
.overview-image{position:absolute;left:-46px;top:-73px;width:1505px;height:1110px;max-width:none;object-fit:fill}
.overview-copy{position:absolute;left:860px;top:140px;width:403px}
.overview-copy h2{margin:0 0 16px;font-size:24px;line-height:1.5;font-weight:700}
.overview-copy p{margin:0;font-size:16px;line-height:1.5;font-weight:300}
.overview-copy strong{font-weight:700}
.project-video{position:absolute;left:50%;top:50%;display:block;width:1056px;height:auto;aspect-ratio:16/9;max-width:none;transform:translate(-50%,-50%);object-fit:contain;overflow:hidden;border:0;border-radius:16px;background:#050505}
.project-video:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.section-heading{position:absolute;left:208px;top:123px;width:600px;margin:0;color:#fff;font-size:20px;font-weight:700;line-height:30px}
.rule-cards{position:absolute;left:208px;top:202.85px;display:grid;grid-template-columns:repeat(4,246.42px);gap:23.1px}
.rule-card{height:353.64px;border:1.6px solid rgba(255,255,255,.32);border-radius:15px;padding:0 16px;overflow:hidden}
.rule-visual{position:relative;height:222px}
.rule-visual .board{position:absolute;left:0;top:33px;width:137.23px;height:137.23px;max-width:none}
.board-keys{position:absolute;left:18px;top:52px;width:101px;height:99px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;transform:skewY(1deg);pointer-events:none}
.board-keys i{display:block;background:#f7f9fa;border-radius:1px;box-shadow:inset 0 -1px 1px #a7aeb5}
.rule-card:nth-child(1) .board-keys i:nth-child(-n+16),.rule-card:nth-child(1) .board-keys i:nth-child(29),.rule-card:nth-child(1) .board-keys i:nth-child(37){background:#2f9bfd}
.rule-card:nth-child(2) .board-keys i:nth-child(22),.rule-card:nth-child(2) .board-keys i:nth-child(23),.rule-card:nth-child(2) .board-keys i:nth-child(30){background:#a7a7a7}
.rule-card:nth-child(4) .board-keys i:nth-child(20),.rule-card:nth-child(4) .board-keys i:nth-child(27),.rule-card:nth-child(4) .board-keys i:nth-child(36),.rule-card:nth-child(4) .board-keys i:nth-child(44){background:#f35169}
.rule-card:nth-child(4) .board-keys i:nth-child(21),.rule-card:nth-child(4) .board-keys i:nth-child(28),.rule-card:nth-child(4) .board-keys i:nth-child(35),.rule-card:nth-child(4) .board-keys i:nth-child(43){background:#278ff0}
.rule-visual .phone{position:absolute;left:146px;top:36px;width:65.16px;height:132.27px}
.phone-screen{position:absolute;left:3px;top:2px;width:59px;height:127px;object-fit:cover;border-radius:6px}
.phone-outline{position:absolute;inset:0;width:65.16px;height:132.27px;max-width:none}
.phone-art{position:absolute;max-width:none}
.phone-art.battle-ship{left:13.23px;top:64.61px;width:38.96px;height:20.58px}
.phone-art.start-button{left:19.35px;top:94.86px;width:26.35px;height:10.3px}
.phone-art.start-label{left:24.43px;top:98.55px;width:16.29px;height:2.61px}
.phone-art.pixel{width:4.56px;height:4.22px}
.phone-art.pixel.one{left:33.39px;top:69.94px}
.phone-art.pixel.two{left:33.39px;top:51.43px}
.phone-art.pixel.three{left:26.98px;top:51.43px}
.phone-art.pixel.four{left:33.39px;top:76.35px}
.rule-visual.transfer .small-board{position:absolute;left:51px;top:47px;width:69px;height:69px}
.rule-visual.transfer .board-keys{left:61px;top:58px;width:49px;height:48px;gap:1px}
.rule-visual.transfer .person{position:absolute;width:22px;height:24px}
.rule-visual.transfer .person-one{left:0;top:93px}
.rule-visual.transfer .person-two{left:114px;top:147px}
.rule-visual.transfer .transfer-arrow{position:absolute;left:25px;top:81px;width:21px}
.rule-visual.transfer .transfer-arrow.second{left:125px;top:112px;width:6px;height:25px}
.rule-card h3{margin:8px 0 7px;font-size:14px;font-weight:700;line-height:20px}
.rule-card p{margin:0;font-size:13px;font-weight:300;line-height:20px}
.rules-note{position:absolute;left:537px;top:601px;margin:0;font-size:13px;font-weight:300;line-height:20px}
.feature-grid{position:absolute;left:208px;top:131px;display:grid;grid-template-columns:524.5px 525.7px;grid-template-rows:263.45px 255.15px;gap:4px}
.feature-grid figure{position:relative;margin:0;overflow:hidden}
.feature-grid img{display:block;width:100%;height:100%;object-fit:cover}
.feature-grid figure:nth-child(1) img{object-position:center 48%}
.feature-grid figure:nth-child(2) img{object-position:center 52%}
.feature-grid figure:nth-child(3) img{object-position:center 58%}
.feature-grid figure:nth-child(4) img{object-position:center 62%}
.feature-grid figcaption{position:absolute;left:20px;top:18px;padding:3px 10px;border:1px solid rgba(255,255,255,.85);border-radius:100px;color:white;font-size:14px;line-height:20px;font-weight:700}
.hardware-diagram{position:absolute;left:260.8px;top:227.374px;display:block;width:950.4px;height:auto;max-width:none}
.flow-diagram{position:absolute;left:342px;top:206.19px;display:block;width:756px;height:auto;max-width:none}
.story-image-scroll{position:absolute;left:208px;top:208px;width:1056px}
.story-image{display:block;width:100%;height:auto;max-width:none}
.story-caption{position:absolute;top:632px;left:434px;width:592px;margin:0;color:#c9c9c9;font-size:16px;line-height:24px;font-weight:300;text-align:center}
.project-pagination{position:relative;width:100%;height:calc(412px * var(--scale));background:#080808;border-top:1px solid #4a4a4a}
.project-switch{position:absolute;top:calc(108px * var(--scale));display:flex;align-items:center;gap:calc(24px * var(--scale));height:calc(180px * var(--scale))}
.project-switch.previous{left:calc(94px * var(--scale))}
.project-switch.next{right:calc(95px * var(--scale))}
.project-switch .round-arrow{width:calc(58px * var(--scale));height:calc(58px * var(--scale));font-size:calc(24px * var(--scale))}
.project-thumb{position:relative;display:block;width:calc(335px * var(--scale));height:calc(180px * var(--scale));overflow:hidden;border-radius:calc(8px * var(--scale));background:#ddd;isolation:isolate}
.project-switch.previous .project-thumb{background:#080808}
.thumb-image{display:block;width:100%;height:100%;object-fit:cover;transition:filter .45s ease,transform .6s var(--ease)}
.project-switch.next .thumb-image{object-position:center}
.thumb-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4px * var(--scale));background:rgba(5,5,5,.32);color:rgba(255,255,255,.8);font-size:calc(16px * var(--scale));font-weight:300;line-height:1.2;opacity:0;transform:translateY(6px);transition:opacity .36s ease,transform .48s var(--ease)}
.thumb-direction,.thumb-project-name{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
.thumb-direction{font-family:"Source Han Sans CN","PingFang SC",sans-serif}
.thumb-project-name{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:calc(13px * var(--scale));font-weight:700}
.project-switch:hover .thumb-image,.project-switch:focus-visible .thumb-image{filter:blur(10px);transform:scale(1.04)}
.project-switch:hover .thumb-label,.project-switch:focus-visible .thumb-label{opacity:1;transform:translateY(0)}
.project-switch:hover .round-arrow,.project-switch:focus-visible .round-arrow{color:#fff;border-color:#fff}
.project-footer{position:absolute;left:var(--page-x);right:var(--page-x);bottom:calc(32px * var(--scale));display:flex;justify-content:space-between;color:#a3a3a3;font-size:calc(10px * var(--scale));letter-spacing:.08em}
.project-footer a:hover,.project-footer a:focus-visible{color:var(--orange)}
.page-exit{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;background:rgba(0,0,0,.96);backdrop-filter:blur(14px);transition:opacity .35s var(--ease)}
body.is-leaving .page-exit{opacity:1}
@media(max-width:700px){
  :root{--header-height:52px}
  .site-header{padding:0 18px;font-size:12px}
  .language-control{font-size:11px}
  .panel,.story{height:auto;overflow:visible}
  .panel .artboard,.story .artboard{width:100%;height:auto;transform:none;overflow:visible}
  .cover{height:100svh;min-height:540px;overflow:hidden}
  .cover-photo{background-size:cover;background-position:54% center}
  .cover-content{top:29%;width:100%;padding:0 18px}
  .cover-content h1{font-size:clamp(34px,9vw,65px)}
  .cover-content p{max-width:360px;margin:12px auto 0;font-size:13px}
  .cover-meta{left:18px;bottom:32px;display:grid;gap:4px;font-size:11px}
  .cover-arrow{right:20px;bottom:28px;width:52px;height:52px}
  .chapter-nav{left:0;right:0;top:auto;bottom:0;width:100%;display:flex;transform:none;overflow-x:auto;gap:18px;padding:12px 18px max(12px,env(safe-area-inset-bottom));background:rgba(8,8,8,.9);backdrop-filter:blur(16px);scrollbar-width:none}
  .chapter-nav a{font-size:11px;line-height:18px;flex-shrink:0;gap:6px}
  .chapter-dot{width:7px;height:7px}
  .overview .artboard{min-height:690px;display:flex;flex-direction:column}
  .overview-image{position:relative;left:auto;top:auto;width:100%;height:425px;object-fit:cover;object-position:44% center}
  .overview-copy{position:relative;left:auto;top:auto;width:auto;padding:28px 24px 46px}
  .overview-copy h2{font-size:22px}
  .overview-copy p{font-size:14px}
  .video-panel .artboard{padding:84px 20px}
  .project-video{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;aspect-ratio:16/9}
  .rules .artboard,.features .artboard,.hardware .artboard,.flow .artboard,.story .artboard{padding:72px 20px 88px}
  .story .artboard{padding-bottom:45px}
  .section-heading{position:relative;left:auto;top:auto;width:auto;margin:0 0 32px;font-size:21px}
  .rule-cards{position:relative;left:auto;top:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rule-card{height:auto;min-height:290px;padding:12px}
  .rule-visual{height:150px;transform:scale(.72);transform-origin:top left;width:212px}
  .rule-card h3{margin:0 0 8px;font-size:13px}
  .rule-card p{font-size:11px;line-height:1.45}
  .rules-note{position:relative;left:auto;top:auto;margin:28px 0 0;font-size:12px;line-height:1.5}
  .feature-grid{position:relative;left:auto;top:auto;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,31vw);gap:4px}
  .feature-grid figcaption{top:8px;left:8px;padding:2px 6px;font-size:10px;line-height:15px}
  .hardware .artboard{overflow-x:auto;overscroll-behavior-x:contain}
  .hardware-diagram{position:relative;left:50px;top:17.4px;width:900px;height:auto;margin-bottom:34.8px}
  .flow .artboard{overflow-x:auto;overscroll-behavior-x:contain}
  .flow-diagram{position:relative;left:50px;top:31.18px;width:900px;height:auto;margin-bottom:62.36px}
  .story-image-scroll{position:relative;left:auto;top:auto;width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .story-image{width:1000px;height:auto}
  .story-caption{position:relative;left:auto;top:auto;width:auto;margin:28px 0 0;font-size:13px;line-height:1.6}
  .project-pagination{min-height:220px}
  .project-switch{top:36px;height:90px;gap:8px}
  .project-switch.previous{left:14px}
  .project-switch.next{right:14px}
  .project-switch .round-arrow{width:26px;height:26px;font-size:16px;flex-shrink:0}
  .project-thumb{width:calc((100vw - 110px)/2);height:90px;border-radius:5px}
  .thumb-label{font-size:10px;gap:3px}
  .thumb-project-name{font-size:10px}
  .project-footer{left:18px;right:18px;bottom:28px;font-size:8px}
  .project-footer a{padding:12px 0}
  .project-switch:focus-visible{outline-offset:2px}
}
@media(max-width:390px){.rule-cards{grid-template-columns:1fr}.rule-visual{transform:scale(.86);height:170px}.rule-card{min-height:0;padding:12px 16px 20px}}
@media(hover:none){.thumb-label{opacity:1;transform:none;background:rgba(5,5,5,.32)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.page-exit{display:none}}

/* Shared author identity in the project-detail navigation. */
.profile-link{justify-self:end;display:inline-flex;align-items:center;gap:0;font-size:calc(12px * var(--scale));letter-spacing:.08em;line-height:1;white-space:nowrap;transition:transform .25s ease}
.profile-link::after{content:"→";width:0;margin-left:0;overflow:hidden;opacity:0;transform:translateX(-5px);transition:width .25s ease,margin-left .25s ease,opacity .2s ease,transform .25s ease}
.profile-link:hover,.profile-link:focus-visible{transform:translateX(-4px)}
.profile-link:hover::after,.profile-link:focus-visible::after{width:.9em;margin-left:.42em;opacity:1;transform:translateX(0)}
.profile-link:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.site-header .project-name,.site-header .profile-link{font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400}