:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#293e3c;--paper:#f8f9eaf0;--ink:#293e3c;--line:#53675c30;--accent:#635583}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a9bb9c}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #785bc0;outline-offset:5px}button{border:0;background:transparent}#world{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}header{position:absolute;top:26px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.wordmark{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:10px;line-height:1.4;letter-spacing:2px;pointer-events:auto}.brand-orb{display:grid;place-items:center;width:36px;height:36px;border:1px solid #304b4a;border-radius:50%;background:#b99dde;font-size:28px}.tools{display:flex;gap:8px;pointer-events:auto}.pill,.segmented{background:var(--paper);border:1px solid #fff8;border-radius:30px;box-shadow:0 3px 12px #23352b08}.pill{padding:8px 13px;font-size:12px}.segmented{padding:3px;display:flex;gap:2px}.segmented button{padding:5px 10px;border-radius:25px;font-size:12px}.segmented button[aria-pressed=true]{background:#d9e6d3}.paper{background:var(--paper);border:1px solid #fff9;border-radius:14px;box-shadow:0 8px 40px #304a3920;backdrop-filter:blur(14px)}#welcome{position:absolute;left:3.8%;top:28%;width:260px;padding:24px}.eyebrow{display:block;letter-spacing:2px;font-size:9px;line-height:1.6;color:#67726a}h1{font:normal 30px/1.4 Georgia,"Songti SC",serif;letter-spacing:-1px;margin:16px 0}h1 em{font-style:normal}p{font-size:13px;line-height:1.9;margin:16px 0}.text-action{border-top:1px solid var(--line);width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px;text-align:left;font-size:13px}.text-action span{font-size:20px}.fine{font-size:10px;line-height:1.8;color:#697269;margin-bottom:0}#project-card{position:absolute;right:3%;top:27%;width:270px;padding:23px;animation:arrive .45s ease both}#project-card h2{font:normal 27px/1.25 Georgia,"Songti SC",serif;margin:12px 0}#project-card p{font-size:12px;line-height:1.85;margin:12px 0}#card-image{width:100%;height:116px;object-fit:cover;border-radius:5px}#card-image[src=""]{display:none}.tags{display:flex;gap:5px;flex-wrap:wrap}.tags span{font-size:9px;padding:4px 7px;background:#435f4910;border-radius:3px}.close{position:absolute;right:10px;top:7px;font-size:22px;color:#657267;padding:4px 8px}.close:hover{color:#392d58}.pending{display:block;font-size:10px;opacity:.65;text-align:center;margin-top:8px}footer{position:absolute;bottom:25px;left:32px;right:32px;display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none}footer>*{pointer-events:auto}.footer-note{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.6}.footer-note small{font-size:7px;letter-spacing:1.3px}.sparkle{font-size:25px}#project-nav{display:flex;background:var(--paper);border:1px solid #fff6;border-radius:40px;gap:3px;padding:6px;box-shadow:0 3px 20px #203d2a12}#project-nav button{font-size:11px;border-radius:30px;padding:11px 15px;transition:background .2s}#project-nav button:hover,#project-nav button.active{background:#bdcec1}#project-nav b{font-size:9px;opacity:.55;margin-right:7px;font-weight:normal}.view-tools{display:flex;gap:8px}.view-tools button{background:var(--paper);border-radius:20px;padding:10px 13px;font-size:11px}#tooltip{position:fixed;pointer-events:none;padding:7px 12px;background:var(--paper);border-radius:20px;font-size:11px}#toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);background:#243b36dd;color:#fff;padding:12px 20px;border-radius:30px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}#toast.show{opacity:1}dialog{border:1px solid #fff8;border-radius:15px;background:#f3f5e8;color:var(--ink);padding:36px;max-width:min(780px,90vw);max-height:85vh;box-shadow:0 30px 120px #142c3b66}dialog::backdrop{background:#172f3644;backdrop-filter:blur(8px)}dialog h2{font:normal 38px/1.3 Georgia,"Songti SC",serif;margin:12px 0}dialog p{font-size:15px}dialog img{width:100%;max-height:40vh;object-fit:cover;border-radius:8px}dialog .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}dialog .gallery img{height:200px}.detail-actions{display:flex;gap:12px;flex-wrap:wrap}.detail-actions a,.detail-actions button{background:#dce7d7;border-radius:20px;padding:12px 20px;font-size:13px;text-decoration:none;color:inherit}.detail-actions button:disabled{opacity:.5;cursor:default}#loader{position:fixed;inset:0;z-index:50;background:#f4f4e8;display:grid;align-content:center;justify-items:center;transition:opacity .6s}.loading-orb{font-size:65px;color:#749f85;animation:turn 3s linear infinite}#loader p{font-size:12px;letter-spacing:2px}.loaded #loader{opacity:0;pointer-events:none}#fallback{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:var(--paper);padding:30px;max-width:80vw}body.reference .wordmark,body.reference .footer-note,body.reference #project-nav{visibility:hidden}body.reference #welcome{width:215px;padding:21px}body.reference h1{font-size:29px;line-height:1.15;letter-spacing:-1px}body.reference #welcome p{font-family:Georgia,serif;font-size:11px}body.reference #welcome .eyebrow{font-size:7px}body.reference header{top:15px;right:17px}body.reference .pill,body.reference .segmented button{font-size:10px}body.reference .view-tools{opacity:.65}body.night{--paper:#eff5e9ee}body.night .wordmark,body.night .footer-note{color:#e6f5d8}body.night .brand-orb{color:#293e3c} [hidden]{display:none!important}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes turn{to{transform:rotate(360deg)}}@media(max-width:800px){header{top:18px;left:18px;right:18px}.wordmark{font-size:8px;letter-spacing:1px;gap:8px}.brand-orb{width:30px;height:30px;font-size:24px}.tools{gap:5px}.pill{padding:7px 9px}.segmented button{padding:5px 7px}.pill span{display:none}#welcome{left:20px;top:auto;bottom:112px;width:230px;padding:20px}h1{font-size:27px}#project-card{top:auto;bottom:112px;right:20px;left:20px;width:auto;max-height:55vh;overflow:auto;padding:20px}#card-image{float:right;width:36%;height:90px;margin:0 0 8px 15px}#project-card h2{font-size:25px;margin:8px 0}#project-card p{max-width:95%;font-size:12px}footer{bottom:17px;left:15px;right:15px;flex-wrap:wrap;gap:10px}.footer-note{display:none}.view-tools{position:absolute;right:0;bottom:62px}#project-nav{width:100%;justify-content:space-between;padding:5px}#project-nav button{padding:12px 8px;font-size:10px}#project-nav b{display:none}#help-dialog{padding:28px}dialog{padding:26px;max-width:94vw}dialog h2{font-size:30px}dialog .gallery{grid-template-columns:1fr}.view-tools button{font-size:10px}body.reference #welcome{bottom:110px}#toast{bottom:120px;width:max-content;max-width:90vw;text-align:center}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body:not(.reference) #welcome{width:280px}body:not(.reference) #welcome p{font-size:14px}body:not(.reference) #welcome .fine{font-size:11px}body:not(.reference) .eyebrow{font-size:10px}body:not(.reference) #project-card{width:300px}body:not(.reference) #project-card p{font-size:14px}body:not(.reference) #project-card h2{font-size:30px}body:not(.reference) .tags span{font-size:11px}body:not(.reference) .text-action{font-size:14px}body:not(.reference) #project-nav button{font-size:13px}body:not(.reference) #project-nav b{font-size:10px}body:not(.reference) .pill,body:not(.reference) .segmented button{font-size:13px}body:not(.reference) #card-image{height:125px}.wordmark{font-size:11px}.view-tools button{font-size:12px}#help-dialog p{font-size:16px}#card-kicker{padding-right:16px}body.reference #welcome .fine{font-size:10px}@media(max-width:1150px){.footer-note{display:none}}@media(max-width:800px){body:not(.reference) #welcome{width:240px}body:not(.reference) #project-card{width:auto}body:not(.reference) #project-card h2{font-size:25px}body:not(.reference) #project-card p{font-size:13px}body:not(.reference) #card-image{height:90px}body:not(.reference) #project-nav button{font-size:12px;padding:12px 7px}.wordmark{font-size:8px}body:not(.reference) .pill,body:not(.reference) .segmented button{font-size:12px}}
body.reference #welcome{padding:21px;top:26%;}body.reference #welcome h1{margin:12px 0;font-size:28px}body.reference #welcome h1 em{font-style:italic}body.reference #welcome p{margin:13px 0}body.reference #welcome .fine{margin-bottom:0}body.reference #project-card{width:235px;padding:19px;top:38%;right:1.3%}body.reference #project-card h2{font-size:20px;line-height:1.15;margin:8px 0}body.reference #project-card p{font:12px/1.5 Georgia,serif;margin:10px 0}body.reference #card-kicker{font-size:8px}body.reference #card-links{font-size:8px;text-align:center;opacity:.6;padding-top:10px}body.reference .text-action{font-family:Georgia,serif}body.reference #project-card .text-action{padding-top:11px;font-size:12px}
/* The video UI scales with its 960 × 540 stage; the Chinese portfolio keeps normal readable controls. */
@media(min-width:801px){
body.reference #welcome{width:14.8vw;padding:1.3vw;left:3.8%;top:26%;border-radius:.8vw}
body.reference #welcome .eyebrow{font-size:.43vw;letter-spacing:.12vw}
body.reference #welcome h1{font-size:2.08vw;line-height:1.04;margin:.85vw 0 1.1vw}
body.reference #welcome p{font-size:.73vw;line-height:1.72;margin:.95vw 0}
body.reference #welcome .fine{font-size:.66vw;margin-top:1.25vw}
body.reference #welcome .text-action{font-size:.8vw;padding:1.2vw 0 0}
body.reference .text-action span{font-size:1.1vw}
body.reference header{top:1vw;right:1vw}
body.reference .tools{gap:.55vw}
body.reference .pill{font-size:.53vw;padding:.34vw .7vw}
body.reference .segmented{padding:.15vw}
body.reference .segmented button{font-size:.53vw;padding:.2vw .5vw}
body.reference #help{display:none}
body.reference #project-card{width:16.4vw;padding:1.2vw;border-radius:.8vw}
body.reference #project-card h2{font-size:1.3vw;margin:.6vw 0}
body.reference #project-card p{font-size:.78vw;margin:.7vw 0}
body.reference #card-kicker{font-size:.45vw;letter-spacing:.12vw}
body.reference .tags span{font-size:.47vw;padding:.3vw .4vw}
body.reference #project-card .text-action{font-size:.78vw;padding-top:.8vw}
body.reference #card-links{font-size:.42vw;padding-top:.75vw}
body.reference .close{font-size:.95vw;right:.3vw;top:.2vw;padding:.2vw .4vw}
}

