:root{--paper:#fffaf0;--ink:#122554;--blue:#0758f9;--muted:#68748c;--line:#dfdfd5}*{box-sizing:border-box}html{color:var(--ink);background:var(--paper);font-family:Arial,'Microsoft YaHei',sans-serif}body{margin:0}button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #124dce;outline-offset:5px}a{color:inherit}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;z-index:99;left:20px;top:-80px;background:var(--ink);color:white;padding:15px}.skip:focus{top:15px}.header{display:flex;align-items:center;gap:30px;padding:28px 3.5vw;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:25px;letter-spacing:1px;text-decoration:none}.brand span{font-size:21px;letter-spacing:.6px}.brand i{width:7px;height:7px;background:var(--blue);border-radius:50%}.edition{font-size:9px;letter-spacing:2px;color:#7b8090}.main-nav{margin-left:auto;display:flex;gap:28px}.main-nav button{position:relative;background:none;padding:0 8px 10px;font-size:19px;font-weight:bold;min-width:62px}.main-nav button span{display:block;font-size:8px;letter-spacing:1px;font-weight:400;margin-top:5px;color:var(--muted)}.main-nav button:after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:4px;background:var(--blue);border-radius:8px;transform:scaleX(0);transition:transform .2s}.main-nav button:hover:after,.main-nav button.active:after{transform:scaleX(1)}.showroom{position:relative;min-height:660px;height:calc(100svh - 151px);max-height:1000px;display:grid;grid-template-columns:33% 67%;grid-template-rows:minmax(420px,1fr) 125px;padding:0 3.5vw}.intro{position:relative;z-index:2;padding-top:clamp(35px,7vh,90px)}.eyebrow{font-size:9px;letter-spacing:1.4px;display:flex;align-items:center;gap:8px;color:var(--muted)}.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--blue)}h1{font-size:clamp(46px,4.5vw,78px);line-height:1.24;letter-spacing:-3px;font-weight:900;margin:26px 0 18px}h1>span{color:var(--blue)}.intro-copy{font-size:clamp(13px,1.4vw,21px);letter-spacing:1px}.intro-detail{font-size:12px;line-height:1.9;color:var(--muted);margin-top:22px}.actions{display:flex;gap:12px;margin-top:28px}.primary,.secondary{border-radius:50px;padding:14px 23px;font-size:14px;font-weight:700;min-height:48px;transition:transform .2s}.primary{background:var(--blue);color:white;box-shadow:0 5px 0 #0345cb,0 10px 20px #0758f924}.primary span{margin-left:18px}.secondary{background:var(--paper);border:1.5px solid var(--blue);color:var(--blue)}.primary:hover,.secondary:hover{transform:translateY(-2px)}.intro-note{font-size:9px;color:var(--muted);margin-top:22px;display:flex;align-items:center;gap:6px}.small-dot{width:5px;height:5px;background:#efb268;border-radius:50%}.stage{position:relative;min-width:0;grid-column:2;grid-row:1/3;isolation:isolate;margin-left:-25px;overflow:visible}.stage:before{content:'';position:absolute;inset:10% -1% 4% 2%;z-index:-1;background:radial-gradient(ellipse at 55% 68%,#c3cdfa40 0,transparent 65%)}#studio{display:block;width:100%;height:100%;min-height:550px}.stage-label{position:absolute;top:4px;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:2}.stage-label span{font-size:8px;letter-spacing:2px;color:var(--muted)}.stage-label b{font-size:11px;color:var(--blue);font-weight:500;border:1px solid #9db9fa;border-radius:30px;padding:8px 14px;background:#fffaf0dd}.hotspot{position:absolute;z-index:3;display:flex;gap:6px;align-items:center;transform:translate(-50%,-100%);padding:8px 11px;border-radius:9px;font-weight:bold;font-size:16px;background:#fff9e9;box-shadow:0 4px 0 #cab68c,0 7px 16px #1d335323;white-space:nowrap;transition:margin-top .2s;border:2px solid white}.hotspot span{font-size:10px;margin-right:2px}.hotspot b{font-size:14px;color:var(--blue)}.hotspot:hover{margin-top:-5px}.hotspot.blue{color:#1054c0}.hotspot.orange{color:#ad4d07}.hotspot.mint{color:#1f7150}.scene-caption{position:absolute;bottom:120px;right:4%;font-size:10px;color:#83848f;letter-spacing:1px}.quick-look{position:relative;z-index:2;grid-column:1;grid-row:2;display:flex;width:155%;align-self:end;gap:22px;padding:18px 0 8px;border-top:1px solid #a9b3ca}.quick-look button{display:flex;align-items:center;gap:14px;text-align:left;flex:1;background:none;padding:0;min-width:0}.quick-look button+button{border-left:1px solid #b6c0d3;padding-left:22px}.quick-look img{width:85px;height:76px;object-fit:cover;border-radius:8px}.quick-look span{display:block}.quick-look small{font-size:7px;letter-spacing:1px;color:var(--muted)}.quick-look strong{display:block;font-size:14px;margin:6px 0}.quick-look em{font-size:9px;font-style:normal;color:var(--muted)}.play-area{position:absolute;z-index:4;bottom:20px;right:5%;display:flex;align-items:center;gap:16px}.play-copy button{background:#ffffffb5;border:1px solid #ccd5e5;border-radius:50px;padding:6px 15px;font-size:12px;box-shadow:0 3px 0 #e3e7ee}.play-copy button[aria-pressed=true]{background:var(--ink);color:white}.play-copy button span{margin-left:9px}.play-copy p{font-size:9px;color:var(--muted);margin-top:9px}.dpad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,36px);gap:3px}.dpad button{min-height:36px;border-radius:6px;border:1px solid #4265a1;background:#fffdf5;box-shadow:0 2px 0 #9caccc;font-size:19px}.dpad button:active{transform:translateY(2px);box-shadow:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}#game-keyboard{position:absolute;right:0;bottom:-27px;font-size:9px;color:var(--muted);padding:3px}footer{padding:20px 3.5vw;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:8px;letter-spacing:.5px}footer i{font-style:normal;color:var(--blue);margin:0 5px}dialog{color:var(--ink);border:0;border-radius:23px;padding:0;box-shadow:0 25px 100px #12255435;background:var(--paper);width:min(1080px,94vw);max-height:90svh}dialog::backdrop{background:#14295478;backdrop-filter:blur(7px)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 32px;border-bottom:1px solid var(--line);background:#fffdf8}.panel-head>div>span{font-size:9px;letter-spacing:2px;color:var(--blue)}.panel-head h2{font-size:26px;letter-spacing:-.8px;margin-top:6px}.close{background:#edf1fa;padding:9px 15px;border-radius:30px;font-size:12px;white-space:nowrap}.close b{font-size:18px;margin-left:12px}.panel-scroll{max-height:calc(90svh - 109px);overflow:auto;padding:28px 32px;overscroll-behavior:contain}.panel-lead{font-size:14px;line-height:1.9;color:var(--muted);max-width:730px}.category-tabs{display:flex;gap:10px;margin:24px 0}.category-tabs button{border:1px solid #bdccec;border-radius:40px;padding:10px 24px;background:transparent;font-size:13px}.category-tabs button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.case-card{min-width:0}.case-image{padding:0;background:#e9eadf;border-radius:14px;overflow:hidden;width:100%;display:block;position:relative}.case-image img{width:100%;height:250px;object-fit:cover;transition:transform .3s}.case-image:hover img{transform:scale(1.025)}.case-image>span{position:absolute;right:12px;bottom:12px;background:white;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:18px}.case-card h3{font-size:19px;margin-top:16px}.case-card p{font-size:12px;line-height:1.8;color:var(--muted);margin:7px 0}.pending{display:inline-block;padding:5px 9px;border-radius:5px;background:#eee9d9;font-size:10px;color:#746752}.subhead{font-size:19px;margin:32px 0 15px}.case-notes{margin-top:22px;font-size:11px;color:var(--muted);line-height:1.8}.recent-item{border-top:1px solid var(--line);padding:17px 0;display:flex;justify-content:space-between;gap:15px;font-size:14px}.recent-item span{font-size:11px;color:var(--muted)}.comparison{position:relative;height:235px;border-radius:12px;overflow:hidden;background:#d5e9fa}.compare-a,.compare-b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px}.compare-b{color:#1769b4}.compare-a{background:#eae4d7;clip-path:inset(0 calc(100% - var(--split)) 0 0);color:#736757}.comparison b{font-size:20px}.comparison span{font-size:12px}.compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:3px;background:white;transform:translateX(-50%)}.compare-line:after{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:white}.range-row{display:flex;align-items:center;gap:20px;margin:13px 0;font-size:11px}.range-row input{flex:1;min-width:0;accent-color:var(--blue);height:44px}.range-row output{min-width:48px}.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.flow>div{background:#edf2fb;border-radius:12px;padding:18px}.flow small{color:var(--blue);font-size:9px;letter-spacing:1px}.flow h3{font-size:15px;margin:10px 0}.flow p{font-size:11px;color:var(--muted);line-height:1.7}.timeline{margin-top:25px}.timeline article{display:grid;grid-template-columns:150px 1fr;gap:25px;border-top:1px solid var(--line);padding:23px 0}.timeline time{font-size:12px;color:var(--blue);padding-top:3px}.timeline h3{font-size:18px}.timeline p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:8px}.timeline small{font-size:10px;color:#8a7c60}.skill-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.skill-tags span{padding:8px 13px;border:1px solid #c4d2eb;border-radius:50px;font-size:11px}.resume-top{display:flex;justify-content:space-between;gap:25px}.resume-top h3{font-size:31px}.resume-top .english{display:block;font-size:16px;color:var(--blue);margin-top:9px}.resume-top p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:18px}.resume-link{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;align-self:flex-start;font-size:12px;border-radius:30px;padding:12px 19px;background:var(--blue);color:white;min-height:44px}.contact-card{background:#eaf2ff;border-radius:20px;padding:35px;margin-top:23px;position:relative}.contact-card:after{content:'↗';position:absolute;right:30px;top:25px;font-size:60px;color:var(--blue)}.contact-card h3{font-size:27px;line-height:1.5}.contact-card p{font-size:13px;line-height:1.9;color:var(--muted);margin-top:20px;max-width:80%}.contact-items{display:flex;gap:25px;margin-top:25px}.contact-items>div{flex:1;border-top:1px solid #c6d7f3;padding-top:18px}.contact-items small{font-size:10px;color:var(--muted)}.contact-items p{font-size:15px;margin-top:8px}details{border-top:1px solid var(--line);margin-top:12px;padding:10px 0}summary{padding:12px 0;font-size:14px;cursor:pointer;min-height:44px}details p{color:var(--muted);font-size:12px;line-height:1.9;margin:0 0 12px}.lightbox-scroll{max-height:calc(90svh - 90px);overflow:auto;padding:20px}.lightbox-scroll img{width:100%;height:auto}.lightbox-scroll p{font-size:11px;line-height:1.8;color:var(--muted);margin-top:15px}.no-js{padding:20px;background:#fff1ce;text-align:center}
@media(max-width:1100px) and (min-width:701px){.edition{display:none}.brand{font-size:20px}.brand span{font-size:17px}.main-nav{gap:16px}.main-nav button{font-size:16px}.showroom{grid-template-columns:34% 66%;min-height:570px;height:calc(100svh - 135px);grid-template-rows:1fr 115px}.intro{padding-top:50px}h1{font-size:47px;letter-spacing:-2px}.intro-copy{font-size:13px}.actions{gap:8px}.primary,.secondary{font-size:12px;padding:12px 17px}.primary span{margin-left:8px}.stage{margin-left:-30px}.quick-look img{width:62px;height:62px}.quick-look{gap:12px;width:160%}.quick-look button+button{padding-left:12px}.quick-look strong{font-size:12px}.hotspot{font-size:13px;padding:7px 9px}.play-area{right:4%}#studio{min-height:490px}}
@media(max-width:700px){body{padding-bottom:80px}.header{padding:19px 21px 13px;gap:12px}.brand{font-size:18px;gap:7px;letter-spacing:.6px}.brand span{font-size:16px}.brand i{width:5px;height:5px}.edition{margin-left:auto;font-size:7px;letter-spacing:1px;max-width:68px;line-height:1.5;text-align:right}.main-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:10px 12px calc(9px + var(--safe-area-bottom));background:#fffcf4f7;border-top:1px solid #e1e3e9;box-shadow:0 -7px 24px #2330570b}.main-nav button{font-size:16px;min-height:48px;padding:3px 5px 7px;min-width:0}.main-nav button span{font-size:7px;margin-top:4px}.main-nav button:after{height:3px;left:33%;right:33%;bottom:0}.showroom{display:flex;flex-direction:column;padding:0 21px;height:auto;min-height:0;max-height:none}.intro{padding:22px 0 0}.eyebrow{font-size:7px;letter-spacing:1px}h1{font-size:43px;line-height:1.17;letter-spacing:-2px;margin:17px 0 13px}h1 br{display:none}h1>span{display:block}.intro-copy{font-size:12px;letter-spacing:.7px}.intro-detail{display:none}.actions{margin-top:20px;gap:10px}.primary,.secondary{font-size:12px;padding:11px 21px;min-height:44px}.intro-note{font-size:8px;margin-top:17px}.stage{height:505px;margin:6px -15px 0;flex:none;overflow:hidden}.stage-label{top:14px;right:12px;gap:5px}.stage-label span{font-size:6px;letter-spacing:1px}.stage-label b{font-size:9px;padding:6px 10px}#studio{min-height:0;height:100%}.hotspot{font-size:13px;padding:7px 9px;min-height:40px;border-radius:7px;gap:3px;box-shadow:0 3px 0 #c6b38d,0 5px 12px #24324b18}.hotspot span{font-size:8px}.hotspot b{font-size:11px;margin-left:2px}.scene-caption{font-size:8px;bottom:6px;left:0;right:0;text-align:center}.quick-look{width:100%;display:flex;order:4;gap:14px;padding:17px 0 0;margin-top:22px;border-top-color:#ccd4e3}.quick-look img{width:58px;height:61px;border-radius:7px}.quick-look button{gap:10px}.quick-look button+button{padding-left:14px}.quick-look small{font-size:6px;letter-spacing:.6px}.quick-look strong{font-size:12px;margin:6px 0}.quick-look em{font-size:8px}.play-area{position:relative;right:auto;bottom:auto;margin-top:11px;justify-content:space-between;min-height:46px;order:3}.play-copy{display:flex;align-items:center;gap:12px}.play-copy button{font-size:10px;padding:4px 12px;min-height:44px;white-space:nowrap}.play-copy p{font-size:8px;line-height:1.6;margin:0;max-width:143px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}.dpad button{min-height:44px}.play-area:has(.dpad:not([hidden])) .play-copy{display:block}.play-area:has(.dpad:not([hidden])) .play-copy p{margin-top:7px}#game-keyboard{bottom:-18px;font-size:8px}footer{padding:24px 21px 10px;flex-wrap:wrap;gap:10px;font-size:7px}footer>span:last-child{width:100%}dialog{width:calc(100vw - 20px);max-height:85svh;border-radius:18px}.panel-head{padding:19px 18px;gap:10px}.panel-head h2{font-size:22px}.panel-head>div>span{font-size:8px}.close{font-size:10px;padding:8px 12px}.close b{margin-left:8px}.panel-scroll{padding:20px 18px;max-height:calc(85svh - 95px)}.panel-lead{font-size:12px}.category-tabs{margin:19px 0;gap:8px}.category-tabs button{padding:9px 19px;font-size:12px}.case-grid{grid-template-columns:1fr;gap:27px}.case-image img{height:auto;max-height:330px;object-fit:cover}.case-card h3{font-size:18px}.flow{grid-template-columns:1fr;gap:10px}.flow>div{padding:16px}.flow h3{display:inline-block;margin:0 0 7px 12px;font-size:14px}.flow p{font-size:11px}.timeline article{grid-template-columns:95px 1fr;gap:15px;padding:20px 0}.timeline time{font-size:10px}.timeline h3{font-size:15px}.timeline p{font-size:11px}.resume-top{display:block}.resume-top h3{font-size:28px}.resume-link{margin-top:22px;font-size:11px}.range-row{gap:10px;font-size:10px}.comparison{height:210px}.comparison b{font-size:17px}.comparison span{font-size:10px}.recent-item{font-size:13px;flex-direction:column;gap:8px}.recent-item span{font-size:10px}.contact-card{padding:24px}.contact-card h3{font-size:24px}.contact-card:after{font-size:38px;right:22px}.contact-card p{max-width:100%;font-size:12px}.contact-items{gap:15px}.contact-items p{font-size:13px}.lightbox-scroll{padding:12px;max-height:calc(85svh - 80px)}.lightbox-scroll p{font-size:10px}}
@media(max-width:370px){h1{font-size:38px}.stage{height:455px}.hotspot{font-size:12px;padding:6px 8px}.quick-look button{gap:8px}.quick-look img{width:48px;height:53px}.quick-look strong{font-size:11px}.quick-look em{font-size:7px}.edition{display:none}}
.category-icon{display:grid!important;place-items:center;width:44px;height:48px;border-radius:10px;font-size:29px;flex-shrink:0}.blue-icon{background:#d9e9ff;color:#0758f9}.orange-icon{background:#ffe7be;color:#d27914}.mint-icon{background:#d7f4e5;color:#258e65}.quick-look{width:170%}.quick-look button{gap:10px}.quick-look button>b{font-weight:400;font-size:15px;margin-left:auto;color:var(--blue)}.quick-look strong{font-size:16px}.quick-look button+button{padding-left:18px}.selected{margin:80px 3.5vw 25px;padding-top:35px;border-top:1px solid #d5d9e3}.selected-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}.selected-heading span{font-size:9px;color:var(--blue);letter-spacing:1.5px}.selected-heading h2{font-size:32px;margin-top:18px}.selected-heading p{font-size:12px;color:var(--muted);line-height:1.8}.selected-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.selected-grid button{padding:0;background:none;text-align:left}.selected-grid img{width:100%;height:250px;object-fit:cover;border-radius:15px}.selected-grid button>span{display:flex;justify-content:space-between;font-size:14px;padding-top:18px}.selected-grid b{color:var(--blue)}.placeholder-note{font-size:10px;color:var(--muted);margin-top:32px;line-height:1.8}#interact{border-radius:9px;background:#e9f1ff;border:1px solid #9eb9ee;padding:8px 12px;font-size:10px;max-width:140px;line-height:1.5}#interact:disabled{background:#f0efea;color:#9299a5;border-color:#dbdee5;cursor:default}kbd{font-family:inherit;font-size:11px;background:white;border:1px solid #a9bfdf;display:inline-grid;place-items:center;border-radius:4px;width:23px;height:23px;margin-right:4px}.play-area:has(.dpad:not([hidden])){bottom:6px}.play-area:has(.dpad:not([hidden])) .play-copy p{max-width:160px;line-height:1.5}.play-area:has(.dpad:not([hidden])) .play-copy button{min-height:36px}.stage-label{pointer-events:none}
@media(max-width:1100px) and (min-width:701px){.quick-look{width:180%;gap:12px}.quick-look button+button{padding-left:12px}.category-icon{width:35px;height:42px;font-size:23px}.quick-look small{font-size:6px}.quick-look strong{font-size:13px}.play-area{gap:8px}.play-copy p{max-width:130px}#interact{max-width:115px}.selected-grid img{height:200px}}
@media(max-width:700px){.quick-look{width:100%;gap:10px;margin-top:24px}.quick-look button{gap:7px;flex-direction:column;align-items:flex-start;position:relative}.quick-look button+button{padding-left:14px}.quick-look button>b{position:absolute;right:0;top:6px;font-size:14px}.quick-look strong{font-size:15px;margin:5px 0}.quick-look small{font-size:6px}.category-icon{width:43px;height:43px;font-size:25px}.selected{margin:55px 21px 20px;padding-top:27px}.selected-heading{display:block;margin-bottom:24px}.selected-heading span{font-size:8px;letter-spacing:.5px}.selected-heading h2{font-size:26px;margin-top:14px}.selected-heading p{font-size:11px;margin-top:16px}.selected-grid{grid-template-columns:1fr;gap:27px}.selected-grid img{height:240px;border-radius:12px}.selected-grid button>span{font-size:13px;padding-top:13px}.placeholder-note{font-size:9px;margin-top:25px}.play-area:has(.dpad:not([hidden])){bottom:auto;display:grid;grid-template-columns:1fr 140px;gap:10px}.play-area:has(.dpad:not([hidden])) .play-copy{grid-column:1;grid-row:1}.play-area:has(.dpad:not([hidden])) .play-copy p{max-width:170px}#interact{grid-column:1;grid-row:2;max-width:none;text-align:left;min-height:44px}.dpad{grid-column:2;grid-row:1/3}.stage{margin-top:7px}}
.header{position:sticky;top:0;background:#fffaf0f7}.no-js a{font-weight:bold}#scene-toast{position:absolute;z-index:6;bottom:150px;left:50%;transform:translateX(-50%);max-width:90%;background:#122554;color:white;border-radius:12px;padding:12px 18px;font-size:11px;line-height:1.6;text-align:center;box-shadow:0 8px 25px #1233} @media(max-width:700px){#scene-toast{bottom:30px;width:max-content;max-width:85%;font-size:10px}}
.hotspot{box-shadow:0 3px 0 #d8c29d,0 7px 16px #25355513;border:1px solid #fff;font-size:14px;border-radius:12px;padding:7px 12px;min-height:42px}.stage:before{background:radial-gradient(ellipse at 50% 73%,#d8e0fc20 0,transparent 65%)}.scene-caption{bottom:125px;font-size:9px;color:#747f90}
@media(max-width:700px){html{scroll-padding-bottom:100px;scroll-padding-top:12px}.header{position:relative;top:auto;background:var(--paper)}.main-nav{z-index:30;box-shadow:0 -2px 15px #3046780a;background:#fffcf4}.stage{height:490px;margin-top:18px;scroll-margin-top:10px}.stage-label{top:0;right:12px}.stage-label>span{display:none}.stage-label b{font-size:8px;padding:5px 9px}.hotspot{font-size:12px;padding:6px 9px;min-height:38px;box-shadow:0 3px 0 #d8c29d,0 5px 14px #26335513}.scene-caption{bottom:7px}.play-area{scroll-margin-bottom:95px}.play-area button,.selected-heading,.selected-grid button,.quick-look{scroll-margin-bottom:100px}.selected{margin-top:70px;padding-bottom:45px}.selected-heading{padding-top:6px}.selected-grid{gap:34px}.placeholder-note{line-height:1.9}#game-keyboard{display:none!important}.showroom:has(#play-toggle[aria-pressed=true])+.selected{margin-top:115px}.play-area:has(.dpad:not([hidden])){padding:12px 0 10px}.main-nav button{border-radius:9px}.main-nav button.active{background:#eef3ff}.main-nav button:after{display:none}.main-nav button span{margin-top:5px}}
#joystick{display:none}
@media(max-width:700px){.dpad{display:none!important}.play-area:has(#play-toggle[aria-pressed=true]){position:sticky;bottom:calc(78px + var(--safe-area-bottom));z-index:12;display:grid;grid-template-columns:108px 1fr 96px;grid-template-rows:28px 104px;gap:7px 14px;align-items:center;padding:10px 0;background:linear-gradient(0deg,#fffaf0 82%,#fffaf0eb);border-radius:17px}.play-area:has(#play-toggle[aria-pressed=true]) .play-copy{grid-column:1/4;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:14px}.play-area:has(#play-toggle[aria-pressed=true]) .play-copy button{min-height:28px;padding:4px 11px;font-size:9px;box-shadow:none}.play-area:has(#play-toggle[aria-pressed=true]) .play-copy p{font-size:8px;max-width:none;margin:0;line-height:1.6}#joystick{display:block;grid-column:1;grid-row:2;position:relative;width:104px;height:104px;border-radius:50%;background:#e8effb;border:1px solid #c1cfeb;box-shadow:inset 0 2px 7px #30457012,0 3px 0 #dae1ee;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;padding:0}.joystick-ring{position:absolute;inset:12px;border:1px dashed #b2c5e4;border-radius:50%}.joystick-knob{position:absolute;left:28px;top:28px;width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#fff,#d9e6fb);border:1px solid #fff;box-shadow:0 4px 8px #29498135,0 1px 0 #a9bfde;pointer-events:none;will-change:transform}.joystick-knob:after{content:'';position:absolute;inset:17px;border-radius:50%;background:#9ab6e6}#joystick[data-active=true] .joystick-knob{background:linear-gradient(145deg,#d9eaff,#a9c9ff)}#interact{grid-column:3;grid-row:2;width:88px;height:88px;min-height:88px;max-width:88px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center;padding:8px;font-size:10px;background:linear-gradient(145deg,#4387ff,#0758f9);color:white;border:1px solid #8fb7ff;box-shadow:0 4px 0 #0645c7,0 7px 15px #0758f920;touch-action:manipulation}#interact kbd{border:0;background:transparent;color:inherit;width:auto;height:auto;font-size:16px;margin:0;font-weight:bold}#interact span{max-width:70px;line-height:1.3}#interact:disabled{background:#edf0f5;border-color:#d8deea;color:#8390a5;box-shadow:0 3px 0 #d8dee8}#scene-toast{bottom:24px}.scene-caption{bottom:4px}.stage{height:490px}.selected-heading{scroll-margin-top:22px}.main-nav{height:calc(75px + var(--safe-area-bottom));padding-bottom:calc(8px + var(--safe-area-bottom))}}
@media(max-width:700px){#interact{touch-action:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Frozen-asset hybrid host: UI remains independent from WebGL. */
#studio{touch-action:pan-y;cursor:pointer}
#scene-load-status{position:absolute;left:12%;right:12%;top:46%;padding:18px;text-align:center;font-size:13px;line-height:1.8;border-radius:16px;background:#fffaf0ee;color:var(--muted);z-index:4;box-shadow:0 5px 30px #1834650b}
#play-toggle:disabled{opacity:.55;cursor:wait}
.stage-label{pointer-events:none}.scene-caption{pointer-events:none}
@media(min-width:701px){.stage .hotspot{font-size:11px;min-height:36px;padding:5px 9px}.stage .hotspot span{font-size:8px}.stage{overflow:visible}.scene-caption{bottom:90px;right:6%}}
@media(max-width:700px){.stage{height:510px}.stage .hotspot{font-size:10px;min-height:34px;padding:4px 7px;gap:3px}.stage .hotspot span{font-size:7px;margin-right:0}.stage .hotspot b{font-size:10px}.scene-caption{bottom:0;right:0;left:0;text-align:center;font-size:8px}#scene-load-status{font-size:11px}.placeholder-note{font-size:11px}}

#cat-walk-toggle{position:absolute;top:8px;left:8px;z-index:5;border-radius:30px;padding:8px 14px;font-size:11px;background:#fffaf0eb;border:1px solid #aac4ff;color:#0758f9;min-height:40px}#cat-walk-toggle[aria-pressed=true]{background:#0758f9;color:white}#cat-walk-toggle:disabled{opacity:.5;cursor:default}@media(max-width:700px){#cat-walk-toggle{font-size:9px;padding:6px 10px;top:0;min-height:34px}}

/* v03 mobile finish: reserve room above the fixed navigation without changing asset cameras. */
:root{--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-top:env(safe-area-inset-top,0px)}
@media(max-width:700px){
 body{padding-bottom:calc(80px + var(--safe-area-bottom))}
 .header{padding-top:calc(19px + var(--safe-area-top))}
 .stage #studio{height:calc(100% - 72px - 1.5 * var(--safe-area-bottom) - var(--safe-area-top))}
 .stage .hotspot{font-size:12px;min-height:44px;padding:6px 9px;gap:4px}
 .stage .hotspot span{font-size:8px}
 .stage .hotspot b{font-size:12px}
 .stage{scroll-margin-bottom:calc(99px + var(--safe-area-bottom))}
}

/* Four project entries; AI workflow is a first-class project, independent of game mode. */
.hotspot.workflow{color:#6436a4;background:#f4edff;border-color:#c5aff1;box-shadow:0 3px 0 #baa2dc,0 7px 16px #53326b15}
.workflow-icon{background:#eadfff;color:#6639a7}.selected-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-look{width:195%;gap:16px}.quick-look strong{font-size:15px}.workflow-cover{height:250px;border-radius:15px;background:linear-gradient(135deg,#e9deff,#f6f0ff 65%,#d6e6ff);padding:25px;display:flex;flex-direction:column;justify-content:space-between;color:#56338a}.workflow-cover small{font-size:9px;letter-spacing:1px}.workflow-cover strong{font-size:39px;line-height:1.1;letter-spacing:-1px}.workflow-cover em{font-size:11px;font-style:normal}.category-tabs{flex-wrap:wrap}.workflow-feature{background:#eee7fc;border-radius:16px;padding:28px;margin:25px 0}.workflow-feature small{font-size:10px;letter-spacing:1px;color:#704ca4}.workflow-feature h3{font-size:28px;margin:14px 0}.workflow-feature p,.workflow-grid p,.workflow-evidence p{font-size:13px;line-height:1.9;color:var(--muted)}.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.workflow-grid article{padding:22px;background:#fffdf7;border:1px solid #e1d9ed;border-radius:14px}.workflow-grid h3{font-size:17px;margin:14px 0 10px}.workflow-state{font-size:10px;color:#5b3a8b;background:#eee5fc;border-radius:20px;padding:6px 10px;display:inline-block}.workflow-evidence{margin-top:26px;border-top:1px solid var(--line);padding-top:6px}.workflow-evidence h3{font-size:16px;margin:20px 0 9px}
@media(min-width:701px) and (max-width:1100px){.quick-look{gap:10px;width:195%}.quick-look strong{font-size:12px}.quick-look small{font-size:5px}.quick-look button+button{padding-left:10px}.selected-grid{grid-template-columns:1fr 1fr}.workflow-cover{height:200px}}
@media(max-width:700px){.quick-look{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px}.quick-look button{padding:16px 10px;flex-direction:row;align-items:center;gap:10px;min-height:82px;border-bottom:1px solid #d7dcea}.quick-look button+button{padding-left:10px;border-left:0}.quick-look button:nth-child(even){border-left:1px solid #d7dcea}.quick-look button>b{position:static;margin-left:auto}.quick-look strong{font-size:13px}.quick-look small{font-size:6px}.category-icon{width:34px;height:38px;font-size:23px}.selected-grid{grid-template-columns:1fr}.workflow-cover{height:240px}.workflow-grid{grid-template-columns:1fr}.workflow-feature{padding:22px}.workflow-feature h3{font-size:25px}.category-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.category-tabs button{padding:10px 8px}.stage .hotspot.workflow{font-size:12px;padding:6px 9px}}

.point-controls{display:block;right:3%;bottom:18px;max-width:290px}.point-controls>p{font-size:11px;line-height:1.8;color:var(--muted)}.point-controls .marker-note{font-size:9px}#nearby-preview{display:block;position:relative;text-align:left;background:#fffaf0ee;border:1px solid #b8c9e6;border-radius:13px;padding:12px 45px 12px 14px;margin-top:10px;max-width:290px;box-shadow:0 4px 16px #28395112}#nearby-preview small{display:block;font-size:8px;color:var(--muted)}#nearby-preview strong{display:block;font-size:13px;margin:4px 0}#nearby-preview span{display:block;font-size:10px;line-height:1.6;color:var(--muted)}#nearby-preview b{position:absolute;right:10px;top:15px;font-size:10px;color:var(--blue)}.hotspot.nearby{outline:2px solid #749dff;outline-offset:3px}
@media(max-width:700px){.point-controls{position:relative;right:auto;bottom:auto;max-width:none;width:100%;margin:0;order:3}.point-controls>p{font-size:11px}.point-controls .marker-note{font-size:9px}#nearby-preview{width:100%;max-width:none;scroll-margin-bottom:calc(110px + var(--safe-area-bottom));}.scene-caption{bottom:5px}.quick-look{order:4}.stage{margin-bottom:4px}}