/* Ein Materialsystem für Chrome; dichte Inhalte bleiben opak. */
:root{
 --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);
 --safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
 --glass:light-dark(rgba(255,252,246,.24),rgba(35,41,49,.38));
 --glass-opaque:light-dark(#eeebe5,#292e36);
 --strong:light-dark(#faf8f3,#24282e);--solid:light-dark(#faf8f3,#24282e);
 --edge:light-dark(rgba(255,255,255,.64),rgba(221,234,248,.20));
 --hi:light-dark(rgba(255,255,255,.76),rgba(233,241,251,.20));
 --line:light-dark(rgba(43,46,48,.10),rgba(232,238,246,.10));
 --mute:light-dark(#62666b,#b1b7bf);
 --shadow:0 8px 26px light-dark(rgba(31,43,57,.12),rgba(0,0,0,.32));
 --b1:light-dark(rgba(109,139,170,.12),rgba(87,112,148,.09));
 --b2:light-dark(rgba(183,162,125,.10),rgba(154,136,108,.05));
 --glass-blur:7px;--glass-tint:var(--glass);--glass-fallback:var(--glass-opaque);
}
html{height:100%;background:var(--bg);overflow:hidden}
body{position:fixed;inset:0;width:100%;height:100%;background:radial-gradient(60vmax 50vmax at 12% 8%,var(--b1),transparent 60%),radial-gradient(55vmax 45vmax at 92% 88%,var(--b2),transparent 60%),var(--bg)}
body::before{display:none}
#app{position:fixed;inset:0 0 auto;height:100vh;height:100dvh;padding:var(--safe-top) var(--safe-right) 0 var(--safe-left)}
@media(display-mode:standalone),(display-mode:fullscreen){#app{height:100vh}}
:root[data-display=standalone] #app{height:100vh}
.glass{position:relative;isolation:isolate;background:transparent;border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 light-dark(rgba(53,69,84,.05),rgba(0,0,0,.12)),var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.12) contrast(1.02);backdrop-filter:blur(var(--glass-blur)) saturate(1.12) contrast(1.02)}
:root[data-glass=refraction] .refract::before{backdrop-filter:var(--refraction) blur(5px) saturate(1.10) contrast(1.02)}
.glass-defs{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;overflow:hidden}
#roll{--glass-tint:light-dark(rgba(45,91,130,.94),rgba(166,194,214,.92));--glass-fallback:light-dark(#2d5b82,#a6c2d6);background:transparent;border-color:light-dark(rgba(37,72,103,.55),rgba(216,231,245,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.40),inset 0 -1px 0 rgba(14,37,58,.12),0 6px 18px light-dark(rgba(41,66,92,.14),rgba(0,0,0,.28));transition:transform .16s var(--ease),box-shadow .16s var(--ease),opacity .16s}
#roll::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 45%);pointer-events:none}
#roll:active:not(:disabled){transform:scale(.982);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 9px rgba(31,54,75,.12)}
.tabs{border-radius:26px;gap:4px;padding:5px}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;font-size:clamp(.69rem,2.95vw,.81rem);line-height:1.15;border-radius:21px;color:var(--ink);font-weight:600}
.tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.tabs [data-t=play] circle{fill:currentColor;stroke:none}
.tabs [data-t=set] circle{fill:var(--glass-opaque)}
.tabs button[aria-current]{background:color-mix(in srgb,var(--acc) 13%,transparent);color:light-dark(#295978,#cce2f2);box-shadow:inset 0 1px 0 var(--hi)}
.tabs button:active{background:color-mix(in srgb,var(--acc) 20%,transparent);transform:scale(.97)}
.dock{padding:8px 16px 14px;gap:10px}
.sheet{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden;max-height:calc(var(--visible-height,100dvh) - var(--safe-top) - 16px);padding-bottom:0;box-shadow:var(--shadow)}
.grab{flex-shrink:0;min-height:64px;padding:8px 18px;border-width:0 0 1px;border-radius:27px 27px 0 0;box-shadow:inset 0 1px 0 var(--hi)}
.sbody{min-height:0;background:var(--solid)}
.sfoot{flex-shrink:0;background:var(--solid);padding-bottom:calc(10px + var(--safe-bottom))}
.row.h{background:var(--solid)}
.go{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
dialog{padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--shadow);max-height:calc(var(--visible-height,100dvh) - var(--safe-top) - 24px);overflow:hidden}
dialog[open]:not(.full){display:flex;flex-direction:column;position:fixed;inset:calc(var(--visible-offset,0px) + var(--safe-top) + 12px) 0 calc(100% - var(--visible-offset,0px) - var(--visible-height,100dvh) + var(--safe-bottom) + 12px);margin:auto;transform:none;max-height:calc(var(--visible-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px);animation:none}
dialog>*+*{margin-top:0}
.dialog-head{flex-shrink:0;display:flex;align-items:center;min-height:66px;padding:12px 22px;border-width:0 0 1px;border-radius:27px 27px 0 0;box-shadow:inset 0 1px 0 var(--hi)}
.dialog-head h2{font-size:1.25rem;letter-spacing:-.025em}
.dialog-body{padding:20px 22px 22px;overflow:auto;min-height:0;background:var(--solid);overscroll-behavior:contain}
.dialog-body>*+*{margin-top:12px}
dialog.full{height:100vh;height:100dvh;background:var(--bg);padding:calc(24px + var(--safe-top)) calc(18px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(18px + var(--safe-left));overflow:auto}
:root[data-display=standalone] dialog.full{height:100vh}
.center button.big{min-height:58px;padding:0 24px;width:min(100%,360px);border-radius:21px;background:var(--acc);color:var(--on-acc);font-weight:700}
.seg{background:var(--line);padding:4px;border-radius:16px}.seg .on{box-shadow:0 1px 3px rgba(26,44,62,.12)}
.fld input,.fld select{background:light-dark(#fffdf9,#30363e)}
.sw input{appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;width:44px;height:26px;border:1px solid light-dark(rgba(34,54,72,.16),rgba(255,255,255,.16));border-radius:99px;background:light-dark(#d6d8d8,#4a5058);cursor:pointer;transition:background .16s}
.sw input::before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fffdf9;box-shadow:0 1px 3px rgba(20,35,50,.24);transition:transform .16s var(--ease)}
.sw input:checked{background:var(--acc)}.sw input:checked::before{transform:translateX(18px)}.sw input:disabled{opacity:.45;cursor:default}
#toast{background:var(--solid);border-color:var(--edge);box-shadow:var(--shadow)}
@media(hover:hover) and (pointer:fine){
 #roll:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px light-dark(rgba(41,66,92,.17),rgba(0,0,0,.35))}
 .tabs button:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
}
@media(max-width:899px){
 .dock{padding-bottom:0}
 .tabs{width:calc(100% + 32px);max-width:none;margin-inline:-16px;border-radius:25px 25px 0 0;border-bottom:0;padding:6px 9px calc(5px + var(--safe-bottom));box-shadow:inset 0 1px 0 var(--hi),0 -4px 22px light-dark(rgba(31,43,57,.06),rgba(0,0,0,.2))}
}
@media(min-width:900px){
 .sheet{max-height:none}
 .grab{border-radius:21px 21px 0 0;--glass-tint:var(--solid)}
 :root[data-glass=refraction] .grab::before{backdrop-filter:none}
 .sfoot{padding-bottom:10px}
 .tabs button{flex-direction:row;gap:7px;min-height:46px}
}
@media(max-height:600px) and (max-width:899px){
 .dock{gap:6px;padding-top:4px}
 .dock .tabs{flex:none;width:calc(100% + 32px)}
 .tabs button{flex-direction:row;gap:6px;min-height:44px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .glass::before{background:var(--glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
}
:root[data-glass=solid] .glass::before,:root[data-transparency=reduced] .glass::before{background:var(--glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.glass::before{background:var(--glass-fallback);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media(prefers-contrast:more){:root{--glass:var(--glass-opaque);--edge:var(--ink)}.tabs button[aria-current]{outline:1px solid var(--acc)}}
@media(prefers-reduced-motion:reduce){dialog[open]:not(.full){animation:none}#roll:hover:not(:disabled){transform:none}}
:root[data-motion=reduced] dialog[open]:not(.full){animation:none}