/* Vivialto – arkusz stylów */
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --b-red:#e8524a;--b-orange:#f39237;--b-yellow:#f4c33f;--b-green:#4fb35a;--b-teal:#22a99b;--b-blue:#4a8fe7;--b-violet:#9566dc;--b-pink:#e266a8;
  --gold:#f3c25b;--gold-deep:#d99a1e;--on-gold:#1d1745;
  --bg1:#f6f2fe;--bg2:#e4d9fa;--surface:#ffffff;--surface-2:#f1ebfc;--ink:#221a4f;--muted:#5d5684;--line:#ddd2f3;--star-dim:#d6cdea;
  --ok:#23864c;--warn:#c96a17;--bad:#c23a3a;--accent:#3d5fd0;
  --shadow:0 12px 30px -14px rgba(44,32,110,.32);--radius:22px;--nav-h:64px;
  color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg1:#14113a;--bg2:#231b5a;--surface:#2a2364;--surface-2:#342c77;--ink:#f7f3ff;--muted:#bdb4e6;--line:#3f3789;--star-dim:#4c4494;
  --ok:#74d8a0;--warn:#f6ad62;--bad:#ff8a8a;--accent:#9db4ff;--shadow:0 16px 36px -16px rgba(0,0,0,.65);color-scheme:dark}}
:root[data-theme="dark"]{--bg1:#14113a;--bg2:#231b5a;--surface:#2a2364;--surface-2:#342c77;--ink:#f7f3ff;--muted:#bdb4e6;--line:#3f3789;--star-dim:#4c4494;--ok:#74d8a0;--warn:#f6ad62;--bad:#ff8a8a;--accent:#9db4ff;--shadow:0 16px 36px -16px rgba(0,0,0,.65);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--bg2);scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.5;background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);background-color:var(--bg1);-webkit-tap-highlight-color:transparent}
body.has-nav{padding-bottom:calc(var(--nav-h) + 8px)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 12% 18%,rgba(243,194,91,.18) 0 2px,transparent 3px),radial-gradient(circle at 78% 9%,rgba(255,255,255,.5) 0 1.5px,transparent 2.5px),radial-gradient(circle at 88% 42%,rgba(255,255,255,.35) 0 1.5px,transparent 2.5px),radial-gradient(circle at 54% 82%,rgba(243,194,91,.25) 0 2px,transparent 3px),radial-gradient(60% 40% at 85% 0%,rgba(149,102,220,.22),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(34,169,155,.16),transparent 70%)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0;letter-spacing:-.01em}
.muted{color:var(--muted)}.center{text-align:center}.fine{font-size:14.5px;color:var(--muted);margin:12px 0 0}
.wrap{max-width:600px;margin:0 auto;padding:0 18px 40px}

/* nagłówek */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:8px;padding:10px 0;background:linear-gradient(180deg,var(--bg1) 70%,transparent)}
body::after{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg1)}
.logo{display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none}
.logo svg{width:30px;height:30px}.logo span{font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:-.02em}
.chip{font-family:var(--font-display);display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:15px;min-height:40px}
.chip svg{width:18px;height:18px;color:var(--gold-deep)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);padding:0;flex:none}
.icon-btn svg{width:22px;height:22px}.icon-btn.prof{overflow:hidden}
.avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ac);color:#fff;flex:none}
.avatar svg{width:58%;height:58%}

/* dolna nawigacja */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.nav a,.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;background:none;border:0;color:var(--muted);font-size:12.5px;font-weight:700}
.nav svg{width:24px;height:24px}
.nav .on{color:var(--ink)}.nav .on svg{color:var(--gold-deep)}
@media (min-width:1000px){.nav{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:440px;border-radius:999px;border:1px solid var(--line);height:var(--nav-h);padding:0;box-shadow:var(--shadow)}}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;border:0;font-weight:700;font-size:18px;text-decoration:none;color:inherit}
.btn.primary{background:var(--gold);color:var(--on-gold);box-shadow:0 8px 0 -2px var(--gold-deep),var(--shadow)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 5px 0 -2px var(--gold-deep)}
.btn.ghost{background:var(--surface);border:1px solid var(--line)}
.btn.small{min-height:46px;font-size:16px;padding:0 18px}
.btn svg{width:22px;height:22px}.btn[disabled]{opacity:.45;cursor:default}
.link-btn{background:none;border:0;color:var(--accent);text-decoration:underline;padding:6px;font-weight:700}
.link-btn svg{width:16px;height:16px;vertical-align:-3px}

/* strona główna */
.hero{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;margin:8px 0 18px}
.hero .vivi{width:112px;height:112px}
.bubble{position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow);font-size:17px}
.bubble::before{content:"";position:absolute;left:-8px;top:50%;width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.hero h1{grid-column:1/-1;font-size:clamp(30px,8.4vw,42px);font-weight:800;margin-top:14px}
.hero .tag{grid-column:1/-1;margin:0;color:var(--muted)}
.cta-row{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.next-note{text-align:center;color:var(--muted);font-size:15px;margin:2px 0 0}
.ways{grid-column:1/-1;display:grid;gap:10px;margin-top:14px}
.way{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;text-align:left;box-shadow:var(--shadow)}
.way>svg{width:40px;height:40px;padding:8px;border-radius:12px;background:var(--lc);color:#fff;flex:none}
.way b{display:block;font-family:var(--font-display)}.way small{color:var(--muted);font-size:14px}
.map-head{margin:26px 0 4px}.map-head h2{font-size:24px;font-weight:700}.map-head p{margin:4px 0 0;color:var(--muted);font-size:15.5px}
.map{position:relative;margin-top:8px}
.map svg.path{position:absolute;inset:0;pointer-events:none;overflow:visible}
.map svg.path path{fill:none;stroke:var(--line);stroke-width:1.6}.map svg.path path.lit{stroke:var(--gold);stroke-width:2}
.land-node{position:absolute;transform:translateX(-50%);width:156px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;text-align:center}
.medal{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--lc) 70%,#fff) 0 18%,var(--lc) 62%);box-shadow:0 10px 0 -3px color-mix(in srgb,var(--lc) 70%,#000),var(--shadow);transition:transform .15s}
.medal svg{width:42px;height:42px}
.land-node:active .medal{transform:translateY(3px) scale(.98)}
.lname{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.15;background:var(--surface);border:1px solid var(--line);padding:4px 10px;border-radius:12px}
.lmeta{font-family:var(--font-display);font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.lmeta svg{width:14px;height:14px;color:var(--gold-deep)}
.land-node.soon .medal,.land-node.locked .medal{filter:saturate(.45);opacity:.5;box-shadow:var(--shadow)}
.land-node.soon .lname,.land-node.locked .lname{opacity:.75}
.land-node .lock{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--muted);display:grid;place-items:center;border:1px solid var(--line)}
.land-node .lock svg{width:16px;height:16px}
.land-node.next .medal::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--gold);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.92);opacity:.95}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.foot{margin-top:40px;text-align:center;color:var(--muted);font-size:14px}
.foot button{background:none;border:0;color:inherit;text-decoration:underline;padding:6px}
@media (min-width:1000px){
  .wrap.homewrap{max-width:1120px;padding:0 40px 56px}
  .home{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:64px;align-items:start}
  .home .hero{position:sticky;top:96px;margin-top:40px}.home .hero .vivi{width:150px;height:150px}
  .home .hero h1{font-size:62px;max-width:12ch}.home .hero .tag{font-size:19px;max-width:38ch}
  .home .cta-row,.home .ways{max-width:440px}.home .map-head{margin-top:40px}
}

