.bridge{--br-water-top:#6a5aa8;--br-water-bottom:#33306f;--br-ripple:#ffecd659;--br-tower:#5d4f9f;--br-house:#6d5a9f;--br-shore:#8a6aa6;--br-win:#ffecd68c;--br-deck:#f3ecff;--br-deck-under:#b8acd9;--br-pillar:#8a7cbf;--br-bulb:#f3ecff;width:100vw;margin-top:3.5rem;margin-left:calc(50% - 50vw)}html[data-night] .bridge{--br-water-top:#2a2d6e;--br-water-bottom:#141845;--br-ripple:#96a0e666;--br-tower:#20286e;--br-house:#222a70;--br-shore:#2c3480;--br-win:#ffd56b;--br-deck:#ddd8f2;--br-deck-under:#8f88b8;--br-pillar:#3e4596;--br-bulb:#fff6c8}.bridge-stage{isolation:isolate;background:var(--sky);color:var(--cream);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative;overflow:clip}.bridge-stage:before{content:"";z-index:-1;background:var(--sky-night);opacity:0;transition:opacity 1.1s var(--ease-in-out);pointer-events:none;position:absolute;inset:0}html[data-night] .bridge-stage:before{opacity:1}.bridge-copy{z-index:3;max-width:72rem;margin:0 auto;padding:3.25rem 16px 0;position:relative}.bridge-title{font-family:var(--font-display);letter-spacing:-.01em;text-shadow:0 2px #1a1a1a59;font-size:clamp(1.9rem,5.4vw,4.2rem);font-weight:700;line-height:1.05}.bridge-title-hl{color:var(--danfo);display:block}.bridge-sub{opacity:.92;margin-top:.6rem;font-size:clamp(.95rem,1.6vw,1.15rem)}.bridge-canvas{aspect-ratio:16/9;margin-top:-2rem;position:relative;container-type:size}@media (min-width:768px){.bridge-copy{padding-top:4.75rem}.bridge-canvas{margin-top:-9rem}}.bridge-art{width:100%;height:100%;display:block;position:absolute;inset:0}.br-tower{fill:var(--br-tower)}.br-house{fill:var(--br-house)}.br-shore{fill:var(--br-shore)}.br-win{fill:var(--br-win);transition:fill 1.1s var(--ease-in-out)}.br-deck{fill:var(--br-deck)}.br-deck-under{fill:var(--br-deck-under)}.br-pillar{fill:var(--br-pillar)}.br-bulb{fill:var(--br-bulb)}.br-halo,.br-stars,.br-moon{opacity:0;transition:opacity 1.1s var(--ease-in-out)}.br-sun{transition:opacity 1.1s var(--ease-in-out)}html[data-night] .br-halo,html[data-night] .br-stars,html[data-night] .br-moon{opacity:1}html[data-night] .br-sun{opacity:0}.br-stars .star{animation:3.2s ease-in-out infinite alternate br-twinkle}@keyframes br-twinkle{0%{opacity:1}to{opacity:.35}}.bridge-danfo{z-index:2;transform-origin:50% 100%;will-change:transform;position:absolute;top:0;left:0}.bridge-danfo .danfo-art{width:100%;height:auto;display:block;overflow:visible}.bridge-stage>.season-decor{z-index:1}.bridge .sd-greetings{display:none}.bridge-canvas{z-index:2}.bridge-signs{display:none}.bridge-signs li{position:absolute;translate:-50% -50%}.bridge-sign{background:var(--cream);color:var(--ink);border:3px solid var(--ink);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;box-shadow:var(--shadow-pop-sm);transition:background-color .2s var(--ease-out), transform .16s var(--ease-out);border-radius:999px;align-items:center;gap:.35em;padding:.45rem .95rem;font-size:clamp(.8rem,1.25vw,1.05rem);font-weight:600;display:inline-flex}.bridge-stage[data-active=story] .bridge-sign[data-stop=story],.bridge-stage[data-active=skills] .bridge-sign[data-stop=skills],.bridge-stage[data-active=work] .bridge-sign[data-stop=work]{background:var(--danfo)}@media (hover:hover) and (pointer:fine){.bridge-sign:hover{transform:translateY(-2px)}}.bridge-sign:active,.bridge-sign[data-pressed]{transform:translateY(1px)scale(.97)}.bridge-sign:focus-visible{outline:3px solid var(--danfo);outline-offset:3px}.bridge-signs-phone{z-index:3;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:-.5rem;padding:.25rem 16px 1.25rem;display:flex;position:relative}.bridge-signs-phone .bridge-sign{text-align:center;flex-direction:column;gap:0;padding:.4rem .75rem;font-size:.78rem;line-height:1.15}.bridge-sign-place{opacity:.75;font-size:.68em}@media (min-width:768px){.bridge-signs{display:block}.bridge-signs-phone{display:none}}@media (prefers-reduced-motion:reduce){.br-stars .star{animation:none}}.shop-room:has(.bridge){overflow-x:clip}