:root{--paper:#fff;--ink:#000;--orange:#ff4100;--muted:#646464}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:'Funnel Sans',sans-serif}header{position:absolute;top:40px;left:5.5vw;right:5.5vw;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px}header img{width:218px;height:auto;display:block}.deck{font-size:15px;line-height:1.5;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid #dedede;padding:7px 0;transition:color .2s,border-color .2s}.deck span{font-size:17px;margin-left:7px}.deck:hover{color:var(--orange);border-color:var(--orange)}a:focus-visible,#stage:focus-visible{outline:1px solid var(--orange);outline-offset:6px}main{min-height:560px;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 0 45px;position:relative}#stage{width:min(720px,100%);height:clamp(340px,57vh,620px);position:relative;cursor:grab;touch-action:pan-y}#stage:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}h1{font-family:'Josefin Sans',sans-serif;font-size:clamp(22px,2.15vw,30px);line-height:1.35;font-weight:400;letter-spacing:-.45px;text-align:center;margin:0 22px;padding:0 0 22px}h1 span{white-space:nowrap}#error{position:absolute;top:43%;text-align:center;font-size:14px}@media(max-width:600px){header{top:26px;left:25px;right:25px;gap:16px}header img{width:167px}.deck{font-size:14px}.deck span{margin-left:3px}main{min-height:560px;padding-top:90px;padding-bottom:55px}#stage{height:clamp(330px,54svh,460px)}h1{font-size:25px;line-height:1.3;max-width:310px;margin-top:5px}h1 span{display:block}}@media(prefers-reduced-motion:reduce){.deck{transition:none}}
body.deck-open{overflow:hidden}
#deck-dialog{width:min(1160px,calc(100vw - 64px));max-width:none;height:min(850px,calc(100dvh - 64px));max-height:none;padding:0;border:1px solid #e8e8e8;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 24px 90px #0002;overflow:hidden}
#deck-dialog[open]{display:flex;flex-direction:column}
#deck-dialog::backdrop{background:rgb(255 255 255 / 82%);backdrop-filter:blur(12px)}
.deck-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #ededed;flex-shrink:0}
.deck-toolbar h2{font-size:15px;font-weight:400;margin:0}
.deck-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.deck-close:hover{background:#f3f3f3}.deck-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.deck-container{flex:1;min-height:0;background:#fafafa}.deck-container iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.deck-footer{padding:12px 20px;border-top:1px solid #ededed;font-size:12px;flex-shrink:0}.deck-footer a{color:var(--muted);text-decoration:none}.deck-footer a:hover{color:var(--orange)}
@media(max-width:600px){#deck-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.deck-toolbar{padding:12px 18px}.deck-footer{padding:12px 18px}}

/* Keep the hero inside the visible viewport, including short landscape screens. */
header{top:clamp(20px,4.5svh,40px);left:max(24px,5.5vw);right:max(24px,5.5vw)}
main{height:100svh;min-height:0;padding:90px 0 35px;overflow:hidden}
#stage{flex-shrink:1;min-height:0;width:min(720px,100%);height:min(57svh,620px);max-height:calc(100svh - 190px)}
h1{flex-shrink:0;padding-bottom:0;margin:14px 22px 0}
@media(max-width:600px){header{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));gap:16px}header img{width:clamp(135px,42vw,167px)}main{padding:85px 0 max(28px,env(safe-area-inset-bottom))}#stage{height:min(54svh,460px);max-height:calc(100svh - 195px)}h1{font-size:clamp(22px,6.4vw,25px);margin-top:14px}}
@media(max-height:500px) and (orientation:landscape){header{top:16px}header img{width:150px}main{padding:62px 0 18px}#stage{height:calc(100svh - 126px);max-height:none}h1{font-size:20px;margin-top:8px;max-width:none;line-height:1.2}h1 span{display:inline}}