/* strony i karty */
.page-head{margin:6px 0 14px}.page-head h1{font-size:32px;font-weight:800}.page-head p{color:var(--muted);margin:6px 0 0}
.sec{display:flex;align-items:center;gap:8px;font-size:20px;margin:24px 0 10px}.sec svg{width:22px;height:22px;color:var(--gold-deep)}
.land-hero{margin:6px 0 8px;padding:22px;border-radius:28px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--lc) 88%,#fff) 0%,var(--lc) 55%,color-mix(in srgb,var(--lc) 70%,#1b1147) 100%)}
.land-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12)}
.land-hero .row{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.land-hero .ico{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.land-hero .ico svg{width:36px;height:36px}.land-hero h1{font-size:28px;font-weight:800;color:#fff}
.land-hero p{margin:10px 0 0;position:relative;z-index:1;font-size:16.5px;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.cards{display:grid;gap:12px}
.card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-height:88px;text-decoration:none}
.card:active{transform:scale(.99)}
.card .tile{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;background:var(--lc)}
.card .tile svg{width:30px;height:30px}.card h3{font-size:19px;font-weight:700}
.card p{margin:3px 0 0;color:var(--muted);font-size:15px;line-height:1.35}
.card .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2)}.card .go svg{width:20px;height:20px}
.card.soon{opacity:.6;box-shadow:none;cursor:default}.card.soon .tile{background:var(--star-dim)}
.card.upload{cursor:pointer;border-style:dashed}.card.upload .tile{background:var(--gold-deep)}
.badge{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.badge.ok{background:color-mix(in srgb,var(--ok) 18%,var(--surface));color:var(--ok)}
.stars{display:inline-flex;gap:2px;margin-top:6px}.stars svg{width:18px;height:18px;color:var(--star-dim)}.stars svg.on{color:var(--gold)}
.stars.sm{margin:0}.stars.sm svg{width:15px;height:15px}
.lessons{display:grid;gap:12px}
.lesson{padding:16px 18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--lc)}
.lesson h3{font-size:19px}.lesson p{margin:6px 0 10px}
.lesson-act{display:flex;flex-wrap:wrap;gap:8px}

/* gra */
.game{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto auto 1fr auto;max-width:560px;margin:0 auto;padding:0 16px 14px;gap:8px}
.g-top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:10px 0 0}
.g-top h1{font-size:19px;font-weight:700;text-align:center}
.dots{grid-column:1/-1;display:flex;gap:6px;justify-content:center}
.dots i{width:22px;height:6px;border-radius:9px;background:var(--line);transition:background .3s,width .3s}
.dots i.done{background:var(--gc)}.dots i.now{width:34px;background:color-mix(in srgb,var(--gc) 55%,var(--line))}
.g-coach{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;min-height:84px}
.g-coach .vivi{width:72px;height:72px}.g-coach .bubble{font-size:17px;font-weight:700;font-family:var(--font-display)}
.g-stage{display:grid;place-items:center;min-height:0;position:relative}
.g-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-bottom:6px}
.xylo{--base:min(42vh,290px);display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 0}
.bar{position:relative;width:clamp(56px,19vw,92px);height:calc(var(--base) * var(--h) / 100);border:0;border-radius:18px;padding:0;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 72%,#fff) 0%,var(--bc) 45%,color-mix(in srgb,var(--bc) 80%,#000) 100%);box-shadow:0 8px 0 -2px color-mix(in srgb,var(--bc) 62%,#000),var(--shadow);transition:transform .08s,filter .2s;user-select:none;-webkit-user-select:none}
.bar .nail{position:absolute;left:50%;top:12%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:rgba(255,255,255,.75)}.bar .nail.b{top:auto;bottom:12%}
.bar .syl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:800;font-size:20px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.bar.hit,.step.hit{animation:hit .35s ease-out}
@keyframes hit{0%{transform:translateY(4px) scale(.97);filter:brightness(1.35)}100%{transform:none;filter:none}}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px) rotate(-2deg)}75%{transform:translateX(6px) rotate(2deg)}}
.xylo.off .bar{pointer-events:none}
.sky{position:relative;width:100%;height:min(40vh,300px);border-radius:28px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.sky::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:2px dashed var(--line)}
.tone{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--b-teal);box-shadow:0 0 0 7px color-mix(in srgb,var(--b-teal) 25%,transparent);transition:top .6s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.tone.t1{left:30%;top:50%}.tone.t2{left:70%;top:50%;background:var(--b-violet);box-shadow:0 0 0 7px color-mix(in srgb,var(--b-violet) 25%,transparent);opacity:0}
.tone.q{background:var(--line);box-shadow:none;display:grid;place-items:center;color:var(--muted);font-weight:800}
.flyer{position:absolute;left:70%;top:50%;width:64px;height:64px;margin:-70px 0 0 -32px;transition:top .7s cubic-bezier(.3,1.3,.5,1),opacity .3s;opacity:0}.flyer .vivi{width:64px;height:64px}
.updown{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.updown .btn{min-height:76px;font-size:19px;border-radius:24px;flex-direction:column;gap:2px}.updown .btn svg{width:30px;height:30px}
.btn.up{background:color-mix(in srgb,var(--b-blue) 18%,var(--surface));border:2px solid var(--b-blue)}
.btn.down{background:color-mix(in srgb,var(--b-orange) 18%,var(--surface));border:2px solid var(--b-orange)}
.rhythm{width:100%;display:grid;gap:18px;justify-items:center}
.count{display:flex;gap:10px}.count i{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background .08s,transform .08s}.count i.on{background:var(--gold);transform:scale(1.35)}
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.beat{border-radius:18px;background:var(--surface);border:2px solid var(--line);height:96px;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:8px 4px}
.beat svg{height:48px;width:auto}.beat span{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--muted)}
.beat.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface))}.beat.good{border-color:var(--ok)}.beat.bad{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--surface))}
.drum{width:min(62vw,240px);aspect-ratio:1;border-radius:50%;border:0;padding:0;position:relative;user-select:none;-webkit-user-select:none;background:radial-gradient(circle at 50% 42%,#fff8e6 0 52%,#efd9a8 60%,var(--b-orange) 61% 74%,color-mix(in srgb,var(--b-orange) 70%,#000) 75%);box-shadow:0 12px 0 -3px color-mix(in srgb,var(--b-orange) 55%,#000),var(--shadow)}
.drum span{position:absolute;left:0;right:0;top:44%;font-family:var(--font-display);font-weight:800;color:#7a4a12;font-size:18px}
.drum.hit{animation:drumhit .18s ease-out}@keyframes drumhit{0%{transform:scale(.95)}100%{transform:none}}
.drum.live{box-shadow:0 0 0 6px var(--gold),0 12px 0 -3px color-mix(in srgb,var(--b-orange) 55%,#000)}.drum[disabled]{opacity:.6}
.choices{display:grid;gap:12px;width:100%}
.choice{display:block;width:100%;padding:10px 12px;border-radius:22px;background:var(--surface);border:2px solid var(--line);box-shadow:var(--shadow)}
.choice svg{width:100%;height:auto;max-height:86px;display:block}
.choice.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--surface))}.choice.wrong{border-color:var(--warn);opacity:.6}
.stairs{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;height:min(44vh,300px)}
.step{flex:1;max-width:58px;height:var(--h);border:0;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 70%,#fff),var(--bc));color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;box-shadow:0 6px 0 -2px color-mix(in srgb,var(--bc) 60%,#000);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.step.dim{opacity:.35}.step[disabled]{cursor:default}
.reader{display:grid;gap:14px;width:100%;justify-items:center}
.note-card{width:min(100%,320px);background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:10px;color:var(--ink);transition:border-color .2s}
.note-card.ok{border-color:var(--ok)}.note-card.bad{border-color:var(--warn)}.note-card.big{width:min(100%,380px);margin:0 auto 12px}
.note-card svg{display:block;width:100%}
.names{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.names .btn{padding:0;min-height:54px;font-family:var(--font-display);font-size:19px}
.staffline{stroke:currentColor;stroke-width:1;opacity:.55}.barline{stroke:currentColor;stroke-width:1.2}
.timesig{font-family:var(--font-display);font-weight:800;font-size:19px;fill:currentColor;text-anchor:middle}
.mnum{font-family:var(--font-display);font-size:11px;fill:var(--muted)}

/* klawiatura */
.kbd{--bkw:calc(100% / var(--w) * .62);position:relative;display:flex;height:120px;width:100%;max-width:640px;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.wk{flex:1;border:1px solid #c9c2dd;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#fff,#f4f0fb);color:#5d5684;display:flex;align-items:flex-end;justify-content:center;padding:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:13px;margin:0 1px}
.bk{position:absolute;top:0;width:var(--bkw);height:62%;border:0;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#2b2450,#141029);z-index:2}
.wk.hit,.bk.hit{background:var(--gold)}.wk.ok,.bk.ok{background:var(--ok)}.wk.bad,.bk.bad{background:var(--warn)}

/* ćwicz */
.practice{max-width:900px;margin:0 auto;padding:0 14px 240px}
.p-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 0}
.p-top h1{font-size:21px;font-weight:800}
.p-controls{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px}
.seg{display:flex;gap:4px;background:var(--surface-2);border-radius:14px;padding:4px}
.seg button{flex:1;min-height:42px;border:0;border-radius:10px;background:none;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px}
.seg button svg{width:18px;height:18px}.seg button[aria-checked="true"]{background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.row-opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:15px}
.tempo{display:flex;align-items:center;gap:8px}.tempo input{width:140px;accent-color:var(--gold-deep)}
.chk{display:inline-flex;gap:8px;align-items:center}.chk input{width:20px;height:20px;accent-color:var(--gold-deep)}
.p-hint{font-size:14px;color:var(--muted);margin:10px 4px 4px}
.score-wrap{background:#fffdf8;color:#221a4f;border-radius:18px;padding:6px 6px 0;border:1px solid var(--line);box-shadow:var(--shadow)}
.score-svg{display:block}.score-svg .nt{color:#221a4f;cursor:pointer;transition:color .15s}
.score-svg .nt.before{opacity:.35}.score-svg .nt.cur{color:#3d5fd0}.score-svg .nt.good{color:#1f8a4c}.score-svg .nt.fix,.score-svg .nt.late{color:#cf7a12}.score-svg .nt.miss{color:#c23a3a}
.score-svg .nt.wrongflash{animation:wf .5s}@keyframes wf{0%,60%{color:#c23a3a}100%{}}
.score-svg .cursor{fill:rgba(243,194,91,.38);transition:x .12s,y .12s}
.p-status{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-top:8px;font-family:var(--font-display);font-weight:700;font-size:18px}
.meter{width:90px;height:8px;border-radius:9px;background:var(--line);overflow:hidden}.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s}
.p-dock{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:grid;gap:10px;justify-items:center}
.p-dock .btn{width:min(100%,420px)}.p-dock>div,.reader>div{width:100%}
.legend-row{display:flex;justify-content:center;gap:12px;font-size:14px;flex-wrap:wrap}
.lg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.lg.good::before{background:#1f8a4c}.lg.fix::before{background:#cf7a12}.lg.miss::before{background:#c23a3a}
.big-num{font-family:var(--font-display);font-weight:800;font-size:22px;text-align:center;margin:8px 0}

/* panele, formularze, tabele */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}
.panel h2{display:flex;align-items:center;gap:10px;font-size:21px;margin-bottom:10px}.panel h2 svg{width:24px;height:24px;color:var(--gold-deep)}
.panel h3{font-size:17px;margin:16px 0 8px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.inline-form input{flex:1 1 180px;min-height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);padding:0 14px}
.form{display:grid;gap:12px;margin-top:12px}
.form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form input,.form select,.form textarea{min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);padding:10px 14px;font-weight:400}
.roles{border:0;padding:0;margin:0;display:grid;gap:6px}.roles legend{font-weight:700;font-size:15px;margin-bottom:6px}
.radio{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;font-weight:400!important;min-height:40px}.radio input{width:20px;height:20px;min-height:0;accent-color:var(--gold-deep)}
.form .chk{font-weight:400;display:flex;align-items:flex-start;gap:10px}.form .chk input{min-height:0;margin-top:3px}
.err{color:var(--bad);font-weight:700;min-height:1.2em;margin:0}
.klass-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}.klass-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.code{font-family:var(--font-display);letter-spacing:.08em;font-size:20px}
.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}.tbl th{font-size:13px;color:var(--muted)}
.tbl .who{display:flex;align-items:center;gap:8px}
.assign{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.assign li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.assign li.done{opacity:.75}
.lclass{margin-bottom:12px}
.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:14px 0}
.pcard{display:grid;justify-items:center;gap:6px;padding:14px 8px;border-radius:18px;border:2px solid var(--line);background:var(--surface-2)}
.pcard.on{border-color:var(--gold)}.pcard small{color:var(--muted)}
.addp summary{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;min-height:44px}.addp summary svg{width:20px;height:20px}
.avpick{display:flex;flex-wrap:wrap;gap:8px}.avpick label{display:block;cursor:pointer}.avpick input{position:absolute;opacity:0}
.avpick input:checked+.avatar{box-shadow:0 0 0 3px var(--gold)}

/* okna dialogowe */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:min(560px,100vw);width:100%;margin:auto auto 0;max-height:92dvh}
dialog::backdrop{background:rgba(12,9,40,.55);backdrop-filter:blur(3px)}
.sheet{background:var(--surface);border-radius:28px 28px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.25);max-height:92dvh;overflow:auto}
@media (min-width:600px){dialog{margin:auto}.sheet{border-radius:28px;padding-bottom:22px}}
.sheet h2{font-size:24px;font-weight:800;text-align:center}
.res-stars{display:flex;justify-content:center;gap:10px;margin:14px 0 6px}
.res-stars svg{width:62px;height:62px;color:var(--star-dim);transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.6,.5,1),color .2s}
.res-stars svg.on{color:var(--gold);transform:scale(1)}.res-stars svg:nth-child(2){margin-top:-14px}
.unlock{margin:10px 0 0;text-align:center;font-weight:700;color:var(--ok)}
.learn{margin:16px 0;padding:14px 16px;border-radius:18px;background:var(--surface-2)}.learn h3{font-size:16px;margin-bottom:4px}.learn p{margin:0}
.sheet .btns{display:grid;gap:10px;margin-top:12px}
.set-row{display:grid;gap:8px;margin:16px 0 0}.set-row h3{font-size:16px;color:var(--muted)}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.langs button{min-height:52px;border-radius:16px;border:2px solid var(--line);background:var(--surface-2);font-weight:700}
.langs button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,var(--surface))}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface-2);font-weight:700;width:100%;text-align:left}
.switch .knob{width:52px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch[aria-checked="true"] .knob{background:var(--ok)}.switch[aria-checked="true"] .knob::after{transform:translateX(22px)}

/* Vivi */
.vivi-sheet{display:grid;grid-template-rows:auto 1fr auto auto;gap:10px;height:min(86dvh,720px)}
.v-head{display:flex;align-items:center;gap:12px}.v-head .vivi{width:60px;height:60px;flex:none}
.v-head h2{text-align:left;font-size:22px}.ai-label{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.vmsgs{overflow:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.msg{max-width:88%;padding:10px 14px;border-radius:18px;font-size:16px}
.msg p{margin:0}.msg p+p{margin-top:6px}.msg .note{font-size:13.5px;color:var(--muted)}
.msg.me{align-self:flex-end;background:var(--gold);color:var(--on-gold);border-bottom-right-radius:6px}
.msg.vivi{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:6px}
.srcs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13px;color:var(--muted)}
.src{padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700}
.sugg{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.chip-btn{flex:none;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:14px;font-weight:700}
.vform{display:flex;gap:8px}.vform input{flex:1;min-height:50px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);padding:0 18px}
.vform .send{width:50px;height:50px;background:var(--gold);color:var(--on-gold);border:0}

/* quiz na żywo */
.live{max-width:900px;margin:0 auto;padding:0 14px 120px;min-height:100dvh}
.live-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 0}
.live-code{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:18px}.live-code svg{width:22px;height:22px;color:var(--b-red)}
.live-score{font-family:var(--font-display);font-weight:800}
.live-body{display:grid;gap:14px}
.qnum{margin:0;color:var(--muted);font-weight:700;text-align:center}.qprompt{text-align:center;font-size:26px}
.timer{height:8px;border-radius:9px;background:var(--line);overflow:hidden}.timer i{display:block;height:100%;background:var(--gold);width:100%}
.answers{display:grid;gap:10px;grid-template-columns:1fr 1fr}.answers.rhythm{grid-template-columns:1fr}
.ans{min-height:96px;border-radius:20px;border:0;background:var(--ac);color:#fff;font-family:var(--font-display);font-weight:800;font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;box-shadow:0 6px 0 -2px color-mix(in srgb,var(--ac) 60%,#000);position:relative}
.ans svg{width:36px;height:36px}.answers.rhythm .ans{background:var(--surface);color:var(--ink);border:3px solid var(--ac)}.answers.rhythm .ans svg{width:100%;height:auto;max-height:80px}
.ans .nn{font-size:34px}.ans.picked{outline:4px solid var(--gold)}.ans[disabled]{opacity:.8}
.ans.correct{outline:5px solid var(--ok)}.ans.dim{opacity:.4}
.answers.big .ans{min-height:120px;font-size:28px;padding-bottom:40px}
@media (min-width:900px){.live.host{max-width:1200px}.live.host .qprompt{font-size:44px}.live.host .answers.big .ans{min-height:180px;font-size:40px}.live.host .answers.big .ans svg{width:56px;height:56px}.live.host .answers.rhythm .ans svg{max-height:120px}.live.host .note-card.big{width:min(100%,360px);padding:6px}.live.host .answers.note{grid-template-columns:repeat(4,1fr)}.live.host .answers.note .ans{min-height:140px}.live.host .live-body{gap:10px}.live.host .top5 li{font-size:22px}}.answers.small .ans{min-height:64px}
.ans .cnt{position:absolute;left:10px;right:10px;bottom:8px;height:22px;border-radius:9px;background:rgba(0,0,0,.18);overflow:hidden;display:flex;align-items:center}
.ans .cnt i{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.45)}.ans .cnt b{position:relative;margin-left:8px;font-size:15px}
.answers.rhythm .ans .cnt{background:var(--surface-2)}.answers.rhythm .ans .cnt i{background:var(--ac)}
.host-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.host-bar{position:fixed;left:0;right:0;bottom:0;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line)}
.host-bar .btn{width:min(100%,420px)}
.bigcode{font-family:var(--font-display);font-weight:800;font-size:clamp(56px,16vw,120px);letter-spacing:.1em;margin:14px 0;color:var(--ink)}
.top5{list-style:none;padding:0;margin:0;display:grid;gap:6px;counter-reset:r}
.top5 li{display:flex;justify-content:space-between;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);counter-increment:r}
.top5 li b::before{content:counter(r) ". "}
.reveal.ok h2{color:var(--ok)}.reveal h2{font-size:30px;margin:10px 0}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:20px 0}
.pod{width:110px;display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:18px 18px 6px 6px;background:var(--surface);border:1px solid var(--line)}
.pod.p1{min-height:170px;background:color-mix(in srgb,var(--gold) 35%,var(--surface))}.pod.p2{min-height:130px}.pod.p3{min-height:105px}
.pod i{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:28px}.pod b{word-break:break-word;text-align:center}
.pulse-dot{width:22px;height:22px;border-radius:50%;background:var(--gold);margin:30px auto 14px;animation:pulse2 1.6s infinite}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(243,194,91,.7)}100%{box-shadow:0 0 0 22px rgba(243,194,91,0)}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--bg1);padding:12px 18px;border-radius:16px;font-weight:700;max-width:min(90vw,440px);text-align:center;z-index:60;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Vivi – maskotka */
.vivi .v-body{fill:var(--gold)}.vivi .v-belly{fill:#fde6a6}.vivi .v-wing,.vivi .v-tail{fill:var(--b-teal)}.vivi .v-beak{fill:var(--b-orange)}
.vivi .v-crest{fill:none;stroke:var(--b-violet);stroke-width:3.4;stroke-linecap:round}.vivi .v-crest-h{fill:var(--b-violet)}
.vivi .v-feet{stroke:var(--b-orange);stroke-width:4;stroke-linecap:round}.vivi .v-shadow{fill:rgba(20,10,60,.18)}.vivi .v-cheek{fill:#f7a08d;opacity:.7}
.vivi .v-happy{display:none;fill:none;stroke:#1d1745;stroke-width:3;stroke-linecap:round}
.vivi.happy .v-eye,.vivi.happy .v-eyew,.vivi.happy .v-glint{display:none}.vivi.happy .v-happy{display:inline}
.vivi .v-all{transform-origin:60px 100px}.vivi.talk .v-all{animation:bob .5s ease-out}
@keyframes bob{0%{transform:none}40%{transform:translateY(-6px) rotate(-3deg)}100%{transform:none}}
.vivi.idle .v-all{animation:idle 3.6s ease-in-out infinite}@keyframes idle{0%,100%{transform:none}50%{transform:translateY(-3px)}}

@media (max-width:380px){.wrap{padding:0 12px 36px}.top{gap:6px}.logo span{font-size:20px}.logo svg{width:26px;height:26px}.icon-btn{width:40px;height:40px}.chip{padding:5px 9px}.bar{width:clamp(52px,19vw,92px)}.xylo{gap:8px}.seg button span{display:none}}
@media (min-width:900px){.wrap{max-width:680px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Vivialto 3: strona główna, trenażery, narzędzia ===== */
.wrap.wide{max-width:1180px}
.hero2{display:grid;gap:18px;margin:6px 0 18px}
.hero-vivi{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.hero-vivi .vivi{width:84px;height:84px}
.hero2 h1{font-size:clamp(32px,8.4vw,60px);font-weight:800;margin:14px 0 6px;max-width:14ch}
.hero2 .tag{color:var(--muted);margin:0;max-width:44ch}
.cta2{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.cta2 .btn{flex:1 1 180px}
.hero-play{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:var(--shadow);display:grid;gap:10px;align-content:start}
.kicker{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-display);font-weight:700;color:var(--muted);font-size:15px}.kicker svg{width:20px;height:20px;color:var(--gold-deep)}
.hero-staff{display:flex;align-items:center;justify-content:center;gap:14px;min-height:118px;background:#fffdf8;color:#221a4f;border-radius:18px}
.hero-staff svg{width:180px;height:auto}.hero-staff b{font-family:var(--font-display);font-size:44px}
.hero-play .kbd{height:150px}
@media (min-width:900px){.hero2{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;margin-top:24px}.hero-vivi .vivi{width:110px;height:110px}}
.daily{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-radius:24px;margin:8px 0 6px;color:#1d1745;background:linear-gradient(120deg,#ffe39a,var(--gold) 55%,#f6a64b);box-shadow:var(--shadow)}
.daily .kicker{color:#5a3d06}.daily .kicker svg{color:#5a3d06}.daily h2{font-size:22px;margin:4px 0}.daily p{margin:0;font-weight:700}
.daily .btn.primary{background:#1d1745;color:#fff;box-shadow:0 6px 0 -2px #000}.daily.done{background:linear-gradient(120deg,#bdebcf,#7fd3a3)}
.sec-block{margin-top:30px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}.sec-head h2{font-size:24px}.sec-head a{font-weight:700;color:var(--accent);text-decoration:none}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tcard,.gcard{display:grid;gap:6px;align-content:start;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;min-height:150px;position:relative;overflow:hidden}
.tcard::after,.gcard::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--lc) 14%,transparent)}
.tcard .tile,.gcard .tile{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--lc)}.tcard .tile svg,.gcard .tile svg{width:26px;height:26px}
.tcard b,.gcard b{font-family:var(--font-display);font-size:17px;line-height:1.2}.tcard small,.gcard small{color:var(--muted);font-size:14px;line-height:1.3}
.tcard:active,.gcard:active{transform:scale(.98)}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,240px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.hscroll>*{scroll-snap-align:start}.gcard.locked{opacity:.7}.gcard .badge svg{width:13px;height:13px;vertical-align:-2px}
.map-box{max-width:560px;margin:0 auto}
.audience{display:grid;gap:12px;margin-top:30px}@media (min-width:700px){.audience{grid-template-columns:1fr 1fr}}
.aud{display:grid;gap:6px;padding:18px;border-radius:22px;text-decoration:none;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--lc) 85%,#fff),color-mix(in srgb,var(--lc) 75%,#1b1147))}
.aud svg{width:30px;height:30px}.aud b{font-family:var(--font-display);font-size:22px}.aud span{opacity:.95}
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));z-index:31;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:0;border-radius:999px;background:var(--b-violet);color:#fff;font-weight:800;box-shadow:0 10px 24px -8px rgba(60,20,120,.6)}
.fab svg{width:22px;height:22px}
@media (min-width:1000px){.fab{bottom:24px;right:24px}}
.nav{grid-template-columns:repeat(5,1fr)}@media (min-width:1000px){.nav{width:560px}}
/* trenażer */
.trainer{max-width:640px;margin:0 auto;padding:0 16px 30px;min-height:100dvh;display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:12px}
.trainer .g-top{grid-template-columns:44px 1fr auto}.tscore{font-family:var(--font-display);font-weight:800;font-size:18px}
.tset{display:grid;gap:8px}.tq{font-size:24px;text-align:center;margin-top:6px}
.tvis{display:grid;place-items:center;min-height:120px}.tvis .note-card{background:#fffdf8;color:#221a4f;width:min(100%,300px)}
.ear-ico{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--gc) 20%,var(--surface));color:var(--gc)}.ear-ico svg{width:56px;height:56px}
.tans{display:grid;gap:10px;grid-template-columns:1fr 1fr;align-content:start}.tans.n7{grid-template-columns:repeat(4,1fr)}.tans.n3{grid-template-columns:repeat(3,1fr)}
.tbtn{position:relative;min-height:60px;border-radius:16px;border:2px solid var(--line);background:var(--surface);font-family:var(--font-display);font-weight:700;font-size:17px;padding:8px 10px;box-shadow:var(--shadow)}
.tbtn .kn{position:absolute;left:8px;top:5px;font-size:11px;color:var(--muted)}
.tbtn.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--surface))}.tbtn.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px}.tfb{font-weight:700;color:var(--muted)}
/* narzędzia */
.tool{max-width:640px;margin:0 auto;padding:0 16px 40px}
.metro,.tuner,.pianotool,.gloss{display:grid;gap:16px;margin-top:8px}
.mbeats{display:flex;justify-content:center;gap:12px;min-height:40px}.mbeats i{width:30px;height:30px;border-radius:50%;background:var(--line);transition:transform .06s,background .06s}.mbeats i.acc{box-shadow:inset 0 0 0 3px var(--gold-deep)}.mbeats i.on{background:var(--gold);transform:scale(1.25)}
.mbpm{display:flex;align-items:center;justify-content:center;gap:18px}.mbpm div{display:grid;justify-items:center}.mbpm b{font-family:var(--font-display);font-size:72px;line-height:1}.mbpm span{color:var(--muted)}.mbpm .icon-btn{width:56px;height:56px;font-size:28px;font-weight:700}
.mbpm.small b{font-size:30px}.mbpm.small .icon-btn{width:44px;height:44px;font-size:22px}
.metro input[type=range]{width:100%;accent-color:var(--gold-deep)}
.mrow{display:grid;gap:6px}.mrow label{font-weight:700;color:var(--muted)}.mrow.center{display:flex;justify-content:center;align-items:center;gap:14px}
.mbtns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.tnote{display:flex;justify-content:center;align-items:baseline;gap:6px;font-family:var(--font-display)}.tnote b{font-size:110px;line-height:1}.tnote span{font-size:32px;color:var(--muted)}
.tfreq{text-align:center;color:var(--muted);font-weight:700}
.ttrack{position:relative;height:16px;border-radius:9px;background:linear-gradient(90deg,var(--bad),var(--warn) 30%,var(--ok) 46% 54%,var(--warn) 70%,var(--bad))}
.tzero{position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:var(--ink)}.tneedle{position:absolute;top:-10px;width:6px;height:36px;margin-left:-3px;border-radius:3px;background:var(--ink);left:50%;transition:left .12s}
.tscale{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.tstate{text-align:center;font-weight:800;font-size:20px;min-height:1.4em}.tstate.ok{color:var(--ok)}
.tuner.intune .tnote b{color:var(--ok)}
.pnote{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:14px;align-items:center}.pnote .note-card{background:#fffdf8;color:#221a4f}.pnote b{display:block;font-family:var(--font-display);font-size:56px}
#pk .kbd{height:170px}
.gloss input{min-height:52px;border-radius:999px;border:1px solid var(--line);background:var(--surface);padding:0 20px;font-size:17px}

@media (max-width:600px){.fab{padding:12px;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px))}.fab span{display:none}}

