html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(70% 60% at 50% 42%,#5a5047 0%,#2b2622 55%,#131110 100%) fixed}canvas{display:block}#info{color:#ebebeb;pointer-events:none;background:#1f1f1fd9;border-radius:6px;max-width:min(420px,100vw - 32px);margin:0;padding:10px 12px;font:13px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;position:fixed;bottom:16px;left:16px}@media (width<=600px){#info{display:none}}#dock{left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:6;box-sizing:border-box;-webkit-backdrop-filter:blur(14px)saturate(1.2);letter-spacing:.12em;text-transform:uppercase;background:#13111080;border:1px solid #e9dcc624;border-radius:999px;align-items:center;gap:4px;max-width:calc(100vw - 24px);padding:5px;font:500 11px/1 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;transition:background .6s,border-color .6s,bottom 1.2s cubic-bezier(.65,0,.35,1);display:flex;position:fixed;transform:translate(-50%)}#dock .group{align-items:center;gap:2px;transition:opacity .5s;display:flex}#dock .divider{background:#e9dcc624;width:1px;height:18px;margin:0 6px;transition:opacity .5s}#dock button{appearance:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;margin:0;transition:background .25s,color .25s,box-shadow .25s}#dock .group button:not(.swatch){color:#efe6d68c;background:0 0;border-radius:999px;height:32px;padding:0 12px}#dock .group button:not(.swatch):hover{color:#efe6d6e6}#dock .group button[aria-checked=true]:not(.swatch){color:#f1e9db;background:#efe6d61f}#dock .swatches{gap:6px;padding:0 6px}#dock .swatch{border-radius:50%;width:20px;height:20px;padding:0;box-shadow:inset 0 0 0 1px #00000040}#dock .swatch:hover{box-shadow:inset 0 0 0 1px #00000040,0 0 0 2px #efe6d640}#dock .swatch[aria-checked=true]{box-shadow:inset 0 0 0 1px #00000040,0 0 0 2px #131110,0 0 0 3.5px #efe6d6}#dock .caption{color:#efe6d6b3;white-space:nowrap;min-width:76px;padding:0 4px 0 6px}#dock [hidden]{display:none}#dock .tones{-webkit-backdrop-filter:blur(14px)saturate(1.2);background:#13111080;border:1px solid #e9dcc624;border-radius:999px;padding:6px 8px;animation:.35s cubic-bezier(.2,.7,.2,1) tones-in;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}#dock .tones .caption{min-width:64px}@keyframes tones-in{0%{opacity:0;transform:translate(-50%,6px)}}#dock button:focus-visible{outline-offset:2px;outline:2px solid #e3b56f}#film{color:#171412;background:#efe6d6;border-radius:999px;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;display:flex}#film:hover{background:#fff8ec}#film .icon{border:5px solid #0000;border-left:8px solid;border-right-width:0;width:0;height:0}#film.playing .icon{background:currentColor;border:0;border-radius:1px;width:8px;height:8px}#film.busy{opacity:.6;pointer-events:none}#film.busy .icon{border:1.5px solid;border-right-color:#0000;border-radius:50%;width:10px;height:10px;animation:.8s linear infinite film-wait}@keyframes film-wait{to{transform:rotate(360deg)}}#dock[hidden]{display:none}@media (width<=640px){#dock{border-radius:22px;flex-wrap:wrap;justify-content:center;row-gap:6px;width:calc(100vw - 24px);padding:6px 8px}#dock .divider{display:none}#dock .model{order:1}#dock #film{order:2;margin-left:4px}#dock .yarn{flex-basis:100%;order:3;justify-content:center}#dock .swatches{flex-basis:100%;order:4;justify-content:center;padding:4px 0 2px}#dock .swatch{width:24px;height:24px}#dock .caption{display:none}#dock .group button:not(.swatch){padding:0 10px}}body.reel #dock{-webkit-backdrop-filter:none;bottom:calc(max(0px, (min(9vh, 6vw) - 42px) / 2) + env(safe-area-inset-bottom));background:0 0;border-color:#0000}body.reel #dock .group,body.reel #dock .divider{opacity:0;pointer-events:none}body.reel #film{color:#efe6d6;background:#efe6d624}@media (prefers-reduced-motion:reduce){#dock,#dock button{transition:none}#dock .tones{animation:none}}body:before,body:after{content:"";z-index:5;pointer-events:none;background:#070606;height:0;transition:height 1.2s cubic-bezier(.65,0,.35,1);position:fixed;left:0;right:0}body:before{top:0}body:after{bottom:0}body.reel:before,body.reel:after{height:min(9vh,6vw)}#info,.lil-gui{transition:opacity .8s}body.reel #info,body.reel .lil-gui{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){body:before,body:after{transition:none}}