@import "https://fonts.googleapis.com/css2?family=Geist:wght@350;700&family=Geist+Mono:wght@400&family=Tomorrow:wght@500&display=swap";:root{--color-paper:oklch(12% .018 245);--color-paper-2:oklch(16% .022 245);--color-paper-3:oklch(21% .025 245);--color-rule:oklch(36% .025 245);--color-neutral:oklch(61% .018 245);--color-muted:oklch(76% .014 245);--color-ink:oklch(94% .012 235);--color-accent:oklch(78% .14 220);--color-accent-soft:oklch(63% .08 220);--color-metal:oklch(48% .025 235);--color-metal-dark:oklch(27% .022 240);--color-chevron:oklch(70% .17 48);--color-focus:oklch(82% .16 220);--font-display:"Tomorrow", "Arial Narrow", sans-serif;--font-body:"Geist", "Avenir Next", sans-serif;--font-outlier:"Geist Mono", "SFMono-Regular", monospace;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--text-xs:.64rem;--text-sm:.8rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.9531rem;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.11s;--dur-short:.2s;--dur-long:.38s;--rule-thin:1px;--radius-sm:.25rem;--radius-round:999px;--z-base:1;--z-raised:10;--z-sticky:200}*,:before,:after{box-sizing:border-box}html,body{overflow-x:clip}html{background:var(--color-paper);color-scheme:dark;font-family:var(--font-body)}body{background:radial-gradient(circle at 64% 48%, color-mix(in oklch, var(--color-accent-soft) 13%, transparent) 0%, transparent 34%), var(--color-paper);min-width:20rem;min-height:100dvh;color:var(--color-ink);font-size:var(--text-base);margin:0;font-weight:350;line-height:1.55;overflow:hidden}.experience{height:100dvh;padding:max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:relative}.nav-edge,.foot-line{z-index:var(--z-raised);justify-content:space-between;align-items:center;gap:var(--space-md);display:flex;position:relative}.wordmark{color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-md);letter-spacing:.16em;overflow-wrap:anywhere;flex:none;margin:0;font-style:normal;font-weight:500;line-height:1}.build-mark,.foot-line{color:var(--color-neutral);font-family:var(--font-outlier);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.08em;text-transform:uppercase}.build-mark,.foot-line p{margin:0}.build-mark{white-space:nowrap;flex:none}.instruction--compact{display:inline}.instruction--wide{display:none}.viewport{min-height:0;position:relative}.viewport>div:first-child{inset:0;position:absolute!important}.scene-shell{width:100%;height:100%;position:relative}.scene-shell>canvas{display:block;width:100%!important;height:100%!important}.dial-control{inset-inline:var(--space-sm);z-index:var(--z-raised);justify-content:space-between;align-items:center;gap:var(--space-sm);pointer-events:none;display:flex;position:absolute;inset-block-end:var(--space-md)}.dial-control__readout{gap:var(--space-2xs);color:var(--color-muted);font-family:var(--font-body);font-size:var(--text-sm);flex-direction:column;line-height:1.2;display:none}.dial-control__readout output{color:var(--color-neutral);font-family:var(--font-outlier);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.05em}.dial-control__button{min-width:9.5rem;min-height:2.75rem;padding:var(--space-sm) var(--space-md);border:var(--rule-thin) solid var(--color-accent-soft);border-radius:var(--radius-sm);background:var(--color-paper-2);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;pointer-events:auto;transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);margin-inline-start:auto;font-weight:700;line-height:1}.dial-control__button:hover:not(:disabled){background:var(--color-paper-3)}.dial-control__button:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-2xs)}.dial-control__button:active:not(:disabled){transform:translateY(var(--space-3xs))}.dial-control__button:disabled{opacity:.55;cursor:not-allowed}.dhd{inset-inline:var(--space-sm);inset-block:var(--space-sm) calc(var(--space-3xl) + var(--space-xl));z-index:var(--z-sticky);gap:var(--space-xs);padding:var(--space-sm);border:var(--rule-thin) solid color-mix(in oklch, var(--color-chevron) 34%, var(--color-rule));border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 58%, color-mix(in oklch, var(--color-chevron) 10%, transparent), transparent 38%), color-mix(in oklch, var(--color-paper-2) 94%, transparent);box-shadow:0 1.5rem 5rem color-mix(in oklch, var(--color-paper) 78%, transparent);color:var(--color-ink);backdrop-filter:blur(.75rem);grid-template-rows:auto auto minmax(0,1fr);display:grid;position:absolute}.dhd__header{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.dhd__header h2,.dhd__header p{margin:0}.dhd__header h2{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:.04em;font-style:normal;font-weight:500;line-height:1.1}.dhd__header p{color:var(--color-neutral);font-family:var(--font-outlier);font-size:var(--text-xs);margin-block-start:var(--space-2xs);display:none}.dhd__clear{min-height:2.75rem;padding-inline:var(--space-sm);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper-3);color:var(--color-muted);font:inherit;white-space:nowrap;cursor:pointer}.dhd__address{gap:var(--space-2xs);font-family:var(--font-outlier);font-size:var(--text-sm);font-variant-numeric:tabular-nums;grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.dhd__address span{border-block-end:var(--rule-thin) solid var(--color-rule);min-height:2rem;color:var(--color-neutral);place-items:center;display:grid}.dhd__address .is-filled{color:var(--color-ink)}.dhd__address .dhd__origin{border-color:var(--color-accent-soft);color:var(--color-accent)}.dhd__console{aspect-ratio:1;border-radius:var(--radius-round);isolation:isolate;width:min(100%,23rem);min-height:0;margin-inline:auto;position:relative}.dhd__stone{z-index:-1;border:var(--space-xs) solid color-mix(in oklch, var(--color-neutral) 34%, var(--color-paper));border-radius:var(--radius-round);background:repeating-conic-gradient(from 4deg, color-mix(in oklch, var(--color-paper-3) 84%, var(--color-neutral)) 0deg 8deg, var(--color-paper-2) 8deg 18.94deg), var(--color-paper-2);box-shadow:inset 0 0 0 var(--space-2xs) color-mix(in oklch, var(--color-paper) 74%, transparent), inset 0 0 3rem color-mix(in oklch, var(--color-paper) 78%, transparent), 0 1rem 2.5rem color-mix(in oklch, var(--color-paper) 70%, transparent);position:absolute;inset:4%}.dhd__key{--dhd-radius:-210%;width:12%;min-width:0;height:18%;padding:var(--space-2xs) var(--space-3xs) var(--space-sm);border:var(--rule-thin) solid color-mix(in oklch, var(--color-neutral) 46%, var(--color-paper));background:linear-gradient(180deg, var(--color-ink) 0%, var(--color-muted) 58%, var(--color-neutral) 100%);color:var(--color-paper);clip-path:polygon(19% 0,81% 0,100% 100%,0 100%);cursor:pointer;transform:rotate(var(--dhd-angle)) translateY(var(--dhd-radius)) rotate(calc(-1 * var(--dhd-angle)));transform-origin:50%;transition:filter var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);border-radius:12% 12% 25% 25%;place-items:start center;display:grid;position:absolute;inset-block-start:41%;inset-inline-start:43.5%}.dhd__key--inner{--dhd-radius:-150%;width:9%;height:14%;padding-block-start:var(--space-2xs);inset-block-start:42%;inset-inline-start:44.5%}.dhd__key img{object-fit:contain;filter:brightness(0)saturate();opacity:.88;width:100%;height:auto;max-height:70%}.dhd__key span{font-family:var(--font-outlier);font-size:clamp(.36rem, 1.2vw, var(--text-xs));text-align:center;line-height:1;position:absolute;inset-block-end:8%;inset-inline:0}.dhd__key:hover:not(:disabled){filter:brightness(1.18)}.dhd__key.is-selected{border-color:var(--color-chevron);background:linear-gradient(180deg, var(--color-ink) 0%, var(--color-chevron) 100%);box-shadow:0 0 var(--space-sm) color-mix(in oklch, var(--color-chevron) 72%, transparent);color:var(--color-paper)}.dhd__key:active:not(:disabled){filter:brightness(.82)}.dhd__key:disabled,.dhd__clear:disabled,.dhd__activate:disabled{opacity:.4;cursor:not-allowed}.dhd__key:focus-visible,.dhd__clear:focus-visible,.dhd__activate:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-3xs)}.dhd__activate{aspect-ratio:1;border:var(--space-3xs) solid color-mix(in oklch, var(--color-chevron) 45%, var(--color-ink));border-radius:var(--radius-round);background:radial-gradient(circle at 36% 30%, var(--color-ink), transparent 18%), radial-gradient(circle at 50% 54%, var(--color-chevron), var(--color-metal-dark) 68%, var(--color-paper));width:22%;box-shadow:inset 0 0 var(--space-md) color-mix(in oklch, var(--color-ink) 34%, transparent), 0 0 var(--space-md) color-mix(in oklch, var(--color-chevron) 56%, transparent);color:var(--color-ink);font-family:var(--font-body);font-size:clamp(.5rem, 1.5vw, var(--text-xs));letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:filter var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);place-items:center;font-weight:700;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.dhd__activate:not(:disabled){box-shadow:inset 0 0 var(--space-md) color-mix(in oklch, var(--color-ink) 30%, transparent), 0 0 var(--space-xl) color-mix(in oklch, var(--color-chevron) 82%, transparent)}.dhd__activate:active:not(:disabled){filter:brightness(1.25)}.dhd__keys{gap:0;min-height:0;display:none}.orientation{z-index:var(--z-raised);grid-template-columns:auto minmax(var(--space-xl), 7vw) auto;align-items:center;gap:var(--space-sm);color:var(--color-neutral);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;transform-origin:0 0;pointer-events:none;display:none;position:absolute;inset-block-start:50%;inset-inline-start:0;transform:rotate(-90deg)translate(-50%)}.orientation__rule{height:var(--rule-thin);background:var(--color-rule)}.foot-line{border-block-start:var(--rule-thin) solid var(--color-rule);padding-block-start:var(--space-sm)}.foot-line__status{align-items:center;gap:var(--space-xs);white-space:nowrap;color:var(--color-neutral);text-decoration:none;display:flex}.foot-line__status:hover{color:var(--color-ink)}.foot-line__status:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-2xs)}.status-dot{width:var(--space-xs);height:var(--space-xs);border-radius:var(--radius-round);background:var(--color-accent)}.reveal{opacity:0;animation:reveal var(--dur-long) var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 70ms)}@keyframes reveal{to{opacity:1}}@media (width>=40rem){.experience{padding-inline:max(var(--space-xl), env(safe-area-inset-left))}.orientation{display:grid}.instruction--compact{display:none}.instruction--wide{display:inline}.dial-control{inset-inline:var(--space-xl);inset-block-end:var(--space-xl)}.dial-control__readout{display:flex}.dhd{inset-inline-start:auto;inset-inline-end:var(--space-xl);inset-block:var(--space-xl) calc(var(--space-3xl) + var(--space-xl));width:min(31rem,44%);padding:var(--space-lg)}.dhd__header p{display:block}}.credits-page{overflow:auto}.credits{width:min(100%,46rem);padding:var(--space-xl) var(--space-md) var(--space-3xl);margin-inline:auto}.credits h1{margin:0 0 var(--space-xl);font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.04em;overflow-wrap:anywhere;font-style:normal;font-weight:500}.credits h2{margin:var(--space-xl) 0 var(--space-sm);font-family:var(--font-display);font-size:var(--text-md);font-style:normal;font-weight:500}.credits p{max-width:65ch;color:var(--color-muted)}.credits a{color:var(--color-accent);text-underline-offset:var(--space-2xs)}.credits a:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-2xs)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.15s!important;animation-duration:.15s!important;animation-iteration-count:1!important}}
