:root{font-family:"Avenir Next",Avenir,Arial,sans-serif;color:#dcf5ff;background:#030811;font-synthesis:none;--paper:#dcf5ff;--muted:#8caabb;--line:#70caff38;--coral:#72dbff}
*{box-sizing:border-box}html,body,#court{width:100%;height:100%;margin:0;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:0;touch-action:none}button,select{font:inherit;color:inherit;cursor:pointer}button{background:none;border:0}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--coral);outline-offset:5px}.hud{position:fixed;z-index:2;transition:opacity .45s}header{top:32px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.identity{text-shadow:0 1px 3px #020714cc;display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.11em;pointer-events:auto}.identity-slash{color:var(--coral);padding:0 4px}.symbol{font-size:42px;line-height:1;font-weight:300;color:var(--coral)}.identity small{display:block;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.23em;line-height:2.7;font-weight:400;color:var(--muted)}#connection{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;display:flex;gap:10px;align-items:center;padding-top:9px}#connection i{width:4px;height:4px;background:#ffda9c;box-shadow:0 0 12px #ffd792;transform:rotate(45deg)}#connection.offline i{background:#dd9daa;box-shadow:none}.edition{top:18vh;right:5.2vw;width:300px;pointer-events:none}.edition>span{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.19em;display:block;margin-bottom:15px;color:var(--muted)}.edition strong{position:relative;display:block;font-size:clamp(58px,6.1vw,94px);font-weight:400;line-height:.83;letter-spacing:-.085em}.title-mark{position:absolute;right:-12px;bottom:3px;font-size:28px;color:var(--coral)}.edition p{font-size:11px;line-height:1.8;letter-spacing:.02em;color:var(--muted);margin:22px 0 0;padding-left:2px}.frame-mark{width:22px;height:22px;pointer-events:none;border-color:var(--line);border-style:solid}.frame-mark-top{top:100px;left:38px;border-width:1px 0 0 1px}.frame-mark-bottom{bottom:112px;right:38px;border-width:0 1px 1px 0}.views{bottom:32px;left:38px;display:flex;gap:26px;border-top:1px solid var(--line);padding-top:15px}.views button{position:relative;padding:4px 0 7px;font-size:11px;white-space:nowrap;color:var(--muted)}.views small{font-family:ui-monospace,monospace;font-size:8px;margin-right:7px;color:#7394a6}.views button.active{color:var(--paper)}.views button.active:before{content:"";position:absolute;left:0;right:0;top:-17px;height:2px;background:var(--coral)}.views button:hover{color:var(--paper)}footer{bottom:37px;right:38px;display:flex;gap:32px;align-items:center;pointer-events:none}footer #hint{font-family:ui-monospace,monospace;font-size:9px;color:var(--muted);max-width:250px}footer .effects{display:flex;gap:12px;align-items:center;pointer-events:auto;font-family:ui-monospace,monospace;font-size:9px}#help{font-size:10px;border:1px solid var(--line);width:24px;height:24px;transform:rotate(0deg)}#loading{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#030811;transition:opacity .7s}#loading.hidden{opacity:0;pointer-events:none}#loading h1{font-size:46px;font-weight:400;letter-spacing:-.07em;margin:12px}#loading p{font-family:ui-monospace,monospace;font-size:10px;color:var(--muted)}.loading-mark{font-size:64px;color:var(--coral)}#retry,#close-help{background:var(--paper);color:#0b1924;padding:11px 17px;margin-top:12px;font-size:11px}#instructions{position:fixed;z-index:6;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(90vw,390px);background:#07121cf5;border:1px solid var(--line);padding:32px;box-shadow:0 25px 90px #01050ba0}#instructions h2{font-size:28px;font-weight:400;letter-spacing:-.06em;margin:0 0 22px}#instructions p{font-size:12px;line-height:1.8;color:var(--muted)}#touch{display:none}.capture .hud,.capture #loading,.capture #instructions{display:none!important}body:not(.ready) .hud{opacity:0}body[data-view="loaf"] .edition,body[data-view="walk"] .edition,body.exploring .edition{opacity:0}body[data-view="loaf"] .frame-mark,body[data-view="walk"] .frame-mark{opacity:0}
@media(max-width:1000px){.edition{right:4vw;width:210px}.edition strong{font-size:68px}footer #hint{display:none}.views{gap:20px}}
@media(max-width:700px){header{left:20px;right:20px;top:22px}.identity{font-size:10px;gap:8px}.identity small{font-size:7px}.symbol{font-size:32px}#connection{font-size:8px;padding-top:6px}.edition{right:22px;top:17vh;width:168px}.edition>span{font-size:6px;letter-spacing:.06em}.edition strong{font-size:48px}.edition p{font-size:9px;line-height:1.7}.title-mark{font-size:20px;right:0;bottom:-25px}.frame-mark-top{left:20px;top:87px}.frame-mark-bottom{right:20px;bottom:134px}.views{left:20px;right:20px;bottom:23px;justify-content:space-between;gap:12px}.views button{font-size:10px;min-height:40px}.views small{font-size:7px}footer{right:20px;bottom:83px}footer label{display:none}body.walking #touch{display:block;left:18px;bottom:100px;text-align:center}#touch button{width:39px;height:39px;background:#071b2be0;border:1px solid var(--line);margin:3px;touch-action:none}}
@media(prefers-reduced-motion:reduce){.hud,#loading{transition:none}}

/* The title is a quiet colophon, leaving the skyline and field uninterrupted. */
.edition{top:102px;left:40px;right:auto;width:240px}
.edition strong{font-size:42px;line-height:.9;letter-spacing:-.055em}
.edition>span{font-size:7px;letter-spacing:.16em;margin-bottom:12px}
.edition p{font-size:10px;margin-top:14px}.title-mark{display:none}
.frame-mark-top{display:none}.views,footer{filter:drop-shadow(0 1px 4px #000)}
@media(max-width:700px){.edition{left:22px;top:90px;width:190px}.edition strong{font-size:30px}.edition p{display:none}.edition>span{font-size:6px}.views{gap:8px}.views small{margin-right:3px}}

/* The public court: status, welcome, loading, staleness, touch. */
.status{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-shadow:0 1px 3px #020714cc}
#caption{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:var(--muted);min-height:1em}
#caption:empty{visibility:hidden}
#connection.offline span{color:#e4c3ca}
#progress{width:min(240px,60vw);height:1px;background:var(--line);margin:4px 0 14px;--done:0}
#progress i{display:block;height:100%;width:calc(var(--done)*100%);background:var(--coral);box-shadow:0 0 10px var(--coral);transition:width .15s linear}
.loading-note{font-family:inherit!important;font-size:11px!important;letter-spacing:.02em;max-width:300px;text-align:center;line-height:1.7}
.unsupported #progress,.unsupported .loading-note{display:none}
.welcome{left:38px;bottom:104px;width:300px;padding:22px 24px 20px;background:#050e18e6;border:1px solid var(--line);box-shadow:0 20px 60px #01050b90}
.welcome[hidden]{display:none}
.welcome .eyebrow{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.2em;color:var(--coral)}
.welcome h1{font-size:30px;font-weight:400;letter-spacing:-.055em;margin:12px 0 10px}
.welcome p{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 16px}
.welcome button{font-size:11px;color:var(--paper);padding:6px 0;border-bottom:1px solid var(--coral)}
.welcome button span{color:var(--coral);margin-left:4px}
#sound{font-size:9px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);height:24px;padding:0 9px}
#sound[aria-pressed="true"]{color:var(--paper);border-color:var(--coral)}
#instructions dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;line-height:1.6;margin:18px 0 8px}
#instructions dt{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);padding-top:3px}
#instructions dd{margin:0;color:var(--muted)}
#dip{position:fixed;inset:0;z-index:4;background:#030811;opacity:0;pointer-events:none;transition:opacity .65s ease}
#dip.on{opacity:1}
#world{transition:filter 1.6s ease}
body.stale #world{filter:saturate(.45) brightness(.72)}
@media(max-width:1000px){footer #hint{display:block;opacity:0;transition:opacity .8s}body.hinting footer #hint{opacity:1}}
@media(max-width:700px){.status{gap:5px}#caption{font-size:8px}.welcome{left:20px;right:20px;width:auto;bottom:128px;padding:18px 20px 16px}.welcome h1{font-size:25px}.welcome p{font-size:11px;margin-bottom:12px}footer{gap:12px}footer #hint{max-width:190px;font-size:8px;text-align:right}}
@media(prefers-reduced-motion:reduce){#world,#dip,#progress i{transition:none}}