/* music-window.css */
/* One local detail surface, with the catalogue left in place underneath. */
.release a.music-pointer-return:focus,.featured a.music-pointer-return:focus{outline:none}
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (max-width:1100px) and (pointer:coarse){
 .inner-shell .catalogue{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
.music-window{
 width:min(1080px,calc(100% - 48px));max-width:none;
 max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
 inset:0;margin:auto;padding:0;color:#e6edf7;
 border:1px solid #c4d6e966;border-radius:4px;
 background:linear-gradient(125deg,#203148ed,#08121ff5);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 24px 90px #0008;
 overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
 scrollbar-color:#a7bfd966 transparent;
 opacity:0;transform:translateY(12px) scale(.985);
 transition:opacity .28s ease,transform .42s cubic-bezier(.2,.7,.2,1);
}
.music-window.is-open{opacity:1;transform:none}
.music-window::backdrop{background:#020a147d;opacity:0;transition:opacity .28s ease}
.music-window.is-open::backdrop{opacity:1}
.music-window-bar{
 position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
 min-height:58px;padding:6px 20px 6px 30px;border-bottom:1px solid #b5c9e130;
 background:#111f30f2;font:12px var(--serif);letter-spacing:.18em;
}
.music-window-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;color:#dce9f6;transition:color .25s,background .25s;border-radius:2px}
.music-window-close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:.9}
.music-window-close:hover{color:#fff;background:#d3e6f310}
.music-window :focus-visible{outline:1px solid #d7e9f6;outline-offset:4px}
.music-window-content{padding:clamp(24px,3vw,40px)}
.music-window .release-detail{max-width:none;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.music-window .release-detail>img{width:100%;max-width:none;height:auto;aspect-ratio:1;object-fit:contain;box-shadow:0 12px 36px #0004}
.music-window .release-detail>div{min-width:0}
.music-window .release-detail time{font:14px var(--serif);letter-spacing:.08em}
.music-window .release-detail h2{font-size:clamp(21px,2.7vw,30px);line-height:1.65;margin:14px 0 20px;overflow-wrap:anywhere}
.music-window .release-detail p{font-size:16px;line-height:2}
.music-window .actions{gap:12px;margin-top:26px}
.music-window .listen-link,.music-window .text-link{font-size:14px;min-height:44px;padding:12px 16px}
.music-window [aria-hidden=true]:not(svg):not(.cursor-atmosphere):not(.frame-cursor-light){display:none}
@media(max-width:600px){
 .music-window{width:calc(100% - 28px);max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .music-window-bar{padding-left:22px;padding-right:10px;min-height:54px}
 .music-window-content{padding:22px 18px 28px}
 .music-window .release-detail{grid-template-columns:minmax(0,1fr);gap:24px}
 .music-window .release-detail>img{max-width:360px;justify-self:center}
 .music-window .release-detail h2{font-size:22px;margin-bottom:16px}
 .music-window .actions{margin-top:22px}
}
.motion-off .music-window,.motion-off .music-window::backdrop{transition:none;transform:none}
.portrait-window .music-window-content{padding:24px}
.portrait-window picture{display:block}
.portrait-window img{display:block;width:100%;max-width:900px;height:auto;margin:auto}
.portrait-window-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* 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)}
}


/* contact-form.css */
/* Shared form on HOME and CONTACT, scoped to the form itself. */
.lezel-contact{display:flex;flex-direction:column;max-width:820px;margin:6px auto 8px;gap:30px}
.lezel-contact .contact-direct{margin:0;font-size:14px;line-height:2;color:#c9d5ed;text-align:left}
.lezel-contact .contact-direct a{display:inline-block;padding:4px 0;color:#edf3fc;text-decoration:underline;text-decoration-color:#a3b8e580;text-underline-offset:5px;overflow-wrap:anywhere;max-width:100%}
.lezel-contact .contact-direct a:hover{color:#fff;text-decoration-color:currentColor}
.lezel-contact .contact-direct a:focus-visible{outline:1px solid #c7d9ff;outline-offset:4px}
.lezel-contact label,.lezel-contact legend{display:block;font-size:15px;letter-spacing:.035em;line-height:1.8;color:#c9d5ed}
.lezel-contact .field-english{display:block;margin:4px 0 0;font:13px var(--serif);letter-spacing:2px;color:#92a5cb}
.lezel-contact .field-required{display:inline-block;margin-left:12px;padding:1px 7px;border:1px solid #a3b8e55c;border-radius:2px;color:#dce7f5;font:11px/1.6 var(--jp);letter-spacing:.06em;vertical-align:middle}
.lezel-contact .field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.lezel-contact :is(input:not([type=radio]):not([type=hidden]),textarea){display:block;width:100%;margin-top:11px;padding:15px 17px;border:1px solid #a3b8e53b;border-bottom-color:#b9caf36b;border-radius:2px;background:linear-gradient(130deg,#15213c70,#050b194d);color:#e3e9f8;font:400 16px/1.7 var(--serif);text-shadow:none;resize:vertical;transition:border-color .3s,box-shadow .3s}
.lezel-contact :is(input,textarea):focus{outline:none;border-color:#bcd0ffb0;box-shadow:0 0 24px #709bff18}
.lezel-contact :is(input,textarea)::placeholder{color:#7e90b1;font-size:14px}
.lezel-contact textarea{min-height:185px}
.lezel-contact fieldset{border:0;padding:0;margin:0;min-width:0}
.lezel-contact legend{padding:0}
.lezel-contact .subject-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.lezel-contact .subject-option{position:relative;cursor:pointer;margin:0}
.lezel-contact .subject-option input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;left:18px;top:50%;border:0}
.lezel-contact .subject-face{display:flex;height:100%;align-items:center;justify-content:center;gap:10px;padding:18px 10px;font-size:14px;color:#b8c8e7;border:1px solid #a3b8e53b;border-radius:2px;background:linear-gradient(130deg,#15213c70,#050b194d);transition:background .3s,border-color .3s,box-shadow .3s}
.lezel-contact .subject-face i{width:11px;height:11px;flex-shrink:0;border:1px solid #a2b5da7a;border-radius:50%;position:relative}
.lezel-contact .subject-face>span{min-width:0;line-break:strict;word-break:normal;text-wrap:balance}
.lezel-contact .subject-face i:after{content:'';position:absolute;inset:2px;background:#e8f0ff;border-radius:50%;opacity:0}
.lezel-contact input:checked+.subject-face{box-shadow:0 0 25px #a4c3ff1c,inset 0 0 20px #b2c9ff09;border-color:#d5e2ffaa;color:#f2f6ff;background:linear-gradient(130deg,#a8c2ff26,#6b8ccc15)}
.lezel-contact input:checked+.subject-face i:after{opacity:1;box-shadow:0 0 8px #c7dbff}
.lezel-contact input:focus-visible+.subject-face{outline:2px solid #c7d9ff;outline-offset:4px}
.lezel-contact .subject-option:hover .subject-face{border-color:#a3b8e599}
.lezel-contact .contact-submit-row{display:flex;justify-content:center;border-top:1px solid #a5bde123;padding-top:30px}
.lezel-contact .silver-button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:48px;min-width:250px;padding:18px 28px;font:400 13px var(--serif);letter-spacing:2px;border:1px solid #d4def56b;background:linear-gradient(130deg,#b8caff25,#e3ebff0d);background-color:transparent;box-shadow:0 0 24px #9cbbff13;color:#eef2ff;transition:box-shadow .45s ease,background-color .45s ease}
.lezel-contact .silver-button:is(:hover,:focus-visible){box-shadow:0 0 35px #a6c4ff35;background-color:#c5d7ff28}
.lezel-contact .silver-button span{font-size:18px}
.lezel-contact .contact-delivery-note{font-size:12px;line-height:1.8;text-align:center;color:#a6b9dc}
.lezel-contact .contact-delivery-note a{text-decoration:underline;text-underline-offset:3px}
.lezel-contact .contact-status{font-size:14px;line-height:1.9;text-align:center;color:#c9d9ed;overflow-wrap:anywhere}
.lezel-contact .contact-status[hidden]{display:none}
.lezel-contact .silver-button:disabled{cursor:default;opacity:.55;box-shadow:none}
.lezel-contact .contact-honey{display:none}
@media(max-width:1000px){.lezel-contact .subject-choices{grid-template-columns:1fr}.lezel-contact .subject-face{justify-content:flex-start;padding:15px 18px}}
@media(max-width:760px){.lezel-contact{gap:25px}.lezel-contact .field-pair{grid-template-columns:1fr;gap:25px}.lezel-contact label,.lezel-contact legend{font-size:14px}.lezel-contact :is(input:not([type=radio]):not([type=hidden]),textarea){padding:14px}.lezel-contact .silver-button{min-width:0;width:100%;font-size:12px;letter-spacing:1.8px}}


/* dive-scroll.css */
/* Keep the shared camera fade and header on the existing scroll clock. */
html.lezel-home body:not(.inner-page) .header:before{opacity:var(--home-header-opacity,0);transition:none}
/* Keep ordinary document flow and stable scene geometry throughout. */
.dive-track{position:relative;overflow-anchor:none;box-sizing:content-box}
.dive-active .dive-track>.depth{display:flow-root}
html[data-home-phase=scene] .dive-track{visibility:hidden!important}
/* The first pane enters at the bottom through native scrolling. Keep its glass
   fully painted so the blur does not change during the opening handoff. */
.dive-active .depth>#music{transform:none;translate:none;opacity:1;-webkit-backdrop-filter:blur(16px)}
.dive-backdrop-track{display:contents}
.home-scroll-end{height:0;pointer-events:none;overflow-anchor:none}

@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 /* Safari exposes the root canvas beyond the document's last painted pixel.
    Continue the same ocean colour there without adding scrollable space. */
 html.lezel-home{--lezel-browser-edge:#030e1c}
 /* The radial light does not reach its last colour along the whole bottom
    edge. Blend it into the document's ocean base before the toolbar samples
    that edge, without changing the stable scene size or Safari paint path. */
 /* Finish at the expanded-toolbar edge (svh), not the taller lvh layer.
    Otherwise Safari clips still-blue pixels against the root's solid navy. */
 .lezel-home body .ocean-world:before{background:linear-gradient(to bottom,#030e1c00 65lvh,#030e1c calc(100svh - 1px)),var(--lezel-depth)}
 /* Keep the existing expanded-toolbar clearance, then cancel the visible
    viewport growth. (content + clearance + V - S) - V has one endpoint for
    both bar sizes. A constant lvh-svh alone leaves the collapsed bar a full
    toolbar-height short. This is transparent flow, never a fixed bottom band. */
 .lezel-home .home-scroll-end{height:calc(max(0px,100lvh - 100svh) + max(0px,100dvh - 100svh))}
 @supports (animation-timeline:scroll(root block)) and (animation-range:0px 1px){
  /* Safari must see document paint, not a fixed/sticky viewport rectangle.
     CSS follows native touch/inertia, without per-frame JS offsets.
     Keep the stable hero geometry and the full-height ambient paint separate. */
  .lezel-home .dive-backdrop-track{display:block;position:absolute;inset:0 0 auto;height:var(--dive-document-height,100svh);overflow:clip;pointer-events:none}
  .lezel-home body .unified-stage,.lezel-home body .unified-stage.scene-scrolled{
   position:absolute;top:0;bottom:auto;pointer-events:auto;
   animation:home-document-pin linear both;animation-timeline:scroll(root block);
   animation-range:0px var(--home-document-distance,1px);
  }
  .lezel-home body .ocean-world:before{
   animation:home-document-pin linear both;animation-timeline:scroll(root block);
   animation-range:0px var(--home-document-distance,1px);
  }
 }
}
@keyframes home-document-pin{from{translate:0 0}to{translate:0 var(--home-document-distance,0px)}}

/* Fade the whole hero foreground with the original retreat while
   the first pane starts entering from below near the end of that fade. */
.retreat-active .unified-stage :is(.world-title,.spatial-nav,.hero-socials,.scroll-cue,.scene-words,.news-window){opacity:var(--retreat-foreground-opacity,1)}
/* The picture owns only the entrance animation. Fade the actual image during
   retreat, so finishing/cancelling the picture's entrance cannot replace the
   retreat opacity. Keep the image's opacity layer ready throughout the gesture. */
.retreat-active .unified-stage .keyvisual img{opacity:var(--retreat-portrait-opacity,var(--retreat-foreground-opacity,1))!important;will-change:opacity}
.retreat-active .unified-stage .scene-words{opacity:calc(.68 * var(--retreat-foreground-opacity,1))}

/* After the dive opening, retain the usual small window lift. */
.dive-active .depth>.dive-lift-pending{opacity:0;translate:0 18px}
.dive-active .depth>.dive-lift-visible{opacity:1;translate:0 0;transition:opacity .9s ease,translate 1.1s cubic-bezier(.2,.65,.3,1)}

/* With the hero retired, use the same clear footer as inner pages. */
html.retreat-active body:not(.inner-page) .footer{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;isolation:auto;overflow-anchor:none}
/* Keep the short landscape scene inside the stable small viewport. */
@media(orientation:landscape) and (max-height:550px){body .hero,.unified-stage{min-height:0}}
@media(orientation:landscape) and (max-height:550px) and (max-width:1100px){.unified-stage .keyvisual{height:65%;max-height:75%;max-width:42%}}


/* media-layout.css */
/* Text keeps a comfortable inset; artwork shares one edge/gap rhythm. */
.depth,.inner-shell{--panel-padding:60px;--media-gap:24px;--media-outset:calc(var(--panel-padding) - var(--media-gap))}
.depth>.section{width:calc(100% - 112px);max-width:1160px;padding-inline:var(--panel-padding)}
.depth>#contact{scroll-margin-top:120px}
.music-section .home-releases,
.music-section .home-videos .video-grid,.inner-shell .catalogue,.inner-shell .music-videos .video-grid{
 width:calc(100% + 2 * var(--media-outset));max-width:none;margin-inline:calc(-1 * var(--media-outset));column-gap:var(--media-gap)
}
.music-section .home-videos,.inner-shell .music-videos{width:100%;max-width:none}
.music-section .home-releases{grid-auto-columns:calc((100% - 2 * var(--media-gap))/3);gap:var(--media-gap);overflow-y:hidden;overscroll-behavior-y:auto;padding:10px 0 12px}
.music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/3);column-gap:var(--media-gap);padding-inline:0}
.music-section .home-videos{margin-top:24px}
/* MUSIC shares the VIDEOS control rhythm above its existing divider.
   Its last heading row pairs the subtitle with the arrows, without an extra
   controls row between the divider and the artwork. */
.depth>#music>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;padding-bottom:26px;margin-bottom:12px}
.depth>#music>.section-heading>.signal-number{grid-column:1/-1;grid-row:1}
.depth>#music>.section-heading>div:not(.release-controls){grid-column:1;grid-row:2}
.depth>#music>.section-heading>.text-link{grid-column:2;grid-row:2;justify-self:end}
.depth>#music>.section-heading>.world-subtitle{grid-column:1;grid-row:3;align-self:center}
.depth>#music>.section-heading>.release-controls{grid-column:2;grid-row:3;justify-self:end;width:auto;max-width:none;margin:0;column-gap:10px}
@media(max-width:700px){.depth>#music>.section-heading>.release-controls{column-gap:6px}}
/* Keep the top breathing room; remove duplicated gaps within the heading. */
@media(min-width:701px){
 .depth>#music{padding-top:48px}
 .depth>#music>.section-heading{row-gap:12px}
 .depth>#music>.section-heading .signal-number{margin-bottom:8px}
 .depth>#music>.section-heading .world-subtitle{margin-top:0}
}
@media(min-width:701px) and (max-height:850px){
 .depth>#music{padding-top:40px}
 .depth>#music>.section-heading{row-gap:8px}
 .depth>#music>.section-heading .signal-number{margin-bottom:2px}
}
.depth .profile-copy{padding-inline:0}
.depth .lezel-contact{width:100%;max-width:none;margin-inline:0}
.video-card h3 .video-title-hyphen{font-family:Arial,sans-serif;font-style:normal}
@media(hover:hover) and (pointer:fine){
 .home-releases .cover,.video-grid .video-start{cursor:grab}
 .media-dragging,.media-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
 .home-releases img,.video-grid img{-webkit-user-drag:none;user-select:none}
 .media-dragging .cover,.media-dragging .cover img,.media-dragging .video-start img{transform:none!important}
}
.media-pointer-scroll{scroll-snap-type:none!important;scroll-behavior:auto!important}
@media(max-width:1050px){
 .depth,.inner-shell{--panel-padding:40px;--media-gap:20px}
 .depth>.section{width:calc(100% - 70px)}
 .music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/2.3)}
}
@media(max-width:700px){
 .depth,.inner-shell{--panel-padding:22px;--media-gap:12px}
 .depth>.section{width:calc(100% - 28px)}
 .depth>#contact{scroll-margin-top:100px}
 .music-section .home-releases{grid-auto-columns:calc((100% - var(--media-gap))/2)}
 .music-section .home-videos{margin-top:16px}
 .music-videos .video-grid{grid-auto-columns:calc((100% - var(--media-gap))/1.5)}
}
@media(orientation:landscape) and (max-height:550px) and (pointer:coarse){
 .depth,.inner-shell{--media-gap:16px}
 .music-section .home-releases{grid-auto-columns:calc((100% - var(--media-gap))/2)}
 .music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/2.2)}
}

/* A single light passes over the existing jacket motion, without dimming the art. */
.release-main .cover{position:relative;isolation:isolate}
.release-main .cover:after{content:'';position:absolute;inset:-40%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 36%,#dbeeff09 42%,#f1faff5c 49%,#fff9 50%,#dbeeff22 54%,transparent 62%);transform:translateX(-85%);opacity:0}
@media(hover:hover) and (pointer:fine){
 .release-main:hover .cover:after{animation:jacket-glint 1.25s cubic-bezier(.2,.65,.3,1) both}
}
.release-main:focus-visible .cover:after{animation:jacket-glint 1.25s cubic-bezier(.2,.65,.3,1) both}
.media-dragging .release-main .cover:after{animation:none;opacity:0}
@keyframes jacket-glint{0%{transform:translateX(-85%);opacity:0}18%{opacity:.75}80%{opacity:.6}100%{transform:translateX(85%);opacity:0}}
@media(prefers-reduced-motion:reduce){.release-main .cover:after{animation:none!important}}


/* panel-layout.css */
/* Keep Home's Japanese prose together at phrase boundaries at every size. */
.depth>#profile .home-profile-summary{text-wrap:balance}
.depth>#profile .home-profile-summary>.profile-phrase{white-space:nowrap}

/* Home three-panel composition. Original direct children, reveal observers,
   borders and pointer lights are retained. Only these three wide-screen cards
   share a new layout. Their glass comes from the same rule as other panels. */
@media (min-width:1100px) and (min-aspect-ratio:4/3){
 html.panel-angle-layout body .depth,
 html.panel-angle-layout .dive-track>.depth{
  /* Transfer a little width to PROFILE without moving the outer columns
     or changing the gap and centred FANCLUB below. */
  --panel-width-transfer:clamp(36px,3.2vw,60px);
  display:grid;
  grid-template-columns:minmax(4.5vw,1fr) repeat(12,minmax(0,140px)) minmax(4.5vw,1fr);
  align-items:start;
 }
 html.panel-angle-layout .depth>.section{grid-column:1/-1;min-width:0}
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub){
  width:auto;max-width:none;margin-bottom:0;
  padding:clamp(36px,4.8vh,48px) clamp(30px,2.6vw,50px);
  /* Put the perspective eye line at the lower edge: the bottom stays level,
     while the top and all contents share the same receding plane. */
  transform-origin:50% 100%;
 }
 html.panel-angle-layout .depth>#profile{
  --panel-logo-column:clamp(64px,5.2vw,96px);
  --panel-copy-gap:clamp(18px,1.7vw,30px);
  grid-column:2/8;grid-row:2;margin:0 calc(clamp(18px,1.5vw,28px) - var(--panel-width-transfer)) 0 0;
  grid-template-columns:var(--panel-logo-column) minmax(0,1fr);gap:var(--panel-copy-gap);
  /* Perspective shortens the far edge and text, rather than a flat skew. */
  transform:perspective(1800px) rotateY(8deg);
 }
 html.panel-angle-layout .depth>#material{
  grid-column:8/14;grid-row:2;margin:clamp(34px,4.7vh,48px) 0 0 calc(clamp(18px,1.5vw,28px) + var(--panel-width-transfer));
  min-height:clamp(320px,43vh,400px);
  display:flex;flex-direction:column;justify-content:center;
  transform:perspective(1500px) rotateY(-12deg);
 }
 html.panel-angle-layout .depth>#fanclub{
  grid-column:4/12;grid-row:3;width:100%;max-width:960px;
  margin:clamp(24px,3.2vh,34px) auto 80px;transform:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,3vw,44px);
 }
 html.panel-angle-layout #profile .profile-mark{min-height:0}
 html.panel-angle-layout #profile .profile-mark::before{
  /* Keep the original gentle light, independent of the compact logo column. */
  inset:auto;left:50%;top:50%;width:clamp(220px,20vw,320px);height:clamp(260px,32vh,340px);
  transform:translate(-50%,-50%);
 }
 html.panel-angle-layout #profile .profile-mark img{width:clamp(60px,5vw,92px)}
 html.panel-angle-layout #profile .profile-copy>:is(.signal-number,.eyebrow,h2){
  /* The heading shares the frame inset used by the other two windows;
     the logo and body keep their existing two-column arrangement. */
  margin-inline-start:calc(-1 * (var(--panel-logo-column) + var(--panel-copy-gap)));
 }
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub) h2{
  font-size:clamp(30px,min(2.7vw,4.7vh),44px);letter-spacing:.1em;
 }
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub) .signal-number{margin-bottom:14px}
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub) .eyebrow{font-size:clamp(12px,.8vw,14px);margin-bottom:10px}
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub) .world-subtitle{font-size:clamp(12px,.9vw,15px);margin-top:6px}
 html.panel-angle-layout #profile .profile-copy>p,
 html.panel-angle-layout .depth>:is(#material,#fanclub) .home-preview-body p{font-size:clamp(13.5px,min(1vw,1.85vh),16px);line-height:1.85}
 html.panel-angle-layout #profile .profile-copy .profile-statement{font-size:min(17px,4.8cqw);margin:14px 0 10px}
 html.panel-angle-layout #profile .profile-copy .text-link{margin-top:10px}
 html.panel-angle-layout .depth>:is(#material,#fanclub) .section-heading{gap:0;padding-bottom:12px;margin-bottom:14px}
 html.panel-angle-layout #material .home-preview-body{flex-direction:column;align-items:flex-start;gap:16px}
 html.panel-angle-layout #fanclub .section-heading{margin:0;padding:0;border-bottom:0}
 html.panel-angle-layout #fanclub .home-preview-body{flex-direction:column;align-items:flex-start;gap:22px}
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub) .text-link{font-size:clamp(13px,.9vw,15px)}
}
@media (min-width:1100px) and (min-aspect-ratio:4/3) and (max-height:820px){
 html.panel-angle-layout .depth>:is(#profile,#material,#fanclub){padding-block:4vh}
 html.panel-angle-layout .depth>#fanclub{margin-top:20px}
}
/* Touch tablets in landscape: soften only PROFILE's receding plane.
   Keep the lower-edge origin and the existing layout dimensions. */
@media (min-width:1100px) and (min-aspect-ratio:4/3) and (orientation:landscape) and (pointer:coarse){
 html.panel-angle-layout .depth>#profile{transform:perspective(1800px) rotateY(6deg)}
}


/* 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}
}