.story-24{--bg:#191b24;--ink:#faf8fc;--accent:#cbb0f7;--panel:#292934}

.story{background:var(--bg);color:var(--ink);overflow:clip;font-family:"Yu Gothic UI",Meiryo,sans-serif;line-height:1.85}.story *{box-sizing:border-box}.story .wrap{width:min(1280px,90%);margin-inline:auto}.story h2,.story h3,.story p,.story figure{margin:0}.story .hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,72px);min-height:min(780px,86svh);padding-block:clamp(46px,7vw,108px)}.story .pitch{position:relative;z-index:1}.story h1{font-size:clamp(.9rem,1.22vw,1.1rem);font-weight:650;line-height:1.7;margin:.9rem 0 1.5rem}.story .display{font-size:clamp(2.35rem,4.1vw,4.6rem);font-weight:730;line-height:1.33;letter-spacing:-.055em;line-break:strict;word-break:auto-phrase}.story .lead{margin:1.35rem 0;max-width:36em}.story .word{font:italic 400 clamp(1.25rem,2.2vw,2.3rem)/1.15 Georgia,serif;color:var(--accent)}.story .visual{min-width:0}.story .visual svg{display:block;width:100%;height:auto}.story figcaption{display:flex;justify-content:space-between;gap:10px;border-top:1px solid currentColor;padding-top:.55rem;margin-top:.7rem;color:var(--accent);font:500 .76rem/1.5 monospace}.story .cta{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5em;background:var(--ink);color:var(--bg);font-weight:700;padding:.65em 1.25em;text-decoration:none;min-height:46px}.story .cta::after{content:'↗';font-family:Arial}.story .cta:hover{box-shadow:inset 0 -3px var(--accent)}.story .intro,.story .demo,.story .service,.story .closing{padding-block:clamp(52px,7vw,110px)}.story .intro{border-top:1px solid color-mix(in srgb,var(--ink) 32%,transparent)}.story .kicker{font:600 .79rem/1.4 monospace;letter-spacing:.1em;color:var(--accent);margin-bottom:1rem}.story h2{font-size:clamp(1.75rem,3.3vw,3.4rem);line-height:1.4;letter-spacing:-.04em;word-break:auto-phrase}.story h3{font-size:clamp(1.18rem,1.85vw,1.6rem);line-height:1.5}.story .intro .inner,.story .service .inner,.story .closing .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,5vw,80px);align-items:start}.story .demo{background:var(--panel)}.story .demo .note{margin:1rem 0 1.75rem;max-width:58em}.story .instrument{display:grid;grid-template-columns:minmax(225px,.72fr) minmax(0,1.28fr);gap:clamp(14px,3vw,44px);border-top:2px solid var(--accent);padding-top:1.5rem}.story .keys{display:flex;align-content:flex-start;align-items:flex-start;gap:9px;flex-wrap:wrap}.story .keys label{display:flex;align-items:center;gap:.4em;flex-wrap:wrap;font-weight:650}.story select,.story button{color:var(--ink);background:var(--bg);border:1px solid currentColor;padding:.55em .85em;min-height:44px;border-radius:3px;font-size:1rem;max-width:100%}.story option{background:var(--bg);color:var(--ink)}.story button:active{transform:translateY(1px)}.story button:hover,.story button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.story .keys select{width:100%}.story .keys input{width:20px;height:20px}.story [data-reset]{background:transparent;text-decoration:underline}.story .output{padding:clamp(20px,3vw,46px);background:var(--bg);min-height:12rem;overflow-wrap:anywhere;border-left:3px solid var(--accent)}.story .output h3,.story .output h4{margin:.4em 0}.story .output article,.story .output aside{padding:.8em 0;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}.story .output article p{margin:.25em 0}.story .output small{font-weight:650;color:var(--accent)}.story .demo .cta{margin-top:1.7rem}.story .service article+article{border-top:1px solid var(--accent);margin-top:1.4em;padding-top:1.4em}.story .service h3,.story .closing h3{margin-bottom:.6rem}.story .closing{background:var(--panel)}.story details{border-block-start:1px solid currentColor;padding:.6em 0}.story summary{font-weight:700;padding:.65em 0;min-height:44px}.story details p{padding:.5em 0}.story .closing .cta{margin-top:1.2em}
@media(min-width:801px){.story .hero{position:relative}}
@media(max-width:800px){.story .hero,.story .instrument,.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:1fr}.story .hero{min-height:0;gap:26px;padding-block:36px}.story .display{font-size:clamp(2.05rem,6vw,3.2rem)}.story .visual{width:min(100%,560px);margin:auto}.story .kicker{margin-bottom:.6rem}.story .intro,.story .demo,.story .service,.story .closing{padding-block:46px}.story .keys{align-items:center}.story .keys label{min-height:44px}.story h1{margin:.5rem 0 .9rem}.story .lead{margin:1em 0}}