/* ===== Vivialto OVH: menu główne, wyszukiwarka, kod, quizy, ścieżki ===== */
.top{gap:8px}
.mainmenu{display:none;flex:1;justify-content:center;gap:2px;flex-wrap:wrap}
.mainmenu a{padding:8px 11px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.mainmenu a:hover{background:var(--surface-2,rgba(120,100,200,.12))}.mainmenu a.on{background:var(--gold);color:#1d1745}
.top .logo{margin-right:auto}
@media (min-width:1080px){.mainmenu{display:flex}.top .logo{margin-right:0}}
.wide-only{display:none}@media (min-width:700px){.wide-only{display:inline-flex}}
.code-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:800;color:var(--ink)}
.code-btn svg{width:18px;height:18px;color:var(--b-red,#e05a4f)}
.nav button{display:grid;justify-items:center;gap:2px;background:none;border:0;color:inherit;font:inherit;font-size:12px;font-weight:700;padding:6px 0;opacity:.75}.nav button.on{opacity:1;color:var(--gold-deep)}.nav button svg{width:24px;height:24px}
.more-list{display:grid;gap:8px;margin:10px 0}.more-row{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.more-row svg{width:26px;height:26px;color:var(--gold-deep);flex:none}.more-row b{display:block}.more-row small{color:var(--muted)}
.search-in,.code-form input,.qfilters input,.qfilters select,.qe-meta input,.qe-meta select,.qedit input:not([type=radio]):not([type=checkbox]),.qedit select{min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 14px;font-size:16px;width:100%;box-sizing:border-box}
.search-res{display:grid;gap:4px;margin-top:10px;max-height:55vh;overflow:auto}.search-res h3{margin:12px 0 4px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sr-row{display:block;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:inherit;font-weight:600}
.code-form{display:flex;gap:10px;margin-top:10px}.code-form input{text-transform:uppercase;letter-spacing:.3em;font-size:24px;font-weight:800;text-align:center}
.codebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.codebar b{display:block}.codebar small{color:var(--muted)}
.qtools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.qtools .seg a{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700}.qtools .seg a.on{background:var(--surface);box-shadow:var(--shadow)}
.qfilters{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}@media (min-width:700px){.qfilters{grid-template-columns:2fr 1fr 1fr}}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.qcard{display:grid;gap:6px;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.qcard b{font-family:var(--font-display);font-size:18px}.qcard small,.qmeta{color:var(--muted);font-size:14px}
.empty{display:grid;justify-items:start;gap:10px;padding:20px;border-radius:20px;border:1px dashed var(--line)}
.qplay #qb{display:grid;gap:14px}.qintro{display:grid;gap:10px}.qlisten{justify-self:center}
.tans.n5,.tans.n6{grid-template-columns:1fr 1fr}
.qe-meta{display:grid;gap:10px}.qe-meta label,.qedit label{display:grid;gap:4px;font-weight:700;font-size:14px}
.qe-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media (min-width:700px){.qe-row{grid-template-columns:repeat(4,1fr)}}
.qedit{display:grid;gap:10px;margin-top:12px}.qe-top{display:flex;gap:8px;align-items:center}.qe-top select{flex:1}
.qe-notes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.qe-kbd .kbd{height:120px}.qe-staff{width:min(100%,260px);background:#fffdf8;color:#221a4f}
.qe-choices{display:grid;gap:8px}.qe-ch{display:flex;gap:8px;align-items:center}.qe-ch input[type=radio]{width:24px;height:24px;flex:none;accent-color:var(--ok)}
.chk{display:inline-flex;gap:8px;align-items:center;font-weight:600}.chk input{width:20px;height:20px}
.qe-add{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.btns.left{justify-content:flex-start}
.crumbs{font-size:14px;color:var(--muted);margin:4px 0}.crumbs a{color:var(--accent);text-decoration:none;font-weight:700}
.lvls{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.lvls a{min-width:44px;text-align:center;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:800}.lvls a.on{background:var(--gold);color:#1d1745}
.lvl-title{margin:14px 0 6px}
.subj{margin-top:12px}.subj h3{margin:0 0 10px}
.pitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.pitem{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);text-align:left;font:inherit}
.pitem b{display:block;font-size:15px}.pitem small{color:var(--muted);font-size:13px}.pitem .stars{margin-left:auto}
.pi-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--lc,var(--muted));flex:none}.pi-ic svg{width:22px;height:22px}
.pitem.soon{opacity:.6;border-style:dashed}.pitem.soon .pi-ic{background:var(--line);color:var(--muted)}
.ans .ctext{font-size:20px;font-weight:800;padding:0 6px}

@media (min-width:1080px){.nav{display:none!important}body.has-nav .wrap{padding-bottom:40px}.fab{bottom:24px}}

/* ===== Vivialto 0.5: kostka, tablica, panel rodzica, tryb dziecka ===== */
.cube-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.cube-ctl label{display:grid;gap:4px;font-weight:700;font-size:14px}
.cube-ctl select{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font-size:15px}
.cube-ctl .depth{flex:1;min-width:220px}.cube-ctl input[type=range]{width:100%;accent-color:var(--gold-deep)}
.cube-legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;font-size:14px}.cube-legend span{padding:4px 10px;border-radius:999px}
.cube-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid var(--line)}
.cube{border-collapse:collapse;min-width:640px;width:100%;background:var(--surface)}
.cube th{position:sticky;left:0;background:var(--surface);text-align:left;padding:10px;font-size:14px;border-bottom:1px solid var(--line);white-space:nowrap}
.cube thead th{top:0}.cube td{vertical-align:top;padding:8px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);min-width:150px}
.sk{display:flex;justify-content:space-between;gap:6px;width:100%;margin:0 0 6px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);font:inherit;font-size:14px;font-weight:700;text-align:left;color:#1d1745}
.sk small{font-weight:800;opacity:.7}.empty-cell{color:var(--muted)}
.m-none{background:color-mix(in srgb,var(--line) 60%,transparent);color:var(--ink)!important}.m-0{background:#ece9f7}.m-1{background:#ffd9c7}.m-2{background:#ffe6a3}.m-3{background:#bfe8cd}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}
.rung{display:grid;gap:2px;justify-items:center;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;color:var(--ink)}
.rung b{font-size:20px;font-family:var(--font-display)}.rung span{font-size:12px;text-align:center;line-height:1.2}.rung.on{background:var(--gold);color:#1d1745;border-color:var(--gold-deep)}.rung.none{opacity:.45}
.lnk-h{margin:16px 0 6px}.lnks{display:grid;gap:10px}.lnk b{display:block;margin-bottom:6px}.lnk p{margin:0}.lnk .chip-btn{margin:0 6px 6px 0}
.board{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:12px 20px;max-width:1400px;margin:0 auto}
.board-top{display:flex;align-items:center;gap:12px}.board-top b{flex:1;font-family:var(--font-display);font-size:18px}
.board-body{display:grid;align-content:center;gap:16px;text-align:center}.board-body h1{font-size:clamp(34px,5vw,64px)}.board-body h2{font-size:clamp(26px,3.4vw,44px)}
.board-text{font-size:clamp(20px,2.4vw,30px);line-height:1.5;max-width:40ch;margin:0 auto}.board-big{font-family:var(--font-display);font-size:clamp(48px,7vw,96px)}
.board-list{font-size:clamp(20px,2.6vw,32px);text-align:left;margin:0 auto}.board-demo{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.board-demo .note-card,.board-card{background:#fffdf8;color:#221a4f;width:min(100%,380px);margin:0 auto}.board-ans .ans{min-height:110px}
.board-nav{display:flex;justify-content:space-between;gap:12px}#bkb .kbd{height:180px}
.print-only{display:none}
@media print{body *{visibility:hidden}#print-area,#print-area *{visibility:visible}#print-area{display:block;position:absolute;left:0;top:0;width:100%;color:#000;background:#fff;padding:16px;font-family:serif}
  #print-area li{margin:0 0 14px}.ws-staff svg{width:220px;height:auto;color:#000}.ws-key{page-break-before:always}}
.pcard2{display:grid;gap:10px}.pc-head{display:flex;gap:12px;align-items:center}.pc-head h2{margin:0}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pc-stats div{display:grid;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.pc-stats b{font-family:var(--font-display);font-size:28px}.pc-stats span{font-size:14px;color:var(--muted)}
.bars{display:grid;gap:6px}.bar-row{display:grid;grid-template-columns:150px 1fr 48px;gap:8px;align-items:center;font-size:14px}.bar-row i{height:12px;border-radius:6px;background:var(--line);overflow:hidden}.bar-row em{display:block;height:100%;background:var(--ok)}
.todo{margin:0;padding-left:20px}.todo li{margin:4px 0}.tip{padding:14px;border-radius:16px;background:color-mix(in srgb,var(--gold) 25%,var(--surface))}.tip p{margin:6px 0}
.pitem small,.tcard small,.gcard small,.qcard small{font-size:14px}.crumbs{font-size:15px}
body.kid .mainmenu,body.kid .kid-hide,body.kid .code-btn span{display:none!important}
body.kid .btn{min-height:64px;font-size:20px}body.kid .tcard,body.kid .gcard{min-height:170px}body.kid .tcard b,body.kid .gcard b{font-size:20px}
body.kid .hero2 .tag{display:none}body.kid .tbtn{min-height:76px;font-size:22px}body.kid .bubble{font-size:20px}
.cube-legend span:not(.m-none){color:#1d1745}.more-row{text-align:left;width:100%;font:inherit}
.board-ans .ctext{font-size:clamp(22px,2.6vw,36px)}.board-body>.btn{justify-self:center}
/* 0.6: dyktando, cele dotyku w trybie dziecka */
.tans.dict{display:grid;grid-template-columns:1fr;gap:12px}
.dict-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.slot{min-width:52px;height:52px;display:grid;place-items:center;border-radius:14px;border:2px dashed var(--line);font-family:var(--font-display);font-weight:800;font-size:20px;background:var(--surface)}
.slot.given{border-style:solid;opacity:.75}.slot.ok{border:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--surface))}.slot.bad{border:2px solid var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.dict-kbd .kbd{height:150px}
.sec-head a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}.foot button{min-height:44px}.top .logo{min-height:44px;display:inline-flex;align-items:center}
/* 0.7: dostępność, mapa klasy, epoki */
.fab{background:#6a3fc4}
.ep-card{padding:22px 26px;border-radius:20px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-display);font-size:clamp(24px,5vw,36px);font-weight:800;text-align:center;box-shadow:var(--shadow)}
.cmap td{text-align:center;font-weight:800;color:#1d1745;min-width:90px}.cmap thead th{font-size:13px;white-space:normal;min-width:90px}.cmap-avg th,.cmap-avg td{border-top:2px solid var(--ink)}
#sheet.wide-sheet,.sheet.wide-sheet{max-width:min(96vw,1100px);width:100%}
#dlg:has(.wide-sheet){max-width:96vw}
/* 0.8: bramka „Czy znasz?”, dyktanda wielogłosowe, lekcje, przedmioty, oś czasu */
.tans.gate{display:grid;gap:12px;justify-items:center;text-align:center}.gate-items{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.gate-items .chip{font-weight:700}
.dict-voice{display:grid;gap:6px;padding:8px;border-radius:14px}.dict-voice.cur{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.vlab{justify-self:start;border:0;background:none;font:inherit;font-weight:800;color:var(--ink);min-height:44px;padding:0 6px}
.lesson-page{display:grid;gap:12px}.lesson-page h2{margin-top:0}.ltab{border-collapse:collapse;width:100%;min-width:520px}.ltab th,.ltab td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px}
.sgroups{display:grid;gap:12px}@media (min-width:800px){.sgroups{grid-template-columns:1fr 1fr}}.sgroup .sg-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.sgroup h2{font-size:20px;margin:0}.sgroup.soon{opacity:.65}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--gold-deep);display:grid;gap:16px}
.tl-ep{position:relative}.tl-ep::before{content:"";position:absolute;left:-28px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid var(--gold-deep)}
.tl-head{display:flex;gap:10px;align-items:baseline}.tl-head b{font-family:var(--font-display);font-size:22px}.tl-head small{color:var(--muted)}
.tl-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tl-c{display:grid;text-align:left;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);min-height:44px}.tl-c small{color:var(--muted)}
.works{padding-left:18px}.works li{margin:6px 0}
/* 0.9: przełącznik języka w nagłówku */
.lang-sel{display:inline-flex}.lang-sel select{height:44px;min-width:58px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:14px;padding:0 10px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:400px){.top .logo span{display:none}}
/* 0.9: czterogłos, odpowiedzi z zapisem, ćwiczenia skal */
.note-card.wide{width:min(100%,420px);background:#fffdf8;color:#221a4f}
.grand{width:100%;height:auto}.grand .hl ellipse{stroke:#d33b2c;stroke-width:3.2}.grand .hl line{stroke:#d33b2c}
.tans.wide{grid-template-columns:1fr 1fr}@media (max-width:600px){.tans.wide{grid-template-columns:1fr}}
.tbtn.svgc{display:grid;background:#fffdf8;color:#221a4f;padding:6px 8px;min-height:140px}.tbtn.svgc .kn{color:#5a5480}.tbtn.svgc svg{width:100%;height:auto}
.tbtn.svgc.ok{background:#e3f6ea}.tbtn.svgc.bad{background:#fde6e3}
.sx-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:44px}.sx-n{padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:800}.sx-n.on{background:var(--gold);color:#1d1745}
#sxs{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font-size:16px}
.trainer .g-top{grid-template-columns:44px 1fr auto auto}.trainer .g-top .lang-sel select{height:36px;min-width:52px;font-size:13px}