:root{--bg:#111216;--panel:#1b1c24;--line:#30313d;--text:#f0edf7;--muted:#a5a2b4;--accent:#bea4f1}body{display:grid;grid-template-columns:155px minmax(0,1fr);grid-template-rows:48px minmax(0,1fr) 38px}.titlebar,footer{grid-column:1/-1;background:#15161d}.app-nav{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;padding:25px 12px;border:0;border-right:1px solid var(--line);background:#16171e;gap:10px}.nav-brand{font-size:30px;font-weight:750;letter-spacing:-1px;color:#cfb9ff;padding:4px 10px 26px}.nav-brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:6px}.app-nav button{display:flex;align-items:center;gap:10px;text-align:left;min-height:48px;background:transparent;border:1px solid transparent;padding:12px 10px;font-size:14px;line-height:1.4}.nav-icon{width:20px;height:20px;flex-shrink:0}.app-nav [aria-pressed=true]{background:#302639;border-color:#614b7a;color:#f0dfff}.app-nav .settings-button{margin:auto 0 0}.app-nav .settings-button span{font-size:inherit;margin:0}#timer-view,#damage-view{grid-column:2;grid-row:2;min-width:0}#timer-view{grid-template-columns:minmax(0,1fr) 275px;overflow:auto}.timers{padding:28px 22px}.eyebrow{font-size:12px}.section-head{margin-bottom:22px}h1{font-size:28px}.timer-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.timer{display:grid;grid-template-columns:28px minmax(0,1fr);position:relative;gap:12px;padding:19px 17px 22px;border-radius:14px;overflow:hidden;min-width:0;cursor:pointer}.timer .symbol{width:28px;font-size:24px;display:block}.timer h2{font-size:15px}.timer-name p{font-size:12px;line-height:1.4}.time{grid-column:1/-1;text-align:left;margin:2px 0 0}.time strong{font:600 34px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-1px}.time>span{font-size:10px;margin-top:7px}.timer.selected{border-color:#765b96;background:linear-gradient(125deg,#30263d,#1d1d27)}.timer[data-kind=gravity]{grid-column:1/-1}.timer.active-event{border-color:#55ae9d;background:linear-gradient(120deg,#193531,#1b242a)}.timer.active-event .symbol,.timer.active-event .time strong,.timer.active-event #gravity-status{color:#95e6cf}.timer-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#b896ef;transform-origin:left;pointer-events:none}.active-event .timer-progress{background:#83dec5}.timer.imminent .symbol{animation:pulse 1.8s ease-in-out infinite}.timer.event-start{animation:pulse 1.8s ease-in-out 3}@keyframes pulse{50%{opacity:.65;filter:brightness(1.3)}}aside{padding:28px 18px;background:#15161d;overflow:visible}.preview{border-color:#665079;background:linear-gradient(130deg,#2d2439,#1d1c27);border-radius:14px;padding:18px}.preview>strong{font:600 34px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}.preview>div{line-height:1.5}#overlay-selection{grid-template-columns:1fr;gap:4px;font-size:14px}#overlay-selection label{padding:7px;border:1px solid transparent;border-radius:7px;gap:8px}.field{font-size:13px}.field select{background:#1c1d26;border-color:#42384f}.lock{padding:6px;border-radius:7px;font-size:13px}.primary{background:#bda3f1;border-radius:9px;padding:12px 16px;color:#21152f}.subtle{border-radius:7px}.primary:hover{background:#cfb6ff}.sound-row{gap:10px}.sound-row label{font-size:13px}button,input,select,summary,[role=button],label:has(input){transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease}button:not(:disabled):hover,summary:hover,[role=button]:hover,label:has(input):hover,input:not(:disabled):hover,select:not(:disabled):hover{box-shadow:0 0 0 1px #bca0f055,0 0 18px #ae83ed30;border-color:#b093d1}button:focus-visible,summary:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ceb4ff;outline-offset:3px;box-shadow:0 0 18px #ae83ed40}.timer:hover{transform:translateY(-2px)}button:not(:disabled):active{transform:translateY(1px)}input[type=checkbox],input[type=range],select,summary,label:has(input[type=checkbox]){cursor:pointer}button:disabled,input:disabled{box-shadow:none!important}input[type=range]{height:18px}#damage-view{padding:28px}.calc-card{border-radius:14px;background:#1b1c24;padding:22px}.calc-field input,.calc-field select,#settings input:not([type=checkbox]):not([type=range]){background:#13141b;border-color:#463a53;border-radius:8px}.calculator-output{min-width:0}.result-hero{background:linear-gradient(120deg,#34283f,#221e2c);border-color:#705788;border-radius:12px}.result-hero strong{font:650 40px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}.calc-modes{width:max-content;padding:5px;background:#1a1922;border:1px solid var(--line);border-radius:10px}.calc-modes button{border:0;background:transparent}.calc-modes [aria-pressed=true]{background:#493456}dialog,#settings{background:#1b1c25;border-color:#69537f;border-radius:16px;width:550px;max-width:calc(100vw - 48px);max-height:85vh;overflow:auto;padding:28px;box-shadow:0 24px 80px #0008}dialog[open],.view-enter{animation:arrive .18s ease}dialog::backdrop{background:#08090dc4}#settings h2{font-size:24px}#settings h3{border-top:1px solid var(--line);padding-top:20px;color:#d5c2f0}#settings .lock{font-size:14px;align-items:center}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}*{scrollbar-width:thin;scrollbar-color:#594769 transparent}.motion-off *{animation:none!important;transition:none!important}.motion-off .timer:hover{transform:none}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.timer:hover{transform:none}}@media(max-width:1040px){body{grid-template-columns:140px minmax(0,1fr)}#timer-view{grid-template-columns:minmax(0,1fr) 245px}.timers{padding:24px 16px}.timer-list{grid-template-columns:1fr}.timer{grid-template-columns:25px minmax(0,1fr) auto;padding:17px 12px;gap:8px}.time{grid-column:3;margin:0}.time strong{font-size:25px}.time>span{font-size:9px}.timer h2{font-size:14px}.timer-name p{font-size:11px}.tag{display:none}aside{padding:24px 14px}}@media(max-width:820px){body{grid-template-columns:120px minmax(0,1fr)}.app-nav{padding:22px 7px}.app-nav button{font-size:12px;padding:10px 6px;gap:6px}.nav-brand{padding-left:6px;font-size:25px}#timer-view{grid-template-columns:1fr}.timer-list{grid-template-columns:repeat(2,minmax(0,1fr))}.timer{grid-template-columns:24px minmax(0,1fr)}.time{grid-column:1/-1}.calculator-layout{grid-template-columns:1fr}aside{border:0;border-top:1px solid var(--line)}.damage-heading{flex-direction:column;align-items:flex-start}#damage-view{padding:20px}}

/* Soft semicircle of light rising from the bottom edge. */
:is(button,summary,[role="button"],label:has(input[type="checkbox"])){position:relative;isolation:isolate;overflow:hidden}
:is(button,summary,[role="button"],label:has(input[type="checkbox"]))::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:var(--light-x,50%);top:var(--light-y,100%);width:150px;height:100px;border-radius:50%;background:rgba(182,139,245,.42);filter:blur(24px);opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .3s ease,transform .35s ease,left .16s ease-out,top .16s ease-out}
:is(button:not(:disabled),summary,[role="button"],label:has(input[type="checkbox"])):is(:hover,:focus-visible)::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
label:has(input[type="checkbox"]):focus-within::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
:is(button,input,select,summary,[role="button"],label:has(input)):is(:hover,:focus-visible,:focus-within){box-shadow:none!important}
input:not([type="checkbox"]):not([type="range"]):hover,select:hover{background-image:radial-gradient(circle 90px at 50% 100%,rgba(190,142,248,.32),transparent 100%)}
button:disabled::before{display:none}
@media(prefers-reduced-motion:reduce){:is(button,summary,[role="button"],label)::before{transition:none}}
.motion-off :is(button,summary,[role="button"],label)::before{transition:none!important}

.timer::before{width:190px;height:140px;filter:blur(32px)}
.timer{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .25s ease}
.timer:is(:hover,:focus-visible){transform:translateY(-4px);border-color:#aa87d0}
.timer.active-event::before{background:rgba(102,221,188,.38)}
.timer.active-event:is(:hover,:focus-visible){border-color:#8bd8c1}
.timer .symbol{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.timer:is(:hover,:focus-visible) .symbol{transform:rotate(-8deg) scale(1.12)}
.timer:active{transform:translateY(-1px)}
.motion-off .timer,.motion-off .timer .symbol{transform:none!important}
@media(prefers-reduced-motion:reduce){.timer,.timer .symbol{transform:none!important}}

.motion-off :is(button,summary,[role="button"],label)::before{left:50%;top:100%}@media(prefers-reduced-motion:reduce){:is(button,summary,[role="button"],label)::before{left:50%;top:100%}}