*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#f4f4f4;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:5px}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
header{position:absolute;z-index:21;top:20px;left:24px;right:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:28px;align-items:start;pointer-events:none;font-size:10px;line-height:1.5;font-weight:400;letter-spacing:.55px;text-transform:uppercase}
.about{border:0;background:none;padding:0;min-height:24px;color:#c4c4c4;font:inherit;letter-spacing:inherit;text-transform:inherit;pointer-events:auto;text-align:right;justify-self:end}
.about:hover{color:#fff}
.project-name{padding-top:4px;white-space:nowrap;text-align:left;justify-self:start;color:#fff}
.caption{display:flex;justify-self:center;align-items:baseline;justify-content:center;gap:14px;max-width:480px;padding-top:4px;color:#858585;text-align:center;min-width:0}
#number{color:#b5b5b5;white-space:nowrap}
.transport{display:flex;gap:15px;align-items:center}
.transport button{border:0;background:none;padding:3px 0;color:#858585;font-size:8px;letter-spacing:1px;line-height:1;text-transform:uppercase}
.transport button:hover{color:#fff}
.dock{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:min(600px,calc(100% - 32px));border:1px solid #ffffff26;border-radius:22px;background:linear-gradient(130deg,#ffffff14,#ffffff06);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 18px 60px #0009,inset 0 1px 0 #ffffff0a;overflow:hidden}.modes{display:flex;padding:7px;gap:4px;border-bottom:1px solid #ffffff16;background:#ffffff03}.modes button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;height:43px;border:1px solid transparent;border-radius:13px;background:transparent;color:#858585;font-size:12px;transition:background .2s,color .2s}.modes button span{font-size:8px;color:#5d5d5d}.modes button i{font-style:normal;font-size:15px}.modes button:hover{color:#fff;background:#ffffff08}.modes button[aria-pressed=true]{color:#fff;background:linear-gradient(#ffffff1b,#ffffff0b);border-color:#ffffff20;box-shadow:0 2px 6px #0005}.modes button[aria-pressed=true] span{color:#a3a3a3}form{padding:19px 23px 15px}label{font-size:8px;letter-spacing:1.8px;color:#757575}.input-row{display:flex;align-items:center;gap:16px;margin-top:7px}input{background:transparent;border:0;outline:none;color:#fff;min-width:0;flex:1;font-size:20px;font-weight:400;padding:4px 0;letter-spacing:-.4px}input:focus-visible{box-shadow:0 1px 0 #666}input::placeholder{color:#666}.input-row button{height:38px;width:38px;border-radius:50%;border:1px solid #ffffff24;background:#ffffff0d;font-size:23px}.input-row button:hover{background:#fff;color:#000}.input-footer{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.3px;color:#505050;margin-top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
input{font-family:inherit;font-weight:500}
@media(max-width:600px){header{top:16px;left:16px;right:16px;gap:16px;font-size:9px;letter-spacing:.3px}.caption{gap:8px}.dock{bottom:20px}.modes button{gap:5px;font-size:10px}.modes button i{display:none}form{padding:17px 18px 14px}input{font-size:18px}}

/* The complete About pane translates from beyond the actual viewport edge. */
.about-reveal{--about-inset:24px;position:fixed;right:var(--about-inset);top:62px;width:min(560px,calc(100vw - 48px));height:auto;overflow:visible;z-index:20;pointer-events:none;visibility:hidden;transition:visibility 0s linear 650ms}
.about-reveal.is-open{pointer-events:auto;visibility:visible;transition-delay:0s}
#note{position:relative;margin:0;padding:28px 32px;max-height:calc(100vh - 86px);max-height:calc(100dvh - 86px);overflow-y:auto;overscroll-behavior:contain;color:#ccc;font-size:14px;font-weight:400;line-height:1.65;border:1px solid #ffffff28;border-radius:20px;background:linear-gradient(130deg,#ffffff1c,#ffffff08),#10101070;backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);box-shadow:0 18px 60px #0006,inset 0 1px 0 #ffffff12;transform:translateX(calc(100% + var(--about-inset) + 2px));transition:transform 650ms cubic-bezier(.3,0,.22,1);will-change:transform}
.about-reveal.is-open #note{transform:translateX(0)}
#note h2{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.4px;color:#f4f4f4;margin:0 0 20px}
#note p{font:inherit;color:inherit;letter-spacing:normal;margin:0 0 14px}
#note p:last-child{margin-bottom:0}
#note:focus-visible{outline:1px solid #ffffff55;outline-offset:3px}
@media(max-width:600px){.about-reveal{--about-inset:16px;top:70px;width:calc(100vw - 32px);height:auto}#note{padding:24px}}
@media(prefers-reduced-motion:reduce){#note{transition-duration:1ms}.about-reveal{transition-duration:0s;transition-delay:1ms}.about-reveal.is-open{transition-delay:0s}}

.modes button .warp-icon,.modes button .impact-icon{line-height:0}.warp-icon svg,.impact-icon svg{display:block;width:16px;height:16px}

#note a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff66;text-underline-offset:3px;text-decoration-thickness:1px}
#note a:hover{color:#fff;text-decoration-color:currentColor}

.input-row button{appearance:none;-webkit-appearance:none;display:grid;place-items:center;padding:0;flex-shrink:0}
.input-row button svg{display:block;width:23px;height:23px}
@media(max-width:600px){
 header{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:4px}
 .project-name{grid-column:1;grid-row:1}
 .about{grid-column:2;grid-row:1}
 .caption{grid-column:1/-1;grid-row:2;width:100%;max-width:none;padding-top:0}
 .caption #number{display:none}
}