/* NOEL AI LAB — cinematic studio study. Original preserved separately. */
:root { --wrap: 1440px; --bg: #08070d; --ink: #f1edf7; --mute: #b2abbf; --dim: #898195; --accent: #a490e7; --accent2: #cbb9ff; --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
html { scroll-padding-top: 105px; }
body { font-size: 16px; }
main, footer { text-shadow: none; }
section { padding: 140px 0; }
.wrap { padding-inline: 64px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 6px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 10px 20px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 16px; }
header { padding: 30px 48px; }
header.solid { padding: 20px 48px; background: rgba(8,7,13,.83); }
.logo { font-size: 19px; letter-spacing: .3em; }
.logo i { transform: rotate(45deg); background: #cbb9ff; }
header nav { gap: 34px; }
header nav a { font-size: 10px; letter-spacing: .16em; }
header nav a.hl { border-radius: 0; padding: 10px 18px; }
.hero-shade { background: linear-gradient(90deg,rgba(8,7,13,.42),transparent 75%),linear-gradient(0deg,rgba(8,7,13,.96),rgba(8,7,13,.1) 60%,rgba(8,7,13,.35)); }
.hero-inner { max-width: 1440px; padding: 0 64px 48px; }
.hero-kicker { margin-bottom: 24px; }
.hero-kicker .mono { font-size: 10px; letter-spacing: .16em; }
h1 { font-size: clamp(40px,5.2vw,78px); font-weight: 500; line-height: 1.38; letter-spacing: .015em; }
.hero-lead { max-width: 520px; font-family: var(--sans); font-size: 13px; line-height: 2.2; letter-spacing: .07em; color: #e1dbe9; margin-top: 22px; }
.hero-foot { margin-top: 36px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.23); }
.ticker { font-size: 9px; letter-spacing: .13em; }
.ticker .cut { font-size: 12px; }
.scroll-cue { text-decoration: none; font-family: var(--sans); font-size: 11px; letter-spacing: .17em; color: var(--ink); }
.reel-toggle { position: absolute; right: 64px; bottom: 140px; display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font: 15px var(--sans); backdrop-filter: blur(6px); background: rgba(0,0,0,.15); }
.strip { background: rgba(8,7,13,.87); }
.strip .cell { padding: 30px 24px; }
.strip .cell:first-child { padding-left: 0; }
.strip .cell .v { font-size: 16px; line-height: 1.7; }
.strip .cell .v small { font: 11px/1.9 var(--sans); color: var(--mute); margin-top: 8px; }
#scene { background: radial-gradient(ellipse at 85% 55%,rgba(114,73,190,.11),transparent 60%); }
#works { padding-top: 150px; }
.sec-head { grid-template-columns: 1fr minmax(250px,340px); gap: 70px; margin-bottom: 76px; }
.sec-head .idx { font: 11px var(--mono); margin-bottom: 22px; color: var(--accent2); }
.sec-head h2 { font-size: 39px; line-height: 1.5; letter-spacing: .06em; }
.sec-head p, .tc p { font-family: var(--sans); font-size: 13px; line-height: 2.15; color: var(--mute); }
.sec-head > p { background: radial-gradient(ellipse,rgba(8,7,13,.88) 30%,rgba(8,7,13,.58) 65%,transparent); text-shadow: 0 1px 7px #08070d; }
#works .sec-head h2 > span, #tools .sec-head h2 > span { display: block; font-size: 14px; font-weight: 400; letter-spacing: .12em; }
#works .sec-head h2 em, #tools .sec-head h2 em { display: block; margin: 24px 0 0 -5px; font-size: clamp(74px,8vw,130px); line-height: .84; letter-spacing: -.055em; font-style: normal; color: var(--ink); font-weight: 400; }
#works .sec-head h2 em br { display: none; }
#works .sec-head p { padding-bottom: 0; }
.selection-meta { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; margin-bottom: 28px; border-bottom: 1px solid var(--line2); }
.selection-meta .mono { font-size: 9px; letter-spacing: .2em; }
.featured-grid { gap: 46px 30px; }
.featured-grid .card { grid-column: span 4; }
.featured-grid .card:first-child { grid-column: span 12; margin-bottom: 22px; }
.featured-grid .card:first-child .frame { aspect-ratio: 2.15; }
.featured-grid .card:nth-child(2), .featured-grid .card:nth-child(3) { grid-column: span 6; }
.featured-grid .card:nth-child(3) { margin-top: 72px; }
.featured-grid .card:nth-child(n+4) { margin-top: 18px; }
.card .frame { border: 0; background: #13101a; }
.card img, .card video { object-fit: cover; }
.card:first-child img { object-position: center 37%; }
.card .meta { align-items: start; padding: 19px 0 0; gap: 12px; }
.card h3 { font-size: 18px; letter-spacing: .035em; }
.featured-grid .card:first-child h3 { font-size: 30px; }
.featured-grid .card:nth-child(2) h3,.featured-grid .card:nth-child(3) h3 { font-size: 23px; }
.card .tag { font-size: 9px; color: var(--mute); padding-top: 7px; letter-spacing: .08em; }
.card .badge { left: 18px; top: 18px; padding: 5px 9px; font: 9px var(--sans); letter-spacing: .1em; background: rgba(8,7,13,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); }
.card .dur { right: 18px; bottom: 18px; font-size: 9px; background: rgba(8,7,13,.5); }
.play-mark { position: absolute; right: 22px; top: 20px; z-index: 3; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; width: 39px; height: 39px; display: grid; place-items: center; font: 23px var(--en); background: rgba(8,7,13,.3); transition: background .3s, transform .3s; }
.card:hover .play-mark { background: var(--accent); transform: rotate(45deg); }
.card .frame::after { content: ''; pointer-events: none; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); }
.film-archive, .catalog-disclosure { border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); margin-top: 74px; background: rgba(8,7,13,.64); }
.film-archive > summary,.catalog-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 31px 0; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.archive-label { display: flex; align-items: center; gap: 44px; }
.archive-label .mono { font-size: 10px; color: var(--accent2); }
.archive-label > span:last-child { font-size: 20px; letter-spacing: .06em; }
.archive-label small { font: 11px var(--sans); margin-left: 18px; color: var(--mute); }
.archive-plus { font: 32px var(--en); color: var(--accent2); transition: transform .3s; }
details[open] > summary .archive-plus { transform: rotate(45deg); }
.archive-body { padding: 24px 0 50px; }
#filterCount { margin-bottom: 24px; font: 12px var(--sans); }
.filters { gap: 8px; margin-bottom: 23px; }
.chip { font-family: var(--sans); letter-spacing: .07em; font-size: 12px; padding: 11px 17px; }
.works-note { font-family: var(--sans); font-size: 12px; line-height: 2; margin-top: 28px; }
.works-note .mono { font-size: 9px; padding-top: 5px; }
#tools { padding-top: 100px; }
#tools .sec-head { align-items: center; }
#tools .sec-head h2 em { font-size: clamp(80px,8vw,130px); line-height: .88; }
.office-stage { aspect-ratio: 16/10; border-color: rgba(211,193,255,.4); box-shadow: 0 0 100px rgba(131,92,196,.14); }
.office-loading { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; gap: 15px; justify-content: center; align-items: center; font: 14px var(--sans); color: var(--mute); background: #161120; }
.office-loading .mono { color: var(--accent2); letter-spacing: .2em; }
.office-grid { gap: 80px; margin-top: 45px; }
.office-grid p { font: 13px/2.15 var(--sans); }
.office-grid p.lead { font-family: var(--jp); font-size: 23px; line-height: 1.8; }
.office-grid .sys p { font-family: var(--sans); }
#systems { padding-top: 30px; padding-bottom: 130px; }
#systems .sec-head { margin-bottom: 30px; }
#systems .catalog-disclosure { margin-top: 0; }
#toolCatalog { padding: 12px 0 42px; }
.tgrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.tcard { padding: 26px; background: rgba(13,10,22,.83); }
.tcard p { font: 13px/2 var(--sans); }
.tcard h4 { font-size: 18px; }
.tcard .tk { color: var(--mute); font-size: 9px; letter-spacing: .04em; }
.tcat-h .d { font: 12px var(--sans); }
#toolCatalog .reveal { opacity: 1; transform: none; }
#approach { background: rgba(10,8,16,.74); }
.step { padding-left: 30px; }
.step p { font: 13px/2.2 var(--sans); }
.step h3 { font-size: 33px; }
#about { padding-top: 180px; }
#about .grid2 { grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; }
.portrait { border: 0; }
.portrait img { filter: saturate(.85); }
#about .grid2 > div:last-child { background: radial-gradient(ellipse,rgba(8,7,13,.91) 45%,rgba(8,7,13,.65) 70%,transparent); }
#about p, #about p.dim { font: 14px/2.2 var(--sans); color: var(--mute); }
#about .sec-head { margin-bottom: 36px; }
#about .sec-head h2 { font-size: 52px; }
.creed div { font-size: 14px; line-height: 2; }
.facts .fv { font: 12px/1.9 var(--sans); }
#line { padding: 10px 0 95px; }
.line-band { background: linear-gradient(115deg,rgba(26,20,39,.96),rgba(8,7,13,.92)); border: 1px solid var(--line2); padding: 44px 40px; }
.line-band h2 { font-size: 23px; }
.line-band p,.line-list li { font: 12px/2 var(--sans); }
.cta { font-size: 14px; }
#contact { padding-top: 60px; padding-bottom: 120px; }
#contact .box { border: 0; border-top: 1px solid var(--line2); background: rgba(8,7,13,.72); padding: 70px 0 0; }
#contact p { font: 13px/2.1 var(--sans); }
#contact h2 { font-size: 42px; }
footer { background: rgba(8,7,13,.85); padding: 28px 48px; font-size: 9px; letter-spacing: .1em; color: var(--mute); }
.lb-inner { background: rgba(8,7,13,.94); }
.lb-info h3 { font-size: 23px; }
@media (min-width: 1600px) { .hero-inner { padding-bottom: 60px; } }
@media (max-width: 1100px) {
  .wrap { padding-inline: 36px; }
  .sec-head { gap: 40px; grid-template-columns: 1fr 300px; }
  .hero-inner { padding-inline: 36px; }
  .archive-label { gap: 26px; }
  #about .grid2 { gap: 48px; }
}
@media (max-width: 960px) {
  header,header.solid { padding: 18px 24px; }
  .logo { font-size: 16px; }
  header nav { gap: 18px; }
  #hero { padding-top: 68px; }
  .hero-shade { top: 68px; background: linear-gradient(0deg,var(--bg),transparent 60%); }
  .hero-inner { padding: 12px 36px 36px; }
  h1 { font-size: clamp(36px,5.5vw,62px); }
  .hero-lead { max-width: 550px; }
  .hero-kicker { margin-bottom: 15px; }
  .reel-toggle { right: 36px; top: -64px; bottom: auto; }
  .hero-foot { margin-top: 27px; }
  .sec-head { grid-template-columns: 1fr; gap: 30px; }
  .sec-head p { max-width: 510px; }
  #works .sec-head h2 em { font-size: 94px; }
  .office-stage { aspect-ratio: 16/10; }
  .office-grid { grid-template-columns: 1fr; gap: 32px; }
  .office-grid p.lead { font-size: 22px; }
  .strip .cell { padding: 24px 18px; }
  .strip .cell:first-child { padding-left: 18px; }
  .strip .cell .v { font-size: 15px; }
  .strip .cell .v small { font-size: 12px; }
  .steps { gap: 28px; }
  .step { padding-right: 10px; }
  #about .grid2 { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  #contact .box { grid-template-columns: 1fr; gap: 35px; }
  .line-band { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 700px) {
  .wrap { padding-inline: 22px; }
  section { padding-block: 80px; }
  header,header.solid { padding: 16px 22px; }
  header nav { gap: 15px; }
  header nav a { display: none; }
  header nav a[href="#works"],header nav a[href="#tools"] { display: block; font-size: 9px; }
  .logo { font-size: 15px; letter-spacing: .22em; gap: 9px; }
  #hero { padding-top: 63px; }
  .hero-shade { top: 63px; }
  .hero-inner { padding: 8px 22px 32px; }
  .hero-kicker { gap: 10px; }
  .hero-kicker .mono { font-size: 8px; letter-spacing: .07em; }
  .hero-kicker .mono:last-child { display: none; }
  h1 { font-size: clamp(25px,6.3vw,42px); line-height: 1.5; }
  .hero-lead { font-size: 13px; line-height: 2; letter-spacing: .03em; margin-top: 16px; }
  .hero-foot { align-items: center; gap: 10px; margin-top: 25px; padding-top: 18px; }
  .ticker { gap: 8px; font-size: 8px; flex-wrap: wrap; }
  .ticker .cut { display: none; }
  .scroll-cue { font-size: 10px; white-space: nowrap; letter-spacing: .06em; }
  .scroll-cue::after { width: 20px; }
  .reel-toggle { right: 22px; top: -58px; width: 35px; height: 35px; }
  .strip .wrap { grid-template-columns: 1fr 1fr; padding-inline: 22px; }
  .strip .cell { padding: 22px 15px; }
  .strip .cell:nth-child(odd) { padding-left: 0; }
  .strip .cell:nth-child(3),.strip .cell:nth-child(4) { border-top: 1px solid var(--line); }
  .strip .cell .v { font-size: 14px; }
  .strip .cell .v small { font-size: 12px; }
  #works { padding-top: 85px; }
  .sec-head { gap: 28px; margin-bottom: 42px; }
  .sec-head h2 { font-size: 28px; }
  .sec-head .idx { margin-bottom: 13px; }
  #works .sec-head h2 em { font-size: clamp(56px,15vw,88px); margin-top: 22px; letter-spacing: -.045em; }
  #works .sec-head h2 > span,#tools .sec-head h2 > span { font-size: 13px; }
  #tools .sec-head h2 em { font-size: 78px; }
  .sec-head p,.tc p { font-size: 14px; line-height: 2; }
  .selection-meta { gap: 8px; margin-bottom: 20px; }
  .selection-meta { background: rgba(8,7,13,.6); }
  .selection-meta .mono { font-size: 9px; letter-spacing: .06em; }
  .featured-grid,.grid { gap: 30px 14px; }
  .featured-grid .card,.featured-grid .card:nth-child(2),.featured-grid .card:nth-child(3),.grid .card { grid-column: span 12; margin: 0; }
  .featured-grid .card:first-child .frame { aspect-ratio: 16/10; }
  .card .meta { display: block; padding-top: 14px; }
  .featured-grid .card:first-child h3,.featured-grid .card:nth-child(2) h3,.featured-grid .card:nth-child(3) h3,.card h3 { font-size: 18px; }
  .card .tag { display: block; font-size: 9px; padding-top: 6px; }
  .card .badge { top: 12px; left: 12px; }
  .card .dur { right: 12px; bottom: 12px; }
  .play-mark { right: 13px; top: 12px; width: 32px; height: 32px; font-size: 20px; }
  .film-archive { margin-top: 42px; }
  .film-archive > summary,.catalog-disclosure > summary { padding: 24px 0; }
  .archive-label { display: grid; gap: 6px; }
  .archive-label .mono { font-size: 9px; }
  .archive-label > span:last-child { font-size: 17px; }
  .archive-label small { margin-left: 8px; font-size: 10px; }
  .chip { padding: 10px 13px; font-size: 12px; }
  .works-note { display: block; font-size: 12px; }
  .works-note .mono { display: block; margin-bottom: 7px; }
  #tools { padding-top: 60px; }
  .office-grid { margin-top: 28px; }
  .office-grid p,.office-grid .sys p { font-size: 15px; }
  .office-grid p.lead { font-size: 20px; }
  .office-stage .bar { font-size: 8px; letter-spacing: .02em; padding-inline: 8px; }
  .office-stage .open { padding: 9px 11px; font-size: 11px; right: 10px; bottom: 10px; }
  #systems { padding-top: 0; padding-bottom: 80px; }
  .tgrid { grid-template-columns: 1fr; }
  .tcard { padding: 22px; }
  .tcard p { font-size: 15px; }
  .tcard h4 { font-size: 18px; }
  .tcat-h h3 { font-size: 19px; }
  .tcat-h .d { font-size: 12px; line-height: 1.8; }
  .tlist li { flex-wrap: wrap; gap: 3px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .step .idx { margin-bottom: 12px; }
  .step p { font-size: 15px; }
  #about { padding-top: 85px; }
  #about .grid2 { grid-template-columns: 1fr; gap: 42px; }
  .portrait { width: 86%; }
  #about p,#about p.dim { font-size: 15px; }
  #about .sec-head h2 { font-size: 39px; }
  .facts .fv { font-size: 13px; }
  .creed div { font-size: 14px; }
  #line { padding: 0 0 65px; }
  .line-band { padding: 28px 22px; gap: 25px; }
  .line-band p,.line-list li { font-size: 14px; }
  #contact { padding: 0 0 65px; }
  #contact .box { padding-top: 40px; }
  #contact h2 { font-size: 30px; }
  #contact p { font-size: 14px; }
  #contact .mono a { overflow-wrap: anywhere; }
  footer { padding: 24px 22px; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 9px; }
  footer > span:last-child { width: 100%; }
  .lb-inner { padding: 16px; }
  .lb-info h3 { font-size: 18px; }
}
/* Readable body copy, with small labels retained only for secondary metadata. */
.work-intent { max-width: 44em; margin: 12px 0 0; font: 15px/1.9 var(--sans); color: var(--mute); }
.work-action { display: inline-flex; align-items: center; gap: 16px; margin-top: 15px; font: 12px/1.8 var(--sans); color: var(--accent2); }
.work-action > span { transition: transform .2s; }
.card:hover .work-action > span { transform: translate(3px,-3px); }
.tool-selection-heading { margin-bottom: 30px; }
.tool-selection-heading > .mono { display: block; color: var(--accent2); font-size: 11px; margin-bottom: 17px; }
.tool-selection-heading h2 { font: 30px/1.7 var(--jp); }
.public-tools { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line2); background: rgba(8,7,13,.82); }
.public-tool { padding: 38px 36px 38px 0; }
.public-tool + .public-tool { border-left: 1px solid var(--line2); padding-left: 36px; padding-right: 0; }
.public-tool > .mono { color: var(--accent2); font-size: 11px; }
.public-tool h3 { font: 25px/1.6 var(--jp); margin-top: 16px; }
.public-tool p { font: 16px/1.95 var(--sans); margin-top: 15px; color: var(--mute); }
.public-tool a { display: inline-block; margin-top: 24px; font: 15px/1.8 var(--sans); text-decoration: underline; text-underline-offset: 6px; }
.public-tool .tool-private-note { font-size: 13px; }
.lb-close { min-height: 44px; min-width: 76px; font-size: 14px; }
@media (max-width: 700px) {
  .work-intent { font-size: 16px; }
  .work-action { font-size: 13px; }
  .tool-selection-heading h2 { font-size: 25px; }
  .public-tools { grid-template-columns: 1fr; }
  .public-tool,.public-tool + .public-tool { padding: 28px 0; border-left: 0; }
  .public-tool + .public-tool { border-top: 1px solid var(--line2); }
}
.hero-lead,.sec-head p,.tc p,.office-grid p,.tcard p,.step p,#about p,#about p.dim,.line-band p,#contact p { font-size: 16px; line-height: 1.95; }
.office-grid p.lead { font-size: 23px; line-height: 1.8; }
header nav a,.hero-kicker .mono,.ticker,.selection-meta .mono,.card .tag,.card .badge,.card .dur,.archive-label .mono,.works-note .mono,.tcard .tk,footer { font-size: 11px; }
.strip .cell .v small,.archive-label small,.tcat-h .d,.facts .fk { font-size: 13px; }
.works-note,.facts .fv,.roster .v,.roster .v small { font-size: 15px; line-height: 1.9; }
.roster .k,.tcard .st,.tlist li,.tmore summary { font-size: 13px; }
.cta { font-size: 16px; }
.cta small { font-size: 12px; }
.line-band h2 { font-size: 27px; }
#contact .mono { font: 13px/1.9 var(--sans); letter-spacing: .02em; }
#session-demo { padding-top: 30px; padding-bottom: 120px; background: linear-gradient(180deg,rgba(8,7,13,0),rgba(8,7,13,.87) 9%,rgba(8,7,13,.87) 90%,rgba(8,7,13,0)); }
.session-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; margin-bottom: 38px; }
.session-heading .idx { display: block; color: var(--accent2); font-size: 11px; margin-bottom: 22px; }
.session-heading h2 { font: 32px/1.5 var(--jp); letter-spacing: .04em; }
.session-heading p { font: 16px/1.95 var(--sans); color: #c8c1d2; }
.mobile-br { display: none; }
.session-film { margin: 0; }
.session-screen { position: relative; padding: 9px; background: linear-gradient(145deg,#4d405e,#171320 55%,#332c42); border: 1px solid rgba(212,194,255,.3); box-shadow: 0 25px 80px rgba(58,37,89,.24); }
.session-film video { display: block; width: 100%; aspect-ratio: 16/9; background: #131018; }
.session-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 14px; white-space: nowrap; border: 1px solid rgba(255,255,255,.5); padding: 17px 24px; font: 15px var(--sans); color: white; background: rgba(16,12,25,.88); backdrop-filter: blur(12px); }
.session-play[hidden] { display: none; }
.session-play > span { font-size: 25px; }
.session-play small { font-size: 12px; color: #d1c4e7; }
.session-film figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 19px; color: var(--mute); font: 13px/1.8 var(--sans); }
.session-film figcaption .mono { font-size: 11px; color: var(--accent2); }
@media (max-width: 700px) {
  header nav a[href="#works"],header nav a[href="#tools"] { font-size: 12px; letter-spacing: .03em; }
  .hero-kicker .mono { font-size: 10px; }
  .hero-lead,.sec-head p,.tc p,.office-grid p,.office-grid .sys p,.tcard p,.step p,#about p,#about p.dim,.line-band p,#contact p { font-size: 16px; line-height: 1.95; }
  .office-grid p.lead { font-size: 21px; }
  .strip .cell .v { font-size: 16px; }
  .strip .cell .v small { font-size: 13px; }
  .selection-meta .mono { font-size: 10px; }
  .scroll-cue { font-size: 12px; }
  .featured-grid .card:first-child h3,.featured-grid .card:nth-child(2) h3,.featured-grid .card:nth-child(3) h3,.card h3 { font-size: 20px; line-height: 1.65; }
  .card .tag,.card .badge,.card .dur { font-size: 11px; }
  .archive-label > span:last-child { font-size: 18px; }
  .archive-label small { font-size: 12px; }
  .chip { font-size: 14px; }
  .works-note,.roster .v,.roster .v small,.facts .fv,.creed div { font-size: 15px; }
  .office-stage .bar { font-size: 10px; }
  .office-stage .open { font-size: 13px; }
  .line-band h2 { font-size: 25px; line-height: 1.7; }
  #contact h2 { font-size: 28px; line-height: 1.65; }
  .cta { font-size: 16px; }
  #session-demo { padding-top: 0; padding-bottom: 75px; }
  .session-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 26px; }
  .session-heading h2 { font-size: 27px; }
  .mobile-br { display: block; }
  .session-screen { padding: 4px; }
  .session-play { padding: 11px 16px; gap: 10px; font-size: 14px; }
  .session-film figcaption { display: grid; gap: 6px; font-size: 12px; }
}
.mobile-menu-toggle { display: none; }
.mobile-menu { inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: transparent; color: var(--ink); overflow: hidden; }
.mobile-menu::backdrop { background: rgba(3,2,7,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.menu-panel { width: min(88vw,390px); height: 100%; margin-left: auto; padding: max(20px,env(safe-area-inset-top)) 26px max(24px,env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 100% 0,rgba(118,86,180,.17),transparent 47%),#100d18; border-left: 1px solid rgba(202,184,238,.25); box-shadow: -24px 0 90px rgba(0,0,0,.35); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.mobile-menu[open] .menu-panel { animation: menuEnter .32s cubic-bezier(.16,1,.3,1); }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-brand { font: 11px var(--en); letter-spacing: .22em; }
.menu-close { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0 8px 8px; color: var(--mute); font: 12px var(--sans); }
.menu-close > span { font: 26px var(--sans); color: var(--ink); }
.menu-title { font: 52px/1 var(--en); letter-spacing: -.04em; font-weight: 400; margin: 26px 0 25px; }
.menu-links { display: grid; }
.menu-links a { display: grid; grid-template-columns: 23px 1fr 22px; gap: 12px; align-items: center; padding: 17px 0; text-decoration: none; border-top: 1px solid rgba(202,184,238,.16); font: 19px/1.45 var(--jp); }
.menu-links .menu-index { color: var(--accent2); font: 11px var(--mono); }
.menu-links small { display: block; color: var(--mute); font: 11px/1.6 var(--sans); letter-spacing: .06em; margin-top: 5px; }
.menu-arrow { color: var(--accent2); font: 24px var(--en); }
.menu-contact-links { display: grid; gap: 12px; margin-top: 28px; }
.menu-contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid rgba(202,184,238,.27); text-decoration: none; background: rgba(163,137,219,.08); font: 16px/1.5 var(--sans); }
.menu-contact-links a:first-child { background: #e7def8; color: #191322; border-color: #e7def8; }
.menu-contact-links small { display: block; margin-top: 5px; font: 11px/1.6 var(--sans); opacity: .75; }
.menu-signature { margin: auto 0 0; padding-top: 30px; font: 10px/1.8 var(--mono); letter-spacing: .15em; color: var(--mute); }
.menu-links a:hover { color: var(--accent2); }
section[tabindex="-1"]:focus { outline: none; }
@keyframes menuEnter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 700px) {
  header,header.solid { padding-block: 10px; }
  #hdr > nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0 8px 12px; font: 12px var(--sans); color: var(--ink); }
  .menu-glyph { display: grid; gap: 6px; width: 22px; }
  .menu-glyph i { display: block; height: 1px; width: 22px; background: var(--accent2); }
  .menu-glyph i:last-child { width: 16px; justify-self: end; }
  .line-band h2 { font-size: 23px; letter-spacing: .03em; }
  .line-band .cta { padding: 18px 16px; font-size: 15px; letter-spacing: .035em; }
}
@media (max-height: 720px) {
  .menu-title { font-size: 42px; margin-block: 17px 20px; }
  .menu-links a { padding-block: 12px; }
  .menu-contact-links { margin-top: 20px; gap: 10px; }
  .menu-signature { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  body.ready h1 .line > span { transform: none; }
  #scene { opacity: 1; }
}
/* Actual tool screens, with privacy-safe presentation data. */
#tool-previews { padding: 10px 0 110px; }
.tool-preview-heading { margin-bottom: 42px; }
.tool-preview-heading .idx { display:block; font-size:11px; color:var(--accent2); margin-bottom:20px; }
.tool-preview-heading h2 { font:32px/1.5 var(--jp); letter-spacing:.04em; }
.tool-preview-heading p { margin-top:20px; font:16px/1.95 var(--sans); color:var(--mute); }
.tool-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
.tool-preview-card { min-width:0; padding-bottom:26px; border-bottom:1px solid var(--line); }
.tool-preview-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tool-preview-top .mono { font-size:11px; letter-spacing:.1em; color:var(--accent2); }
.preview-status { font:12px var(--sans); color:#c5d8cf; border:1px solid #53635d; padding:5px 9px; border-radius:2px; }
.preview-status.wip { color:#e5d2ae; border-color:#6c5b40; }
.tool-image-button { display:block; position:relative; width:100%; padding:6px; background:#24202e; border:1px solid rgba(212,194,255,.28); cursor:zoom-in; }
.tool-image-button img { display:block; width:100%; height:auto; aspect-ratio:1665/994; object-fit:cover; object-position:top; }
.image-expand { position:absolute; right:15px; bottom:15px; padding:8px 12px; font:12px var(--sans); color:white; background:rgba(18,13,27,.92); border:1px solid #716481; }
.tool-image-button:hover { border-color:var(--accent2); }
.preview-tabs,.preview-progress { display:flex; align-items:center; gap:9px; min-height:60px; }
.preview-tabs button { min-height:40px; padding:7px 14px; border:1px solid var(--line); color:var(--mute); font:13px var(--sans); }
.preview-tabs button[aria-pressed="true"] { background:#d8c7ed; border-color:#d8c7ed; color:#20162f; }
.preview-progress { color:var(--mute); font:13px var(--sans); }
.progress-dot { width:5px; height:5px; border-radius:50%; background:#d5bb92; }
.tool-preview-card h3 { margin:12px 0 14px; font:24px/1.55 var(--sans); letter-spacing:0; font-weight:500; }
.tool-preview-card p { color:#c8c1d2; font:16px/1.9 var(--sans); }
.tool-preview-card .preview-caption { margin-top:22px; color:var(--mute); font:12px/1.85 var(--sans); }
.tool-image-dialog { color:var(--ink); background:#120e1b; border:1px solid #655178; padding:20px; width:min(1420px,96vw); max-width:96vw; max-height:94dvh; }
.tool-image-dialog::backdrop { background:rgba(2,1,6,.86); backdrop-filter:blur(8px); }
.tool-image-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:15px; }
.tool-image-dialog h2 { font:16px/1.5 var(--sans); }
.tool-image-dialog button { flex-shrink:0; min-height:44px; padding:8px 12px; border:1px solid var(--line); font:14px var(--sans); }
.tool-image-scroll { max-height:72dvh; overflow:auto; }
.tool-image-scroll img { display:block; width:100%; height:auto; }
.tool-image-dialog p { margin-top:14px; font:13px/1.8 var(--sans); color:var(--mute); }
@media(max-width:700px) {
  #tool-previews { padding-bottom:75px; }
  .tool-preview-grid { grid-template-columns:1fr; gap:42px; }
  .tool-preview-heading h2 { font-size:26px; }
  .tool-preview-heading { margin-bottom:30px; }
  .tool-preview-card h3 { font-size:22px; }
  .tool-image-dialog { padding:12px; }
  .tool-image-scroll img { min-width:850px; }
  .tool-image-dialog h2 { font-size:14px; }
  .tool-image-dialog p::after { content:' 横にスクロールして全体を確認できます。'; }
}
#tool-previews { background:linear-gradient(180deg,rgba(8,7,13,.1),rgba(8,7,13,.88) 8%,rgba(8,7,13,.88) 94%,rgba(8,7,13,.1)); }
.preview-status.case { color:#ddd0ec; border-color:#726182; }
.audience-stat { display:flex; align-items:center; gap:28px; padding:20px 0; margin:0 0 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.audience-stat > span { font:14px/1.7 var(--sans); color:var(--mute); }
.audience-stat strong { font:54px/1.1 var(--en); color:var(--ink); letter-spacing:-.025em; white-space:nowrap; }
.audience-stat strong span { font:19px/1.2 var(--sans); margin-left:7px; letter-spacing:0; }
#contact .line-destination { margin:12px 0 6px; color:var(--mute); font:14px/1.8 var(--sans); }
@media(max-width:700px) {
  .audience-stat { justify-content:space-between; gap:14px; padding:18px 0; }
  .audience-stat > span { font-size:13px; }
  .audience-stat strong { font-size:46px; }
  #contact .line-destination { font-size:14px; }
}
/* Keep the brighter copy while letting the signature particles show through. */
:root { --body-copy: #d2cbdc; }
.work-intent,.sec-head p,.tool-preview-heading p,#about p,#about p.dim { color:var(--body-copy); }
#about p,#about p.dim { opacity:1; }
.work-copy { padding-bottom:5px; }
.work-intent,.work-action,#toolCount { text-shadow:0 1px 4px #08070d; }
.catalog-disclosure { background:rgba(8,7,13,.64); }
#works .sec-head > p,#tools .sec-head > p,#approach .sec-head > p { background:radial-gradient(ellipse,rgba(8,7,13,.88) 30%,rgba(8,7,13,.58) 65%,transparent); }
#about .grid2 > div:last-child { background:radial-gradient(ellipse,rgba(8,7,13,.91) 45%,rgba(8,7,13,.65) 70%,transparent); }
#contact .line-destination { color:var(--body-copy); opacity:1; }
.tool-category > summary { cursor:pointer; list-style:none; min-height:60px; margin-bottom:0; align-items:center; }
.tcat-count { margin-left:auto; white-space:nowrap; color:var(--mute); font:13px var(--sans); }
.tcat-toggle { color:var(--accent2); font:24px var(--sans); transition:transform .2s; }
.tool-category[open] > summary .tcat-toggle { transform:rotate(45deg); }
.tcat-body { padding-top:18px; }
.tcat-note { margin-bottom:16px; font:13px/1.8 var(--sans); color:var(--mute); }
.footer-links { display:flex; align-items:center; gap:24px; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; font:13px/1.6 var(--sans); letter-spacing:.02em; text-decoration:none; }
.footer-links a:hover { color:var(--accent2); text-decoration:underline; text-underline-offset:5px; }
.line-band.line-story { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.line-story .line-story-intro h2 { font-size:32px; line-height:1.65; }
.line-story .line-story-intro p { color:var(--body-copy); margin-top:20px; }
.line-story-example { border-left:1px solid var(--line2); padding-left:40px; min-width:0; }
.line-example-date { color:var(--accent2); font-size:12px; letter-spacing:.04em; }
.line-story-example h3 { font:500 22px/1.7 var(--jp); margin:18px 0; }
.line-story-example blockquote { margin:0 0 26px; padding-left:18px; border-left:2px solid var(--accent2); color:var(--body-copy); font:16px/1.95 var(--sans); }
.line-story-example .cta { white-space:normal; }
@media(max-width:700px) {
  .line-band.line-story { grid-template-columns:1fr; gap:30px; }
  .line-story .line-story-intro h2 { font-size:27px; }
  .line-story-example { border-left:0; border-top:1px solid var(--line2); padding:26px 0 0; }
  .line-story-example h3 { font-size:21px; }
}
#line-closing { padding:0 0 76px; }
.closing-line-row { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-top:38px; border-top:1px solid var(--line2); }
.closing-line-label { display:block; margin-bottom:15px; color:var(--accent2); font-size:12px; }
.closing-line-row h2 { font:500 28px/1.7 var(--jp); letter-spacing:.04em; text-shadow:0 1px 6px var(--bg); }
.closing-line-link { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; padding:18px 24px; border:1px solid var(--accent2); color:var(--ink); background:rgba(164,144,231,.09); font:15px/1.6 var(--sans); text-decoration:none; }
.closing-line-link:hover { background:rgba(164,144,231,.2); }
@media(max-width:700px) {
  #line-closing { padding-bottom:52px; }
  .closing-line-row { flex-direction:column; align-items:stretch; gap:25px; padding-top:28px; }
  .closing-line-row h2 { font-size:24px; }
  .closing-line-link { align-self:flex-start; }
}
@media(max-width:700px) {
  .tool-category,.tool-category:first-child { margin-top:0; }
  .tool-category > summary { display:grid; grid-template-columns:22px minmax(0,1fr) auto 22px; gap:12px; padding:21px 0; min-height:76px; }
  .tool-category > summary h3 { font-size:17px; line-height:1.7; letter-spacing:.02em; }
  .tool-category > summary .n { font-size:11px; }
  .tcat-count { font-size:12px; }
  .tool-category[open] .tcat-body { padding-bottom:28px; }
  .tool-category .tcard { padding:20px; }
  .tool-category .tn { flex-wrap:wrap; gap:8px; }
  #toolCatalog { padding-top:0; }
  #toolCount { line-height:1.95; }
}
#story { padding:80px 0 0; scroll-margin-top:90px; }
.story-heading { max-width:800px; margin:0 auto 36px; }
.story-heading > .mono { color:var(--accent2); font-size:12px; }
.story-heading h2 { margin-top:18px; font:500 clamp(28px,4vw,42px)/1.6 var(--jp); letter-spacing:.04em; }
.manga-pages { width:min(100%,800px); margin:0 auto; display:flex; flex-direction:column; gap:16px; text-shadow:none; }
.manga-pages img { display:block; width:100%; height:auto; aspect-ratio:auto; background:#f5f1ef; }
#line:has(.manga-line) { padding:36px 0 76px; }
.manga-line { max-width:800px; margin:auto; text-align:center; }
.manga-line > .mono { color:var(--accent2); font-size:12px; }
.manga-line h2 { margin:16px 0; font:500 clamp(23px,3vw,32px)/1.7 var(--jp); }
.manga-line > p { font:16px/1.9 var(--sans); color:var(--body-copy); }
.manga-line > .cta { max-width:420px; margin:24px auto; text-align:left; }
.manga-line-example { text-align:left; max-width:560px; margin:28px auto 0; border-top:1px solid var(--line2); }
.manga-line-example summary { padding:18px 0; cursor:pointer; font:14px/1.7 var(--sans); }
.manga-line-example h3 { margin:14px 0; font:500 18px/1.7 var(--jp); }
.manga-line-example blockquote { margin:0; padding-left:16px; border-left:2px solid var(--accent2); font:15px/1.9 var(--sans); }
@media(max-width:700px) {
  #story { padding-top:52px; }
  .story-heading { margin-bottom:24px; }
  .manga-pages { gap:8px; }
  #line:has(.manga-line) { padding-top:28px; }
}

/* Secondary tool archive, closed by default. */
#systems { padding-top:24px; padding-bottom:48px; }

.manga-open {display:block;cursor:zoom-in}.manga-open:focus-visible{outline:3px solid #d5c1ff;outline-offset:3px}.manga-hint{font:14px/1.8 var(--sans);color:var(--body-copy);margin-top:20px}
#mangaReader{padding:0;width:min(1100px,96vw);max-width:96vw;max-height:94dvh;border:1px solid #756384;background:#18131e;color:#faf6ff;overflow:hidden}
#mangaReader::backdrop{background:rgba(0,0,0,.88)}
.manga-reader-bar,.manga-reader-nav{display:flex;align-items:center;gap:10px;padding:10px 12px}.manga-reader-bar>span{margin-right:auto;font:14px/1.4 sans-serif;white-space:nowrap}.manga-reader-nav{justify-content:space-between}
#mangaReader button{font:14px/1.4 sans-serif;background:#302537;color:#fff;border:1px solid #796780;padding:10px 12px;cursor:pointer}#mangaReader button:disabled{opacity:.4;cursor:default}
.manga-reader-hint{margin:0;padding:0 12px 8px;font:12px/1.4 sans-serif;color:#d4c7db}
.manga-reader-scroll{height:min(72dvh,1100px);overflow:auto;overscroll-behavior:contain;background:#211b28}
#mangaReaderImage{display:block;width:1000px;max-width:none;height:auto;margin:auto}
#mangaReader.fit-page #mangaReaderImage{width:100%;max-width:1000px}