/* Illuminated exhibition rooms with solid wall-mounted frames. */
.immersive-room{position:relative;width:100%;height:620px;isolation:isolate;background:#09070d;overflow:hidden;border:0}
.immersive-room canvas{display:block;width:100%;height:100%;position:relative;z-index:1}
.immersive-room:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(#09070d00 84%,#09070d),linear-gradient(90deg,#09070d35,transparent 10%,transparent 90%,#09070d35)}
.room-action{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;border:0;border-bottom:1px solid #c7b0d078;color:#f5eef9;background:#100b1899;min-height:44px;padding:10px 8px;font:14px var(--jp);white-space:nowrap;cursor:pointer}
.room-action:focus-visible{outline:2px solid #e7d8f0;outline-offset:4px}
.immersive-source{display:none!important}
#room-story .manga-preview{max-width:none;width:100%;box-shadow:none;background:none}
#room-story .story-opening{grid-template-columns:1fr 1.12fr;gap:4vw;min-height:0}
#room-story #story{padding:68px 5vw 42px!important}
#room-story .story-copy #story-title{font-size:clamp(27px,3vw,44px);line-height:1.7;letter-spacing:.015em}
#room-story .story-copy .manga-invitation{padding-top:24px}
#room-story #line{padding-bottom:48px!important}
#room-studio .studio-show{min-height:0;padding:64px 5vw 38px!important;gap:4vw}
#room-studio .studio-display{align-self:center}
.tool-room{height:auto;aspect-ratio:1.4;margin-bottom:20px}

.profile-room{height:auto;aspect-ratio:1;max-width:430px;margin:auto}
#room-noel #about{padding:62px 5vw 30px!important}
#room-noel #about .grid2{grid-template-columns:.88fr 1.12fr;gap:6vw}
#room-noel .profile-socials{background:none;margin-top:20px;padding-top:14px}
@media(max-width:700px){
 #room-story .story-opening,#room-noel #about .grid2{grid-template-columns:1fr;gap:18px}
 #room-story #story{padding:30px 22px 24px!important}
 #room-story .story-copy #story-title{font-size:clamp(25px,6.8vw,32px)}
 #room-story .story-copy .manga-invitation{padding-top:8px}
 #room-story .story-heading{margin-bottom:0}
 #room-story .immersive-room{height:auto;aspect-ratio:.78;max-width:360px;margin:auto}
 #room-story #line{padding:22px 22px 32px!important}
 #room-studio .studio-show{padding:30px 22px 22px!important}
 .studio-index h2{margin:14px 0;font-size:29px}
 .studio-index p{margin-bottom:0}
 .studio-tabs{margin:16px 0 18px;gap:8px}
 .studio-tabs button{min-height:44px;padding:10px 0}
 .tool-room{aspect-ratio:1.38;margin-bottom:16px}
 .room-action{font-size:13px;bottom:2px;padding:10px 5px}
 #room-noel #about{padding:30px 22px 24px!important}
 .profile-room{max-width:330px;width:100%}
 #room-noel #about .grid2{gap:16px}
 #room-noel .audience-stat{margin:18px 0}
 .studio-display:before{display:none}
}
/* Fit the original manga inside the reader without changing the image file. */
#mangaReader[open]{display:flex;flex-direction:column;height:min(94dvh,1300px)}
#mangaReader .manga-reader-scroll{flex:1;min-height:0;height:auto}
#mangaReader .manga-reader-bar,#mangaReader .manga-reader-nav,#mangaReader .manga-reader-hint{flex-shrink:0}
#mangaReader.fit-page #mangaReaderImage{width:100%;height:100%;max-width:none;object-fit:contain}
@media(max-width:700px){
 .immersive-room.profile-room{height:auto;aspect-ratio:1}

 #mangaReader .manga-reader-bar,#mangaReader .manga-reader-nav{gap:6px;padding:8px}
 #mangaReader button{padding:9px 8px;font-size:13px;min-height:40px}
}

#catalogDisclosure .archive-label>span:last-child{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
#catalogDisclosure small{display:inline-block;white-space:nowrap;word-break:keep-all}
#catalogDisclosure small [data-tool-total]{display:inline}
@media(max-width:700px){
 #room-studio #systems{margin:10px 22px}
 #catalogDisclosure summary{padding:22px 0;gap:12px}
 #catalogDisclosure .archive-label>span:last-child{font-size:17px}
 #catalogDisclosure .archive-label small{font-size:12px}
 #room-studio .approach-fold{margin:8px 22px 20px;padding:16px 0 0}
}

/* Keep the enlargement control clear of the frame. */
.tool-room{overflow:visible;margin-bottom:56px}
.tool-room .room-action{bottom:-36px}

/* Make the creator's values visible and the process entry easy to notice. */
.profile-values{margin-top:32px;padding-top:28px;border-top:1px solid #a58db43d}
.profile-values h3{margin:0 0 22px;font:500 clamp(20px,2.1vw,26px)/1.6 var(--jp);color:var(--text,#eee8f2);letter-spacing:.035em}
.profile-values p{font-size:16px;line-height:2}
#room-studio .approach-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;min-height:88px;color:#eee6f5}
#room-studio .approach-fold>summary::-webkit-details-marker{display:none}
.approach-title{display:block;font:500 clamp(21px,2.5vw,30px)/1.6 var(--jp);letter-spacing:.025em}
.approach-caption{display:block;margin-top:8px;font:14px/1.8 var(--jp);color:#c9b7d2}
.approach-toggle{flex-shrink:0;font:300 30px/1 var(--jp);color:#c7afe3;transition:transform .2s}
.approach-fold[open] .approach-toggle{transform:rotate(45deg)}
@media(max-width:700px){
 .profile-values{margin-top:26px;padding-top:24px}
 .profile-values h3{font-size:21px}
 #room-studio .approach-fold{margin:18px 22px 30px;padding-top:12px}
 .approach-title{font-size:21px;letter-spacing:0}
 .works-note{flex-direction:column;gap:12px;line-height:1.9}
}

/* The benefit is concrete and visible before registration. */
.line-benefit{margin:28px 0 24px;padding:24px 0;border-top:1px solid #bba2ce50;border-bottom:1px solid #bba2ce50}
.line-benefit-label,.line-example-label{display:block;font:500 14px/1.7 var(--jp);color:#d9c5ed;letter-spacing:.04em}
#line .line-benefit h3{font:500 clamp(21px,2.6vw,29px)/1.65 var(--jp);color:#f2eaf8;margin:14px 0 12px}
#line .line-benefit p{font-size:16px;line-height:1.9;margin:0}
#line .line-link-caption{font:13px/1.8 var(--jp);color:#c8bbd2;margin:10px 0 0}
#line .line-example-visible{margin-top:30px;padding-top:24px}
.line-example-visible .mono{display:block;margin-top:14px;font-size:12px}
#line .line-example-visible h3{font:500 17px/1.8 var(--jp);margin:10px 0}
#line .line-example-visible blockquote{font-size:15px;line-height:1.9;margin:12px 0 0}
.closing-benefit-copy{max-width:540px;font:16px/1.9 var(--jp);color:#d3c7dc;margin-top:18px}
@media(max-width:700px){
 .gallery-directory{padding:0 12px}
 .gallery-directory>div{gap:8px}
 .gallery-directory small{display:none}
 .gallery-directory a{font-size:14px;min-height:50px;text-decoration:none;letter-spacing:0;gap:0}
 .gallery-directory a[aria-current]{color:#fff;border-bottom:3px solid #d9baf7;background:linear-gradient(transparent,#caa9e524)}
 .line-benefit{margin-top:24px;padding:22px 0}
 #line .line-benefit h3{font-size:22px}
 .closing-benefit-copy{font-size:16px}
}
@media(max-width:360px){.gallery-directory a{font-size:13px}.gallery-directory>div{gap:6px}}

/* Short, clearly separated mobile navigation; full labels remain on desktop. */
.directory-short{display:none}
#line .line-receive-flow,.line-receive-flow{display:flex;align-items:center;gap:14px;margin:22px 0;font:500 15px/1.75 var(--jp);color:#eee5f5}
.line-receive-flow .flow-arrow{color:#d5b9ef;flex-shrink:0}
.line-receive-flow>span:first-child{white-space:nowrap}
@media(max-width:700px){
 .gallery-directory{padding:0 10px}
 .gallery-directory>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
 .gallery-directory .directory-full{display:none}
 .gallery-directory .directory-short{display:inline}
 .gallery-directory a{justify-content:center;min-height:56px;font-size:16px;font-weight:500;color:#d0c5d9;border-bottom-width:3px}
 .gallery-directory a[aria-current]{color:#fff;background:#b798db26;border-bottom-color:#e0c4fc}
 #line .line-receive-flow,.line-receive-flow{font-size:14px;gap:12px}
}

/* Quiet gallery wayfinding: readable destinations, no filled tab boxes. */
.gallery-directory{border-top:0;border-bottom:1px solid #b5a2c224;background:#0b0811eb}
.gallery-directory a{position:relative;text-decoration:none;border-bottom:0!important;background:none!important;color:#c8bed3;font-weight:400}
.gallery-directory a[aria-current]{background:none!important;color:#fff}
.gallery-directory a[aria-current]:after{content:"";position:absolute;bottom:7px;left:50%;width:4px;height:4px;border-radius:50%;background:#d6bdf0;transform:translateX(-50%)}
@media(max-width:700px){
 .gallery-directory{padding:0 14px}
 .gallery-directory>div{display:flex;justify-content:space-between;gap:8px}
 .gallery-directory a{font-size:15px;min-height:56px;padding:0 2px;letter-spacing:.015em}
}
@media(max-width:360px){.gallery-directory{padding:0 10px}.gallery-directory>div{gap:4px}.gallery-directory a{font-size:14px;letter-spacing:0}}
/* Reserve exhibition dimensions before its renderer is initialized. */
.immersive-room[data-pending]{background:radial-gradient(ellipse at 50% 45%,#21182c,#09070d 75%)}
.immersive-room[hidden]{display:none!important}

/* Place the portrait beside the name, not halfway down the long biography. */
#room-noel #about .grid2{align-items:start}