.story-16{--bg:#102943;--ink:#f5fbff;--accent:#74d6ee;--panel:#173954}

.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-16 .hero{background-image:linear-gradient(#6193ac1a 1px,transparent 1px),linear-gradient(90deg,#6193ac1a 1px,transparent 1px);background-size:24px 24px}.story-16 .visual g{animation:drawPlan .8s ease-out}.story-16 .word,.story-16 .kicker{font-family:monospace}.story-16 .intro{border-bottom:1px dashed #73c9e3}.story-16 .instrument{border:1px dashed #76aecc;padding:1.4rem}.story-16 .plan-sample{display:flex;align-items:center;gap:16px}.story-16 .plan-sample i{width:35%;height:70px;border:2px dashed currentColor}.story-16 .output{border:2px dashed currentColor}.story-16 [data-view=finished] .output,.story-16 [data-view=layer1] .output{background:#f4fbfb;color:#154058;border-style:solid}.story-16 [data-view=finished] .plan-sample i,.story-16 [data-view=layer1] .plan-sample i{background:linear-gradient(140deg,#6bb9b4 49%,#266277 50%)}.story-16 [data-view=layer2] .output p:last-child{border-bottom:4px solid #f3cb79}.story-16 .output.changed{animation:drawPlan .5s ease-out}
@keyframes drawPlan{from{clip-path:inset(0 0 35% 0)}}
@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-16 .stage-visual{grid-column:1/-1;display:block;min-width:0;overflow:hidden;margin-bottom:.5rem}
.story-16 .stage-visual svg{display:block;width:100%;height:auto;max-height:300px}
.story-16 .stage-visual svg g,.story-16 .stage-visual svg rect{transition:transform .6s cubic-bezier(.22,.72,.24,1),translate .6s,opacity .35s,scale .45s}
.story-16 .plate0{transform:translate(25px,92px) rotate(-7deg)}.story-16 .plate1{transform:translate(231px,72px) rotate(-7deg)}.story-16 .plate2{transform:translate(436px,52px) rotate(-7deg)}.story-16 [data-view=layer0] .plate0,.story-16 [data-view=layer1] .plate1,.story-16 [data-view=layer2] .plate2{translate:0 -17px;filter:brightness(1.3)}.story-16 [data-view=finished] .plate0{transform:translate(180px,87px) rotate(-4deg)}.story-16 [data-view=finished] .plate1{transform:translate(224px,60px) rotate(-3deg)}.story-16 [data-view=finished] .plate2{transform:translate(269px,32px) rotate(-2deg)}
html[data-motion=reduced] .story-16 .stage-visual *,html[data-page-paused] .story-16 .stage-visual *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.story-16 .stage-visual *{transition:none!important;animation:none!important}}
.story-16 [data-view=finished] .output small,.story-16 [data-view=layer1] .output small{color:#22556b}

.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;}
.route-blueprint{border:1px solid #6f9eb2;background-color:#12334d;background-image:linear-gradient(#8bc5d819 1px,transparent 1px),linear-gradient(90deg,#8bc5d819 1px,transparent 1px);background-size:18px 18px;width:min(1280px,94%);padding:clamp(24px,4.6vw,65px)}.route-blueprint>div:first-child{display:grid;grid-template-columns:.94fr 1fr;gap:clamp(20px,5vw,70px);align-items:start}.route-blueprint .hp-intro{margin:0}.route-plan{padding-top:1.7rem}.route-plan .route-original{display:inline-block;border:1px dashed #87b1c2;padding:9px 16px;background:#12324b}.route-original small{font-weight:750;color:#b6e6f1;margin-right:1.4em}.route-spine{height:27px;border-inline-start:2px solid #8ce5ec;margin-left:36px}
.route-plan ol{display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:0;list-style:none;gap:22px}.route-plan li{position:relative;border:1px solid #83c5d5;border-left:4px solid #a5f0eb;padding:clamp(12px,2.5vw,29px);background:#173f59}.route-plan li+li::before{content:"→";position:absolute;left:-24px;top:36%;color:#b1f1eb;font-weight:800}.route-plan small,.route-plan b,.route-plan span{display:block}.route-original small{display:inline}.route-plan li small{color:#b2e7f1}.route-plan b{font-size:clamp(1.08rem,2.2vw,1.55rem)}.route-plan li span{font-size:.88rem}.route-plan details{margin-top:1.3em}
.route-blueprint[data-seen=true] li{animation:plan-ink .8s backwards}.route-blueprint[data-seen=true] li:nth-child(2){animation-delay:.12s}.route-blueprint[data-seen=true] li:nth-child(3){animation-delay:.24s}@keyframes plan-ink{from{transform:translateX(-6px);box-shadow:inset 4px 0 0 #adecf4}}
.migration-log dl{border:1px solid #74a2b6}.migration-log dt,.migration-log dd{padding:1.2rem;border-color:#64879e}.migration-log dt{background:#1e4260;color:#bce7ed}.migration-log dd{background:#12314d}
@media(max-width:700px){.route-blueprint>div:first-child{display:block}.route-blueprint .hp-intro{margin-top:1rem}.route-plan ol{grid-template-columns:1fr;gap:12px}.route-plan li+li::before{content:"";left:31px;top:-13px;width:1px;height:12px;background:#a6f1eb}.route-plan li span{font-size:.87rem}}

.route-plan .link-map { --draw: clamp(0, calc((var(--cg-progress, .79) - .13) * 1.58), 1); margin: 0 0 1.7rem; }
.link-drawing {
  display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.6fr) minmax(0, .9fr);
  align-items: end; gap: 0; padding: clamp(12px, 2.7vw, 32px);
  border: 1px solid #668b9b;
  background-color: #112d44;
  background-image: linear-gradient(#34566c65 1px, transparent 1px), linear-gradient(90deg, #34566c65 1px, transparent 1px);
  background-size: 18px 18px;
}
.link-drawing .link-keys { min-width: 0; display: grid; }
.link-keys small { font-size: .72rem; color: #c3e3eb; margin-bottom: 5px; }
.link-keys code {
  display: flex; align-items: center; justify-content: center; min-height: 37px; padding: 3px .25em;
  border: 1px solid #78a7bc; color: #f3fbff; background: #183c55; font: 650 clamp(.68rem,1.35vw,1.05rem)/1.35 Consolas, monospace;
}
.link-keys code + code { margin-top: 8px; }
.new-keys code { background: #d9efe6; color: #153d4b; }
.link-terminal { display: block; width: 100%; height: 90px; }
.link-terminal .link-ink path { stroke-dasharray: 100; stroke-dashoffset: calc(86 - 86 * var(--draw)); }
.link-terminal .plot-head { transform: translate(calc(7px + 213px * var(--draw)), calc(4px + 40px * var(--draw))); }
.story-16 .link-map figcaption { display: block; color: #cee8ed; font: 500 .85rem/1.65 "Yu Gothic", sans-serif; }
.story-16 .blue-next { display: inline-block; padding-block: .65em; color: #a8f5ea; text-underline-offset: .25em; }
@keyframes blueprint-proof {
  0%, 100% { transform: translate(10px, -8px); }
  50% { transform: translate(-42px, 37px); }
}
@keyframes blueprint-guides {
  0%, 100% { transform: translate(1px, -3px); }
  50% { transform: translate(-14px, 14px); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .story-16 .blue-skin { animation: blueprint-proof 6.8s ease-in-out -2.2s infinite; }
  html[data-motion="normal"] .story-16 .blue-scope { animation: blueprint-guides 6.8s ease-in-out -2.2s infinite; }
}