@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/JetBrainsMono-Bold.woff") format("woff")}
:root{color-scheme:dark;font-family:"JetBrains Mono",monospace;font-weight:700;color:#f1f0ed;background:#0b0b0b;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #e0ecae;outline-offset:5px}#experience{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background:#0b0b0b}.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);pointer-events:none}header{position:absolute;left:3.5vw;right:3.5vw;top:34px;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:2;pointer-events:none}.wordmark{font-size:24px;letter-spacing:-1px;font-weight:700}.wordmark span{font-weight:700;color:#c1c1bd;letter-spacing:-.6px}.eyebrow{font-size:12px;letter-spacing:2px;color:#999b98}canvas{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:pan-y}.marker{position:absolute;z-index:2;border:1px solid #858881;border-radius:50%;background:#111410db;color:#c4c8be;width:34px;height:34px;font-size:14px;transform:translate(-50%,-50%);transition:background .18s,color .18s,border-color .18s;box-shadow:0 0 0 5px #0b0b0b50}.marker.selected{background:#e0ecae;border-color:#e0ecae;color:#171b11}.controls{position:absolute;z-index:3;bottom:32px;left:50%;transform:translateX(-50%);padding:17px 23px 14px;border:1px solid #ffffff24;border-radius:15px;background:#131413e8;backdrop-filter:blur(18px);box-shadow:0 16px 50px #0004;width:max-content;max-width:calc(100% - 32px)}.control-title{display:flex;gap:12px;align-items:center;font-size:14px;margin-bottom:12px}.control-title span:first-child{color:#e0ecae}.control-title span:last-child{color:#989d93}.control-row{display:flex;align-items:center;gap:20px}.segments{display:flex;gap:6px}.segments button{height:43px;width:40px;border:1px solid #ffffff22;border-radius:6px;background:#222421;color:#c8cbc3;font-size:16px}.segments button[aria-pressed=true]{background:#e0ecae;border-color:#e0ecae;color:#161b11}.divider{height:35px;width:1px;background:#ffffff1c}.directions{display:grid;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,28px);gap:4px}.directions button{border:1px solid #ffffff24;border-radius:5px;background:#232521;color:#dddeda;font-size:20px;line-height:1}.directions button.active{background:#e0ecae;color:#171b11;border-color:#e0ecae}.up{grid-column:2}.left{grid-row:2;grid-column:1}.down{grid-row:2;grid-column:2}.right{grid-row:2;grid-column:3}#reset{display:flex;align-items:center;gap:9px;background:none;border:0;padding:5px 0;color:#bcbfb7;font-size:14px}#reset span:first-child{border:1px solid #ffffff28;padding:7px 9px;border-radius:5px;color:#e1e2de}button:hover{filter:brightness(1.18)}.controls p{color:#a2a69c;font-size:13px;margin:12px 0 0;line-height:1.45}.logo{position:absolute;right:3.5vw;bottom:43px;width:65px;opacity:.8;pointer-events:none}.status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#loading{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:16px;color:#b8bdb1}#loading[hidden]{display:none}@media(max-width:650px){#experience{min-height:560px}header{top:25px;left:24px;right:24px}.wordmark{font-size:22px}.eyebrow{display:none}.controls{bottom:22px;padding:15px 18px;width:calc(100% - 36px);max-width:440px}.control-row{justify-content:space-between;gap:10px}.segments{gap:5px}.segments button{width:36px;height:44px}.directions{grid-template-columns:repeat(3,33px);grid-template-rows:repeat(2,33px)}.logo{width:43px;bottom:205px;right:24px}#reset{flex-direction:column;gap:4px;font-size:12px}.marker{width:32px;height:32px}.controls p{font-size:13px}}@media(max-width:350px){.control-row{gap:7px}.segments button{width:31px}.directions{grid-template-columns:repeat(3,29px)}}@media(prefers-reduced-motion:reduce){.marker{transition:none}}

.controls p.contact-limit{color:#e5c78b}

.logo{top:32px;bottom:auto;z-index:3}
.controls{left:auto;right:3.5vw;bottom:32px;transform:none;width:186px;padding:17px 18px}
.control-title{justify-content:center;gap:8px}
.control-row{flex-direction:column;gap:14px}
.divider{width:100%;height:1px}
.controls p{text-align:center}
#reset{flex-direction:row;gap:9px;font-size:14px}
@media(max-width:650px){.logo{top:24px;right:20px}.controls{right:16px;bottom:20px;width:160px;padding:14px 12px}.control-row{gap:10px}.control-title{font-size:13px;gap:6px}.controls p{font-size:13px}}

.logo{left:auto;right:3.5vw;top:32px;width:54px}
.copyright{position:absolute;left:3.5vw;bottom:32px;z-index:3;color:#999da2;font-size:14px;font-weight:700;line-height:1.4}
@media(max-width:650px){.logo{left:auto;right:20px;top:24px;width:36px}.copyright{left:20px;bottom:20px;font-size:12px}}

/* Compact, unboxed monochrome legend. */
.legend-stack{position:absolute;z-index:3;right:3.5vw;bottom:24px;width:146px;display:flex;flex-direction:column;align-items:center;gap:14px}
.legend-stack .controls{position:static;transform:none;width:112px;max-width:none;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none}
.control-title{font-size:10px;gap:5px;margin-bottom:9px}
.control-title span:first-child,.control-title span:last-child{color:#aaa}
.control-row{gap:8px}.segments{gap:5px}
.segments button{width:28px;height:28px;font-size:11px;border-radius:3px;background:transparent;color:#999;border-color:#ffffff28}
.segments button[aria-pressed=true]{background:#ffffff14;color:#eee;border-color:#ffffff75}
.divider{width:62px;background:#ffffff16}
.directions{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,24px);gap:3px}
.directions button{font-size:14px;border-radius:3px;background:transparent;color:#bbb;border-color:#ffffff28}
.directions button.active{background:#ffffff1c;color:#fff;border-color:#ffffff75}
#reset{font-size:10px;gap:6px;color:#aaa}#reset span:first-child{padding:4px 7px;color:#ddd;border-radius:3px}
.controls p{font-size:9px;line-height:1.5;margin-top:9px;color:#888}.controls p.contact-limit{color:#ddd}
.legend-stack .copyright{position:static;font-size:10px;font-weight:700;color:#888;line-height:1.4;white-space:nowrap;text-align:center}
.marker{width:24px;height:24px;font-size:10px;box-shadow:none;background:#111a;border-color:#ffffff35;color:#aaa}
.marker.selected{background:#ffffff18;border-color:#ffffff80;color:#eee}
button:focus-visible,canvas:focus-visible{outline-color:#ddd}
@media(max-width:650px){.legend-stack{right:16px;bottom:18px;width:132px}.legend-stack .controls{width:104px}.control-title{font-size:10px}.control-row{gap:8px}.segments button{width:28px;height:28px}.directions{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,24px)}.controls p{font-size:9px}#reset{font-size:10px}.legend-stack .copyright{font-size:9px}}

/* The logo stays anchored while the contact email opens to its left. */
.logo-contact{position:absolute;z-index:3;top:32px;right:3.5vw;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-left:24px;max-width:calc(100% - 20px)}
.logo-contact-reveal{order:1;min-width:0;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width 380ms cubic-bezier(.2,.7,.2,1)}
.logo-contact-reveal a{display:block;font-size:13px;line-height:1.4;color:#9a9a97;text-decoration:none;white-space:nowrap;transition:color 200ms}
.logo-contact-reveal a:hover,.logo-contact-reveal a:focus-visible{color:#e8e8e6}
.logo-contact-reveal a:focus-visible{outline:1px solid currentColor;outline-offset:-1px}
.logo-contact-divider{order:2;flex:0 0 auto;display:grid;place-items:center;height:18px;font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:700;line-height:1;color:rgba(255,255,255,.2);opacity:0;transition:opacity 200ms}
.logo-contact-toggle,.logo-contact-toggle:hover{order:3;display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;filter:none;line-height:0;opacity:.85;transition:opacity 200ms;touch-action:manipulation}
.logo-contact-toggle img{display:block;width:48px;height:auto;pointer-events:none;user-select:none}
.logo-contact[data-open=true] .logo-contact-reveal{max-width:240px}
.logo-contact[data-open=true] .logo-contact-divider,.logo-contact[data-open=true] .logo-contact-toggle{opacity:1}
@media(max-width:650px){.logo-contact{top:24px;right:20px}}
@media(prefers-reduced-motion:reduce){.logo-contact-reveal,.logo-contact-divider,.logo-contact-toggle,.logo-contact-reveal a{transition:none}}

/* Display-only keyboard legend. */
.control-legend{position:fixed;z-index:3;right:26px;bottom:22px;width:max-content;background:none;border:0;box-shadow:none;pointer-events:none;user-select:none}
.control-legend-heading{margin:0;font-size:12px;line-height:1.2;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#4f4f4d}
.control-legend-row{display:flex;align-items:flex-end;gap:24px;margin-top:1px;border-top:2px solid #4f4f4d;padding-top:12px}
.control-column{display:flex;flex-direction:column;gap:8px}
.control-column-heading{margin:0;font-size:12px;line-height:1.2;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#454543}
.control-keys{display:flex;align-items:center;gap:5px}
.control-legend .control-key,.control-legend #reset{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;padding:0;gap:0;border-radius:3px;border:1px solid rgba(255,255,255,.1);background:none;box-shadow:none;color:#6e6e6c;font:inherit;font-size:12px;line-height:1;letter-spacing:0;text-align:center;filter:none;pointer-events:none;cursor:default}
.control-legend .control-key.selected,.control-legend .control-key.active,.control-legend .control-key:active,.control-legend #reset.active,.control-legend #reset:active{border-color:rgba(255,255,255,.35);color:#d6d6d3}

.mobile-contact{display:none}
@media(max-width:767px),(hover:none) and (pointer:coarse){
 html,body{background:#0e0e0e}
 #experience{display:none}
 .mobile-contact{display:grid;place-items:center;width:100%;min-height:100vh;min-height:100dvh;padding:20px;background:#0e0e0e;font-family:"JetBrains Mono",monospace;font-weight:700;text-align:center}
 .mobile-contact-content{display:flex;flex-direction:column;align-items:center;gap:6px}
 .mobile-contact h1{margin:0;font-size:10px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:#4f4f4d}
 .mobile-contact a{font-size:15px;line-height:1.4;color:#cfcfcc;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
 .mobile-contact a:hover,.mobile-contact a:active,.mobile-contact a:focus-visible{color:#fff}
}

.marker{display:grid;place-items:center;pointer-events:auto;cursor:pointer}