@font-face{font-family:Anton;src:url('/fonts/anton.ttf') format('truetype');font-display:swap}
:root{--red:#e92032;--black:#111111;--paper:#f7f3e9;--gold:#dbbc7a;--snap:cubic-bezier(.2,.85,.2,1);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;color:var(--paper);background:var(--black)}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button:disabled{cursor:default}button,input{touch-action:manipulation}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;left:12px;top:-100px;z-index:100;background:white;color:black;padding:12px}.skip:focus{top:12px}.world{isolation:isolate;position:relative;min-height:760px;height:calc(100svh - 70px);overflow:hidden;background:var(--red)}
.backdrop,.black-slice,.paper-slice,.halftone,.speed-lines{position:absolute;inset:0;pointer-events:none}.backdrop{z-index:-1}.black-slice{background:var(--black);clip-path:polygon(0 0,100% 0,100% 12%,2% 21%,0 35%)}.paper-slice{background:var(--paper);clip-path:polygon(73% 7%,98% 2%,80% 100%,42% 100%)}.speed-lines{background:repeating-linear-gradient(118deg,transparent 0,transparent 10px,#141414 11px,#141414 13px,transparent 14px,transparent 27px);clip-path:polygon(84% 0,88% 0,50% 100%,46% 100%);opacity:.65}.ghost-type{position:absolute;left:-2%;top:22%;font:clamp(150px,21vw,330px)/.92 Anton,sans-serif;letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1.5px #11111133;transform:rotate(-11deg);white-space:nowrap}.halftone{background-image:radial-gradient(#111 1px,transparent 1.4px);background-size:6px 6px;opacity:.2;clip-path:polygon(0 75%,100% 30%,100% 100%,0 100%)}.star{position:absolute;color:var(--black);line-height:1}.star-one{right:4%;top:22%;font-size:100px;transform:rotate(13deg)}.star-two{left:47%;bottom:15%;font-size:92px;color:var(--paper);transform:rotate(-12deg)}
.masthead{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;position:relative;z-index:4;gap:24px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:15px;letter-spacing:2px;font-weight:800}.brand b{font:50px/.9 Anton,sans-serif;background:var(--paper);color:var(--black);padding:7px 10px 7px 6px;transform:rotate(-8deg);box-shadow:5px 4px 0 var(--red)}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:7px;font-weight:400}.edition{text-align:center;font-size:10px;letter-spacing:4px}.edition strong{display:block;font-size:12px;letter-spacing:5px;margin-top:8px}.date-mark{transform:rotate(5deg);text-align:right}.date-mark>span{font:33px/1 Anton,sans-serif}.date-mark small{display:block;letter-spacing:3px;font-size:9px;margin-top:5px}
.menu-scene{position:relative;height:calc(100% - 106px)}main{height:calc(100% - 106px - 56px)}main>.menu-scene{height:100%}.scene-heading{position:absolute;left:5.5%;top:14px;z-index:2;transform:rotate(-4deg)}.tiny-label{display:inline-block;background:var(--paper);color:var(--black);padding:4px 9px;font-size:10px;font-weight:800;letter-spacing:2px;transform:rotate(1deg)}h1{font:clamp(32px,3.6vw,59px)/1.03 Anton,sans-serif;margin:11px 0 10px;letter-spacing:.5px}h1>span{display:block}h1>span:first-child{font-size:.64em}h1 em{font-style:normal;color:var(--black)}.scene-heading>p{font-size:12px;letter-spacing:1px;margin:7px 0}
.command-menu{position:absolute;top:200px;left:5.5%;width:40%;max-width:630px;z-index:3;display:flex;flex-direction:column;gap:4px;transform:rotate(-6deg)}.command{display:flex;align-items:center;position:relative;isolation:isolate;width:100%;text-align:left;padding:10px 19px;min-height:69px;line-height:1;transform-origin:left center;transition:transform 150ms var(--snap),color 100ms}.command:before,.command:after{content:"";position:absolute;inset:4% 1% 2% 0;z-index:-1;background:var(--black);clip-path:polygon(1% 9%,94% 0,100% 80%,4% 100%);transition:transform 150ms var(--snap),background 100ms}.command:after{background:var(--paper);z-index:-2;transform:translate(0,0)}.command:nth-child(2){margin-left:5%;width:90%;transform:rotate(2deg)}.command:nth-child(3){margin-left:2%;width:101%;transform:rotate(-1deg)}.command:nth-child(4){margin-left:7%;width:88%;transform:rotate(3deg)}.cmd-no{font:14px/1 Anton,sans-serif;align-self:flex-start;margin:5px 13px 0 0;color:var(--gold)}.cmd-en{font:clamp(28px,3.8vw,61px)/1 Anton,sans-serif;letter-spacing:1px}.cmd-cn{font-size:12px;font-weight:800;margin-left:18px;white-space:nowrap}.cmd-arrow{font-size:30px;margin-left:auto}.command.is-selected{color:var(--black);transform:translateX(20px) rotate(-2deg) scale(1.035)}.command.is-selected:before{background:var(--paper)}.command.is-selected:after{background:var(--black);transform:translate(8px,8px)}.command.is-selected .cmd-no{color:var(--red)}.command.is-selected .cmd-arrow{color:var(--red)}
.actor-wrap{position:absolute;left:45%;top:-10%;width:42%;height:117%;z-index:1;pointer-events:none}.actor{position:absolute;inset:0;transform-origin:55% 80%;mix-blend-mode:multiply}.actor-image{position:absolute;inset:0;background-image:url('/assets/p5r-character.png');background-repeat:no-repeat;background-size:300% 100%;background-position:0% 0;transform:rotate(3deg)}body[data-pose="1"] .actor-image{background-position:50% 0}body[data-pose="2"] .actor-image{background-position:100% 0}.actor-shadow{position:absolute;left:28%;bottom:7%;width:43%;height:4%;background:var(--black);transform:skewX(-65deg);opacity:.18}.actor-caption{position:absolute;left:64%;top:14%;transform:rotate(11deg);display:flex;align-items:center;gap:7px;color:var(--black)}.actor-caption b{font:63px/1 Anton,sans-serif}.actor-caption span{font-size:9px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.calling-card{position:absolute;right:4%;bottom:35px;width:260px;padding:23px 24px 22px;color:var(--black);background:var(--paper);transform:rotate(5deg);box-shadow:9px 10px 0 var(--black);z-index:3}.calling-card:before{content:"";position:absolute;top:-7px;left:15px;width:65px;height:15px;background:var(--black);transform:rotate(-7deg)}.card-kicker{font:11px/1 Anton,sans-serif;letter-spacing:2px}.calling-card h2{font-size:26px;line-height:1.25;font-weight:900;margin:14px 0 12px;letter-spacing:-1px}.calling-card p{font-size:12px;line-height:1.8;margin:0 0 13px}.ink-button{background:var(--black);color:var(--paper);padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:bold;min-height:44px;width:100%}.ink-button:hover{background:var(--red)}.card-stamp{position:absolute;right:16px;top:15px;color:var(--red);font:13px/1 Anton,sans-serif;border:2px solid var(--red);padding:3px;transform:rotate(-10deg)}.scene-caption{position:absolute;right:3%;top:13%;transform:rotate(90deg);transform-origin:right bottom;text-align:right;color:var(--black)}.scene-caption span{font-size:10px;letter-spacing:4px}.scene-caption b{display:block;font:24px/1.1 Anton,sans-serif;margin-top:12px}.scene-footer{position:absolute;bottom:0;left:0;right:0;height:56px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--black);font-size:9px;letter-spacing:1px;z-index:5}.scene-footer i{color:var(--red);padding:0 9px}.key-hints{font-size:11px;letter-spacing:0}kbd{font:10px/1.3 inherit;border:1px solid #888;padding:3px 5px;margin:0 4px;border-radius:0}
.detail-scene{position:absolute;left:7%;top:148px;bottom:85px;width:63%;background:var(--paper);color:var(--black);padding:28px 38px;box-shadow:13px 13px 0 #111;z-index:3;overflow:auto;border-top:8px solid var(--black)}.detail-top{display:flex;align-items:center;justify-content:space-between;font:12px/1 Anton,sans-serif;letter-spacing:1px;gap:10px}.back-button{background:var(--black);color:var(--paper);font-size:11px;padding:10px 12px;min-height:40px;letter-spacing:0}.back-button:hover{background:var(--red)}.detail-scene h2{font-size:clamp(30px,3.6vw,58px);line-height:1.2;margin:27px 0 12px;letter-spacing:-2px;font-weight:900}.detail-lead{font-size:13px;line-height:1.8;margin:0 0 23px;max-width:85%}.detail-sign{position:absolute;right:20px;top:76px;transform:rotate(9deg);font:clamp(14px,2vw,29px)/1 Anton,sans-serif;text-align:right;color:var(--red);opacity:.75}.detail-sign em{font-style:normal;color:var(--black)}body:not([data-page="home"]) .actor-caption{display:none}body:not([data-page="home"]) .scene-heading,body:not([data-page="home"]) .command-menu,body:not([data-page="home"]) .calling-card,body:not([data-page="home"]) .scene-caption{visibility:hidden;pointer-events:none}body:not([data-page="home"]) .paper-slice{clip-path:polygon(79% 5%,96% 0,90% 100%,59% 100%)}
.app-row{border-top:2px solid var(--black);padding:17px 0;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px}.app-icon{background:var(--black);color:var(--paper);font:29px/1 Anton,sans-serif;width:46px;height:50px;display:grid;place-items:center;transform:rotate(-5deg);box-shadow:4px 4px 0 var(--red)}.app-row h3{margin:0 0 7px;font-size:19px}.app-row p{margin:0;font-size:12px;line-height:1.65}.small-button{border:2px solid var(--black);color:var(--black);padding:8px 12px;font-size:12px;font-weight:bold;min-height:44px}.small-button:hover{background:var(--black);color:var(--paper)}.app-details{grid-column:2/-1;font-size:13px;line-height:1.9;background:#e9e4d8;padding:15px}.data-note{font-size:11px;line-height:1.8;color:#555;border-top:1px solid #999;padding-top:14px}.device-row{display:flex;align-items:center;gap:15px;padding:18px 0;border-top:2px solid var(--black)}.device-row .device-icon{font-size:30px}.device-row h3{font-size:17px;margin:0 0 5px}.device-row p{font-size:12px;margin:0;color:#555}.device-row .tag{margin-left:auto;font-size:11px;background:var(--black);color:white;padding:6px 8px}.pair-area{background:var(--black);color:var(--paper);padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}.pair-area p{font-size:12px;margin:0;line-height:1.8}.pair-area button{background:var(--paper);color:var(--black);padding:12px;font-size:12px;font-weight:bold;min-height:44px}.pair-code{font:36px/1 Anton,sans-serif;letter-spacing:6px;color:var(--gold)}.about-quote{font-size:clamp(25px,3vw,45px);font-weight:900;line-height:1.4;margin:20px 0;border-left:7px solid var(--red);padding-left:20px}.about-copy{font-size:14px;line-height:2;max-width:490px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.tags span{font-size:12px;border:1px solid #111;padding:8px 11px}.overview-links{display:grid;gap:10px}.overview-links button{text-align:left;border-bottom:2px solid #111;padding:15px 5px;display:flex;justify-content:space-between;font-weight:bold;font-size:17px}.overview-links button:hover{color:var(--red)}
.transition-layer{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:hidden}.wipe{position:absolute;inset:-25% -40%;transform:translateX(-120%) skewX(-19deg)}.wipe-white{background:var(--paper)}.wipe-black{background:var(--black)}.wipe-red{background:var(--red)}.cut-word{position:absolute;top:39%;left:14%;font:clamp(65px,12vw,200px)/1 Anton,sans-serif;color:var(--paper);transform:translateX(-180vw) rotate(-8deg);text-shadow:8px 8px 0 var(--black)}.intro-layer{position:absolute;inset:0;z-index:15;background:var(--black);pointer-events:none;visibility:hidden;overflow:hidden}.intro-title{position:absolute;left:13%;top:24%;font:clamp(65px,12vw,190px)/1.07 Anton,sans-serif;transform:rotate(-7deg)}.intro-title span{display:table;background:var(--paper);color:var(--black);padding:0 .14em}.intro-title span+span{background:var(--red);color:var(--paper);margin-left:15%;box-shadow:12px 12px 0 var(--paper)}.intro-title em{font-style:normal;color:var(--black)}.intro-small{position:absolute;top:12%;left:10%;letter-spacing:5px;font-size:11px}.intro-star{position:absolute;right:5%;bottom:1%;color:var(--red);font-size:250px;line-height:1}