*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:#111}
body{font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,"Courier New",monospace;letter-spacing:.018em}
button,a{color:inherit}
.detail-header{position:fixed;top:clamp(28px,4vh,58px);left:clamp(54px,3.1vw,132px);right:clamp(54px,3.1vw,132px);display:flex;justify-content:space-between;z-index:12;font-size:clamp(8px,.56vw,10px)}
.site-name{color:inherit;text-decoration:none}.language{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.detail-shell{min-height:100vh;padding:clamp(92px,11vh,132px) clamp(54px,3.1vw,132px) 34px}
.detail-content{width:100%;margin:0 auto;min-height:calc(100vh - clamp(92px,11vh,132px) - 34px);display:flex;flex-direction:column}
.work-heading{display:grid;grid-template-columns:minmax(260px,27%) minmax(0,1fr);gap:clamp(28px,3.2vw,66px);align-items:end}
.work-index{font-size:clamp(8px,.56vw,10px)}
.journal-return{display:block;border:0;background:none;padding:0;margin:0 0 38px;font:inherit;cursor:pointer;opacity:.64}.journal-return:hover{text-decoration:underline;text-underline-offset:4px;opacity:1}.number{margin:0;opacity:.52}
.reading-layout{display:grid;grid-template-columns:minmax(260px,27%) minmax(0,1fr);gap:clamp(28px,3.2vw,66px);padding-top:22px;align-items:start;flex:1}
.reading-guide{position:relative;font-size:clamp(8px,.56vw,10px);line-height:1.7;padding:0 24px 0 0;min-height:590px;border-right:1px solid rgba(17,17,17,.10);overflow:hidden}
.work-title{position:relative;z-index:2;margin:0 0 30px;opacity:0;transform:translateY(15px);filter:blur(7px)}
.work-title h1{margin:0;font-size:clamp(27px,2.45vw,42px);font-weight:400;letter-spacing:.075em;line-height:1.16;max-width:310px;overflow-wrap:anywhere}
.type{margin:18px 0 0;font-size:clamp(8px,.56vw,10px);opacity:.62}
.guide-rule{height:1px;background:rgba(17,17,17,.22);margin:0 0 30px;transform-origin:left;transform:scaleX(0)}
.guide-label{margin:0 0 18px;opacity:.48}.guide-copy{margin:0;opacity:.62;max-width:220px}
.title-shutter{position:absolute;z-index:5;inset:0 0 0 auto;width:100%;background:#fff;transform-origin:right;transform:scaleX(1);pointer-events:none}
.reading-area{position:relative;min-width:0;overflow:hidden;padding-left:0}
.lyrics-shutter{position:absolute;z-index:8;inset:0;background:#fff;transform-origin:left;transform:scaleX(1);pointer-events:none}
.tabs{display:flex;gap:clamp(28px,3.3vw,58px);border-bottom:1px solid rgba(17,17,17,.20);margin:0 0 28px;opacity:0;transform:translateY(8px)}
.tab{border:0;border-bottom:1px solid transparent;background:none;padding:0 0 12px;font:inherit;font-size:clamp(9px,.64vw,11px);cursor:pointer;opacity:.44;white-space:nowrap}.tab.is-active{border-color:#111;opacity:1}
.lyrics{display:none;width:100%;font-size:clamp(14px,.94vw,16px);line-height:1.62;opacity:0;filter:blur(8px);transform:translateY(14px)}.lyrics.is-active{display:block}.lyrics p{margin:0 0 20px}.lyrics[lang="ja"]{letter-spacing:.045em}.version-note{margin-top:34px!important;padding-top:13px;border-top:1px solid rgba(17,17,17,.16);opacity:.42;font-size:.82em}
.work-footer{display:grid;grid-template-columns:minmax(260px,27%) minmax(0,1fr);gap:clamp(28px,3.2vw,66px);margin-top:24px;padding-top:14px;border-top:1px solid rgba(17,17,17,.20)}
.work-meta{display:flex;flex-direction:column;gap:11px;font-size:clamp(8px,.56vw,10px)}.work-meta span span{display:inline-block;width:75px;opacity:.48}.work-meta strong{font-weight:400}.invitation{display:flex;justify-content:space-between;align-items:end;gap:32px;font-size:clamp(9px,.64vw,11px);line-height:1.5}.invitation p{margin:0}.invitation a{white-space:nowrap;text-underline-offset:4px}
body.is-entered .title-shutter{animation:titleShutter .72s cubic-bezier(.76,0,.24,1) .08s forwards}
body.is-entered .work-title{animation:titleFloat .62s cubic-bezier(.22,.8,.24,1) .34s forwards}
body.is-entered .guide-rule{animation:ruleDraw .52s ease .58s forwards}
body.is-entered .lyrics-shutter{animation:lyricsShutter .78s cubic-bezier(.76,0,.24,1) .46s forwards}
body.is-entered .tabs{animation:softRise .48s ease .72s forwards}
body.is-entered .lyrics.is-active{animation:lyricsFloat .62s ease .76s forwards}
@keyframes titleShutter{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes lyricsShutter{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes titleFloat{to{opacity:1;filter:blur(0);transform:none}}
@keyframes lyricsFloat{to{opacity:1;filter:blur(0);transform:none}}
@keyframes softRise{to{opacity:1;transform:none}}
@keyframes ruleDraw{to{transform:scaleX(1)}}
@media(min-width:900px){.lyrics[data-content="translation"].is-active,.lyrics[data-content="singable"].is-active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(50px,7vw,115px);align-content:start}.lyrics[data-content="translation"] p,.lyrics[data-content="singable"] p{break-inside:avoid}.lyrics[data-content="translation"] .version-note,.lyrics[data-content="singable"] .version-note{grid-column:1/-1}}
@media(min-width:900px) and (max-height:950px){.detail-header{top:24px}.detail-shell{padding-top:66px;padding-bottom:20px}.detail-content{min-height:calc(100vh - 86px)}.journal-return{margin-bottom:22px}.reading-layout{padding-top:15px}.reading-guide{min-height:520px}.work-title{margin-bottom:24px}.work-title h1{font-size:clamp(27px,2.15vw,36px)}.type{margin-top:12px}.guide-rule{margin-bottom:23px}.tabs{margin-bottom:22px}.tab{padding-bottom:9px}.lyrics{font-size:clamp(13px,.84vw,15px);line-height:1.52}.lyrics p{margin-bottom:13px}.version-note{margin-top:18px!important;padding-top:9px}.work-footer{margin-top:14px;padding-top:12px}}
@media(max-width:760px){.detail-header{top:25px;left:7vw;right:7vw}.detail-shell{padding:92px 7vw 55px}.detail-content{min-height:auto;display:block}.work-heading,.reading-layout,.work-footer{display:block}.journal-return{margin-bottom:34px}.reading-layout{padding-top:25px}.reading-guide{min-height:auto;border-right:0;padding-right:0;margin-bottom:34px}.work-title{margin-bottom:22px}.work-title h1{font-size:26px;max-width:none}.title-shutter{inset:0}.guide-rule{margin-bottom:22px}.guide-copy{max-width:none}.tabs{gap:18px;overflow-x:auto;margin-bottom:28px;-webkit-overflow-scrolling:touch}.tab{font-size:9px}.lyrics{width:100%;font-size:13px;line-height:1.72}.work-footer{margin-top:48px}.work-meta{margin-bottom:30px}.invitation{display:block}.invitation a{display:inline-block;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.title-shutter,.lyrics-shutter{display:none}.work-title,.tabs,.lyrics{opacity:1!important;filter:none!important;transform:none!important}.guide-rule{transform:none!important}}

/* Journal v8: lyric text tone adjustment only */
.lyrics {
  color: rgba(17, 17, 17, .68);
}
.lyrics[lang="ja"] {
  color: rgba(17, 17, 17, .74);
}