.story-13{--bg:#14202e;--ink:#f7f5f1;--accent:#e2b997;--panel:#252f37}

.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-13 .display,.story-13 .intro h2,.story-13 .service h2{font-family:Yu Mincho,serif;font-weight:500}.story-13 .hero{gap:0}.story-13 .visual{box-shadow:18px 18px 0 #212e39}.story-13 .visual svg{animation:lightReveal .88s ease-out}.story-13 .intro .inner{max-width:930px}.story-13 .output{transition:max-width .55s,box-shadow .55s;max-width:100%}.story-13 [data-view=phone] .output{max-width:340px;border:6px solid #949188;border-radius:22px;box-shadow:16px 16px 0 #14202e}.story-13 .marked{background:#34424d}
@keyframes lightReveal{from{clip-path:inset(0 22% 0 0);filter:brightness(.68)}}
@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-13 .stage-visual{grid-column:1/-1;display:block;min-width:0;overflow:hidden;margin-bottom:.5rem}
.story-13 .stage-visual svg{display:block;width:100%;height:auto;max-height:300px}
.story-13 .stage-visual svg g,.story-13 .stage-visual svg rect{transition:transform .6s cubic-bezier(.22,.72,.24,1),translate .6s,opacity .35s,scale .45s}
.story-13 .folio0{transform:translate(64px,39px) rotate(-3deg)}.story-13 .folio1{transform:translate(243px,37px) rotate(0deg)}.story-13 .folio2{transform:translate(423px,38px) rotate(3deg)}.story-13 .reader-frame{opacity:0;transform:translate(238px,23px)}.story-13 [data-view=phone] .reader-frame{opacity:1}.story-13 [data-view=phone] .folio0{transform:translate(205px,52px) rotate(-8deg)}.story-13 [data-view=phone] .folio1{transform:translate(225px,45px) rotate(-4deg)}.story-13 [data-view=phone] .folio2{transform:translate(245px,33px)}.story-13 [data-chapter="0"] .folio0{transform:translate(79px,37px)}.story-13 [data-chapter="0"] .reader-frame{transform:translate(72px,27px)}.story-13 [data-chapter="1"] .folio1{transform:translate(124px,37px)}.story-13 [data-chapter="1"] .reader-frame{transform:translate(117px,27px)}
html[data-motion=reduced] .story-13 .stage-visual *,html[data-page-paused] .story-13 .stage-visual *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.story-13 .stage-visual *{transition:none!important;animation:none!important}}

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


/* Individual project walk-throughs */
.hp-feature, .hp-handoff {box-sizing:border-box;max-width:100%;width:min(1180px,90%);margin-inline:auto;grid-column:1/-1;overflow-wrap:break-word;}
.hp-feature {padding-block:clamp(38px,6.2vw,90px);}
.hp-feature .hp-heading,.hp-handoff h2{font-size:clamp(1.65rem,3.8vw,3.45rem);line-height:1.28;letter-spacing:-.045em;max-width:22em;text-wrap:balance}
.hp-feature p,.hp-handoff p{line-height:1.9;max-width:46em}
.hp-feature h3,.hp-handoff h3 {line-height:1.45;letter-spacing:-.02em}
.hp-feature .hp-intro,.hp-handoff .hp-intro{margin:1rem 0 2rem;}
.hp-feature details,.hp-handoff details{margin:0;border-block-end:1px solid currentColor;}
.hp-feature summary,.hp-handoff summary{padding:14px 5px;cursor:pointer;font-weight:bold;min-height:44px;}
.hp-feature details>p,.hp-handoff details>p {padding:0 5px 20px;}
.hp-feature summary:focus-visible,.hp-handoff summary:focus-visible,.hp-feature label:focus-within {outline:3px solid currentColor;outline-offset:3px;}
.hp-handoff {padding:clamp(32px,5vw,72px) 0}
.hp-handoff dl{margin:1.55rem 0 0;display:grid;grid-template-columns:minmax(10em,.43fr) minmax(0,1fr);border-top:1px solid currentColor;}
.hp-handoff dt,.hp-handoff dd{margin:0;padding:1.1rem 0;border-bottom:1px solid currentColor;}
.hp-handoff dt{font-weight:750}.hp-handoff dd{padding-inline-start:1.2rem;line-height:1.85;}
@media(max-width:620px){.hp-handoff dl{display:block}.hp-handoff dt{border:0;padding-bottom:.12rem}.hp-handoff dd{padding:.15rem 0 1rem}.hp-feature,.hp-handoff{width:90%;}}
@media (prefers-reduced-motion:reduce){.hp-feature *,.hp-feature *::before,.hp-feature *::after,.hp-handoff *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
html[data-motion="reduced"] :is(.hp-feature,.hp-handoff) *,html[data-motion="reduced"] .hp-feature *::before,html[data-motion="reduced"] .hp-feature *::after {animation:none!important;transition:none!important;}
.light-study{padding-top:clamp(34px,6vw,88px);border-top:1px solid #99785a}.light-copy{display:grid;grid-template-columns:1fr .9fr;gap:clamp(20px,5vw,78px);align-items:center}.light-copy .hp-intro{margin:0}.light-study h2,.quiet-letter h2{font-family:"Yu Mincho",serif;font-weight:500}.light-roll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(9px,2vw,26px);margin:2.5rem 0}.light-frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.22;background:radial-gradient(ellipse at 38% 23%,#bdad95,#756558 52%,#463f39);box-shadow:inset 0 0 35px #2522244d}.light-frame i{position:absolute;left:25%;top:17%;width:50%;height:66%;background:linear-gradient(103deg,#b4a287 0%,#e5d3ae 42%,#fae9c9 44%,#6d5b48 45%,#c4ac8c 56%,#e9d5b5 80%,#a28c75);clip-path:polygon(28% 0,96% 16%,78% 91%,7% 100%,0 34%);filter:drop-shadow(8px 9px 7px #382a28);transform:rotate(-17deg)}.light-frame.close{background:#70604e}.light-frame.close i{width:165%;height:155%;left:-48%;top:-20%;transform:rotate(24deg)}.light-frame.use{background:repeating-linear-gradient(120deg,#907d69 0 21px,#a49178 22px 45px)}.light-frame.use i{transform:rotate(28deg) skewY(-11deg);width:64%;left:19%}
.story-13 .light-roll figcaption{display:block;padding-top:1rem;line-height:1.65}.light-roll figcaption b,.light-roll figcaption span{display:block}.light-roll figcaption b{color:#f0c6a4;font-family:"Yu Mincho",serif;font-size:1.28rem}.light-roll figcaption span{font-size:.93rem;margin-top:.4em}.light-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(114deg,transparent 29%,#ffe3bd5e 50%,transparent 71%);transform:translateX(120%)}.light-study[data-seen=true] .light-frame::after{animation:passing-light 1.5s ease-out}.light-study[data-seen=true] .close::after{animation-delay:.14s}.light-study[data-seen=true] .use::after{animation-delay:.28s}@keyframes passing-light{from{transform:translateX(-125%)}}
.quiet-letter{max-width:880px;border-top:1px solid #9c8069}.quiet-letter p{font-family:"Yu Mincho",serif;font-size:clamp(1.05rem,1.7vw,1.25rem);margin-top:1.25rem;line-height:2.05}
@media(max-width:700px){.light-copy{display:block}.light-copy .hp-intro{margin-top:1rem}.light-roll{display:block}.light-roll figure{display:grid;grid-template-columns:37% 1fr;align-items:center;gap:1rem;margin-bottom:1rem}.story-13 .light-roll figcaption{padding:0}.light-roll figcaption span{font-size:.85rem}}

.light-roll { --lens: clamp(0, calc((var(--cg-progress, .71) - .17) * 1.64), 1); }
.light-roll .wide i {
  transform-origin: 48% 56%;
  transform: translate(calc(-12% + 13% * var(--lens)), calc(10% - 9% * var(--lens))) rotate(calc(-23deg + 8deg * var(--lens))) scale(calc(.81 + .31 * var(--lens)));
}
.light-roll .close i {
  transform-origin: 58% 56%;
  transform: translate(calc(12% - 18% * var(--lens)), calc(-8% + 13% * var(--lens))) rotate(calc(14deg + 17deg * var(--lens))) scale(calc(.77 + .63 * var(--lens)));
}
.light-roll .use i {
  transform: translateY(calc(10% - 18% * var(--lens))) rotate(calc(17deg + 22deg * var(--lens))) skewY(-11deg);
}
.light-roll .photo-mat { position: absolute; inset: 9%; border: 1px solid #f9e8c762; }
.light-roll .photo-mat::before, .light-roll .photo-mat::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-color: #fff1d0; border-style: solid;
}
.light-roll .photo-mat::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.light-roll .photo-mat::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.light-roll .close .photo-mat { transform: scale(calc(1.12 - .32 * var(--lens))); }
.light-decision { max-width: 45em; margin-top: 1.35em; }
.story-13 .light-next { display: inline-block; padding-block: .5em; color: #f1c9a8; text-underline-offset: .3em; }
@keyframes polish-window {
  0%, 100% { transform: translate(-82px, 23px) scale(.96); }
  52% { transform: translate(37px, -14px) scale(1.035); }
}
@keyframes polish-light {
  0%, 100% { transform: translateX(2px); }
  52% { transform: translateX(282px); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .story-13 .polish-finder { transform-origin: 375px 220px; animation: polish-window 8.2s ease-in-out -2.5s infinite; }
  html[data-motion="normal"] .story-13 .polish-beam { animation: polish-light 8.2s ease-in-out -2.5s infinite; }
}