/* unified.css */
/* One environment: the original light curtain with water and a receding stage. */
:root{--retreat:0;--scene-scale:1;--scene-opacity:1;--scene-dim:0}
body{background:#040b16}
html.lezel-home,html.lezel-home body{overscroll-behavior-y:none}
body .hero{overflow:visible;isolation:auto;position:relative;height:100svh;min-height:600px;z-index:0}
.unified-stage{position:fixed;inset:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;transform:scale(1);transform-origin:50% 47%;opacity:var(--scene-opacity);will-change:transform,opacity}
.unified-stage{mask-image:linear-gradient(transparent,#000 3% 96%,transparent),linear-gradient(90deg,transparent,#000 3% 97%,transparent);mask-composite:intersect}
.unified-stage{--hero-content-drop:20px}
.unified-stage{overflow:clip;touch-action:pan-y pinch-zoom}
.unified-stage :is(.world-title,.keyvisual,.spatial-nav,.hero-socials,.scroll-cue,.scene-words){translate:0 var(--hero-content-drop)}
.unified-stage .keyvisual,.unified-stage .keyvisual img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
@media(max-width:700px){.unified-stage{--hero-content-drop:18px}}
@media(max-width:700px) and (max-height:700px){.unified-stage{--hero-content-drop:12px}}
@media(orientation:landscape) and (max-height:550px){.unified-stage{--hero-content-drop:6px}}
.scene-shade{position:absolute;inset:0;background:#030916;opacity:0;pointer-events:none;z-index:12;will-change:opacity}
.unified-stage .world-background{transform:none!important;transition:none!important}
/* Preserve the full-resolution curtain; blend the animated pass in at the waterline. */
.unified-water{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mask-image:linear-gradient(to bottom,transparent var(--water-surface-start,60%),#000 var(--water-surface-line,64%),#000 90%,transparent 100%)}
.unified-bubbles{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.unified-stage :is(.unified-bubbles,.bubbles,.particles){-webkit-mask-image:var(--menu-effect-mask,none);mask-image:var(--menu-effect-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.unified-stage .bubbles{z-index:4;transform:none;transition:none}
/* WebGL owns the visible bubbles; their hidden CSS fallback need not animate. */
.glass-active .bubbles i{visibility:hidden;animation-play-state:paused}
.unified-stage .water-ripples{visibility:hidden!important;opacity:0!important}
.unified-stage .bubbles i{animation-name:unified-bubble-drift;animation-duration:16s}
@keyframes unified-bubble-drift{0%,100%{translate:0 30px}50%{translate:7px -40px}}
body .depth{position:relative;z-index:2;background:transparent;padding-top:100px}
.depth:before{display:none}
.depth>.section{position:relative;margin:0 auto 80px;padding:56px 60px;background:linear-gradient(125deg,#1b304746,#080f20c9);border:1px solid #aec7e033;box-shadow:0 25px 70px #0003;backdrop-filter:blur(16px);border-radius:3px}
.depth>.section:before{content:'';position:absolute;top:0;left:12%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#e5f4ff70,transparent)}
.depth .section-heading h2{font-size:clamp(36px,4.2vw,58px);letter-spacing:.1em}
.depth .section-heading{border-bottom:1px solid #bacce72a;padding-bottom:26px;margin-bottom:32px}
.depth .eyebrow{letter-spacing:.17em}
.depth .news-item{background:none}
.depth .profile-section{padding-top:65px;padding-bottom:65px}
.scroll-cue{gap:16px!important;font-size:10px!important;letter-spacing:.18em}
.scroll-cue i{position:relative;height:40px!important;overflow:hidden;border:0!important;background:#bfdef328;width:1px!important}
.scroll-cue i:after{content:'';position:absolute;left:0;width:1px;height:17px;background:#d9f1ff;box-shadow:0 0 8px #c9e9ff;animation:explore-travel 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes explore-travel{0%{transform:translateY(-18px)}70%,100%{transform:translateY(45px)}}
@media(max-width:700px){body .hero,.unified-stage{min-height:600px}.depth>.section{padding:30px 22px;margin-bottom:34px}.depth .section-heading h2{font-size:34px}.depth .section-heading{gap:12px}.depth .section-heading .text-link{font-size:11px}.scroll-cue{font-size:8px!important}.depth>.profile-section{padding:36px 24px}}
.motion-off .unified-stage{transform:none;will-change:auto}
.motion-off .hero .keyvisual img{opacity:1!important}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .scroll-cue i:after{transform:translateY(10px)}
.unified-heading{position:relative;flex-wrap:wrap}
.unified-heading .signal-number{display:block;flex-basis:100%;font:10px var(--serif);letter-spacing:.24em;color:#b6c9df;margin-bottom:24px}
.unified-heading .world-subtitle{flex-basis:100%;font:14px/1.8 var(--jp);letter-spacing:.13em;color:#b3c3d7;margin:16px 0 0}
/* Stack English above Japanese along one unbroken vertical axis. */
.scene-words{position:absolute;right:3.7%;top:calc(50% - var(--hero-content-drop));margin:0;width:max-content;writing-mode:horizontal-tb;display:flex;flex-direction:column;gap:24px;align-items:center;transform:translateY(-50%);z-index:8;color:#bacbde;font-size:10px;letter-spacing:.19em;opacity:.68;pointer-events:none}
.scene-words>span{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;flex:0 0 auto;line-height:1.5}
.scene-words>span:first-child{font:9px/1.5 var(--serif);letter-spacing:.24em}
@media(min-width:701px) and (max-height:550px){.scene-words{font-size:clamp(6px,1.4svh,8px);letter-spacing:.12em;gap:18px}.scene-words>span:first-child{font-size:clamp(5px,1.2svh,7px);letter-spacing:.16em}}
.unified-media-tabs{display:flex;align-items:center;gap:32px;margin:0 0 26px;padding-bottom:0;border-bottom:1px solid #aec8e129}
.unified-media-tabs button{position:relative;font:18px var(--serif);letter-spacing:.16em;padding:15px 2px;color:#8697ac;background:none;border:0;cursor:pointer}
.unified-media-tabs button:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;transform:scaleX(0);background:#d1e7fb;transition:transform .4s;box-shadow:0 0 10px #b7ddff99}
.unified-media-tabs button[aria-selected=true]{color:#eef6ff}
.unified-media-tabs button[aria-selected=true]:after{transform:scaleX(1)}
[role=tabpanel][hidden]{display:none!important}
.unified-media-tabs+[role=tabpanel]{min-height:240px}
[role=tabpanel].music-videos{margin-top:0;padding-top:0;border-top:0}
html.heading-entry-pending .inner-shell>.page-heading.unified-heading :is(.signal-number,.eyebrow,h1,h2,.world-subtitle),.decode-pending{opacity:0}
.text-decoding{position:relative}
.text-decoding>.decode-original,.text-decoding>.decode-overlay{font:inherit!important;letter-spacing:inherit!important;text-transform:inherit}
.text-decoding .decode-original{opacity:0}
.decode-overlay{position:absolute;inset:0;color:#d5e7ff;text-shadow:1px 0 #c4bffa88,-1px 0 #8fbadd66;overflow:hidden;pointer-events:none}
.news-window-story .decode-overlay{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}
.inner-page .ocean-world{background:linear-gradient(#030813aa,#030813f2),var(--lezel-environment) center/cover}
/* Attenuate only the reflected floor, leaving the upper fabric/light intact. */
html body.inner-page .ocean-world{background-image:linear-gradient(to bottom,transparent var(--page-waterline,68vh),#030e1c99 calc(var(--page-waterline,68vh) + 10vh),#030e1cee 100%),linear-gradient(#030813aa,#030813f2),var(--lezel-environment);background-size:100% 100%,100% 100%,var(--menu-environment-size,cover);background-position:0 0,0 0,var(--menu-environment-position,center);background-repeat:no-repeat}
.lezel-home .header-nav .header-link{text-shadow:0 1px 3px #030e1c,0 0 6px #030e1ccc}
body.inner-page .inner-shell{width:calc(100% - 112px);max-width:1160px;margin:140px auto 90px;padding:58px 60px;background:linear-gradient(125deg,#18273f9c,#090f1bd9);backdrop-filter:blur(16px);border:1px solid #b6cbe538;box-shadow:0 25px 80px #0005;border-radius:3px}
.inner-shell .page-heading{padding-bottom:32px;margin-bottom:34px;border-bottom:1px solid #b4c4df33}
.inner-shell .page-heading h1{font-size:clamp(34px,5vw,62px);letter-spacing:.12em;font-weight:400;margin:10px 0}
.inner-shell .page-heading .signal-number{margin-bottom:18px}
.inner-shell .page-heading .world-subtitle{margin-top:18px}
/* Keep line boxes stable while fonts load; decoding only changes an overlay. */
.inner-shell .page-heading h1{line-height:1.2;min-block-size:1.2em}
.inner-shell .page-heading .signal-number{line-height:1.2;min-block-size:1.2em}
.inner-shell .page-heading .eyebrow{line-height:1.8;min-block-size:1.8em}
.inner-shell .page-heading .world-subtitle{min-block-size:1.8em}
.inner-shell .bio .profile-portrait{width:100%;height:auto;max-height:640px;object-fit:contain;object-position:top;padding:22px 12px;border:1px solid #c5d6ed26;background:#21304825}
.inner-shell .bio{align-items:start;grid-template-columns:minmax(0,1fr);gap:42px}
.profile-artwork-link{display:block;width:min(100%,620px);justify-self:center;cursor:zoom-in}
.profile-artwork-link:focus-visible{outline:1px solid #d7e9f6;outline-offset:5px}
.profile-artwork-link.music-pointer-return:focus{outline:none}
@media(min-width:701px){.inner-shell .bio .profile-portrait{max-height:none;padding:14px 8px}}
.inner-shell .full-bio{margin-top:0}
/* The portrait now sits above the biography: give the prose its own measure. */
.inner-shell .profile-biography{width:min(100%,52rem);justify-self:center;min-width:0}
.inner-shell .profile-biography .full-bio{white-space:normal}
.inner-shell .full-bio>.bio-paragraph{display:block;white-space:normal;text-wrap:balance;margin-bottom:1.6em}
.inner-shell .full-bio>.bio-paragraph:last-child{margin-bottom:0}
.inner-shell .full-bio .bio-text-unit{white-space:nowrap}
.inner-shell .catalogue{gap:35px 28px}
.inner-shell .catalogue-filters{flex-wrap:wrap}
.footer{position:relative;z-index:2}
.intro-running{overflow:hidden!important}
.unified-opening{position:fixed;inset:0;z-index:9999;background:#000000;display:grid;place-items:center;opacity:1;transition:opacity .9s ease}
.unified-opening[hidden]{display:none!important}
.unified-opening.leaving{opacity:0;pointer-events:none}
.unified-opening .opening-still{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:auto;opacity:1;transition:opacity .25s}
/* Supplied 1080p film uses a 1.8x larger mark. Match the old visible logo bounds and center at every responsive width without re-encoding. */
.unified-opening .opening-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(-0.46875%,-1.394033%) scale(.555555556);width:min(1500px,240vw);max-width:none;height:auto;mix-blend-mode:screen;filter:none;opacity:0;mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%)}
.unified-opening.video-playing .opening-video{opacity:1}
.unified-opening.video-playing .opening-still{opacity:0}
.opening-caption{position:absolute;top:calc(50% + 156px);font:10px var(--serif);letter-spacing:4px;color:#aebdd4}
.skip-intro{position:absolute;right:5%;bottom:34px;color:#c4d2e5;font:12px var(--serif);letter-spacing:2px;padding:16px 0;background:none;border:0;border-bottom:1px solid #b5d3f33a;cursor:pointer}
@media(max-width:1050px){body.inner-page .inner-shell{margin-top:140px;padding:40px;width:calc(100% - 70px)}}
@media(max-width:700px){body.inner-page .inner-shell{width:calc(100% - 28px);margin:105px auto 100px;padding:30px 22px}.inner-shell .bio{grid-template-columns:1fr;gap:28px}.inner-shell .bio .profile-portrait{height:370px;max-width:300px;margin:auto}.inner-shell .page-heading h1{font-size:36px}.scene-words{display:none}.unified-media-tabs{gap:28px}.unified-media-tabs button{font-size:16px}.unified-heading .world-subtitle{font-size:12px}.unified-heading .signal-number{font-size:9px;margin-bottom:16px}.opening-still{width:100px!important}.opening-caption{top:calc(50% + 128px);font-size:9px}.footer{padding-bottom:80px}}
@media(max-width:700px){.unified-stage .hero-socials{bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}.unified-stage .spatial-nav{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}.social-dock{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}.unified-stage .scroll-cue{display:flex!important;left:auto!important;right:15px!important;bottom:calc(32px + env(safe-area-inset-bottom,0px))!important;transform:none;height:28px!important}.unified-stage .scroll-cue span{display:none}.unified-stage .scroll-cue i{height:28px!important}}
@media(max-width:700px){body .hero,.unified-stage{min-height:0}.unified-stage .keyvisual{max-height:calc(80% - 180px - env(safe-area-inset-bottom,0px))}}
@media(max-width:700px) and (max-height:700px){.unified-stage .keyvisual{max-height:calc(79% - 180px - env(safe-area-inset-bottom,0px))}}
/* Portrait phones: use the space above the lower menu without cropping the wings.
   Menu/SNS touch areas remain separate; labels sit gently lower inside their rows. */
@media(max-width:700px) and (orientation:portrait){
 .unified-stage .keyvisual{height:60%;max-width:100%;max-height:calc(80% - 156px - env(safe-area-inset-bottom,0px))}
 .unified-stage .spatial-nav{bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;padding-block:0}
 .unified-stage .spatial-nav a{height:44px;padding-top:12px;padding-bottom:0}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 .unified-stage .keyvisual{max-height:calc(79% - 156px - env(safe-area-inset-bottom,0px))}
}
/* A single, movable pane of glass. Its title bar owns dragging; the story remains a normal link. */
.news-window{position:absolute;left:0;top:0;width:200px;max-width:calc(100% - 28px);z-index:9;visibility:hidden}
.news-window.is-ready{visibility:visible}
.news-window-surface{overflow:hidden;border:1px solid #c5ddf35c;border-radius:5px;background:linear-gradient(125deg,#90b4d323,#102037a8 60%,#0b1829bd);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px #eef8ff40,inset 0 0 24px #a1c8e20a,0 12px 34px #0003;opacity:0;translate:0 8px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1),border-color .25s}
.news-window.is-ready .news-window-surface{opacity:1;translate:0 0}
.news-window-bar{display:flex;align-items:stretch;border-bottom:1px solid #c6dcf02e;background:linear-gradient(100deg,#d1e7fc12,#8dabc405)}
.news-window-handle{display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:32px;padding:0 2px 0 9px;border:0;background:none;color:#edf5ff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.news-window-label{font:12px/1 var(--serif);letter-spacing:.10em}
.news-window time{margin-left:auto;font:10px/1 var(--serif);letter-spacing:.03em;color:#c1d3e7;white-space:nowrap}
.news-window-close{flex:none;width:32px;min-height:32px;border:0;background:none;color:#d5e5f6;font:19px/1 var(--serif);cursor:pointer;transition:background .25s,color .25s}
.news-window-close:hover{background:#dcf0ff12;color:#fff}
.news-window-story{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 9px;color:#edf5ff!important;transition:background .3s}
.news-window-story:hover{background:#badbff0c}
.news-window-story h2{margin:0;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 12px/1.55 var(--jp);letter-spacing:.015em}
.news-window button:focus-visible,.news-window-story:focus-visible{outline:1px solid #d0eaff;outline-offset:-4px;border-radius:3px}
.news-window.is-dragging .news-window-handle{cursor:grabbing}
.news-window.is-dragging .news-window-surface{border-color:#e0f0ffb3}
.intro-running:not(.intro-revealing) .news-window{visibility:hidden}
.intro-running:not(.intro-revealing) .news-window .news-window-surface{opacity:0;translate:0 8px}
/* The Water & Glass option uses the original beveled refraction renderer. */
.news-window-optics{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.news-window-optics[hidden]{display:none}
[data-window-material=water] .news-window-surface{border-radius:16px;background:linear-gradient(120deg,#e4f7ff08,#def4ff02 61%,#d3efff0e),#0d273de6;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 1px 1px #f3fcff8a,0 32px 60px #020e2259}
.news-window.has-notice-optics[data-window-material=water] .news-window-surface{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.news-window[data-window-material=water]{color:#fff;text-shadow:0 1px 2px #020a14,0 0 5px #020a14,0 0 10px #031223a0}
[data-window-material=water] .news-window-bar{background:#d5edff08;border-bottom-color:#e6f6ff40}
[data-window-material=water] .news-window-handle{padding-left:11px}
.unified-stage .bubbles i:nth-child(1){scale:var(--bubble-scale-1,1)}
.unified-stage .bubbles i:nth-child(2){scale:var(--bubble-scale-2,1)}
.unified-stage .bubbles i:nth-child(3){scale:var(--bubble-scale-3,1)}
.unified-stage .bubbles i:nth-child(4){scale:var(--bubble-scale-4,1)}
.unified-stage .bubbles i:nth-child(5){scale:var(--bubble-scale-5,1)}
/* Review controls are present only at the comparison URL. */
.material-comparison{position:fixed;right:28px;top:118px;z-index:60;width:max-content;max-width:calc(100vw - 32px);font:12px/1.5 var(--jp);color:#e7f2ff}
.material-comparison>summary{margin-left:auto;list-style:none;width:max-content;cursor:pointer;padding:9px 14px;border:1px solid #c3dff65c;border-radius:20px;background:#11263dd9;backdrop-filter:blur(14px);box-shadow:0 4px 20px #0002;letter-spacing:.08em}
.material-comparison>summary::-webkit-details-marker{display:none}
.material-comparison>summary:after{content:'＋';margin-left:9px;opacity:.75}
.material-comparison[open]>summary:after{content:'−'}
.material-comparison-body{width:260px;margin-top:8px;padding:18px;border:1px solid #c3dff63d;border-radius:12px;background:#0b1d32ed;backdrop-filter:blur(20px);box-shadow:0 12px 34px #0005}
.material-comparison fieldset{padding:0;margin:0 0 17px;border:0}
.material-comparison legend{padding:0;margin-bottom:8px;font-size:11px;letter-spacing:.1em;color:#b6cce1}
.material-comparison fieldset>div{display:flex;gap:5px}
.material-comparison button{flex:1;min-height:36px;padding:6px 7px;color:#b8cee3;font:inherit;white-space:nowrap;border:1px solid #bdd8ee26;border-radius:5px;background:#a8d1f008;cursor:pointer}
.material-comparison button[aria-pressed=true]{color:#fff;background:#a8d1f025;border-color:#cbe8ff9c;box-shadow:inset 0 0 12px #ceeaff0a}
.material-comparison button:hover{background:#a8d1f02b}
.material-comparison :is(button,summary):focus-visible{outline:2px solid #d9efff;outline-offset:3px}
.material-comparison p{font-size:10px;color:#a7bdd2;margin:0;line-height:1.8}
@media(max-width:700px){.material-comparison{right:16px;top:86px}.material-comparison>summary{font-size:11px;padding:7px 12px}.material-comparison-body{width:248px;padding:16px}}

/* Readable silver type, without changing the reveal/hover animation layers. */
@media(min-width:701px) and (min-height:551px){
 .unified-stage .spatial-nav a{min-width:206px}
 .unified-stage .spatial-nav a>span{font-size:clamp(22px,1.74vw,28px);text-shadow:0 1px 1px #020813,0 0 3px #020813f2,0 2px 7px #020813c7,0 0 13px #02081366}
 .unified-stage .spatial-nav a>small{font-size:13px;color:#d5dfec;text-shadow:0 1px 1px #020813,0 0 3px #020813eb,0 2px 6px #020813b3}
 .unified-stage .spatial-nav a:hover>span,.unified-stage .spatial-nav a:focus-visible>span{transform:scaleX(1.1)}
}
/* Portrait tablet pairs follow the artwork's measured frame in app.js. */
@media(min-width:701px) and (max-width:1366px) and (orientation:portrait){
 .unified-stage .spatial-nav a{right:auto;width:max-content;min-width:0;padding-inline:12px}
 .unified-stage .scene-words{top:calc(112px - var(--hero-content-drop));right:3.7%;transform:none;gap:18px;font-size:min(10px,calc(1.1svh - 4.5px));text-shadow:0 1px 2px #020813cc,0 0 6px #02081380}
 .unified-stage .scene-words>span:first-child{font-size:min(9px,calc(.99svh - 4.05px));letter-spacing:.18em}
}
/* Let prose reflow at each viewport width without leaving tiny final lines. */
.full-bio,.archived-body,.reading p,.profile-copy>p,.release-detail p,.home-preview-body p,.contact-intro p,.archive-context{
 line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:pretty;
}
.release-detail h2,.release h3,.video-card h3{word-break:normal;overflow-wrap:break-word;text-wrap:balance}
.release-detail p,.archive-context,.home-preview-body p{ text-wrap:balance }
.text-unit{white-space:nowrap}
.article-links .text-link>span:not([aria-hidden]){min-width:0;overflow-wrap:anywhere}
.text-link>span[aria-hidden],.listen-link>span[aria-hidden]{flex-shrink:0}

/* Extend the background into Safari's safe area; leave the stable 3D stage alone. */
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 .ocean-world{bottom:auto;height:100lvh;min-height:100%}
 .ocean-world:after{display:none}
 body .header{padding-top:calc(6px + env(safe-area-inset-top,0px))!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
 .menu-dialog .close-menu{top:calc(16px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px))}
}


/* mobile-viewport.css */
/* The page paints behind browser chrome; only interactive controls avoid it.
   Keep this after home-timeline.css so the body never owns a bottom spacer.
   Do not resize the 3D scene with the address bar: its 100svh composition stays stable. */
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 /* Let Safari own the document scroller; a forced root scroll box is only
    needed for desktop's reserved scrollbar gutter. */
 html{min-height:100%;margin:0;padding:0;scrollbar-gutter:auto;overflow:visible}
 html:root{--lezel-browser-edge:#030e1c}
 body{position:relative;display:flow-root;min-height:100vh;min-height:100dvh;margin:0;padding:0}

 /* A full-screen fixed hero can make Safari fill its expanded bottom toolbar
    with a solid edge colour. At scroll origin, let the document paint it.
    Keep the same 100svh composition and only pin it during the 3D retreat. */
 body .unified-stage{position:absolute;bottom:auto}
 body .unified-stage.scene-scrolled{position:fixed}

 /* A document-sized painted layer, not a fixed rectangle at the toolbar edge.
    This also fills under the toolbar when the foreground scene has receded. */
 body .ocean-world{position:absolute;inset:0;width:auto;height:auto;min-height:100vh;min-height:100dvh;background:#030e1c;overflow:hidden}
 body .ocean-world:before{content:'';position:absolute;inset:0 0 auto;height:100vh;height:100lvh;background:var(--lezel-depth);pointer-events:none}
 /* Inner pages keep the same fixed curtain scene as desktop. Overscan only
    the backdrop; home retains its document-painted Safari toolbar fix. */
 body.inner-page .ocean-world{position:fixed;inset:0 0 auto;height:100vh;height:100lvh;min-height:0;background:linear-gradient(#030813aa,#030813f2),var(--lezel-environment) center/cover no-repeat}
 body.inner-page .ocean-world:before{display:none}
 body .ocean-world:after{display:none}
 /* Keep ambient light local to the screen instead of stretching it across a long page. */
 /* Its local origin is 30vh above the viewport. Retain the ambient light,
    but let it reach zero before Safari exposes the root below the toolbar. */
 body .ocean-world .deep-glow{inset:-30vh -30% auto;height:160vh;height:160lvh;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(65lvh + 30vh),transparent calc(100svh + 30vh - 1px));
  mask-image:linear-gradient(to bottom,#000 calc(65lvh + 30vh),transparent calc(100svh + 30vh - 1px))
 }

 :root{--mobile-control-inset:max(12px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){
 /* Account for the scene's existing downward translation exactly once. */
 .unified-stage .hero-socials{bottom:calc(var(--hero-content-drop,0px) + var(--mobile-control-inset))!important}
 .unified-stage .spatial-nav{bottom:calc(44px + var(--hero-content-drop,0px) + var(--mobile-control-inset))!important}
 .social-dock{bottom:var(--mobile-control-inset)!important;background:transparent}
 /* This is transparent reading clearance for the floating icons, not a fixed band. */
 .footer{padding-bottom:calc(68px + var(--mobile-control-inset))}
 html{scroll-padding-bottom:calc(68px + var(--mobile-control-inset))}
}
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 /* Keep the same document endpoint as the visible viewport grows. The
    transparent allowance is after footer content; its layout never shifts. */
 body.inner-page{--page-toolbar-travel:calc(max(0px,100lvh - 100svh) + max(0px,100dvh - 100svh))}
 body.inner-page .footer{padding-bottom:calc(68px + var(--mobile-control-inset) + var(--page-toolbar-travel));overflow-anchor:none}
 /* A fixed decoration must not leave a second, overscanned scrolling surface
    beyond the current viewport. Its image framing remains the shared svh frame. */
 html body.inner-page .ocean-world{inset:0;height:auto;overflow:clip}
 /* Blend the last painted pixels into the same colour Safari samples outside
    the document, without an extra overlay, border, or visible bottom strip. */
 html body.inner-page .ocean-world{background-image:linear-gradient(to bottom,transparent var(--page-waterline,68vh),#030e1c99 calc(var(--page-waterline,68vh) + 10vh),var(--lezel-browser-edge) calc(100svh - 1px)),linear-gradient(#030813aa,#030813f2),var(--lezel-environment)}
 .menu-dialog:before{background-color:var(--lezel-browser-edge);background-image:linear-gradient(to bottom,transparent var(--menu-waterline,65vh),#061323aa calc(var(--menu-waterline,65vh) + 8vh),var(--lezel-browser-edge) calc(100svh - 1px)),linear-gradient(110deg,#071425cc,#12243ab3 50%,#071425cc),var(--lezel-environment)}
}


/* site-links.css */
/* Shared service links and home page introductions. */
.home-preview-body{display:flex;align-items:center;justify-content:space-between;gap:36px}
.home-preview-body p{max-width:42em;color:#bac9db;font-size:16px;line-height:2.2;margin:0}
.home-preview-body .text-link{flex-shrink:0}
.music-services{display:flex;flex-wrap:wrap;gap:12px 18px;margin:-12px 0 36px}
.music-services .social-link{min-height:48px;padding:11px 18px;border:1px solid #c5e1ff45;background:#d3e6f308;gap:10px}
.music-services .social-link span{font-size:15px;color:#edf3fc;white-space:nowrap}
@media(max-width:700px){
 .home-preview-body{align-items:flex-start;flex-direction:column;gap:22px}
 .home-preview-body p{font-size:15px}
 .music-services{gap:10px;margin:0 0 30px}
 .music-services .social-link{padding:10px 12px}
 .music-services .social-link span{font-size:14px}
 .hero .hero-socials{width:calc(100% - 48px);gap:clamp(0px,1vw,6px)}
 .hero .hero-socials .social-link{flex:0 1 44px;min-width:40px}
 .social-dock{right:12px;gap:clamp(4px,1.5vw,9px)}
}


/* news-typography.css */
/* NEWS detail typography. Keep the archive's date typeface and intentional title phrases. */
.news-article > time{font-family:var(--serif);font-weight:400;letter-spacing:.04em}
.news-article > h2{font-size:clamp(18px,5vw,24px);line-height:1.8;text-wrap:balance;line-break:strict;word-break:normal;overflow-wrap:break-word}
.news-title-part{display:inline-block;max-width:100%;vertical-align:top;overflow-wrap:break-word}


/* cursor-atmosphere.css */
/* Scenery light stays above water; glass gets a separate, gently lit surface. */
.cursor-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:0;mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--cursor-waterline,65vh) - 100px),transparent var(--cursor-waterline,65vh));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--cursor-waterline,65vh) - 100px),transparent var(--cursor-waterline,65vh))}
.cursor-atmosphere>i{position:absolute;left:0;top:0;display:block;width:min(72vw,880px);height:min(75vh,650px);border-radius:50%;background:radial-gradient(ellipse at 48% 48%,#c5e7ff20 0%,#8acaff13 28%,#75afff08 47%,transparent 70%);will-change:transform}
.menu-dialog>.cursor-atmosphere{z-index:-1;transition:opacity .42s ease}
.inner-page .inner-shell{position:relative}
.cursor-atmosphere.cursor-atmosphere-surface{z-index:2;border-radius:inherit;mask-image:none;-webkit-mask-image:none;contain:paint}
.cursor-atmosphere-surface>i{width:min(68vw,760px);height:min(78vh,660px);background:radial-gradient(ellipse at center,#c5e7ff1c 0%,#8acaff10 30%,#75afff05 50%,transparent 72%)}
.music-window>.cursor-atmosphere{bottom:auto;width:100%}
.cursor-atmosphere.cursor-atmosphere-home-background{bottom:auto;mask-image:none;-webkit-mask-image:none;z-index:1}
@media(hover:hover) and (pointer:fine){
 .hero .tulle-foreground{transform:translate3d(var(--cursor-fabric-x,0px),var(--cursor-fabric-y,0px),0);transition:none}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-atmosphere{display:none}}


/* frame-light.css */
/* The approved original-plus-glow finish, shared by Home and inner pages.
   Highlights sit on the existing border; no second outline is added. */
:is(.depth>.section,.inner-page .inner-shell)::before{content:'';position:absolute;top:-1px;left:12%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#e5f4ffb8,transparent);filter:drop-shadow(0 0 3px #c4e5ffa0) drop-shadow(0 0 7px #9fccff50);pointer-events:none}
:is(.depth>.section,.inner-page .inner-shell)::after{content:'';position:absolute;bottom:-1px;left:47%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#dceeff85,transparent);filter:drop-shadow(0 0 3px #c4e5ff70) drop-shadow(0 0 7px #9fccff36);pointer-events:none}
.frame-cursor-light{position:absolute;inset:-1px;z-index:3;pointer-events:none}
.music-window>.frame-cursor-light{inset:0;z-index:4;overflow:hidden}
/* Clip the decorative plane to the scrollport. Its border-sized geometry must
   never enlarge the dialog's horizontal or vertical scrollable content. */
.music-window .frame-light-plane{position:absolute;inset:-1px;pointer-events:none}
/* The scrolling dialog clips child pixels on its outside border. Paint the
   bright core on that existing border itself; the child keeps its soft glow.
   These one-pixel layers do not add another outline or move with the content. */
dialog.music-window{
 background-image:
  linear-gradient(90deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-top,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-top,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-top,0)*.42)) 80%,transparent),
  linear-gradient(90deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-bottom,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-bottom,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-bottom,0)*.42)) 80%,transparent),
  linear-gradient(180deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-left,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-left,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-left,0)*.42)) 80%,transparent),
  linear-gradient(180deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-right,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-right,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-right,0)*.42)) 80%,transparent),
  linear-gradient(125deg,#203148ed,#08121ff5);
 background-size:var(--modal-rim-horizontal,260px) 1px,var(--modal-rim-horizontal,260px) 1px,1px var(--modal-rim-vertical,260px),1px var(--modal-rim-vertical,260px),auto;
 background-position:calc(var(--modal-rim-x,0px) - var(--modal-rim-horizontal,260px)/2) top,calc(var(--modal-rim-x,0px) - var(--modal-rim-horizontal,260px)/2) bottom,left calc(var(--modal-rim-y,0px) - var(--modal-rim-vertical,260px)/2),right calc(var(--modal-rim-y,0px) - var(--modal-rim-vertical,260px)/2),0 0;
 background-origin:border-box,border-box,border-box,border-box,padding-box;
 background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
.music-window .frame-light-top{top:-8px}.music-window .frame-light-bottom{bottom:-8px}
.music-window .frame-light-left{left:-8px}.music-window .frame-light-right{right:-8px}
.frame-light-edge{position:absolute;display:block;overflow:hidden;pointer-events:none}
.frame-light-top,.frame-light-bottom{left:0;width:100%;height:17px}
.frame-light-top{top:-8px}.frame-light-bottom{bottom:-8px}
.frame-light-left,.frame-light-right{top:0;height:100%;width:17px}
.frame-light-left{left:-8px}.frame-light-right{right:-8px}
.frame-light-edge>i{position:absolute;display:block;opacity:0;filter:drop-shadow(0 0 3px #c4e5ffa0) drop-shadow(0 0 7px #9fccff55);pointer-events:none}
.frame-light-top>i,.frame-light-bottom>i{left:0;top:8px;height:1px;width:var(--frame-light-length,260px);background:linear-gradient(90deg,transparent,#d2eaff6b 20%,#f2faffed 50%,#d2eaff6b 80%,transparent)}
.frame-light-left>i,.frame-light-right>i{top:0;left:8px;width:1px;height:var(--frame-light-length,260px);background:linear-gradient(180deg,transparent,#d2eaff6b 20%,#f2faffed 50%,#d2eaff6b 80%,transparent)}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 .frame-cursor-light{display:none}
 dialog.music-window{--modal-rim-top:0!important;--modal-rim-bottom:0!important;--modal-rim-left:0!important;--modal-rim-right:0!important}
}