:root{color-scheme:dark;--bg: #171717;--panel: #202020;--border: #333;--text: #fff7e9;--muted: #a8a29e;--accent: #ff6a18;accent-color:var(--accent);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0}h1,h2{margin:0 0 .5rem}.muted{color:var(--muted);margin:.25rem 0}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}input,select,button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:.45rem .6rem}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.ghost{background:transparent}label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;color:var(--muted)}.setup{max-width:960px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.setup-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem}.brand h1{margin:0}.tagline{margin:0;font-weight:600;color:var(--accent)}.intro h2{font-size:1.6rem;background:linear-gradient(90deg,#ff4b24,#ffb52e);-webkit-background-clip:text;background-clip:text;color:transparent}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.participants{list-style:none;padding:0;margin:0 0 .75rem;display:flex;flex-direction:column;gap:.5rem}.participant{display:grid;grid-template-columns:1fr 2fr 9rem 7rem auto;gap:.5rem;align-items:center}.participant .rate{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.setup-footer{border-top:1px solid var(--border);padding-top:1rem}.setup-footer a{color:var(--muted)}.share-link{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.share-link input{flex:1;min-width:16rem}.camera-command{display:block;padding:.5rem .6rem;background:var(--panel);border:1px solid var(--border);border-radius:6px;font-family:Cascadia Mono,Consolas,monospace;font-size:.85rem;overflow-wrap:anywhere}.share{max-width:640px}.share-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:0}.share-stats div{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem}.share-stats dt{color:var(--muted);font-size:.9rem}.share-stats dd{margin:.25rem 0 0;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}.share-stats .share-cost{color:var(--accent)}a.button{align-self:flex-start;text-decoration:none;border-radius:6px;padding:.45rem .9rem}a.button.primary{background:var(--accent);color:#fff;font-weight:600}@media(max-width:720px){.participant{grid-template-columns:1fr 1fr}}.checkbox{flex-direction:row;align-items:center;gap:.5rem}.display-settings{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.preview{margin:0;display:flex;flex-direction:column;gap:.3rem}.style-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;align-items:start;margin-top:1rem}.style-groups h3{margin:0 0 .5rem;font-size:1rem}.style-mode{align-self:end}.style-bg-colors{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap}.style-bg-colors>label{flex:1 1 9rem}.style-groups input[type=color]{width:2.6rem;height:2.2rem;padding:.15rem}.style-elements{display:flex;flex-direction:column;gap:.75rem}.style-element{display:grid;grid-template-columns:6rem minmax(0,1.1fr) minmax(0,1fr) auto;gap:.5rem;align-items:end}.style-element-name{display:flex;flex-direction:column;gap:.15rem;font-weight:600}.style-element-name .checkbox{font-size:.8rem;font-weight:400;gap:.25rem}.style-element label{font-size:.8rem}.style-element select,.style-element input[type=range]{width:100%}.style-color{display:flex;align-items:center;gap:.25rem}.style-color label.checkbox{gap:.25rem}.style-color button{padding:.35rem .5rem;line-height:1}@media(max-width:720px){.display-settings{grid-template-columns:1fr}.style-element{grid-template-columns:1fr 1fr}.style-element-name{grid-column:1 / -1}}.overlay-editor{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}.overlay-stage{position:relative;width:100%;max-width:420px;background:repeating-conic-gradient(#1a1d24 0% 25%,#14171d 0% 50%) 50% / 24px 24px;border:1px solid #2b2f38;border-radius:8px;overflow:hidden;touch-action:none}.overlay-card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;container-type:size;box-shadow:0 4px 14px #00000073}.overlay-card:active{cursor:grabbing}.overlay-card:focus-visible{outline-offset:-4px}.overlay-cost{font-size:34cqh;line-height:1;font-weight:700;white-space:nowrap}.overlay-time{font-size:14cqh;line-height:1;opacity:.75}.overlay-handle{position:absolute;right:3%;bottom:3%;width:16px;height:16px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;opacity:.65;cursor:nwse-resize;touch-action:none}.counter-page{height:100vh;position:relative}button.counter-stop{position:absolute;right:.75rem;bottom:.75rem;background:#0009;border-color:#fff6;color:#fff}.counter-stop:hover{background:#000c}.counter-view{container-type:size;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text);background:var(--bg-paint);text-align:center;overflow:hidden}.counter-view[data-bg=solid]{--bg-paint: color-mix(in srgb, var(--bg) calc(var(--bg-opacity) * 1%), transparent)}.counter-view[data-bg=gradient]{--bg-paint: linear-gradient( var(--bg-angle), color-mix(in srgb, var(--bg) calc(var(--bg-opacity) * 1%), transparent), color-mix(in srgb, var(--bg-alt) calc(var(--bg-opacity) * 1%), transparent) )}.counter-view.embedded{height:auto;aspect-ratio:16 / 9;border:1px solid var(--border);border-radius:8px}.counter-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1cqh;padding:3cqw;transform:rotate(var(--rotation, 0deg));transform-origin:center}.counter-view .decoration{position:absolute;top:0;right:0;font-size:6cqh;transform:translate(40%,-40%)}.counter-view .label{margin:0;text-transform:uppercase;letter-spacing:.1em;font-family:var(--el-label-font);font-size:calc(4cqh * var(--el-label-size));color:var(--el-label-color, var(--muted))}.counter-view .total{margin:0;font-family:var(--el-cost-font);font-weight:var(--weight);font-size:min(calc(13cqw * var(--el-cost-size) * var(--fit, 1)),calc(26cqh * var(--el-cost-size) * var(--fit, 1)));font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;color:var(--el-cost-color, var(--text))}.counter-view .total.measure{position:absolute;visibility:hidden;pointer-events:none}.counter-view.running .total{color:var(--el-cost-color, var(--accent))}.counter-view .status{margin:0;font-family:var(--el-status-font);font-size:calc(4cqh * var(--el-status-size));color:var(--el-status-color, var(--muted))}.counter-view .time{font-family:var(--el-elapsed-font);font-variant-numeric:tabular-nums;color:var(--el-elapsed-color, var(--text))}.stats{display:flex;gap:4cqw;flex-wrap:wrap;justify-content:center;margin:1cqh 0 0}.stats dd{margin:0;font-variant-numeric:tabular-nums}.stats>div[data-el=elapsed] dt,.stats>div[data-el=elapsed] dd{font-family:var(--el-elapsed-font)}.stats>div[data-el=elapsed] dt{font-size:calc(3.5cqh * var(--el-elapsed-size));color:var(--el-elapsed-color, var(--muted))}.stats>div[data-el=elapsed] dd{font-size:min(calc(3.5cqw * var(--el-elapsed-size)),calc(7cqh * var(--el-elapsed-size)));color:var(--el-elapsed-color, var(--text))}.stats>div[data-el=personTime] dt,.stats>div[data-el=personTime] dd{font-family:var(--el-personTime-font)}.stats>div[data-el=personTime] dt{font-size:calc(3.5cqh * var(--el-personTime-size));color:var(--el-personTime-color, var(--muted))}.stats>div[data-el=personTime] dd{font-size:min(calc(3.5cqw * var(--el-personTime-size)),calc(7cqh * var(--el-personTime-size)));color:var(--el-personTime-color, var(--text))}.stats>div[data-el=costPerMinute] dt,.stats>div[data-el=costPerMinute] dd{font-family:var(--el-costPerMinute-font)}.stats>div[data-el=costPerMinute] dt{font-size:calc(3.5cqh * var(--el-costPerMinute-size));color:var(--el-costPerMinute-color, var(--muted))}.stats>div[data-el=costPerMinute] dd{font-size:min(calc(3.5cqw * var(--el-costPerMinute-size)),calc(7cqh * var(--el-costPerMinute-size)));color:var(--el-costPerMinute-color, var(--text))}.counter-view.widget{background:transparent;align-items:flex-end;justify-content:flex-end;padding:3cqw}.counter-view.widget .counter-card{background:var(--bg-paint);border-radius:var(--radius);padding:1.5cqw 2.5cqw;gap:0;box-shadow:0 .5cqw 2cqw #00000059}.counter-view.widget .total{font-size:calc(6cqw * var(--el-cost-size) * var(--fit, 1))}.counter-view.widget .time{margin:0;font-size:calc(3cqw * var(--el-elapsed-size));color:var(--el-elapsed-color, var(--muted))}.counter-view.widget .status{font-size:calc(2cqw * var(--el-status-size))}.counter-view.widget .decoration{font-size:3cqw}.counter-view.embedded.widget{background:repeating-conic-gradient(#2a2f3a 0 25%,#20242c 0 50%) 0 0 / 24px 24px}@media(max-width:480px){.setup{padding:1rem;gap:1.25rem}.setup-header{flex-direction:column;align-items:stretch}.setup-header select{width:100%}.participant{grid-template-columns:1fr;gap:.5rem;padding:.75rem;background:var(--panel);border:1px solid var(--border);border-radius:10px}.participant>input,.participant>select,.participant>button{width:100%;min-width:0}.participant .rate{text-align:left}.participants+button{width:100%}.style-element{grid-template-columns:1fr;align-items:stretch}.style-element-name{grid-column:auto}.style-bg-colors>label{flex:1 1 100%}.style-color button{padding:.5rem .75rem}.setup-footer .row>button{flex:1 1 100%}.share-link input{min-width:0}}