@font-face{font-family:Noto;src:url(assets/fonts/actual-noto-500.ttf);font-weight:500}@font-face{font-family:Noto;src:url(assets/fonts/actual-noto-700.ttf);font-weight:700}
*{box-sizing:border-box}body{margin:0;background:#e2e8f0;color:#0f172a;font:500 16px/1.75 Noto,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #0369a1;outline-offset:3px}[hidden]{display:none!important}
main{height:calc(100dvh - 58px);display:grid;grid-template-columns:minmax(200px,30%) minmax(0,1fr);align-items:center;gap:3vw;padding:3vh 5vw 0}h1{font-size:clamp(28px,3.2vw,55px);line-height:1.5;margin:0}p{color:#475569;font-size:clamp(15px,1.5vw,24px);max-width:25em}#stage{height:100%;min-height:0;min-width:0;display:grid;place-items:center}#screen{position:relative;max-width:100%;max-height:100%;line-height:0}img,video{display:block;width:100%;height:100%}#target{position:absolute;border:2px solid #0284c7;border-radius:6px;background:transparent;box-shadow:0 0 0 1px #ffffffa3;animation:focusIn .55s ease-out}#target:hover{background:#009ef71a}#target.round{border-radius:50%}#screen.appear{animation:arrive .32s ease-out}footer{height:58px;display:flex;align-items:center;justify-content:center;gap:16px}footer button{color:#075985;border:0;border-radius:8px;padding:5px 17px;background:#fff}#position{font-size:12px;color:#475569}body.cover main,body.end main{display:grid;grid-template-columns:1fr;text-align:center;place-items:center}body.cover #stage,body.end #stage,body.end footer{display:none}body.end main{height:100dvh}body.cover p{margin:12px auto}body.end h1{font-size:clamp(45px,7vw,100px)}@keyframes arrive{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes focusIn{from{box-shadow:0 0 0 9px #009ef730}to{box-shadow:0 0 0 1px #ffffffa3}}
@media(max-width:650px){main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:7px;padding:10px 10px 0}#copy{text-align:center}h1{font-size:24px}p{font-size:13px;margin:3px auto}body.cover main,body.end main{grid-template-rows:1fr}}
@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important}}
#info:empty{display:none}.overview,.sections{margin:1.3em auto 0;text-align:start}.overview{display:flex;gap:2.4em;max-width:58em}.overview>div,.sections>div{flex:1;border-inline-start:2px solid #8fbdd6;padding-inline-start:14px}.overview b,.sections b{display:block;color:#075985}.overview span,.sections span{display:block;color:#334155}.overview b{font-size:clamp(19px,2vw,30px)}.overview span{font-size:clamp(16px,1.5vw,22px)}.sections>div{margin:0 0 11px}.sections span{font-size:clamp(13px,1.25vw,18px)}.choices{display:flex;gap:12px}.choices button{background:white;color:#075985;border:1px solid #94bbd0;border-radius:8px;padding:.4em 1em}
@media(max-width:650px){.overview{display:grid;gap:18px}.sections{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:5px 0}.sections>div{padding-inline-start:6px;margin:0}.sections b,.sections span{font-size:12px}.choices{justify-content:center}}
.visual{width:min(720px,84vw);margin:24px auto;text-align:center}.visual>b{color:#075985;font-size:15px}.ribbon{display:flex;align-items:center;justify-content:space-between;position:relative;margin:15px 0 28px}.ribbon:before{content:'';position:absolute;inset-inline:2%;height:3px;background:#94bbc9}.ribbon strong{position:relative;background:#075985;color:white;border-radius:50%;width:clamp(35px,5vw,56px);aspect-ratio:1;display:grid;place-items:center;font-size:clamp(17px,2.6vw,29px);animation:arrive .4s backwards;animation-delay:calc(var(--i)*70ms)}.repeat-chart{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}.repeat-chart i{height:clamp(7px,1.5vh,13px);border-radius:3px;background:#b3c5d4;animation:arrive .22s backwards;animation-delay:calc(var(--i)*8ms)}.repeat-chart .stop{background:#397a9a}.repeat-chart .tail{background:#177348}.last-five{color:#12633d;margin-top:10px;font-weight:700}
@media(prefers-reduced-motion:reduce){.repeat-chart i,.ribbon strong{animation:none}}
#stage{overflow:hidden}.zoom-board{transform-origin:65% 23%;animation:boardFocus 1s .6s ease-in-out forwards!important}@keyframes boardFocus{to{transform:scale(1.55)}}.choices{flex-wrap:wrap}.choices button{font-size:clamp(12px,1.3vw,17px)}@media(prefers-reduced-motion:reduce){.zoom-board{animation:none!important;transform:scale(1.45)}}
#brand{display:flex;align-items:center;justify-content:center;gap:10px;color:#075985;margin-bottom:1.2em}#brand img{width:36px;height:36px}#brand b{font:bold 26px Arial}body[data-scene=intro] h1{font-size:clamp(35px,6vw,86px)}body[data-scene=intro] p{max-width:31em}#stage{position:relative}#screen{overflow:hidden;transition:transform .52s cubic-bezier(.22,.72,.22,1)}#screen.focused{transform:scale(var(--zoom,1.12))}#target{animation:none;border-color:transparent;box-shadow:none;transition:box-shadow .48s,border-color .4s}#screen.focused #target{border-color:#0284c7;box-shadow:0 0 0 500vmax rgba(50,57,68,.53)}#reset-focus{position:absolute;inset-inline-end:7px;bottom:8px;width:36px;height:36px;padding:8px;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:50%;display:grid;place-items:center}#reset-focus svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:20px}
body[data-scene=method-day] .overview{align-items:start;gap:clamp(32px,7vw,100px);margin-top:32px;max-width:740px}body[data-scene=method-day] .overview>div{position:relative;border:0;padding:0}body[data-scene=method-day] .overview svg{display:block;width:52px;height:52px;fill:none;stroke:#075985;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}body[data-scene=method-day] .overview path{stroke-dasharray:1;animation:ink .65s ease-out backwards}body[data-scene=method-day] .overview>div+div path{animation-delay:.25s}body[data-scene=method-day] .overview>div+div:before{content:'←';position:absolute;inset-inline-start:clamp(-68px,-5vw,-34px);top:4px;font:32px/1.4 Arial;color:#577589}@keyframes ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:650px){body[data-scene=method-day] .overview{margin:18px auto 0;gap:20px;width:min(90%,420px)}body[data-scene=method-day] .overview>div{padding-inline-start:55px}body[data-scene=method-day] .overview svg{position:absolute;inset-inline-start:0;width:42px;height:42px}body[data-scene=method-day] .overview>div+div:before{content:none}}
@media(prefers-reduced-motion:reduce){#screen,#target{transition:none}body[data-scene=method-day] .overview path{animation:none}}
#screen{transition-duration:.3s}#target{transition-duration:.25s}
body[data-scene=home] #copy{width:min(930px,90vw)}
body[data-scene=home] .overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;position:relative;margin:28px auto 0;isolation:isolate}
body[data-scene=home] .overview:before{content:'';position:absolute;inset-inline:14%;top:27px;border-top:2px solid #8fbdd6;z-index:-1;transform-origin:right;animation:connect .38s ease-out backwards}
body[data-scene=home] .overview>div{border:0;padding:0;text-align:center;animation:arrive .25s ease-out backwards}body[data-scene=home] .overview>div:nth-child(2){animation-delay:.09s}body[data-scene=home] .overview>div:nth-child(3){animation-delay:.18s}
body[data-scene=home] .overview svg{box-sizing:border-box;display:block;width:56px;height:56px;background:#e2e8f0;border:1px solid #8fbdd6;border-radius:50%;padding:10px;stroke:#075985;fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;margin:0 auto 12px}body[data-scene=home] .overview b{margin-bottom:5px}
@keyframes connect{from{transform:scaleX(0)}}
@media(max-width:650px){body[data-scene=home] .overview{grid-template-columns:1fr;gap:16px;max-width:350px}body[data-scene=home] .overview>div{text-align:start;position:relative;padding-inline-start:64px;min-height:56px}body[data-scene=home] .overview svg{position:absolute;right:0;top:0;width:46px;height:46px}body[data-scene=home] .overview:before{inset-inline-start:22px;inset-inline-end:auto;top:24px;bottom:32px;width:2px;background:#8fbdd6;border:0}}

@media(min-width:651px){body[data-scene=home] .overview{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}body[data-scene=home] .overview:before{inset-inline:24%}}
.source-ladder{margin:0 auto;max-width:min(64vw,46vh,480px)}.source-ladder img{display:block;width:100%;height:auto;animation:ladderReveal .55s ease-out both}@keyframes ladderReveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}.visual .ribbon{margin:6px 0 10px}.visual{margin-top:12px}.visual .ribbon strong{width:clamp(26px,4.5vh,48px);font-size:clamp(15px,2.6vh,25px)}
/* Slate stage keeps the original application screenshots visually distinct. */
body{background:#436277;color:#fff}p,.overview span,.sections span{color:#e7f0f5}.overview b,.sections b,.visual>b,.last-five,#brand,#position{color:#fff}.ribbon:before{background:#bedbe6}.ribbon strong{background:#eef6f9;color:#26465a}.source-ladder{background:#fff;border-radius:10px;padding:6px 9px;box-sizing:content-box}.overview>div,.sections>div{border-color:#a9cbd9}
body[data-scene=method-day] .overview svg{stroke:#e4f4fa}body[data-scene=method-day] .overview>div+div:before{color:#c9e3ed}body[data-scene=home] .overview svg{background:#436277;stroke:#f2f9fc;border-color:#b8d6e3}

/* A blue veil keeps white type legible even at the brightest gradient stop. */
:root {
  --control-fill: #084679;
  --control-hover: #06375f;
  --control-line: rgb(255 255 255 / 72%);
}
body {
  color: white;
  background-color: #09669d;
  background-image: linear-gradient(rgb(0 44 84 / 48%), rgb(0 44 84 / 48%)),
    radial-gradient(1300px 900px at 50% 35%, #45bbff, #009ef7 40%, #0369a1 100%);
  background-attachment: fixed;
}
#copy, #copy p, .overview span, .sections span, #position,
.overview b, .sections b, .visual>b, .last-five, #brand { color: white; }
body[data-scene=home] .overview svg { background: #126599; stroke: white; }
body[data-scene=method-day] .overview svg { stroke: white; }
.ribbon strong { background: var(--control-fill); color: white; }
footer { gap: 12px; padding: 4px 12px; }
footer button, .choices button, #reset-focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--control-line);
  color: white;
  background: rgb(0 46 81 / 45%);
  font-weight: 700;
  line-height: 1.4;
  transition: background-color .15s, transform .15s;
}
footer button, .choices button { padding: 8px 18px; border-radius: 9px; }
footer #next { background: var(--control-fill); border-color: white; }
#position { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
#reset-focus { width: 44px; padding: 10px; background: var(--control-fill); }
footer button:hover, .choices button:hover, #reset-focus:hover { background: var(--control-hover); }
footer button:active, .choices button:active, #reset-focus:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid white; outline-offset: 2px; box-shadow: 0 0 0 6px #06375f; }
.nav-arrow { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#prev .nav-arrow { transform: rotate(180deg); }
@media(max-width:650px) { footer button,.choices button { padding-inline: 14px; } }
footer #prev { background: transparent; border-color: rgb(255 255 255 / 44%); font-weight: 500; }
footer #prev:hover { background: rgb(0 46 81 / 46%); border-color: white; }
footer #next { background: #063760; min-width: 100px; }
footer #next:hover { background: #042e52; }
body { overflow-x: clip; }