/* Home — "A million grains". A black page and a field of points of light — silver grains —
   simulated on the graphics card (each grain has its own position and velocity, updated every frame).
   They drift like dust in a beam, then gather into pure forms — circle, square, line — and finally into the horizon
   that continues the logo's hairline, before scattering again. The cursor disturbs them like a breath. */
:root{--m:clamp(20px,3.2vw,48px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0B0B0A}
body{font:300 16px/1.5 "Jost",sans-serif;letter-spacing:.01em;-webkit-font-smoothing:antialiased;color:#F5F3EF}
canvas{position:fixed;display:block;touch-action:none}   /* placed beside the index by the script */
.audio{position:fixed;left:var(--m);bottom:calc(var(--m) + 34px);display:flex;align-items:center;gap:14px;z-index:4}   /* bottom left, above the line and the Credits link; above the menu column, which spans the full height and would swallow the clicks */
.sound{font:inherit;font-size:13px;color:inherit;background:none;border:0;padding:0;opacity:var(--t2);cursor:pointer;transition:opacity .3s}
.vol{-webkit-appearance:none;appearance:none;width:0;margin-left:-14px;height:14px;background:none;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,width .4s,margin .4s}   /* the volume: a hairline, shown while the sound plays */
.vol.show{width:72px;margin-left:0;opacity:.7;pointer-events:auto}
.vol::-webkit-slider-runnable-track{height:1px;background:#F5F3EF}
.vol::-moz-range-track{height:1px;background:#F5F3EF}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:#F5F3EF;border:0}
.vol::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:#F5F3EF;border:0}
.sound:hover{opacity:.9}
@media (max-width:759px){.vol,.vol.show{display:none}}   /* phones: the volume is the phone's own buttons */
.fallback{position:fixed;inset:0;display:none;place-items:center;font-size:15px;opacity:.6}
.dot{position:fixed;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#F5F3EF;z-index:1;pointer-events:none}   /* the first point of light, shown the instant the page opens */