:root{
  --ui-blue:url("../assets/ui-kit/panels/blue.webp");
  --ui-blue-center:url("../assets/ui-kit/panels/blue-center.webp");
  --ui-red:url("../assets/ui-kit/buttons/red.png");
  --ui-green:url("../assets/ui-kit/buttons/green.png");
  --ui-yellow:url("../assets/ui-kit/buttons/yellow.png");
  --ui-cream:url("../assets/ui-kit/panels/cream.webp");
  --ui-cream-center:url("../assets/ui-kit/panels/cream-center.webp");
  --ui-center:url("../assets/ui-kit/panels/center.webp");
  --ui-center-fill:url("../assets/ui-kit/panels/center-fill.webp");
  --ui-button-slice:114;
  --ui-cream-slice:128;
  --ui-radius:34px;
  --blue-top:#6ec7f4;--blue-bottom:#0c68d8;
  --red-top:#ff8188;--red-bottom:#d52834;
  --green-top:#82ea91;--green-bottom:#26a64b;
  --yellow-top:#ffe27a;--yellow-bottom:#e59a1d;
}
.hub-button{
  --button-image:var(--ui-blue);--button-top:var(--blue-top);--button-bottom:var(--blue-bottom);--button-shadow:#084f9e;--button-shadow-soft:rgba(3,47,105,.42);--border-size:26px;
  position:relative;width:220px;height:72px;padding:0 30px;border:1px solid transparent;border-radius:40px;border-image-source:var(--button-image);border-image-slice:var(--ui-button-slice) fill;border-image-width:var(--border-size);border-image-repeat:stretch;background:linear-gradient(180deg,var(--button-top),var(--button-bottom));background-clip:border-box;display:inline-flex;align-items:center;justify-content:center;appearance:none;color:#fff;filter:drop-shadow(0 5px 0 var(--button-shadow-soft)) drop-shadow(0 9px 5px color-mix(in srgb,var(--button-shadow-soft) 65%,transparent));transition:transform .12s ease,filter .12s ease
}
.hub-button:hover{transform:scale(1.015);filter:brightness(1.035) drop-shadow(0 5px 0 var(--button-shadow-soft)) drop-shadow(0 8px 4px color-mix(in srgb,var(--button-shadow-soft) 58%,transparent))}
.hub-button:active{transform:translateY(3px) scale(.98);filter:brightness(.96) drop-shadow(0 2px 0 var(--button-shadow-soft))}
.hub-button:focus,.hub-button:focus-visible{outline:none}
.hub-button-blue{--button-image:var(--ui-blue);--button-top:var(--blue-top);--button-bottom:var(--blue-bottom);--button-shadow:#084f9e;--button-shadow-soft:rgba(3,47,105,.42)}
.hub-button-red{--button-image:var(--ui-red);--button-top:var(--red-top);--button-bottom:var(--red-bottom);--button-shadow:#8f2027;--button-shadow-soft:rgba(105,12,18,.42)}
.hub-button-green{--button-image:var(--ui-green);--button-top:var(--green-top);--button-bottom:var(--green-bottom);--button-shadow:#247337;--button-shadow-soft:rgba(15,82,35,.4)}
.hub-button-yellow{--button-image:var(--ui-yellow);--button-top:var(--yellow-top);--button-bottom:var(--yellow-bottom);--button-shadow:#a56d13;--button-shadow-soft:rgba(120,73,7,.38)}
.hub-button-square{width:68px;height:68px;flex:0 0 68px;padding:0;aspect-ratio:1}
.hub-button-rect{width:270px;height:72px;padding-inline:34px}.hub-button-play{width:220px;height:72px}
.hub-button-content{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.hub-button-label{position:relative;z-index:2;color:#fff;font-size:38px;font-weight:400;line-height:1;white-space:nowrap;text-shadow:0 1px 0 var(--button-shadow),0 2px 0 var(--button-shadow),0 3px 0 var(--button-shadow),0 4px 0 var(--button-shadow),0 5px 0 var(--button-shadow),0 8px 3px var(--button-shadow-soft)}
.hub-button-icon-image{position:relative;z-index:2;width:60px;height:60px;flex:0 0 60px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.16)) drop-shadow(0 6px 5px rgba(0,0,0,.1));transition:transform .14s ease}
.hub-button-icon-image--inline{width:50px;height:50px;flex-basis:50px;margin-left:-10px}.hub-button:hover .hub-button-icon-image{transform:scale(1.025)}.hub-button:active .hub-button-icon-image{transform:translateY(2px) scale(.96)}
.hub-audio-toggle{--button-image:var(--ui-green);--button-top:var(--green-top);--button-bottom:var(--green-bottom);--button-shadow:#247337;--button-shadow-soft:rgba(15,82,35,.4)}
.hub-audio-toggle.is-muted{--button-image:var(--ui-red);--button-top:var(--red-top);--button-bottom:var(--red-bottom);--button-shadow:#8f2027;--button-shadow-soft:rgba(105,12,18,.42)}
.hub-audio-icons{position:relative;z-index:2;width:60px;height:60px;pointer-events:none}.hub-audio-icon{position:absolute;left:50%;top:50%;width:60px;height:60px;object-fit:contain;transform:translate(-50%,-50%);transition:opacity .18s ease,transform .22s cubic-bezier(.22,1.35,.36,1)}.hub-audio-icon-muted{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-18deg)}.hub-audio-toggle.is-muted .hub-audio-icon-unmuted{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(18deg)}.hub-audio-toggle.is-muted .hub-audio-icon-muted{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hub-frame{position:relative;border:1px solid transparent;border-radius:var(--ui-radius);border-image-repeat:stretch;background-repeat:no-repeat;background-position:center;background-size:100% 100%;background-origin:border-box;background-clip:border-box}
.hub-frame-blue{border-image-source:var(--ui-blue);border-image-slice:114 fill;border-image-width:34px;background-image:var(--ui-blue-center)}
.hub-frame-cream{border-image-source:var(--ui-cream);border-image-slice:128 fill;border-image-width:28px;background-image:var(--ui-cream-center)}
.hub-frame-center{border-image-source:var(--ui-center);border-image-slice:128 fill;border-image-width:28px;background-image:var(--ui-center-fill)}
.hub-chip{--chip-image:var(--ui-green);position:absolute;z-index:5;top:-15px;left:50%;transform:translateX(-50%);min-width:88px;height:38px;padding:0 20px;border:1px solid transparent;border-radius:22px;border-image-source:var(--chip-image);border-image-slice:114 fill;border-image-width:19px;border-image-repeat:stretch;display:grid;place-items:center;color:#fff;font-size:20px;line-height:1;text-shadow:0 3px 0 rgba(20,100,33,.55);white-space:nowrap}.hub-chip-yellow{--chip-image:var(--ui-yellow);text-shadow:0 3px 0 rgba(140,85,10,.5)}
.hub-modal{width:min(92vw,640px);position:relative;padding:10px 12px;filter:drop-shadow(0 12px 18px rgba(0,35,80,.28))}.hub-modal-inner{width:100%;min-height:280px;position:relative;padding:48px 38px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center}.hub-modal-title{margin:0 0 12px;color:#2b78b7;font-size:clamp(34px,5vw,50px);line-height:1;text-align:center;text-shadow:0 3px 0 #b6d7df}.hub-modal-text{margin:0;color:#805e42;font-size:clamp(19px,2.5vw,25px);line-height:1.2;text-align:center}.hub-modal-actions{width:100%;margin-top:28px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.hub-modal-close{position:absolute;top:10px;right:10px;width:56px;height:56px;flex-basis:56px;--border-size:22px}.hub-modal-close .hub-button-icon-image{width:50px;height:50px;flex-basis:50px}
.hub-progress{--progress:0%;width:min(100%,520px);display:flex;flex-direction:column;gap:10px}.hub-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.hub-progress-caption,.hub-progress-value{color:#2b78b7;font-size:clamp(19px,2.3vw,26px);line-height:1;text-shadow:0 2px 0 #b6d7df}.hub-progress-track{position:relative;width:100%;height:26px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,#d9bf89 0%,#f0dcaa 24%,#f7e9c0 50%,#d8bc82 100%);border:4px solid rgba(135,95,52,.22);box-shadow:inset 0 4px 4px rgba(98,65,34,.25),inset 0 -2px 2px rgba(255,255,255,.62),0 3px 0 rgba(255,255,255,.35)}.hub-progress-fill{position:absolute;left:0;top:0;bottom:0;width:var(--progress);border-radius:inherit;background:linear-gradient(180deg,#76d0f7 0%,#39a9ef 35%,#0c68d8 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 5px rgba(0,65,150,.25);transition:width .24s ease}.hub-progress-gloss{position:absolute;left:8px;right:8px;top:3px;height:8px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.62),transparent);pointer-events:none}
.hub-settings-list{width:100%;display:flex;flex-direction:column;gap:22px}.hub-setting-row{width:100%;display:flex;flex-direction:column;gap:9px}.hub-setting-info{display:flex;align-items:center;justify-content:space-between;gap:20px}.hub-setting-label{color:#805e42;font-size:clamp(21px,2.5vw,27px);line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.6)}.hub-setting-value{color:#2b78b7;font-size:clamp(20px,2.4vw,26px);line-height:1;text-shadow:0 2px 0 #b6d7df}
.hub-slider{--position:50%;position:relative;width:100%;height:44px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}.hub-slider-track{position:absolute;left:0;right:0;top:50%;height:18px;transform:translateY(-50%);overflow:hidden;border-radius:999px;background:linear-gradient(180deg,#d7bb81,#f7e7ba 50%,#d4b779);border:3px solid rgba(136,94,51,.24);box-shadow:inset 0 3px 4px rgba(91,58,29,.28),inset 0 -2px 2px rgba(255,255,255,.62)}.hub-slider-fill{position:absolute;left:0;top:0;bottom:0;width:var(--position);border-radius:inherit;background:linear-gradient(180deg,#76d0f7,#39a9ef 35%,#0c68d8);box-shadow:inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 5px rgba(0,65,150,.25)}.hub-slider-thumb{position:absolute;left:var(--position);top:50%;width:38px;height:38px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#89d8fb,#1480df);border:4px solid #fff;box-shadow:inset 0 3px 0 rgba(255,255,255,.38),0 4px 0 #07519d,0 8px 7px rgba(6,54,107,.3);pointer-events:none}.hub-slider-thumb-inner{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.78)}
.hub-settings-divider{width:100%;height:4px;margin:1px 0;border-radius:999px;background:rgba(134,94,55,.16);box-shadow:0 2px 0 rgba(255,255,255,.5)}.hub-setting-toggle-row .hub-setting-label{min-width:0;flex:1}.hub-setting-toggle-row .hub-checkbox{flex:0 0 auto}.hub-setting-toggle-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}.hub-checkbox{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;padding:0;border:0;background:transparent;appearance:none}.hub-checkbox-box{position:relative;width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(180deg,#ead7aa,#c9aa6e);border:3px solid rgba(126,84,44,.2);box-shadow:inset 0 3px 4px rgba(85,55,27,.24),inset 0 -2px 2px rgba(255,255,255,.55),0 4px 0 rgba(120,81,42,.28)}.hub-checkbox-check-image{width:44px;height:44px;object-fit:contain;opacity:0;transform:scale(.45) rotate(-12deg);transition:opacity .14s ease,transform .2s cubic-bezier(.2,1.55,.4,1)}.hub-checkbox-text{min-width:38px;color:#9a805c;font-size:22px;text-align:right;text-shadow:0 2px 0 rgba(255,255,255,.55)}.hub-checkbox.is-checked .hub-checkbox-box{background:linear-gradient(180deg,var(--green-top),var(--green-bottom));border-color:rgba(26,119,54,.25);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -5px 5px rgba(13,99,43,.2),0 4px 0 #247337}.hub-checkbox.is-checked .hub-checkbox-check-image{opacity:1;transform:scale(1)}.hub-checkbox.is-checked .hub-checkbox-text{color:#249246}
@media(max-width:600px){.hub-button{--border-size:22px;height:60px;padding-inline:22px}.hub-button-play{width:176px;height:60px}.hub-button-square{width:60px;height:60px;flex-basis:60px}.hub-button-rect{width:224px;height:60px}.hub-button-label{font-size:31px}.hub-button-icon-image{width:54px;height:54px;flex-basis:54px}.hub-button-icon-image--inline{width:43px;height:43px;flex-basis:43px;margin-left:-8px}.hub-audio-icons,.hub-audio-icon{width:54px;height:54px}.hub-modal{width:96vw}.hub-modal-inner{padding:52px 22px 30px}.hub-modal-close{width:50px;height:50px;flex-basis:50px}.hub-modal-close .hub-button-icon-image{width:45px;height:45px;flex-basis:45px}}