Something went wrong. Try again.
ouija board1
Something went wrong. Try again.
25 kB · 1347 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);
:root { color-scheme: light; font-family: "Avenir Next", "Segoe UI", sans-serif; color: oklch(25% 0.025 75); background: oklch(90% 0.02 82); font-synthesis: none; text-rendering: optimizeLegibility; --canvas: oklch(97% 0.012 82); --ui: oklch(99% 0.008 82 / 0.94); --ui-hover: oklch(94% 0.018 82); --ink: oklch(25% 0.025 75); --ink-soft: oklch(32% 0.025 75); --paper: oklch(97% 0.012 82); --paper-deep: oklch(90% 0.02 82); --line: oklch(34% 0.025 75 / 0.18); --muted: oklch(49% 0.025 75); --accent: oklch(61% 0.16 38); --accent-soft: oklch(72% 0.12 38); --green: oklch(57% 0.12 154); --hud: oklch(99% 0.008 82 / 0.88); --code-surface: oklch(25% 0.03 70 / 0.1); --shadow: 0 8px 24px oklch(25% 0.025 75 / 0.1); --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;}
:root[data-theme="dark"] { color-scheme: dark; color: oklch(91% 0.018 82); background: oklch(24% 0.02 75); --canvas: oklch(24% 0.02 75); --ui: oklch(29% 0.022 75 / 0.96); --ui-hover: oklch(35% 0.025 75); --ink: oklch(91% 0.018 82); --ink-soft: oklch(84% 0.02 82); --paper: oklch(91% 0.018 82); --paper-deep: oklch(31% 0.022 75); --line: oklch(86% 0.018 82 / 0.18); --muted: oklch(72% 0.022 82); --accent: oklch(72% 0.14 38); --accent-soft: oklch(77% 0.1 38); --green: oklch(73% 0.11 154); --hud: oklch(29% 0.022 75 / 0.94); --code-surface: oklch(12% 0.02 75 / 0.24); --shadow: 0 8px 24px oklch(8% 0.02 75 / 0.32);}
:root[data-theme="catppuccin"] { color-scheme: dark; color: #cdd6f4; background: #181825; --canvas: #1e1e2e; --ui: rgb(49 50 68 / 0.96); --ui-hover: #45475a; --ink: #cdd6f4; --ink-soft: #bac2de; --paper: #cdd6f4; --paper-deep: #181825; --line: rgb(205 214 244 / 0.2); --muted: #a6adc8; --accent: #cba6f7; --accent-soft: #b4befe; --green: #a6e3a1; --hud: rgb(49 50 68 / 0.94); --code-surface: rgb(17 17 27 / 0.72); --shadow: 0 8px 24px rgb(17 17 27 / 0.48);}
:root[data-theme="dracula"] { color-scheme: dark; color: #f8f8f2; background: #191a21; --canvas: #282a36; --ui: rgb(68 71 90 / 0.96); --ui-hover: #6272a4; --ink: #f8f8f2; --ink-soft: #e6e6dc; --paper: #f8f8f2; --paper-deep: #191a21; --line: rgb(248 248 242 / 0.2); --muted: #bdc0cc; --accent: #ff79c6; --accent-soft: #8be9fd; --green: #50fa7b; --hud: rgb(68 71 90 / 0.94); --code-surface: rgb(25 26 33 / 0.72); --shadow: 0 8px 24px rgb(25 26 33 / 0.5);}
* { box-sizing: border-box;}
html,body,#app-root { min-width: 320px; min-height: 100%; margin: 0; touch-action: none;}
body { min-height: 100vh; overflow: hidden; background: var(--paper-deep);}
button { border: 0; font: inherit;}
button:focus-visible,canvas:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px;}
.app-shell { position: relative; min-height: 100vh; isolation: isolate;}
.topbar { position: fixed; z-index: 10; top: 16px; right: 16px; left: 16px; display: flex; align-items: center; gap: var(--space-lg); min-height: 0; padding: 0; pointer-events: none;}
.brand-lockup,.toolbar,.status-chip,.canvas-hud { display: flex; align-items: center;}
.brand-lockup { gap: 9px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--ui); box-shadow: var(--shadow); pointer-events: auto;}
.brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: 16px; line-height: 1; transform: rotate(-18deg);}
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase;}
h1,h2,p { margin-block: 0;}
h1 { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; line-height: 1;}
.toolbar { position: absolute; left: 50%; justify-content: center; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--ui); box-shadow: var(--shadow); pointer-events: auto; transform: translateX(-50%);}
.tool-cluster { display: flex; align-items: center; gap: 2px;}
.toolbar-divider { width: 1px; height: 20px; margin: 0 3px; background: var(--line);}
.tool-button,.text-button { cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;}
.tool-button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 650;}
.tool-icon-slot { width: 16px; height: 16px; display: block; flex: none;}
.tool-icon-slot > svg { width: 100%; height: 100%; display: block; color: inherit; stroke: currentColor;}
.tool-button:hover:not(:disabled),.tool-button:focus-visible { border-color: var(--line); background: var(--ui-hover);}
.tool-button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--ink);}
.tool-button:disabled { cursor: not-allowed; opacity: 0.35;}
.tool-button--accent { background: var(--ui-hover);}
.tool-button--accent:hover:not(:disabled) { border-color: var(--accent); color: var(--accent);}
.status-chip { gap: 8px; justify-self: end; margin-left: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--ui); color: var(--muted); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; box-shadow: var(--shadow); pointer-events: auto;}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px oklch(57% 0.12 154 / 0.12);}
.connector-settings { position: relative;}
.connector-settings__trigger { display: grid; width: 25px; height: 25px; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;}
.tool-icon-slot--small { width: 14px; height: 14px;}
.connector-settings__trigger:hover,.connector-settings__trigger:focus-visible,.connector-settings__trigger[data-popup-open] { background: var(--ui-hover); color: var(--ink);}
.connector-settings__panel { display: grid; gap: 10px; min-width: 170px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ui); box-shadow: var(--shadow);}
.connector-settings__positioner { z-index: 20;}
.shape-picker { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 9px; background: var(--ui);}
.shape-picker__trigger { width: 23px; height: 25px;}
.shape-picker__panel { display: grid; gap: 10px; min-width: 176px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ui); box-shadow: var(--shadow);}
.shape-picker__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;}
.shape-picker__option { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer;}
.shape-picker__option:hover,.shape-picker__option:focus-visible,.shape-picker__option[data-selected="true"] { border-color: var(--line); background: var(--ui-hover); color: var(--ink);}
.shape-glyph { width: 15px; height: 15px; flex: none; border: 1.5px solid currentColor;}
.shape-glyph--rectangle { border-radius: 3px; }.shape-glyph--ellipse { border-radius: 50%; }.shape-glyph--diamond { transform: scale(0.72) rotate(45deg); border-radius: 2px; }.shape-glyph--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 2px; }.shape-glyph--hexagon { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 2px; }
.settings__trigger { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer;}
.settings__trigger:hover,.settings__trigger:focus-visible,.settings__trigger[data-popup-open] { border-color: var(--line); background: var(--ui-hover);}
.settings__positioner { z-index: 20;}
.settings__panel { display: grid; gap: 12px; width: 250px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ui); color: var(--ink); box-shadow: var(--shadow);}
.settings__heading { display: grid; gap: 4px; padding-bottom: 2px;}
.settings__heading strong { font-size: 13px; letter-spacing: -0.01em;}
.settings__field,.settings__toggle,.settings__readout { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;}
.settings__field select { min-width: 140px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ui-hover); color: var(--ink); font: inherit; letter-spacing: normal; text-transform: none;}
.settings__field input[type="range"] { min-width: 140px; accent-color: var(--accent);}
.settings__field select:focus-visible,.settings__toggle input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px;}
.settings__toggle { min-height: 30px;}
.settings__toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent);}
.settings__readout { padding-top: 2px; border-top: 1px solid var(--line);}
.settings__readout strong { color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;}
.settings__hint { color: var(--muted); font-size: 10px; line-height: 1.45;}
.shell-tooltip__popup { z-index: 30; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink); color: var(--paper); font-size: 10px; letter-spacing: 0.02em; box-shadow: var(--shadow);}
.shell-tooltip__arrow { width: 8px; height: 4px; fill: var(--ink);}
.export-menu__positioner { z-index: 20;}
.export-menu__panel { display: grid; gap: 5px; min-width: 164px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--ui); box-shadow: var(--shadow);}
.export-menu__item { min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: var(--ui-hover); color: var(--ink); font: inherit; font-size: 11px; text-align: left;}
.export-menu__item:hover,.export-menu__item:focus-visible { border-color: var(--accent-soft); outline: none;}
.tool-setting { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;}
.tool-setting select { min-height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--ui-hover); color: var(--ink); font: inherit; letter-spacing: normal; text-transform: none;}
.tool-setting select:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px;}
.workspace { position: relative; display: block; width: 100%; height: 100vh; min-height: 0;}
.board-panel { position: absolute; inset: 0; min-width: 0; min-height: 0;}
.editor-surface { position: relative; width: 100%; height: 100%; min-height: 100vh; overflow: hidden; background: var(--canvas);}
#canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none;}
#ink-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none;}
.jeeboard-text-portal { box-sizing: border-box; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; caret-color: var(--accent); opacity: 1;}
.jeeboard-attached-label-portal { display: flex; align-items: center; justify-content: center; text-align: center; background: transparent;}
.jeeboard-attached-label-portal .ProseMirror { width: 100%; max-height: 100%;}
.jeeboard-text-portal p,.jeeboard-text-portal h1,.jeeboard-text-portal h2,.jeeboard-text-portal h3,.jeeboard-text-portal h4,.jeeboard-text-portal h5,.jeeboard-text-portal h6,.jeeboard-text-portal blockquote,.jeeboard-text-portal pre { margin: 0 0 calc(var(--jeeboard-rich-text-block-gap, 0.55) * 1em); font-family: inherit; letter-spacing: inherit; line-height: var(--jeeboard-rich-text-line-height, 1.45);}
.jeeboard-text-portal h1 { font-size: 2em; }.jeeboard-text-portal h2 { font-size: 1.5em; }.jeeboard-text-portal h3 { font-size: 1.17em; }.jeeboard-text-portal h4 { font-size: 1em; }.jeeboard-text-portal h5 { font-size: 0.83em; }.jeeboard-text-portal h6 { font-size: 0.67em; }.jeeboard-text-portal h1,.jeeboard-text-portal h2,.jeeboard-text-portal h3,.jeeboard-text-portal h4,.jeeboard-text-portal h5,.jeeboard-text-portal h6 { font-weight: 700;}
.jeeboard-text-portal ul,.jeeboard-text-portal ol { margin: 0 0 var(--jeeboard-rich-text-block-gap, 0.55em); padding-left: var(--jeeboard-rich-text-quote-indent, 1.5em);}
.jeeboard-text-portal .ProseMirror { min-height: 100%; outline: 0; transform: translateY(-0.15em); white-space: pre-wrap; overflow-wrap: anywhere;}
.jeeboard-text-portal .ProseMirror > :last-child { margin-bottom: 0;}
.jeeboard-text-portal blockquote { padding-left: var(--jeeboard-rich-text-quote-indent, 1.5em); border-left: var(--jeeboard-rich-text-quote-border, 0.1875em) solid var(--accent-soft);}
.jeeboard-text-portal pre { padding: var(--jeeboard-rich-text-code-padding, 0.5em); border-radius: 6px; background: var(--code-surface); font-family: "SFMono-Regular", Consolas, monospace; font-size: var(--jeeboard-rich-text-code-font-size, 0.9em); white-space: pre-wrap;}
.jeeboard-text-portal pre code { font: inherit;}
.text-edit-bubble { position: absolute; z-index: 3; display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--ui); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)) scale(0.96); transition: opacity 120ms ease, transform 120ms ease;}
.text-edit-bubble[data-placement="below"] { transform: translate(-50%, 10px) scale(0.96);}
.text-edit-bubble[data-visible="true"] { opacity: 1; pointer-events: auto; transform: translate(-50%, calc(-100% - 10px)) scale(1);}
.text-edit-bubble[data-visible="true"][data-placement="below"] { transform: translate(-50%, 10px) scale(1);}
.text-edit-bubble__button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: -0.02em;}
.text-edit-bubble__button:nth-child(2) { font-style: italic;}
.text-edit-bubble__button:hover { border-color: var(--line); background: var(--ui-hover);}
.text-edit-bubble__button:active { background: oklch(84% 0.045 38 / 0.5);}
.text-edit-bubble__divider { width: 1px; margin: 4px 2px; background: var(--line);}
.text-edit-bubble__compare { color: var(--accent); font-size: 16px; font-weight: 500; line-height: 1;}
.text-edit-bubble__compare[data-active="true"] { border-color: var(--accent-soft); background: color-mix(in oklch, var(--accent-soft) 28%, transparent);}
.text-render-comparison { position: absolute; z-index: 2; border: 1px dashed oklch(67% 0.15 38 / 0.72); opacity: 0; pointer-events: none; transition: opacity 120ms ease;}
.text-render-comparison[data-visible="true"] { opacity: 1;}
.text-render-comparison__legend { position: absolute; top: calc(100% + 6px); right: 0; left: 0; display: flex; justify-content: space-between; gap: 8px;}
.text-render-comparison__label { padding: 2px 4px; border: 1px solid oklch(67% 0.15 38 / 0.42); border-radius: 4px; background: oklch(26% 0.025 70 / 0.9); color: var(--paper-deep); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;}
@media (prefers-reduced-motion: reduce) { .text-edit-bubble, .text-render-comparison { transition: none; }}
#canvas.is-dragging { cursor: grabbing;}
#canvas.is-panning { cursor: move;}
.canvas-hud { position: absolute; right: auto; bottom: 20px; left: 20px; gap: 9px; min-height: 32px; padding: 0 10px; border: 1px solid oklch(50% 0.03 70 / 0.22); border-radius: 9px; background: var(--hud); color: var(--ink); font-size: 11px; letter-spacing: 0.02em; pointer-events: none; box-shadow: var(--shadow);}
.canvas-hint { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--hud); color: var(--muted); font-size: 11px; pointer-events: none; box-shadow: var(--shadow);}
.hud-divider,.inspector-rule { width: 1px; background: var(--line);}
.hud-divider { height: 14px;}
kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 10px;}
.inspector { position: absolute; z-index: 5; top: 80px; right: 20px; display: flex; flex-direction: column; gap: 12px; width: 206px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ui); box-shadow: var(--shadow);}
.inspector[data-visible="false"] { display: none;}
.inspector--selection { width: 236px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin;}
.inspector.inspector--selection { width: 236px;}
.inspector--selection .inspector-heading { padding-bottom: 4px;}
.inspector-section { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line);}
.inspector-section:first-of-type { border-top: 0;}
.inspector-section h3 { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;}
.inspector-swatches,.inspector-options,.inspector-actions { display: flex; align-items: center; gap: 6px;}
.inspector-swatches { flex-wrap: wrap;}
.inspector-swatch { width: 23px; height: 23px; padding: 0; border: 2px solid transparent; border-radius: 6px; box-shadow: inset 0 0 0 1px oklch(30% 0.02 75 / 0.16); cursor: pointer;}
.inspector-swatch:hover,.inspector-swatch:focus-visible,.inspector-swatch[data-active="true"] { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft);}
.inspector-swatch--transparent { background-color: var(--ui); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; background-size: 12px 12px;}
.inspector-option { display: grid; min-width: 36px; height: 30px; place-items: center; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: var(--ui-hover); color: var(--muted); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;}
.inspector-option:hover,.inspector-option:focus-visible,.inspector-option[data-active="true"] { border-color: var(--accent-soft); background: color-mix(in oklch, var(--accent-soft) 30%, var(--ui-hover)); color: var(--ink); outline: none;}
.inspector-option .tool-icon-slot { width: 15px; height: 15px;}
.inspector-field { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 10px;}
.inspector-field select,.inspector-field input[type="number"] { width: 100%; min-height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--ui-hover); color: var(--ink); font: inherit; font-size: 11px;}
.inspector-field select:focus-visible,.inspector-field input:focus-visible { border-color: var(--accent-soft); outline: 2px solid color-mix(in oklch, var(--accent-soft) 40%, transparent); outline-offset: 1px;}
.inspector-inline-fields { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px;}
.inspector-inline-fields .inspector-options { align-self: end;}
.inspector-inline-fields .inspector-option { min-width: 34px; padding: 0 6px;}
.inspector-opacity { display: grid; gap: 4px;}
.inspector-opacity input { width: 100%; accent-color: var(--accent);}
.inspector-opacity div { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px;}
.inspector-opacity strong { color: var(--ink); font-weight: 700;}
.inspector-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
.inspector-actions .tool-button { width: 32px; height: 30px; border: 1px solid transparent; background: var(--ui-hover);}
.inspector-actions .tool-button:hover:not(:disabled),.inspector-actions .tool-button:focus-visible { border-color: var(--accent-soft); background: color-mix(in oklch, var(--accent-soft) 30%, var(--ui-hover)); outline: none;}
.inspector-heading { display: grid; gap: 4px;}
h2 { color: var(--ink); font-size: 15px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15;}
.inspector-rule { width: 100%; height: 1px; background: var(--line);}
.inspector-list { display: grid; gap: 8px; margin: 0;}
.inspector-list div { display: flex; justify-content: space-between; gap: var(--space-lg);}
.inspector-list div:nth-child(n + 2) { display: none;}
dt { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;}
dd { margin: 0; color: var(--ink); font-size: 12px; text-align: right;}
.inspector-note { display: none;}
.text-button { align-self: flex-start; padding: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 700;}
.text-button:hover:not(:disabled) { color: var(--ink);}
.text-button:disabled { cursor: not-allowed; opacity: 0.35;}
@media (max-width: 840px) { body { overflow: auto; }
.topbar { top: 8px; right: 8px; left: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.toolbar { position: static; grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; transform: none; }
.status-chip { grid-column: 2; grid-row: 1; }
.board-panel { min-height: 68vh; }
.inspector { top: 124px; right: 8px; width: 190px; }
.inspector-rule { display: block; }
.inspector-note { display: none; }}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }}
.dialog__backdrop { position: fixed; inset: 0; background: rgba(24, 22, 19, 0.4); z-index: 40;}
.dialog__popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; width: min(320px, calc(100vw - 48px)); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ui); box-shadow: var(--shadow); z-index: 41;}
.dialog__title { margin: 0; font-size: 14px; font-weight: 650;}
.dialog__description { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: 0.75;}
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;}
.dialog__button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; font: inherit; font-size: 12.5px; cursor: pointer;}
.dialog__button--danger { background: #b3402f; border-color: #b3402f; color: #fff;}
.perf-hud { position: fixed; right: 10px; bottom: 10px; z-index: 30; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ui); box-shadow: var(--shadow); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; pointer-events: none; white-space: nowrap;}
.perf-hud--full { opacity: 0.95;}