/* Quiet studio backdrop; the opening belongs to the ice, not explanatory UI. */
body{background:#e9eef1;color:#354148}
body,button{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','SF Pro Display','Microsoft YaHei',sans-serif}
body[data-project] #atmosphere{background:radial-gradient(ellipse at 46% 30%,#fafcfb,#e4ebef 75%);filter:none}
body[data-state="intro"] .atmosphere-layer,body[data-state="unlocking"] .atmosphere-layer{opacity:0}
.site-header{padding:20px 26px;gap:12px}.brand{font-size:11px;letter-spacing:1px;gap:9px}.brand-icon{display:none}.header-controls{gap:7px}
.unlock-button{padding:9px 15px;font-size:10px;letter-spacing:.4px;background:#ffffff55;box-shadow:none;backdrop-filter:blur(12px)}
.unlock-button>span{margin-left:0}.unlock-button>span:last-child{margin-left:10px}
#unlock .mobile-instruction{display:none}
body:not([data-state="intro"]):not([data-state="unlocking"]) #unlock{display:none}
.cube-label,.gesture-hint{display:none}
#cover{pointer-events:none}
#render-info{top:70px;bottom:auto!important;left:auto!important;right:16px;font-size:9px}
@media(max-width:759px){.site-header{padding:16px 14px;padding-top:max(16px,env(safe-area-inset-top));gap:8px}.brand{font-size:10px;white-space:nowrap}.header-controls{gap:5px}.header-controls .pill{padding:7px 8px;font-size:9px}.header-controls a{font-size:0!important;width:27px;height:27px;padding:0!important;display:grid;place-items:center}.header-controls a:after{content:'Aa';font-size:10px}.unlock-button{font-size:9px;padding:7px 10px}.header-controls #reduce{display:none}#gyro{max-width:54px}#render-info{top:58px}.brand-icon{display:none}}
@media(max-width:759px){#unlock .desktop-instruction{display:none}#unlock .mobile-instruction{display:inline}}

#ice-controls{position:fixed;top:76px;right:28px;z-index:30;font-size:12px;touch-action:pan-y}#ice-controls summary{cursor:pointer;list-style:none;width:max-content;margin-left:auto;padding:9px 16px;border:1px solid #fff9;border-radius:24px;background:#ffffff80;backdrop-filter:blur(20px)}.tuning-panel{width:290px;max-height:70svh;overflow:auto;margin-top:10px;padding:22px;border-radius:24px;background:#edf3f4ed;border:1px solid #fff;box-shadow:0 12px 60px #283a5620;backdrop-filter:blur(24px)}.tuning-panel label{display:grid;grid-template-columns:1fr 55px;gap:10px;margin-bottom:20px}.tuning-panel input{grid-row:2;width:100%;accent-color:#627690;touch-action:pan-x}.tuning-panel output{grid-row:2;text-align:right;font-variant-numeric:tabular-nums}.tuning-panel p{font-size:10px;line-height:1.8;color:#64708b}.tuning-panel>div{display:flex;gap:10px}
#detail{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.detail-hero,.detail-toolbar,.detail-bottom{text-shadow:0 1px 12px #fff}.detail-body{background:#f7faff99;backdrop-filter:blur(14px)}
@media(max-width:759px){#ice-controls{top:62px;right:15px}.tuning-panel{width:min(290px,calc(100vw - 30px))}}

body:is([data-project="0"],[data-project="1"]) .detail-hero,body:is([data-project="0"],[data-project="1"]) .detail-hero :is(h1,p,.eyebrow){color:#fff;text-shadow:0 2px 12px #0008}
body:is([data-project="0"],[data-project="1"]) .detail-toolbar{color:#fff;text-shadow:0 1px 8px #0008}

/* Bounded responsive overlays. Content scrolls inside its card when necessary. */
:root{--screen-h:100svh;--screen-w:100vw;--header-bottom:70px;--edge:clamp(12px,2vw,26px)}
html,body{inline-size:100%;max-inline-size:100%;block-size:var(--screen-h);overflow:hidden}
*,*:before,*:after{box-sizing:border-box}
.site-header{max-inline-size:100%;padding-inline:var(--edge);align-items:flex-start}.brand{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere}.header-controls{min-inline-size:0;justify-content:flex-end;flex-wrap:wrap}.pill,.round,.unlock-button{max-inline-size:100%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#ice-controls{top:calc(var(--header-bottom) + 8px);right:var(--edge);max-inline-size:calc(var(--screen-w) - 2*var(--edge))}
.tuning-panel{inline-size:min(320px,calc(var(--screen-w) - 2*var(--edge)));max-block-size:max(0px,calc(var(--screen-h) - var(--header-bottom) - 68px - env(safe-area-inset-bottom)));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:20px;border-radius:24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tuning-panel label{grid-template-columns:minmax(0,1fr) 58px}.tuning-panel input{min-inline-size:0}.tuning-panel>div{flex-wrap:wrap}.tuning-panel p{overflow-wrap:anywhere}
#gallery,#detail,#cover{inline-size:100%;block-size:var(--screen-h);max-inline-size:100%;overflow-x:clip}
#project-panel{left:52%;right:var(--edge);top:calc(var(--header-bottom) + 54px);bottom:84px;width:auto;height:fit-content;max-height:max(0px,calc(var(--screen-h) - var(--header-bottom) - 138px));margin-block:auto;transform:none;padding:clamp(18px,3vw,38px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border-radius:28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#project-panel>*{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere}#project-name{font-size:clamp(25px,3.2vw,42px);line-height:1.25;margin-block:18px 12px}#project-summary{max-inline-size:100%}.panel-footer{flex-wrap:wrap;gap:12px}.panel-heading{flex-wrap:wrap}#project-tags{margin-block:18px}.liquid-sheen,.atmosphere-layer{display:none}
.project-nav{max-inline-size:calc(var(--screen-w) - 2*var(--edge));bottom:max(12px,env(safe-area-inset-bottom));gap:clamp(10px,2vw,24px)}#active-cube{left:24.5%;top:51%;width:min(26vw,220px);height:min(34vh,220px)}
#detail{padding:calc(var(--header-bottom) + 26px) var(--edge) max(26px,env(safe-area-inset-bottom));overflow-y:auto}#detail>*{inline-size:100%;max-inline-size:860px;margin-inline:auto;overflow-wrap:anywhere}.detail-toolbar,.detail-bottom{flex-wrap:wrap;gap:14px}.detail-hero h1{font-size:clamp(30px,5vw,64px);letter-spacing:-.035em}.detail-body{padding:clamp(18px,3vw,36px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#render-info{max-inline-size:calc(var(--screen-w) - 2*var(--edge));max-block-size:calc(var(--screen-h) - var(--header-bottom) - 20px);overflow:auto}
@media(max-width:759px){.site-header{flex-wrap:wrap;gap:7px}.brand{flex:1 0 auto;white-space:normal}.header-controls{flex:1 1 auto}#project-panel{left:var(--edge);right:var(--edge);top:max(calc(var(--header-bottom) + 78px),calc(var(--screen-h)*.48));bottom:72px;height:auto;max-height:max(0px,calc(var(--screen-h)*.52 - 72px));margin:0;padding:20px;border-radius:24px}#active-cube{left:50%;top:29%;width:min(52vw,200px);height:min(26vh,200px)}.detail-toolbar{margin-bottom:28px}.detail-bottom{font-size:9px}}
@media(max-width:380px){.brand{flex-basis:100%}.header-controls{justify-content:flex-end;width:100%}}
@media(max-height:480px) and (min-width:760px){#project-panel{top:calc(var(--header-bottom) + 12px);bottom:58px;max-height:calc(var(--screen-h) - var(--header-bottom) - 70px);padding:16px}#project-name{font-size:26px;margin-block:10px}#project-tags{margin-block:10px}.panel-footer{padding-top:10px}.project-nav{bottom:8px}}

/* A soft viewport-edge shadow, with no reflective ground plane. */
#ice-floor-shadow{--floor-shadow-h:clamp(40px,10svh,110px);position:fixed;left:0;right:0;top:calc(var(--screen-h) - var(--floor-shadow-h));height:var(--floor-shadow-h);z-index:2;pointer-events:none;background:linear-gradient(to top,#26323e38,#26323e12 48%,transparent);opacity:1;transition:opacity .6s ease}
body:not([data-state="intro"]):not([data-state="unlocking"]) #ice-floor-shadow{opacity:0}
.tuning-panel .check-setting{grid-template-columns:minmax(0,1fr) 100px}.check-setting input{width:21px;height:21px;justify-self:start;touch-action:manipulation}.check-setting output{font-size:11px;align-self:center}.tuning-panel input:disabled{opacity:.4}
/* The rotating coloured interior stays visible around stable reading surfaces. */
#detail .detail-hero{padding:clamp(20px,3vw,32px);border:1px solid #ffffffc9;border-radius:26px;background:#f5f8fbf0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 40px #101c2c16}
body[data-project] #detail .detail-hero,body[data-project] #detail .detail-hero :is(h1,p,.eyebrow){color:#1d2b38;text-shadow:none}#detail .detail-hero .eyebrow{color:#445666}#detail #detail-deck{color:#34495b;font-size:clamp(16px,2vw,20px);line-height:1.75;margin-bottom:0}
#detail .detail-body{background:#f8fafcf5;box-shadow:0 10px 32px #10203012}#detail .detail-body :is(p,h2,.sample-note){color:#253747;text-shadow:none}#detail .detail-body p{line-height:1.9}#detail .detail-toolbar{color:#1d2b38;text-shadow:none}#detail .detail-toolbar :is(button,span){color:#1d2b38;background:#f5f8fbf2;text-shadow:none}.detail-toolbar>span{padding:8px 12px;border-radius:16px}#detail .detail-bottom{padding:18px;background:#f5f8fbeb;border-radius:18px;color:#26394a;text-shadow:none}

/* The outer glass card owns the rounded clip; only its content can scroll. */
#project-panel{display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto}
.project-panel-content{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:2px 7px 2px 2px;margin:-2px -2px 0;scrollbar-width:thin;scrollbar-color:#6b7e925c transparent;scrollbar-gutter:auto}
.project-panel-content::-webkit-scrollbar,.tuning-panel::-webkit-scrollbar,#detail::-webkit-scrollbar{width:5px;height:5px}.project-panel-content::-webkit-scrollbar-track,.tuning-panel::-webkit-scrollbar-track,#detail::-webkit-scrollbar-track{background:transparent}.project-panel-content::-webkit-scrollbar-thumb,.tuning-panel::-webkit-scrollbar-thumb,#detail::-webkit-scrollbar-thumb{background:#6b7e925c;border-radius:10px}.project-panel-content::-webkit-scrollbar-button,.tuning-panel::-webkit-scrollbar-button,#detail::-webkit-scrollbar-button{display:none}
#project-panel .panel-footer{flex:0 0 auto;min-width:0;margin-top:16px}.project-panel-content #project-tags{margin-bottom:12px}.project-panel-content:focus-visible{outline:2px solid #6082b8;outline-offset:-2px;border-radius:8px}.tuning-panel,#detail{scrollbar-width:thin;scrollbar-color:#6b7e925c transparent;scrollbar-gutter:auto}
.project-guide-link{display:inline-flex;align-items:center;gap:24px;max-width:100%;margin-top:8px;padding:13px 20px;border-radius:22px;background:#344c68;color:#fff;font-size:13px;line-height:1.5}.project-guide-link:focus-visible{outline:2px solid #6f91ba;outline-offset:4px}#detail .detail-body{margin-top:24px}#detail-intro{margin-top:0}
.header-controls .view-mode a{font-size:10px!important;width:auto;height:auto;display:inline-flex;padding:5px 9px!important}.header-controls .view-mode a:after{content:none}.view-mode{flex-shrink:0}