:root {color-scheme:light;--page:#edf1f7;--surface:#f9fbff;--glass:rgba(250,252,255,.94);--ink:#233449;--muted:#748297;--line:#dce3ee;--accent:#245bc4;--selected:#e6edff;--shadow:0 14px 45px #263e6414,0 2px 6px #263e6409;--sidebar:266px}
:root[data-theme=dark] {color-scheme:dark;--page:#151e2c;--surface:#1e2b3e;--glass:rgba(30,43,62,.96);--ink:#e7eefb;--muted:#a9b7ca;--line:#34455e;--accent:#aac7ff;--selected:#30476b;--shadow:0 14px 45px #0003}
* {box-sizing:border-box}
body {margin:0;background:var(--page);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;overflow:hidden}
button,input,select,textarea {font:inherit}
button {cursor:pointer;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-height:40px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
button:hover {background:var(--selected)}
button:disabled {opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
input,select,textarea {color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px;min-width:0}
button svg {width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden] {display:none!important}
.primary {background:#245bc4;color:white;border-color:#245bc4}
.primary:hover {background:#17479e}
.icon-button {width:42px;height:42px;flex-shrink:0;padding:8px;font-size:22px;background:transparent;border-color:transparent}
.accent {background:var(--selected);color:var(--accent)}
.text-button {padding:3px 5px;border:0;background:transparent;font-size:12px;min-height:32px;color:var(--accent)}
.eyebrow {font-size:10px;letter-spacing:1.8px;color:var(--muted);font-weight:700;margin:0 0 8px}
.status-dot {width:7px;height:7px;display:inline-block;background:#42a88a;border-radius:50%;flex-shrink:0}
.app-header {height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:var(--glass);gap:20px}
.brand {border:0;padding:0;background:none;text-align:left;gap:12px;white-space:nowrap;font-size:17px;font-weight:400}
.brand:hover {background:transparent}
.brand-mark {display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#245bc4;color:white;font-size:30px}
.brand small {display:block;font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:.25px}
.header-center {display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.header-actions {display:flex;align-items:center;gap:12px}
.header-actions .primary {padding:10px 18px}
.library-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
h1 {font-size:22px;margin:0;font-weight:650;letter-spacing:-.7px}
#wall-count {font-size:11px;background:var(--selected);padding:3px 7px;border-radius:6px;vertical-align:middle;margin-left:10px;color:var(--accent)}
#library {position:absolute;left:0;top:86px;bottom:0;width:var(--sidebar);background:var(--glass);border-right:1px solid var(--line);padding:27px 20px 18px;display:flex;flex-direction:column;z-index:20}
.search {display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:0 10px}
.search span {font-size:23px;color:var(--muted)}
.search input {border:0;background:transparent;width:100%;padding:10px 0;font-size:12px}
.section-label {font-size:10px;font-weight:650;letter-spacing:1.3px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px}
#folders {display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto;flex-shrink:0}
.folder-button {border:0;justify-content:flex-start;background:transparent;padding:9px 11px;font-size:12px;min-height:38px;width:100%;text-align:left}
.folder-button span {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-button small {color:var(--muted)}
.folder-button.active {background:var(--selected);color:var(--accent)}
#wall-list {overflow:auto;flex:1;min-height:90px;padding:3px}
.wall-card {display:block;width:100%;text-align:left;padding:9px;margin-bottom:13px;border:1px solid var(--line);background:var(--surface);border-radius:12px}
.wall-card.active {border-color:var(--accent);box-shadow:0 0 0 2px var(--selected)}
.wall-card strong {display:block;font-size:12px;font-weight:600;margin:10px 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall-card small {font-size:10px;color:var(--muted);margin-left:2px}
.wall-preview {height:95px;border-radius:6px;position:relative;overflow:hidden;border:1px solid #00000007}
.mini-widget {position:absolute;background:#ffffffb8;border:1px solid #00000009;border-radius:3px}
.mini-widget::after {content:"";position:absolute;left:12%;top:25%;width:58%;height:3px;background:#7e94af40}
.library-footer {border-top:1px solid var(--line);margin-top:12px;padding-top:15px;flex-shrink:0}
.library-footer p {font-size:11px;margin:0 0 6px;display:flex;gap:7px;align-items:center}
.library-footer>div {display:flex;justify-content:space-between}
.library-footer small {font-size:10px;color:var(--muted);display:block;margin-top:7px}
#workspace {position:absolute;left:var(--sidebar);right:0;top:86px;bottom:0;padding:30px 35px 164px;display:flex;flex-direction:column}
.wall-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:10px}
.wall-heading>div:first-child {min-width:0;flex:1}
#wall-title {background:none;border:1px solid transparent;padding:0 5px 3px 0;font-size:27px;letter-spacing:-.8px;font-weight:650;width:100%;text-overflow:ellipsis}
#wall-title:hover {border-bottom-color:var(--line)}
.wall-actions {display:flex;gap:3px}
#stage-wrap {flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#stage {width:1600px;height:900px;position:relative;flex-shrink:0;transform-origin:center;box-shadow:var(--shadow);border:1px solid #61708818;border-radius:16px;overflow:hidden;background-color:#e8eee9;background-image:radial-gradient(#738c7428 .9px,transparent .9px);background-size:24px 24px;color:#233449}
#widget-layer {position:absolute;inset:0}
#wall-ink {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10000;touch-action:none}
#wall-ink.drawing {pointer-events:auto;cursor:crosshair}
#empty-wall {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
#empty-wall button {pointer-events:auto}
#empty-wall>span {font-size:70px;color:#7c9b8a}
#empty-wall h2 {font-size:32px;font-weight:500;margin-bottom:0}
#empty-wall p {font-size:20px;color:#667b70}
.wall-caption {display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:16px 2px 0}
.widget {position:absolute;display:flex;flex-direction:column;border-radius:16px;background:#ffffffed;box-shadow:0 6px 20px #2942540c;border:1px solid #ffffffa8;min-width:0;overflow:visible;color:#233449}
.widget.selected {outline:3px solid #5282d7;outline-offset:4px}
.widget-header {height:48px;display:flex;align-items:center;padding:4px 13px;gap:7px;flex-shrink:0;cursor:grab;touch-action:none;border-bottom:1px solid #1e355010}
.widget-header span {font-size:12px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;color:#66788d;flex:1}
.widget-header svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#718296}
.widget-header .grip {flex:0;font-size:18px;opacity:.5}
.widget-content {flex:1;min-height:0;position:relative;overflow:hidden;border-radius:0 0 16px 16px}
.widget-resize {position:absolute;bottom:-10px;right:-10px;width:40px;height:40px;min-height:40px;padding:0;background:#245bc4;color:#fff;border:3px solid var(--page);border-radius:50%;cursor:nwse-resize;touch-action:none;z-index:2;display:none}
.widget.selected .widget-resize {display:flex}
.widget[data-locked=true] .widget-resize {display:none}
.widget[data-locked=true] .widget-header {cursor:default}
.time-display {font-size:80px;letter-spacing:-4px;font-variant-numeric:tabular-nums;text-align:center;font-weight:500;line-height:1.2}
.time-content,.dice-content,.tally-content {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:14px;height:100%}
.widget-controls {display:flex;align-items:center;justify-content:center;gap:10px}
.widget-controls button {min-height:48px;min-width:52px;background:#eef3f9;color:#345575;border-color:#dfe7f0;font-size:18px}
.widget-controls button.primary {background:#245bc4;color:#fff}
.time-label {font-size:14px;color:#738498;letter-spacing:1px}
.image-content img {width:100%;height:100%;object-fit:contain;display:block}
.media-placeholder {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:15px;padding:15px;text-align:center;color:#74859a;font-size:18px}
.media-placeholder svg {width:45px;height:45px;fill:none;stroke:currentColor;stroke-width:1.4}
.camera-surface {position:absolute;inset:0;background:#182333;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camera-frame {position:relative;width:100%;height:100%}
.camera-frame video,.camera-frame img,.camera-frame canvas {position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.camera-frame canvas {touch-action:none;pointer-events:none}
.camera-frame canvas.drawing {pointer-events:auto;cursor:crosshair}
.camera-badge {position:absolute;bottom:10px;left:12px;background:#162235c9;color:white;border-radius:7px;font-size:11px;padding:5px 9px;pointer-events:none}
.finished {background:#fff0cb!important}
#toolbar-area {position:fixed;bottom:23px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:calc(100vw - var(--sidebar) - 28px)}
#main-toolbar {display:flex;align-items:center;gap:5px;background:var(--glass);border:1px solid #ffffff80;border-radius:20px;box-shadow:var(--shadow);padding:9px 12px;max-width:100%;overflow-x:auto;backdrop-filter:blur(18px)}
.dock-button {border:0;background:none;flex-direction:column;font-size:10px;gap:5px;min-width:62px;min-height:61px;padding:8px;white-space:nowrap}
.dock-button svg {width:23px;height:23px}
.dock-button.active {background:var(--selected);color:var(--accent)}
.dock-divider {height:32px;width:1px;background:var(--line);margin:0 5px;flex-shrink:0}
#context-toolbar {display:flex;gap:7px;align-items:center;padding:8px 12px;background:var(--glass);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-width:100%;overflow-x:auto;min-height:58px;white-space:nowrap}
#context-toolbar .context-label {font-size:11px;font-weight:650;margin-right:6px;color:var(--muted)}
#context-toolbar button {min-width:40px;min-height:40px;font-size:12px}
#context-toolbar input[type=number] {width:78px;max-width:78px}
#context-toolbar input[type=color] {width:40px;padding:4px;height:40px}
#context-toolbar select {max-width:170px;font-size:12px}
#context-toolbar label {display:flex;align-items:center;gap:5px;font-size:11px}
#context-toolbar button.active {background:var(--selected);color:var(--accent)}
.popup {position:fixed;z-index:80;background:var(--glass);border:1px solid var(--line);box-shadow:0 22px 80px #16294730;border-radius:20px;padding:25px;backdrop-filter:blur(20px)}
#catalog {bottom:115px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);width:650px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 220px);overflow:auto}
.popup-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}
h2 {font-size:21px;font-weight:600;letter-spacing:-.5px;margin:0}
.popup input[type=search] {width:100%;margin-bottom:18px}
#catalog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.catalog-tool {display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:105px;padding:16px;gap:6px}
.catalog-tool svg {color:var(--accent);width:24px;height:24px;margin-bottom:3px}
.catalog-tool strong {font-size:13px}
.catalog-tool small {font-size:10px;color:var(--muted)}
.small-popup {top:165px;right:35px;width:240px;padding:18px;display:flex;flex-direction:column;gap:10px}
.small-popup label {display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--muted)}
.small-popup h2 {font-size:17px;margin-bottom:4px}
.danger {color:#b33b4b}
dialog {border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);width:430px;max-width:calc(100vw - 30px);padding:28px}
dialog::backdrop {background:#17263d55;backdrop-filter:blur(4px)}
dialog h2 {margin-bottom:18px}
dialog label {display:flex;flex-direction:column;gap:8px}
dialog p {line-height:1.6;color:var(--muted)}
.dialog-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
#toast {position:fixed;top:99px;left:50%;transform:translateX(-50%);z-index:150;background:#233a54;color:white;box-shadow:var(--shadow);border-radius:12px;padding:13px 22px;max-width:calc(100vw - 35px);font-size:13px}
#exit-present {position:fixed;bottom:20px;right:20px;z-index:10001;opacity:.75}
#exit-present:hover {opacity:1}
body.library-closed {--sidebar:0px}
body.library-closed #library {display:none}
body.presenting #library,body.presenting .app-header,body.presenting .wall-heading,body.presenting .wall-caption,body.presenting #toolbar-area,body.presenting .popup {display:none!important}
body.presenting #workspace {inset:0;padding:15px}
body.presenting .widget-header {cursor:default}
body.presenting .widget.selected {outline:0}
body.presenting .widget-resize {display:none!important}
@media(max-width:1000px) {
:root {--sidebar:225px}
.app-header {padding:0 18px}
.header-center {display:none}
#workspace {padding:24px 20px 155px}
.dock-button {min-width:52px}
.wall-caption span:last-child {display:none}
#catalog-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px) {
:root {--sidebar:0px}
#library {width:260px;box-shadow:var(--shadow)}
.app-header {height:74px;padding:0 14px}
.brand {font-size:14px}
.brand small {font-size:9px}
.header-actions {gap:3px}
.header-actions .primary {font-size:11px;padding:8px}
#library {top:74px}
#workspace {top:74px;padding:18px 12px 157px}
.wall-heading {margin-bottom:10px}
#wall-title {font-size:22px}
.wall-actions {gap:0}
.wall-actions button {width:34px}
.dock-button {min-width:43px;font-size:9px;padding:5px}
.dock-divider {margin:0 2px}
#main-toolbar {padding:7px;gap:2px}
#toolbar-area {bottom:14px;max-width:calc(100vw - 16px)}
#catalog {bottom:103px;max-height:calc(100dvh - 190px);padding:18px}
.small-popup {right:15px;top:135px}
}
@media(prefers-reduced-motion:reduce) {
* {scroll-behavior:auto!important}
}