.story-24 .hero{grid-template-columns:.93fr 1.07fr}.story-24 .display,.story-24 .intro h2{font-family:Yu Mincho,serif}.story-24 .visual svg{animation:lightSplit .8s ease-out}.story-24 .intro{border-top:1px solid #987db5}.story-24 .service{background:#f6f3f8;color:#26242d}.story-24 .service .kicker{color:#694887}.story-24 .output{border-image:linear-gradient(#bc99df,#77cad0) 1;border-width:0 0 0 4px;border-style:solid}.story-24 .output.changed h3{animation:lightSplit .5s ease-out}
@keyframes lightSplit{from{clip-path:polygon(0 0,54% 0,70% 100%,0 100%)}}
@media(max-width:800px){.story .hero,.story .instrument,.story .pitch{display:block}.story .visual{margin:20px auto 0;transform:none}.story .visual svg{height:auto;max-height:285px}.story .output{margin-top:1.2rem}.story .hero{padding-block:30px}.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:minmax(0,1fr)}.story .keys select{width:100%}.story .keys label{flex:1 1 10rem}.story .visual figcaption{font-size:.73rem}}

.story-24 .stage-visual{grid-column:1/-1;display:block;min-width:0;overflow:hidden;margin-bottom:.5rem}
.story-24 .stage-visual svg{display:block;width:100%;height:auto;max-height:300px}
.story-24 .stage-visual svg g,.story-24 .stage-visual svg rect{transition:transform .6s cubic-bezier(.22,.72,.24,1),translate .6s,opacity .35s,scale .45s}
.story-24 .tone0{transform:translate(330px,28px) rotate(-5deg)}.story-24 .tone1{transform:translate(361px,60px) rotate(1deg)}.story-24 .tone2{transform:translate(386px,91px) rotate(5deg)}.story-24 .tone-sheet[data-front=true]{transform:translate(427px,61px) scale(1.2);filter:drop-shadow(-6px 8px 3px #19172275)}.story-24 .tone-desk[data-compare=true] .tone0{transform:translate(170px,35px) rotate(-7deg) scale(.87)}.story-24 .tone-desk[data-compare=true] .tone1{transform:translate(313px,89px) scale(.87)}.story-24 .tone-desk[data-compare=true] .tone2{transform:translate(465px,42px) rotate(5deg) scale(.87)}.story-24 .tone-desk[data-long=true] .tone-sheet rect:nth-last-child(-n+2){scale:1 1}.story-24 .tone-desk[data-long=false] .tone-sheet rect:nth-last-child(-n+2){scale:.58 1;transform-box:fill-box}

html[data-motion=reduced] .story-24 .stage-visual *,html[data-page-paused] .story-24 .stage-visual *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.story-24 .stage-visual *{transition:none!important;animation:none!important}}
.story-24 .tone-desk[data-compare=false] .tone-sheet[data-front=false]{translate:-80px 0;opacity:.72}

.hero .display { overflow-wrap: normal; line-break: strict; text-wrap: balance; }
.hero .display > [data-wrap-group] { display: inline-block; white-space: nowrap; }


.ai-feature,
.ai-notes {
  padding: clamp(48px, 7vw, 104px) 0;
}
.ai-frame {
  width: min(1150px, 90%);
  margin: 0 auto;
  min-width: 0;
}
.ai-frame > * {
  min-width: 0;
}
.ai-feature h2,
.ai-notes h2 {
  margin: 0 0 0.38em;
  font-size: clamp(1.85rem, 3.9vw, 3.9rem);
  line-height: 1.25;
  letter-spacing: -0.052em;
  color: inherit;
  word-break: auto-phrase;
  text-wrap: balance;
}
.ai-feature header > p:last-child,
.ai-feature .ai-frame > div:first-child > p:last-child {
  max-width: 35em;
}
.ai-caption {
  margin: 0 0 1rem;
  font-weight: 730;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.ai-feature p:not(.ai-caption),
.ai-notes p {
  line-height: 1.85;
}
.ai-notes h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.8rem);
}
.ai-notes .ai-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 4.5vw, 66px);
  margin-top: 1.65rem;
}
.ai-notes h3 {
  margin: 0.4rem 0 0.65rem;
  font-size: clamp(1.1rem, 1.65vw, 1.48rem);
  line-height: 1.55;
  word-break: auto-phrase;
  text-wrap: balance;
}
.ai-notes p {
  margin: 0;
}
.ai-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.24rem 0.6rem 0.24rem 0;
  min-height: 44px;
  padding: 0.35em 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: inherit;
  text-underline-offset: 0.32em;
}
.ai-jump:after {
  content: "↓";
}
@media (max-width: 740px) {
  .ai-notes .ai-notes-grid {
    grid-template-columns: 1fr;
  }
  .ai-frame {
    width: 89%;
  }
}