@media(min-width:801px){body.reference #welcome p{font-size:.66vw;line-height:1.6;margin:.8vw 0}body.reference #welcome .fine{margin-top:.9vw}body.reference #welcome .text-action{padding-top:.85vw}body.reference #welcome h1{margin:.75vw 0 .9vw}}

@media(min-width:801px){
body.reference::before,body.reference::after{position:absolute;right:1.3vw;font:500 .46vw/1.7 Georgia,serif;letter-spacing:.12vw;white-space:pre;pointer-events:none;color:#40564a9c}
body.reference::before{content:'A BRIGHTER TOMORROW\A SOMEWHERE HERE';top:5.6vw}
body.reference::after{content:'ART · IDEAS · PEOPLE\A ANYWHERE';bottom:1.9vw}
body.reference .view-tools{opacity:0;transition:opacity .2s}
body.reference .view-tools:hover,body.reference .view-tools:focus-within{opacity:1}
body.reference.night::before,body.reference.night::after{color:#eef6db9c}
}

#reference-placeholder{display:none}
@media(min-width:801px){
body.reference #reference-placeholder{display:flex;float:left;width:4.45vw;height:6.6vw;margin:0 .85vw .55vw 0;border-radius:.2vw;background:linear-gradient(130deg,#dbe6e3,#dddccb);align-items:end;padding:.5vw;color:#677569;font:.43vw/1.35 Georgia,serif;letter-spacing:.035vw}
body.reference #project-card{padding:.95vw;width:16.4vw;top:38.3%;border-radius:.8vw}
body.reference #project-card h2{font-size:1.05vw;line-height:1.13;margin:.4vw 0}
body.reference #project-card p{font-size:.69vw;line-height:1.4;margin:.4vw 0 .5vw}
body.reference #card-kicker{font-size:.43vw;letter-spacing:.08vw}
body.reference #project-card .tags{gap:.2vw}
body.reference #project-card .tags span{font-size:.4vw;padding:.17vw .25vw}
body.reference #project-card .text-action{clear:both;justify-content:center;position:relative;background:#70847505;border-top:0;border-radius:.3vw;padding:.5vw 0;font-size:.83vw}
body.reference #project-card .text-action span{position:absolute;right:.35vw;font-size:.7vw}
body.reference #card-links{font-size:.4vw;padding-top:.5vw}
}

body.reference{color:#30382d}

.reference-loading-globe{display:none}.reference-loading #loader{background:#f4f4e8}.reference-loading .reference-loading-globe{display:block;width:100px;height:100px;object-fit:contain}.reference-loading #loader .loading-orb,.reference-loading #loader p{display:none}

@media(min-width:801px){body.reference #welcome .text-action{padding-top:1.15vw}body.reference #welcome .fine{margin-top:1.05vw}}

/* Keep portfolio panels between the header and navigation, including short windows. */
body:not(.reference){--portfolio-panel-top:clamp(96px,20vh,180px);--portfolio-panel-bottom:100px}
body:not(.reference) #welcome,body:not(.reference) #project-card{
 top:var(--portfolio-panel-top);max-height:calc(100vh - var(--portfolio-panel-top) - var(--portfolio-panel-bottom));
 max-height:calc(100dvh - var(--portfolio-panel-top) - var(--portfolio-panel-bottom));
 overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#83927b transparent;
}
body:not(.reference) #project-card>.close{
 position:sticky;top:0;float:right;z-index:1;margin:-12px -10px 0 6px;
 background:var(--paper);border-radius:50%;line-height:1;
}
@media(max-height:650px){
 body:not(.reference) #welcome,body:not(.reference) #project-card{padding:18px}
 body:not(.reference) #welcome h1{font-size:26px;line-height:1.2;margin:10px 0}
 body:not(.reference) #welcome p{font-size:13px;line-height:1.7;margin:10px 0}
 body:not(.reference) #welcome .fine{font-size:10px;line-height:1.6;margin-top:12px}
 body:not(.reference) #welcome .text-action{padding-top:12px}
 body:not(.reference) #project-card h2{font-size:25px;margin:8px 0}
 body:not(.reference) #project-card p{font-size:13px;line-height:1.7;margin:10px 0}
 body:not(.reference) #card-image{height:100px}
}
@media(max-height:500px){body:not(.reference){--portfolio-panel-top:78px;--portfolio-panel-bottom:96px}}
@media(max-width:800px){
 body:not(.reference) #welcome,body:not(.reference) #project-card{
  top:auto;bottom:128px;max-height:calc(100vh - 218px);max-height:calc(100dvh - 218px);
 }
 body:not(.reference) #card-image{height:90px}
}
@media(max-width:360px){body:not(.reference) .wordmark>span:last-child{display:none}}

/* Nano Banana authored panel and icon artwork; text and controls remain semantic HTML. */
body:not(.reference) .paper,body:not(.reference) dialog{background:transparent;border-image:url('assets/nanobanana/ui-panel.webp') 230 fill / 38px stretch;box-shadow:none;border-radius:18px;}
body:not(.reference) #project-nav,body:not(.reference) .pill,body:not(.reference) .segmented,body:not(.reference) .view-tools button{background:transparent;border-image:url('assets/nanobanana/ui-panel.webp') 230 fill / 18px stretch;box-shadow:none;}
img.ui-icon{width:24px;height:24px;max-height:none;object-fit:contain;border-radius:0;vertical-align:middle;flex-shrink:0;}
.tools button,.view-tools button{display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.brand-orb{background:transparent!important;border:0!important;}.brand-orb .ui-icon{width:36px;height:36px;}.loading-orb .ui-icon{width:68px;height:68px;}
.close .ui-icon{width:22px;height:22px;}body:not(.reference) .close{background:transparent;}
.art-caption{display:block;font-size:10px;line-height:1.5;opacity:.64;margin:5px 0;}body.reference .art-caption{display:none;}
body:not(.reference) #mode{display:none;}body:not(.reference) .text-action .ui-icon{width:24px;height:24px;}
@media(max-width:800px){img.ui-icon{width:21px;height:21px;}.brand-orb .ui-icon{width:30px;height:30px;}body:not(.reference) .paper{border-image-width:30px;}.tools button{gap:3px;}}

/* Warm fantasy palette, keeping the Nano Banana paper and icon artwork. */
body:not(.reference){--ink:#55425e;--line:#9b82a32e;color:#55425e;background:#eed6e8}body:not(.reference) .segmented button[aria-pressed=true]{background:#eedbea}body:not(.reference) #project-nav button:hover,body:not(.reference) #project-nav button.active{background:#e5cfe4}body:not(.reference) .tags span{background:#b790bd1c}body:not(.reference) .detail-actions button{background:#ead9e6}body:not(.reference) .fine,body:not(.reference) .eyebrow{color:#807084}body:not(.reference).night{--paper:#fff3edee}body:not(.reference).night .wordmark,body:not(.reference).night .footer-note{color:#fff0df}

/* Portrait gameplay promo, contained within the existing scrollable detail dialog. */
#detail-dialog .project-video{margin:20px 0 28px;text-align:center;max-width:100%}
.project-video video{display:block;width:auto;max-width:100%;height:min(54vh,560px);aspect-ratio:9/16;object-fit:contain;margin:0 auto;background:#f8f0de;border-radius:10px}
.project-video .promo-play{display:block;margin:12px auto;padding:11px 20px;border-radius:24px;background:#ded0e8;color:#44344f;font-size:14px}
.project-video .promo-caption{font-size:11px;line-height:1.7;margin:10px 0}
.promo-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:12px}
.promo-links a{color:inherit;text-underline-offset:3px}
@media(max-width:600px){.project-video video{height:min(52vh,480px)}#detail-dialog .project-video{margin-top:12px}}
#detail-dialog>#close-dialog{position:sticky;top:0;float:right;z-index:4;width:38px;height:38px;margin:-14px -14px 0 8px;padding:6px;background:var(--paper);border-radius:50%}

.project-downloads{margin:22px 0 28px;padding:22px;background:#ead9e666;border:1px solid #b790bd55;border-radius:16px}
.project-downloads h3{margin:0;font-size:20px;font-weight:500}.project-downloads .release-version{margin:6px 0 16px;font-size:12px;color:#807084}
.download-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.download-options a{display:flex;flex-direction:column;gap:6px;padding:18px;background:#71577e;color:#fff8ef;border-radius:12px;text-decoration:none}.download-options a:hover{background:#5e456c}.download-options strong{font-size:15px;font-weight:500}.download-options span{font-size:11px;opacity:.9}
.project-downloads .download-help{font-size:12px;margin:16px 0 8px}.project-downloads .download-notes{font-size:11px;color:#807084;margin:8px 0}.release-links{display:flex;gap:18px;flex-wrap:wrap;font-size:11px}.release-links a{color:inherit;text-underline-offset:3px}
@media(max-width:480px){.project-downloads{padding:16px}.download-options{grid-template-columns:1fr}.download-options a{padding:14px}}

.project-video.landscape video{width:min(100%,96vh);height:auto;aspect-ratio:16/9}

#card-links:has(a){opacity:1;margin:12px 0 0;text-align:left}#card-links a{display:block;padding:12px 16px;border-radius:12px;background:#71577e;color:#fff8ef;text-decoration:none;font-size:13px;text-align:center}#card-links a:hover{background:#5e456c}body:not(.reference) .detail-actions a{background:#71577e;color:#fff8ef}

.play-note{display:block;font-size:11px;line-height:1.6;color:#807084;margin:8px 0 0}#detail-dialog p.play-note{font-size:11px}

.download-options.three-platforms{grid-template-columns:repeat(3,minmax(0,1fr))}.download-options.three-platforms strong{font-size:14px}@media(max-width:700px){.download-options.three-platforms{grid-template-columns:1fr}}