:root{color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;overflow:hidden}body{color:#e8e8e4;-webkit-font-smoothing:antialiased;background:#101014;font:13px/1.45 system-ui,sans-serif}#app{position:relative}#app>canvas{touch-action:none;outline:none;display:block;position:absolute;inset:0}.fatal{z-index:99;color:#ffd7d7;background:#3a1518;border:1px solid #a04040;border-radius:10px;padding:12px 16px;font:13px/1.5 ui-monospace,monospace;position:fixed;inset:auto 16px 16px}.presence-layer{z-index:5;pointer-events:none;position:absolute;inset:0;overflow:hidden}.peer-label{white-space:nowrap;background:#101014d1;border:1px solid;border-radius:999px;padding:2px 8px;font-size:11px;position:absolute;transform:translate(-50%,-100%)}.gallery-overlay{z-index:60;pointer-events:auto;background:#08080bb8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gallery-card{color:#e8e8e4;background:#16161af2;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;gap:12px;width:min(680px,100vw - 32px);max-height:min(80vh,720px);padding:18px;display:flex}.gallery-head h2{margin:0;font-size:15px;font-weight:600}.gallery-hint{color:#b8b8be;margin:4px 0 0;font-size:12px}.gallery-body{min-height:60px;overflow-y:auto}.gallery-status{color:#b8b8be;margin:0 0 8px;font-size:12px}.gallery-error{color:#e08a8a}.gallery-hidden{display:none}.gallery-close{font:inherit;color:#d8d8dc;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:6px 14px}.gallery-close:hover{background:#ffffff1f}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}.gallery-item{text-align:left;color:#e8e8e4;cursor:pointer;font:inherit;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;align-items:stretch;gap:4px;padding:10px;transition:transform .12s,background .12s,border-color .12s;display:flex;position:relative}.gallery-item:hover:not(:disabled){background:#ffffff14;border-color:#3fa7c4bf}.gallery-item:focus,.gallery-item:focus-visible{border-color:#3fa7c4;outline:none;box-shadow:inset 0 0 0 1px #3fa7c473}.gallery-item:disabled{cursor:default;opacity:.55}.gallery-item strong{font-size:13px;font-weight:600}.gallery-blurb{color:#b8b8be;font-size:11px}.gallery-meta{color:#8c8c92;font-size:11px}.gallery-thumb{aspect-ratio:16/10;background:#ffffff08;border-radius:6px;margin-bottom:4px;overflow:hidden}.gallery-thumb img,.gallery-thumb-fallback{object-fit:cover;width:100%;height:100%;display:block}.gallery-thumb-fallback{background:linear-gradient(135deg,#1f2b3a 0%,#2a3d52 45%,#3fa7c4 130%)}.gallery-item.gallery-busy{opacity:1}.gallery-item.gallery-busy:after{content:"Loading…";color:#e8e8e4;background:#08080b99;border-radius:8px;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;inset:0}.ui{pointer-events:none;color:#d8d8dc;user-select:none;font-family:system-ui,Segoe UI,sans-serif;font-size:12px;position:absolute;inset:0}@media (width<=767px){.ui{display:none}}.ui .panel{pointer-events:auto;backdrop-filter:blur(10px);background:#16161ad1;border:1px solid #ffffff14;border-radius:10px;padding:8px}.ui button{font:inherit;color:#d8d8dc;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:4px 8px}.ui button:hover{background:#ffffff1f}.ui button.accent{color:#7fcde2;background:#3fa7c42e;border-color:#3fa7c473}.ui button.armed{color:#f0a79e;background:#c446384d;border-color:#c4463899}.ui input[type=text],.ui select{font:inherit;color:#e8e8ec;background:#00000059;border:1px solid #ffffff1f;border-radius:6px;outline:none;padding:4px 6px}.ui input[type=text]:focus,.ui select:focus{border-color:#3fa7c4}.ui svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;display:block}.toolbar{flex-direction:column;gap:4px;display:flex;position:absolute;top:42%;left:12px;transform:translateY(-50%)}.tool-btn{justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex}.tool-btn.active{color:#7fcde2;background:#3fa7c438;border-color:#3fa7c4}.color-panel{border-radius:14px;flex-direction:column;gap:10px;width:236px;padding:12px;display:flex;position:absolute;bottom:12px;left:12px;box-shadow:0 10px 30px #00000059}.panel-section{flex-direction:column;gap:6px;display:flex}.panel-section+.panel-section{border-top:1px solid #ffffff0f;padding-top:10px}.section-label{letter-spacing:.12em;text-transform:uppercase;color:#e8e8e46b;font-size:9px;font-weight:600}.class-row{background:#00000047;border-radius:9px;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:3px;padding:3px;display:grid}.shape-row{grid-template-columns:repeat(4,1fr)}.chip{color:#e8e8e49e;text-align:center;background:0 0;border:none;border-radius:6px;padding:5px 0;font-size:11px;transition:background .12s,color .12s}.chip:hover{color:#e8e8e4;background:#ffffff0f}.chip.active{color:#9fdcee;background:#3fa7c442;box-shadow:inset 0 0 0 1px #3fa7c48c}.color-row{align-items:stretch;gap:8px;display:flex}.color-wrap{flex:none;position:relative}.current-chip{cursor:pointer;border:1px solid #ffffff47;border-radius:9px;width:64px;height:34px;box-shadow:inset 0 0 0 2px #00000038}.current-chip:hover{border-color:#ffffff80}.hex-input{text-align:center;letter-spacing:.04em;color:#e8e8e4;background:#00000047;border:1px solid #ffffff14;border-radius:9px;flex:1;min-width:0;height:34px;padding:0 10px;font-family:ui-monospace,monospace;font-size:12px}.hex-input:focus{border-color:#3fa7c499;outline:none}.picker-pop{flex-direction:column;gap:6px;display:none;bottom:calc(100% + 6px);left:0}.pop.picker-pop.open{display:flex}.sv-canvas,.hue-canvas{cursor:crosshair;touch-action:none;border-radius:6px;display:block}.swatch-grid{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.swatch{aspect-ratio:1;border:1px solid #ffffff24;border-radius:6px;width:100%;padding:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch.current{outline-offset:1.5px;outline:2px solid #ffffffd9}.recents-section.empty{display:none}.recents-row{gap:5px;display:flex}.recents-row .swatch{flex:none;width:20px;height:20px}.menu-area{pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:12px;right:12px}.peers-pill{pointer-events:none;color:#7fcde2;white-space:nowrap;background:#16161ad1;border:1px solid #3fa7c48c;border-radius:999px;padding:4px 10px}.peers-pill.hidden{display:none}.menubar{align-items:center;gap:4px;display:flex}.menu-item{position:relative}.file-input{display:none}.pop{z-index:10;backdrop-filter:blur(10px);background:#16161aeb;border:1px solid #ffffff14;border-radius:10px;padding:10px;display:none;position:absolute}.pop.open{display:block}.menu-pop{min-width:180px;top:calc(100% + 8px);right:0}.pop-actions{justify-content:flex-end;gap:6px;margin-top:8px;display:flex}.pop-note{color:#8a8a90;padding:4px 2px}.pop-item{text-align:left;white-space:nowrap;width:100%;margin-bottom:4px;display:block}.pop-item:last-child{margin-bottom:0}.save-pop input{width:160px}.load-pop{min-width:280px;max-height:320px;overflow-y:auto}.save-row{align-items:center;gap:6px;padding:4px 0;display:flex}.save-row+.save-row{border-top:1px solid #ffffff0f}.save-info{flex:1;min-width:0}.save-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.save-meta{color:#8a8a90;font-size:11px}.settings-pop{flex-direction:column;gap:6px;min-width:200px;display:none}.settings-pop.open{display:flex}.check-row{cursor:pointer;align-items:center;gap:8px;display:flex}.check-row input{accent-color:#3fa7c4}.select-row,.set-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.slider-row input[type=range]{accent-color:#3fa7c4;flex:1;min-width:90px}.slider-value{text-align:right;color:#8a8a90;font-variant-numeric:tabular-nums;min-width:34px}.hud{pointer-events:none;color:#b8e6f2;font-family:ui-monospace,Cascadia Mono,monospace;font-size:11px;line-height:1.5;position:absolute;top:12px;left:12px}.hud.hidden{display:none}.toast{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;background:#16161aeb;border:1px solid #ffffff1a;border-radius:999px;max-width:60vw;padding:6px 14px;transition:opacity .25s,transform .25s;position:absolute;bottom:24px;left:50%;overflow:hidden;transform:translate(-50%,6px)}.toast.show{opacity:1;transform:translate(-50%)}.help-overlay{pointer-events:auto;cursor:pointer;background:#00000080;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.help-overlay.open{display:flex}.help-card{min-width:520px;max-width:680px;padding:16px 20px}.help-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.help-heading{color:#7fcde2;font-size:14px;font-weight:600}.help-esc{font-family:ui-monospace,monospace}.help-cols{grid-template-columns:1fr 1fr;gap:8px 24px;display:grid}.help-title{color:#8a8a90;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-size:10px;font-weight:600}.help-row{align-items:baseline;gap:10px;padding:2px 0;display:flex}.help-keys{white-space:nowrap;min-width:110px}kbd{background:#ffffff14;border:1px solid #ffffff26;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:11px}.help-desc{color:#b8b8be}.size-picker{z-index:60;pointer-events:auto;background:#08080bb8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.size-card{background:#16161af2;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;gap:8px;width:320px;padding:18px;display:flex}.size-card h2{font-size:15px;font-weight:600}.size-card p{color:#b8b8be;margin-bottom:6px;font-size:12px}.size-option{color:#e8e8e4;cursor:pointer;font:inherit;background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px;display:flex}.size-option span{color:#b8b8be;font-size:11px}.size-option:hover{border-color:#3fa7c4}.size-option.recommended{background:#3fa7c414;border-color:#3fa7c499}.size-cancel{color:#b8b8be;cursor:pointer;font:inherit;background:0 0;border:none;margin-top:4px;padding:7px}.size-cancel:hover{color:#e8e8e4}.peer-dot{vertical-align:-1px;border-radius:50%;width:8px;height:8px;margin-right:5px;display:inline-block}.size-picker.attract{background:linear-gradient(#08080b26 0%,#08080b8c 100%)}.size-picker.attract .size-card{-webkit-backdrop-filter:blur(10px);background:#101014a8;box-shadow:0 18px 48px #0006}.size-picker.attract .size-card h2{font-size:17px}.input-blocker{z-index:70;cursor:progress;position:fixed;inset:0}.replay-transport{z-index:80;backdrop-filter:blur(10px);background:#16161aeb;border:1px solid #3fa7c473;border-radius:999px;align-items:center;gap:10px;width:min(520px,100vw - 48px);padding:8px 12px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0006}.replay-transport button{font:inherit;color:#e8e8e4;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:999px}.replay-transport button:hover{background:#ffffff1f}.rt-play{width:34px;height:28px;font-size:13px;line-height:1}.rt-scrub{accent-color:#3fa7c4;cursor:pointer;flex:1;min-width:0;height:4px}.rt-speed{font-variant-numeric:tabular-nums;min-width:44px;height:28px;font-size:11px}.rt-skip{height:28px;padding:0 12px;font-size:11px}.file-pop{flex-direction:column;gap:10px;width:252px;max-height:70vh;display:none;overflow-y:auto}.pop.file-pop.open{display:flex}.file-section{flex-direction:column;gap:6px;display:flex}.file-section+.file-section{border-top:1px solid #ffffff0f;padding-top:10px}.save-as-row{gap:6px;display:flex}.save-as-row input{flex:1;min-width:0}.export-row{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.export-row button{border-radius:6px;padding:5px 0;font-size:11px}.menu-cta{color:#9fdcee;background:#3fa7c433;border-color:#3fa7c48c}.menu-cta:hover{background:#3fa7c452}.share-item{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.share-item span{color:#b8b8be;font-size:11px}.confirm-overlay{background:#08080b8c}.confirm-actions{gap:8px;margin-top:8px;display:flex}.confirm-actions button{font:inherit;cursor:pointer;border-radius:8px;flex:1;padding:9px 0}.confirm-yes{color:#9fdcee;background:#3fa7c438;border:1px solid #3fa7c4a6}.confirm-yes:hover{background:#3fa7c457}.confirm-no{color:#d8d8dc;background:#ffffff0d;border:1px solid #ffffff1a}.confirm-no:hover{background:#ffffff1a}.facing-row{grid-template-columns:auto repeat(4,1fr)}.facing-row-hidden{display:none}