@font-face{font-family:"AmpleSoft Pro";src:url("/fonts/AmpleSoftPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
:root{font-family:"AmpleSoft Pro",Arial,sans-serif;color:#f4f6f8;background:#111920;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit}#experience{height:100svh;min-height:530px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 44%,#384959 0%,#1c2a36 56%,#111920 100%)}#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #ff733f;outline-offset:-5px}header{position:absolute;inset:34px 40px auto;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}.brand{margin:0;display:flex;align-items:center;gap:22px;font-size:2.1rem;letter-spacing:.16em;color:#ff6b35;font-weight:500}.brand span{font-size:.75rem;letter-spacing:.25em;color:#c0cbd3;border-left:1px solid #64717c;padding-left:22px}h1{font-weight:400;font-size:1rem;color:#b7c5d0;margin:9px 0 0;letter-spacing:.025em}.model-tag{font-size:.875rem;color:#d9e1e7;background:#18222dcc;border:1px solid #425262;padding:10px 14px;border-radius:24px;white-space:nowrap}.model-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffa576;margin-right:8px}footer{position:absolute;bottom:22px;left:40px;right:40px;pointer-events:none}.hint{text-align:center;color:#c4cfd8;font-size:.875rem;margin:0 0 16px}.hint span{padding:0 10px;color:#8b9da9}.toolbar{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:auto;padding:7px;border:1px solid #54657466;background:#131e28ed;box-shadow:0 8px 30px #0004;border-radius:16px;backdrop-filter:blur(12px)}button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:46px;min-height:46px;border:0;border-radius:10px;background:transparent;color:#e9eff4;cursor:pointer;transition:background .15s,color .15s}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button:hover{background:#344453}button:focus-visible{outline:2px solid #ff8b59;outline-offset:2px}button:disabled{cursor:wait;opacity:.4}button.rotate{padding:0 16px;font-size:.875rem}button[aria-pressed=true]{background:#ff7038;color:#141c24}.divider{height:23px;width:1px;background:#4a5a6877;margin:0 5px}.caption{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:23px;color:#93a4b2;font-size:.8125rem}.caption p{margin:0;max-width:75%}#angle{font-variant-numeric:tabular-nums;letter-spacing:.06em;font-size:.875rem;color:#c6d0d9}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#18242ff2;color:#dbe5ed;z-index:2;gap:12px}.spinner{width:34px;height:34px;border:2px solid #ffffff25;border-top-color:#ff7139;border-radius:50%;animation:spin 1s linear infinite}#loading[hidden],#error[hidden]{display:none}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(90%,480px);padding:28px;background:#18242f;border:1px solid #536576;border-radius:14px;z-index:3}#error h2{font-size:1.25rem}#error p{line-height:1.5;color:#c6d1da}#error button{padding:0 16px;background:#fa713b;color:#14202a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:650px){header{inset:22px 20px auto}.brand{font-size:1.65rem;gap:12px}.brand span{font-size:.65rem;padding-left:12px}.model-tag{font-size:.75rem;padding:8px 10px}h1{font-size:.875rem}footer{left:12px;right:12px;bottom:17px}.hint{font-size:.8125rem}.toolbar{gap:0;padding:5px;border-radius:13px}button{min-width:40px;min-height:46px}.divider{margin:0 2px}button.rotate{padding:0 9px}button.rotate span{display:none}.caption{margin:18px 8px 0;font-size:.75rem}.caption p{max-width:82%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.spinner{animation-duration:2s}}
[hidden]{display:none!important}
#experience{min-height:0;height:100dvh}
@media(max-height:500px){header{inset:16px 20px auto}.brand{font-size:1.2rem}.caption{display:none}footer{bottom:12px}.hint{margin-bottom:8px}}
@media(max-width:650px){.brand{font-size:1.2rem;letter-spacing:.06em}.brand span{display:none}}