.printroom {
  background: #282338;
  color: #faf5fe;
}
.printroom .ai-frame {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: center;
  gap: clamp(22px, 5vw, 78px);
}
.prism-copy h2 {
  font-family: "Yu Mincho", serif;
  font-weight: 550;
}
.print-samples fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
}
.print-samples legend {
  color: #e5cdee;
  font-size: 0.82rem;
  font-weight: 700;
}
.print-samples label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  margin-right: 0.6em;
  cursor: pointer;
}
.print-samples input {
  width: 1.04rem;
  height: 1.04rem;
  accent-color: #c7a8e7;
}
.print-proof {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  padding: clamp(18px, 3.4vw, 42px);
  min-height: 265px;
  background: #e9bfd6;
  color: #302236;
  box-shadow: 6px 6px #110f19;
}
.print-proof small {
  position: relative;
  display: inline-block;
  background: #fbf5e9;
  padding: 0.3em 0.6em;
  color: #2b2830;
  font-weight: 650;
  z-index: 1;
}
.print-proof h3 {
  font:
    750 clamp(1.9rem, 4.5vw, 4.6rem) / 1.2 "Yu Mincho",
    serif;
  letter-spacing: -0.08em;
  margin: 0.28em 0;
}
.print-proof p {
  max-width: 73%;
  font-size: 0.97rem;
  line-height: 1.7;
  margin: 0.65em 0 0;
  padding: 0.38em 0.48em;
  background: #fff7eae8;
  color: #292530;
}
.sheet-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.sheet-art i {
  position: absolute;
  width: 37%;
  height: 74%;
  top: 20%;
  right: -5%;
  transform: rotate(21deg) skewY(-11deg);
  background: repeating-linear-gradient(92deg, #9a83bb 0 2px, #bfaeba 3px 12px);
  box-shadow: inset -16px 0 0 #69568155;
}
.sheet-art i:nth-child(2) {
  right: 10%;
  top: 30%;
  height: 72%;
  background: #72ae9b;
  transform: rotate(46deg) skewY(-18deg);
  clip-path: polygon(0 0, 100% 12%, 100% 85%, 20% 100%);
}
.sheet-art i:nth-child(3) {
  right: -3%;
  top: 48%;
  background: #ece2bd;
  transform: rotate(-19deg);
  clip-path: polygon(50% 0, 100% 75%, 0 100%);
}
.proof-shelf {
  background: #e3e8c9;
}
.proof-shelf .sheet-art {
  transform: rotate(-18deg) scale(0.94);
}
.proof-shelf h3 {
  font-family: "Yu Gothic", sans-serif;
  letter-spacing: -0.07em;
}
.proof-inbox {
  background: #d6d4f0;
}
.proof-inbox .sheet-art {
  transform: translate(12%, -28%) rotate(-14deg) scale(0.9);
}
.print-samples:has(input[value="poster"]:checked)
  .print-proof:not(.proof-poster),
.print-samples:has(input[value="shelf"]:checked) .print-proof:not(.proof-shelf),
.print-samples:has(input[value="inbox"]:checked)
  .print-proof:not(.proof-inbox) {
  display: none;
}
.story-24 .ai-notes {
  background: #302b3b;
  color: #f9f5fb;
}
.story-24 .ai-notes article {
  border-top: 1px solid #bda4cd;
  padding-top: 1em;
}
.story-24 .ai-notes h3 {
  font-family: "Yu Mincho", serif;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .printroom[data-seen="true"] .sheet-art i {
    animation: press-fold 0.8s both;
  }
  html[data-motion="normal"]
    .printroom[data-seen="true"]
    .sheet-art
    i:nth-child(2) {
    animation-delay: 0.08s;
  }
  html[data-motion="normal"]
    .printroom[data-seen="true"]
    .sheet-art
    i:nth-child(3) {
    animation-delay: 0.15s;
  }
  @keyframes press-fold {
    from {
      translate: 34% 12%;
      rotate: 13deg;
    }
  }
}
@media (max-width: 740px) {
  .printroom .ai-frame {
    grid-template-columns: 1fr;
  }
  .print-proof p {
    max-width: 87%;
  }
}
.printroom {
  background: linear-gradient(120deg, #252334, #1c1b22 65%);
  border-block: 1px solid #665c76;
}
.printroom .ai-frame {
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(18px, 4vw, 66px);
}
.prism-copy h2 {
  font-size: clamp(2.12rem, 4vw, 4.2rem);
  line-height: 1.45;
}
.print-samples {
  display: flex;
  flex-direction: column;
}
.print-samples fieldset {
  order: 2;
  margin: 1.35rem 0 0;
  border-top: 1px solid #887b95;
  padding-top: 0.4rem;
}
.print-samples legend {
  padding: 0 0.5rem 0 0;
}
.print-proof {
  min-height: clamp(250px, 29vw, 380px);
  padding-top: clamp(24px, 3.4vw, 58px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-shadow: 9px 9px 0 #08080d;
}
.print-proof h3 {
  font-size: clamp(2.5rem, 5.6vw, 5.7rem);
}
.print-proof p {
  max-width: 67%;
  font-size: 1rem;
}
.sheet-art i {
  width: 40%;
}
.print-samples:has(input[value="poster"]:checked)
  .print-proof:not(.proof-poster),
.print-samples:has(input[value="shelf"]:checked) .print-proof:not(.proof-shelf),
.print-samples:has(input[value="inbox"]:checked)
  .print-proof:not(.proof-inbox) {
  display: none;
}
@media (max-width: 740px) {
  .printroom .ai-frame {
    grid-template-columns: 1fr;
  }
  .print-proof p {
    max-width: 83%;
  }
}

.story-24 .hero .light-table { background: #191b26; animation: none; }
.prism-fan { transform-origin: 320px 213px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .prism-fan { animation: disperse-words 7.6s ease-in-out infinite; }
  html[data-motion="normal"] .prism-input { animation: feed-light 7.6s ease-in-out infinite; }
}
@keyframes disperse-words {
  0%, 100% { transform: scaleY(.69) rotate(-2deg); }
  42% { transform: scaleY(1.12) rotate(1deg); }
  70% { transform: scaleY(.89) rotate(0); }
}
@keyframes feed-light { 0%, 100% { transform: translate(0,0); } 48% { transform: translate(120px,-3px); } }
.story-24 .register-proof { grid-column: 1 / -1; margin: 0; max-width: 54rem; width: 100%; justify-self: center; background: #eee9de; color: #2d2832; padding: .8rem; }
.story-24 .register-proof figcaption { margin: 0; padding: .25rem .3rem .7rem; border: 0; color: #554659; }
.register-sheet { position: relative; background: #fffaf0; padding: clamp(24px,5vw,54px) clamp(17px,5vw,55px); border: 1px solid #c3b9a8; }
.register-sheet small { font-weight: 700; color: #5c4c5e; }
.register-title { position: relative; padding-right: 1.55em; margin: .5rem 0 .7rem; font: 650 clamp(1.8rem,6.3vw,5rem)/1.5 "Yu Mincho", Georgia, serif; letter-spacing: -.06em; white-space: nowrap; }
.register-title strong { position: relative; z-index: 1; font-weight: inherit; }
.ink-proof { position: absolute; top: .15em; right: 0; width: 1.5em; height: 1.5em; border: 2px solid currentColor; border-radius: 50%; text-align: center; font-size: .77em; line-height: 1.36; letter-spacing: 0; mix-blend-mode: multiply; pointer-events: none; }
.ink-plum { color: #ae5582; transform: translate(calc((1 - var(--cg-progress, .55)) * -17px), calc((1 - var(--cg-progress, .55)) * -5px)); }
.ink-teal { color: #47988c; transform: translate(calc((1 - var(--cg-progress, .55)) * 18px), calc((1 - var(--cg-progress, .55)) * 6px)); }
.registration-mark { position: absolute; width: 11px; height: 11px; border: solid #7a7271; }
.mark-tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.mark-br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.story-24 .register-note { margin: .6rem .3rem 0; font-size: .94rem; }
@media (max-width: 800px) {
  .story-24 .hero { display: grid; grid-template-columns: minmax(0,1fr); gap: .7rem; }
  .story-24 .hero .pitch { display: contents; }
  .story-24 .hero .word { grid-row: 1; }
  .story-24 .hero h1 { grid-row: 2; margin: 0; }
  .story-24 .hero .display { grid-row: 3; }
  .story-24 .hero .visual { grid-row: 4; margin: 0; width: 100%; }
  .story-24 .hero .lead { grid-row: 5; margin: .4rem 0; }
  .story-24 .light-actions { grid-row: 6; }
}