/* KUBIVO 3D Builder: plush palette on white (from the plush KUBIVO logo: turquoise, light grey, lime,
   raspberry, beige). Controls are soft fabric pillows: highlight on top, coloured soft shadow, no outlines. */
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/carlito-700-latin.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:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/carlito-700-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/carlito-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  /* plush palette */
  --white:#FFFFFF; --page:#FFFFFF; --track:#EEF1F4;
  --ink:#1F2733; --text:#3B4452; --mute:#6B7380;
  --turq:#1FB0C8; --turq-l:#55CADC; --turq-d:#138EA3;
  --lime:#C6DE4F; --lime-l:#DDEE82;
  --rasp:#E2457E; --rasp-l:#F2709F;
  --beige:#F1E6D3;
  --warn:#E0283C; --amber:#F2A100;
  /* pillow shading */
  --hi:inset 0 2px 1px rgba(255,255,255,.8);
  --lo:inset 0 -3px 7px rgba(20,30,45,.08);
  --display:"Calibri","Carlito","Segoe UI",system-ui,sans-serif;   /* the logo's voice, as on kubivo.com / kubivo.ru */
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--display);   /* numbers in the same rounded bold, no code look */
  --panel:340px; --top:72px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--page);color:var(--text);font:15px/1.45 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
kbd{font:700 10px/1 var(--mono);color:var(--mute);background:var(--track);border-radius:6px;padding:3px 5px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.kp{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
:focus-visible{outline:3px solid rgba(31,176,200,.55);outline-offset:2px}

/* pillow: the default is a white pillow; variants swap the two gradient stops and the shadow tint */
.kp-btn,.kp-tool,.kp-sound,.kp-chip,.kp-item{--b1:#FFFFFF;--b2:#EEF1F4;--sh:rgba(60,80,105,.32);--fg:var(--ink)}
.kp-btn,.kp-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:10px 14px;font:700 13px/1 var(--body);color:var(--fg);
  background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:var(--hi),var(--lo),0 7px 16px -8px var(--sh),0 2px 4px -2px var(--sh);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.kp-btn:hover,.kp-tool:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--hi),var(--lo),0 11px 22px -9px var(--sh),0 3px 6px -3px var(--sh)}
.kp-btn:active,.kp-tool:active{transform:translateY(1px) scale(.97);box-shadow:var(--hi),var(--lo),0 4px 9px -6px var(--sh)}
.kp-btn:disabled{opacity:.45;pointer-events:none}
.kp-btn.on,.kp-tool.on,.kp-btn.ink{--b1:var(--turq-l);--b2:var(--turq);--sh:rgba(19,142,163,.6);--fg:#fff}
.kp-btn.pink{--b1:var(--rasp-l);--b2:var(--rasp);--sh:rgba(190,44,98,.55);--fg:#fff}
.kp-btn.lime{--b1:var(--lime-l);--b2:var(--lime);--sh:rgba(140,165,35,.55);--fg:var(--ink)}
.kp-btn.ghost{background:transparent;box-shadow:none;color:var(--mute)}
.kp-btn.big{font-size:16px;padding:15px 28px}
.kp-btn kbd,.kp-tool kbd{margin-left:2px}
.kp-btn.on kbd,.kp-tool.on kbd,.kp-btn.pink kbd,.kp-btn.ink kbd{background:rgba(255,255,255,.25);color:#fff}
i[data-ico]{display:inline-flex;width:17px;height:17px;flex:none}
i[data-ico] svg{width:100%;height:100%}

/* top bar */
.kp-top{height:var(--top);flex:none;display:flex;align-items:center;gap:18px;padding:0 18px;background:var(--white);box-shadow:0 8px 24px -16px rgba(30,45,65,.35);position:relative;z-index:5}
.kp-brand{display:block;height:46px;width:63px;flex:none}
.kp-brand svg{height:100%;width:auto;display:block}
.kp-title{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.kp-title b{font:800 23px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.kp-title span{font:600 12px/1.3 var(--body);color:var(--mute);margin-top:4px;white-space:nowrap}
.kp-tray{margin-left:auto;display:flex;align-items:center;gap:10px;font:700 13px/1 var(--body);color:var(--ink)}
.kp-tray .grp{display:flex;align-items:center;gap:4px;background:var(--track);border-radius:999px;padding:5px 9px 5px 6px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.kp-tray .grp i{width:14px;height:14px;border-radius:4px;display:block;box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.18)}
.kp-tray .grp i.w{border-radius:2px;clip-path:polygon(0 100%,100% 100%,0 0);width:15px;height:15px}
.kp-tray .num{font:700 14px/1 var(--mono);white-space:nowrap}
.kp-tray .lbl{font:600 11px/1.1 var(--body);color:var(--mute);text-transform:uppercase;letter-spacing:.08em;max-width:76px}
.kp-lang{display:flex;background:var(--track);border-radius:999px;padding:3px;flex:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.kp-lang button{border:0;background:transparent;border-radius:999px;padding:7px 11px;font:800 12px/1 var(--body);letter-spacing:.06em;color:var(--mute)}
.kp-lang button.on{color:#fff;background:linear-gradient(180deg,var(--turq-l),var(--turq));box-shadow:var(--hi),0 4px 10px -5px rgba(19,142,163,.55)}
.kp-cta{display:inline-flex;align-items:center;gap:10px;flex:none;color:#fff;text-decoration:none;font:800 15px/1 var(--body);padding:14px 22px;border-radius:999px;
  background:linear-gradient(180deg,var(--rasp-l),var(--rasp));box-shadow:var(--hi),var(--lo),0 10px 22px -9px rgba(190,44,98,.6),0 3px 6px -3px rgba(190,44,98,.6);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.kp-cta:hover{transform:translateY(-1px) scale(1.03);box-shadow:var(--hi),var(--lo),0 14px 28px -10px rgba(190,44,98,.6)}
.kp-cta:active{transform:translateY(1px) scale(.97)}
.kp-cta b{font:700 14px/1 var(--mono);background:rgba(255,255,255,.2);border-radius:999px;padding:5px 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.kp-cta b:empty{display:none}
.kp-arrow{width:14px;height:14px;display:block;background:currentColor;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M2 7h9M7 2.5L11.5 7 7 11.5" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}

/* layout */
.kp-main{flex:1;min-height:0;display:flex;position:relative}
.kp-panel{width:var(--panel);flex:none;background:var(--white);box-shadow:10px 0 30px -22px rgba(30,45,65,.45);overflow:auto;padding:14px 16px 28px;scrollbar-width:thin;position:relative;z-index:4}
.kp-view{flex:1;min-width:0;position:relative;background:#FFFFFF}
.kp-view canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;outline:none}
.kp-sheet-head{display:none}

/* segmented tracks: tabs, piece colour, set count */
.kp-tabs,.kp-seg{display:flex;gap:4px;background:var(--track);border-radius:999px;padding:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.kp-tabs{margin-bottom:6px}
.kp-tabs button,.kp-seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:10px 8px;font:800 12.5px/1.15 var(--body);color:var(--mute);transition:color .2s}
.kp-tabs button.on,.kp-seg button.on{color:#fff;background:linear-gradient(180deg,var(--turq-l),var(--turq));box-shadow:var(--hi),var(--lo),0 6px 12px -7px rgba(19,142,163,.55)}
.kp-panel h2{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:20px 0 9px}
.kp-hint{font-size:12.5px;line-height:1.45;color:var(--mute);margin:9px 0 0}
.kp-row{display:flex;gap:8px;margin-top:8px}
.kp-row.wrap{flex-wrap:wrap}
.kp-tool{flex:1;justify-content:flex-start;padding:12px 14px;border-radius:18px;font-size:14px}
.kp-tool kbd{margin-left:auto}
.kp-row .kp-btn{flex:1}
.kp-row.wrap .kp-btn{flex:0 1 auto}

/* colourways: plush two-colour spheres */
.kp-sets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kp-set{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;border-radius:16px;padding:7px 2px;font:700 11.5px/1.1 var(--body);color:var(--text)}
.kp-set .dot{width:42px;height:42px;border-radius:50%;position:relative;background:conic-gradient(from 45deg,var(--a) 0 50%,var(--b) 0 100%);
  box-shadow:0 8px 14px -8px rgba(40,55,75,.55),inset 0 -4px 7px rgba(0,0,0,.12);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kp-set .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 50% at 34% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
.kp-set:hover .dot{transform:scale(1.08)}
.kp-set.on{background:var(--track)}
.kp-set.on .dot{transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--turq),0 10px 18px -8px rgba(19,142,163,.6)}

.kp-size{font:700 22px/1.1 var(--mono);color:var(--ink)}
.kp-size small{display:block;font:600 12px/1.3 var(--body);color:var(--mute);margin-top:5px}
.kp-save{display:flex;gap:8px}
.kp-save input{flex:1;min-width:0;border:0;border-radius:999px;padding:11px 15px;background:var(--track);font-size:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.09)}
.kp-save input:focus{outline:3px solid rgba(31,176,200,.5);outline-offset:0}
.kp-list{display:flex;flex-direction:column;gap:8px}
.kp-item{display:flex;align-items:center;gap:10px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--b1),var(--b2));padding:9px 11px;text-align:left;width:100%;box-shadow:var(--hi),0 6px 14px -9px var(--sh)}
.kp-item .n{flex:1;min-width:0;font:700 13.5px/1.2 var(--body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-item .n small{display:block;font:600 11.5px/1.3 var(--body);color:var(--mute)}
.kp-item .sw{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 45deg,var(--a) 0 50%,var(--b) 0 100%);flex:none;box-shadow:0 3px 6px -3px rgba(0,0,0,.4)}
.kp-item .x{border:0;background:none;color:var(--mute);font-size:17px;padding:2px 5px;line-height:1}
.kp-empty{font-size:12.5px;color:var(--mute)}

/* catalogue */
.kp-cat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.kp-tile{position:relative;border:0;border-radius:18px;background:var(--white);padding:0;overflow:hidden;text-align:left;
  box-shadow:0 10px 22px -14px rgba(40,55,75,.45),0 1px 3px rgba(40,55,75,.08);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.kp-tile:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(40,55,75,.5)}
.kp-tile.on{box-shadow:0 0 0 3px var(--turq),0 14px 26px -12px rgba(19,142,163,.55)}
.kp-tile canvas,.kp-tile .ph{display:block;width:100%;aspect-ratio:4/3;background:#FFFFFF}
.kp-tile .num{position:absolute;top:8px;left:8px;font:700 12px/1 var(--mono);color:#fff;border-radius:999px;padding:5px 8px;background:linear-gradient(180deg,var(--turq-l),var(--turq));box-shadow:var(--hi),0 4px 8px -4px rgba(19,142,163,.7)}
.kp-tile .meta{display:block;padding:8px 10px 10px}
.kp-tile .meta b{display:block;font:800 13px/1.15 var(--body);color:var(--ink)}
.kp-tile .meta small{font:600 11px/1.2 var(--body);color:var(--mute)}
.kp-tile .two{position:absolute;top:8px;right:8px;font:800 10px/1 var(--body);color:var(--ink);border-radius:999px;padding:5px 7px;background:linear-gradient(180deg,var(--lime-l),var(--lime));box-shadow:var(--hi),0 4px 8px -4px rgba(140,165,35,.7)}

/* view overlays */
.kp-chip{position:absolute;left:14px;top:14px;z-index:2;border-radius:999px;padding:8px 13px;font:700 12.5px/1 var(--body);color:var(--ink);pointer-events:none;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:var(--hi),0 7px 16px -10px var(--sh)}
.kp-chip i{width:11px;height:11px;border-radius:50%;background:var(--c,#999);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.25)}
.kp-warn{position:absolute;left:14px;top:58px;z-index:2;max-width:min(420px,calc(100% - 28px));background:var(--white);border-radius:14px;padding:10px 13px 10px 16px;font:600 13px/1.35 var(--body);color:var(--ink);
  box-shadow:inset 5px 0 0 var(--warn),0 10px 22px -12px rgba(224,40,60,.55)}
.kp-warn.amber{box-shadow:inset 5px 0 0 var(--amber),0 10px 22px -12px rgba(242,161,0,.55)}
.kp-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,12px);z-index:3;background:rgba(31,39,51,.92);color:#fff;border-radius:999px;padding:11px 18px;font:700 13.5px/1.25 var(--body);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(560px,calc(100% - 28px));text-align:center;box-shadow:0 12px 26px -12px rgba(20,30,45,.6)}
.kp-toast.show{opacity:1;transform:translate(-50%,0)}
.kp-steps{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px;background:var(--white);border-radius:999px;padding:7px;
  box-shadow:0 14px 30px -14px rgba(30,45,65,.5),0 2px 6px rgba(30,45,65,.08)}
.kp-steplabel{font:700 14px/1 var(--mono);color:var(--ink);padding:0 6px;white-space:nowrap}
.kp-viewbar{position:absolute;right:14px;top:14px;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 200px)}
.kp-buildname{font:800 15px/1.1 var(--display);color:var(--ink);background:var(--white);border-radius:999px;padding:9px 14px;box-shadow:0 8px 18px -12px rgba(40,55,75,.55)}
.kp-sound{position:absolute;right:16px;bottom:18px;z-index:3;width:46px;height:46px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--turq-d);
  background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:var(--hi),var(--lo),0 8px 18px -9px var(--sh);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.kp-sound svg{width:22px;height:22px}
.kp-sound:hover{transform:scale(1.07)}
.kp-sound:active{transform:scale(.94)}
.kp-sound.off{color:var(--mute)}
.kp-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#FFFFFF;font:700 17px/1 var(--display);color:var(--ink);transition:opacity .45s}
.kp-loading.out{opacity:0;pointer-events:none}
.kp-spin{display:flex;gap:8px}
.kp-spin i{width:20px;height:20px;border-radius:6px;background:var(--turq);box-shadow:inset 0 2px 1px rgba(255,255,255,.6),0 6px 10px -5px rgba(19,142,163,.7);animation:kp-hop .9s cubic-bezier(.3,1.6,.5,1) infinite}
.kp-spin i:nth-child(2){background:var(--lime);box-shadow:inset 0 2px 1px rgba(255,255,255,.6),0 6px 10px -5px rgba(140,165,35,.7);animation-delay:.12s}
.kp-spin i:nth-child(3){background:var(--rasp);box-shadow:inset 0 2px 1px rgba(255,255,255,.6),0 6px 10px -5px rgba(190,44,98,.7);animation-delay:.24s}
@keyframes kp-hop{0%,60%,100%{transform:none}30%{transform:translateY(-12px) rotate(8deg)}}

/* help */
.kp-help{position:absolute;inset:0;z-index:10;background:rgba(31,39,51,.28);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.kp-help[hidden]{display:none}
.kp-card{background:var(--white);border-radius:28px;box-shadow:0 30px 60px -24px rgba(20,30,45,.55);padding:28px 30px;max-width:470px;width:100%}
.kp-card h3{font:800 30px/1 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.kp-steps-list{margin:0 0 22px;padding-left:20px;font-size:15px;line-height:1.5}
.kp-steps-list li{margin:6px 0}
.kp-steps-list b{font:700 12px/1 var(--mono);background:var(--track);border-radius:6px;padding:3px 6px}
.kp-steps-list .touch{display:none}

/* mobile bar */
.kp-bar{display:none}
@media (max-width:980px){
  :root{--top:58px}
  .kp-top{gap:10px;padding:0 10px}
  .kp-brand{height:36px;width:50px}
  .kp-title{display:none}
  .kp-tray{gap:5px}
  .kp-tray .lbl{display:none}
  .kp-tray .grp{padding:4px 7px 4px 5px}
  .kp-tray .grp i{width:10px;height:10px}
  .kp-tray .grp i.w{width:11px;height:11px}
  .kp-cta{padding:11px 14px;font-size:13px}
  .kp-cta b{display:none}
  .kp-lang button{padding:6px 8px}
  .kp-panel{position:absolute;left:0;right:0;bottom:0;width:auto;max-height:76%;border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.3,1);box-shadow:0 -14px 40px rgba(20,30,45,.2);padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .kp.sheet .kp-panel{transform:none}
  .kp-sheet-head{display:flex;align-items:center;justify-content:space-between;font:800 16px/1 var(--display);color:var(--ink);margin:0 0 12px}
  .kp-x{width:36px;height:36px;border:0;border-radius:50%;position:relative;background:linear-gradient(180deg,#fff,#EEF1F4);box-shadow:var(--hi),0 6px 12px -7px rgba(60,80,105,.5)}
  .kp-x::before,.kp-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.4px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
  .kp-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .kp-bar{display:flex;flex:none;gap:2px;justify-content:space-around;background:var(--white);box-shadow:0 -8px 24px -16px rgba(30,45,65,.4);padding:6px 4px calc(6px + env(safe-area-inset-bottom));position:relative;z-index:5}
  .kp-bar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;border-radius:14px;padding:7px 1px;font:700 10px/1.05 var(--body);color:var(--text);min-width:0;overflow:hidden}
  .kp-bar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kp-bar button i[data-ico]{width:22px;height:22px}
  .kp-bar button.on{color:#fff;background:linear-gradient(180deg,var(--turq-l),var(--turq));box-shadow:var(--hi),0 6px 12px -7px rgba(19,142,163,.55)}
  .kp-steps{bottom:14px;gap:6px;padding:5px}
  .kp-steps .kp-btn{padding:9px 11px}
  .kp-viewbar{top:auto;bottom:14px;right:70px;max-width:calc(100% - 84px)}
  .kp-viewbar .kp-btn{padding:10px 13px;font-size:13px}
  .kp-sound{right:12px;bottom:14px;width:44px;height:44px}
  .kp-chip{left:10px;top:10px}
  .kp-warn{left:10px;top:52px}
  .kp-buildname{display:none}
  .kp-steps-list .touch{display:list-item}
  .kp-steps-list .desk{display:none}
  .kp-card{padding:22px}
  .kp-card h3{font-size:26px}
}
@media (max-width:420px){ .kp-tray .num{font-size:12px} .kp-cta{padding:10px 12px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* embed (site hero): stage only, a small speaker stays */
.kp.embed .kp-top,.kp.embed .kp-panel,.kp.embed .kp-bar,.kp.embed .kp-chip,.kp.embed .kp-warn,.kp.embed .kp-viewbar,.kp.embed .kp-steps,.kp.embed .kp-help{display:none!important}
.kp.embed .kp-view canvas{cursor:pointer}
.kp.embed .kp-sound{width:38px;height:38px;right:14px;bottom:14px}
.kp.embed .kp-sound svg{width:18px;height:18px}
.kp.clear,.kp.clear .kp-view,html.clear,html.clear body{background:transparent!important}
.kp.clear .kp-loading{background:transparent}

/* ===================================================================== v3.1 skin (8 Oct 2026)
   Ilya: "the background more white, not beige; the buttons more modern and 3D; the font just like our logo";
   "the main logo more vivid: the 3D realistic version". So: a white studio, the 3D plush logo in the bar,
   Calibri Bold / Carlito for every heading, button, label and number (Inter stays for running text), and every
   control is the sites' plush pillow (kubivo.com plush.css + fluid.css): fabric weave over a puffy top light,
   a soft inner low, a coloured glow under it, a squish when pressed. Remove this block to roll the look back. */
.kp-btn,.kp-tool,.kp-cta,.kp-sound,.kp-chip,.kp-item,.kp-x,.kp-tile .num,.kp-tile .two,
.kp-tabs button.on,.kp-seg button.on,.kp-lang button.on,.kp-bar button.on{
  --f:#FFFFFF;--fh:#FFFFFF;--fl:#E4E8EC;--glow:rgba(52,72,96,.30);--fg:var(--ink);
  background-color:var(--f)!important;
  background-image:url(assets/plush-weave.webp),radial-gradient(130% 120% at 50% 0%,var(--fh) 0%,var(--f) 52%,var(--fl) 100%)!important;
  background-size:190px 190px,100% 100%!important;background-blend-mode:soft-light,normal!important;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.62),inset 0 -6px 11px rgba(0,0,0,.11),0 11px 20px -9px var(--glow),0 2px 5px rgba(27,31,39,.10)!important;
  color:var(--fg)}
.kp-btn.on,.kp-tool.on,.kp-btn.ink,.kp-tabs button.on,.kp-seg button.on,.kp-lang button.on,.kp-bar button.on,.kp-tile .num{
  --f:#14A0C6;--fh:#4CC3E4;--fl:#0C7C9C;--glow:rgba(20,160,198,.50);--fg:#FFFFFF;text-shadow:0 1px 0 rgba(0,60,80,.22)}
.kp-btn.pink,.kp-cta{--f:#D81B66;--fh:#F24B8B;--fl:#A90F4B;--glow:rgba(216,27,102,.50);--fg:#FFFFFF;text-shadow:0 1px 0 rgba(90,0,30,.22)}
.kp-btn.lime,.kp-tile .two{--f:#A6C02A;--fh:#C8DE52;--fl:#7C9017;--glow:rgba(166,192,42,.50);--fg:#1B2408;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.kp-btn.ghost{background:transparent!important;box-shadow:none!important}
.kp-btn,.kp-tool,.kp-cta,.kp-sound,.kp-x{transition:transform .22s cubic-bezier(.3,1.6,.5,1),box-shadow .22s,filter .22s}
.kp-btn:hover,.kp-tool:hover,.kp-cta:hover,.kp-sound:hover{transform:translateY(-2px) scale(1.03);filter:saturate(1.06) brightness(1.02);
  box-shadow:inset 0 3px 2px rgba(255,255,255,.62),inset 0 -6px 11px rgba(0,0,0,.11),0 16px 26px -10px var(--glow),0 3px 7px rgba(27,31,39,.12)!important}
.kp-btn:active,.kp-tool:active,.kp-cta:active,.kp-sound:active,.kp-x:active{transform:translateY(1px) scale(.95);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -2px 8px rgba(0,0,0,.18),0 5px 10px -6px var(--glow)!important}
.kp-chip{pointer-events:none}

/* type: Calibri Bold for everything that is a word on a control, a heading or a number */
.kp-btn,.kp-tool,.kp-cta,.kp-tabs button,.kp-seg button,.kp-lang button,.kp-bar button,.kp-set,.kp-chip,
.kp-item .n,.kp-tile .meta b,.kp-buildname,.kp-steplabel,.kp-sheet-head,.kp-toast,.kp-tray,.kp-tray .num,.kp-size,
.kp-tile .num,.kp-tile .two,.kp-cta b,.kp-steps-list b,kbd{font-family:var(--display)!important;font-weight:700!important;letter-spacing:.005em!important}
.kp-title b{font:700 27px/1 var(--display);letter-spacing:-.01em}
.kp-title span{font-size:12.5px}
.kp-card h3{font:700 34px/1 var(--display);letter-spacing:-.01em}
.kp-panel h2{font:700 15.5px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--ink);margin:22px 0 10px}
.kp-tray .lbl{font:700 12.5px/1.05 var(--display);text-transform:none;letter-spacing:0;max-width:90px}
.kp-btn{font-size:15px}
.kp-tool{font-size:16px}
.kp-cta{font-size:17px}
.kp-cta b{font-size:16px}
.kp-tabs button,.kp-seg button{font-size:14.5px}
.kp-lang button{font-size:14px;letter-spacing:.02em!important}
.kp-set{font-size:13px}
.kp-buildname{font-size:18px}
.kp-steplabel{font-size:16px}
.kp-size{font-size:27px}
.kp-tray .num{font-size:16px}
.kp-tile .meta b{font-size:15px}
.kp-tile .num{font-size:13px}
.kp-item .n{font-size:15px}
kbd{font-size:11px}

/* the 3D plush logo in the bar */
.kp-brand{height:58px;width:auto;flex:none;display:flex;align-items:center}
.kp-brand img{display:block;height:100%;width:auto}
@media (max-width:980px){
  .kp-brand{height:40px;width:auto}
  .kp-cta{font-size:15px}
  .kp-bar button{font-size:11.5px}
  .kp-viewbar .kp-btn{font-size:14px}
  .kp-card h3{font-size:29px}
}
@media (max-width:420px){.kp-tray .num{font-size:13px}}

/* ---------- v3.2 (8 Oct 2026): room toggle, build-complete confetti, stars on finished builds ---------- */
.kp-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.kp-confetti i{position:absolute;top:-24px;border-radius:3px;opacity:.95;animation:kpFall var(--d,2.4s) cubic-bezier(.25,.6,.45,1) var(--w,0s) forwards}
@keyframes kpFall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,540deg));opacity:.85}}
.kp-tile{position:relative}
.kp-tile.done::after{content:"\2605";position:absolute;top:8px;right:10px;font:700 20px/1 Calibri,Carlito,sans-serif;color:#F2B705;text-shadow:0 1px 3px rgba(27,31,39,.25)}

/* ---------- v3.3 (8 Oct 2026): Challenges (the Play tab, the chart card, the win screen) ---------- */
.kp-tabs .kg-tab{color:#A90F4B}
.kp-tabs button{white-space:nowrap}
/* the stage rule '.kp-view canvas' (absolute, full size) is meant for the WebGL canvas only */
.kp-view .kg-card canvas{position:static!important;inset:auto!important;height:auto!important}
.kp-view .kg-card #gChart{height:auto!important}
.kg-player{background:linear-gradient(160deg,#F3FAFC,#E3F2F7);border-radius:20px;padding:14px 16px;margin:4px 0 12px}
.kg-me{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kg-me b{font:700 22px/1.1 Calibri,Carlito,sans-serif;color:#0C7C9C}
.kg-me span{font:700 16px/1 Calibri,Carlito,sans-serif;color:#1B1F27}
.kg-lvl{height:10px;border-radius:999px;background:rgba(12,124,156,.14);margin:10px 0 6px;overflow:hidden}
.kg-lvl i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#14A0C6,#A6C02A)}
.kg-player small{font-size:12px;color:#5D636E}
.kg-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kg-badge{font:700 12px/1 Calibri,Carlito,sans-serif;padding:6px 9px;border-radius:999px;background:rgba(27,31,39,.06);color:#9AA0A8}
.kg-badge.on{background:#F2C230;color:#3A2A00;box-shadow:0 4px 10px -4px rgba(242,194,48,.8)}
#gList h2{margin:16px 0 8px}
.kg-tile .kg-pts{position:absolute;top:8px;left:10px;font:700 13px/1 Calibri,Carlito,sans-serif;color:#fff;background:#D81B66;border-radius:999px;padding:5px 8px}
.kg-tile .kg-stars{position:absolute;top:8px;right:10px;font-size:15px;letter-spacing:1px}
.kg-stars i,.kg-win-stars i{font-style:normal;color:rgba(27,31,39,.18)}
.kg-stars i.on,.kg-win-stars i.on{color:#F2B705;text-shadow:0 1px 2px rgba(27,31,39,.2)}
.kg-tile.won{box-shadow:0 0 0 2px rgba(242,183,5,.55)}
.kg-card{position:absolute;top:56px;right:14px;z-index:20;width:292px;max-height:calc(100% - 80px);overflow:auto;background:rgba(255,255,255,.96);
  border-radius:22px;padding:14px 14px 12px;box-shadow:0 24px 50px -24px rgba(27,31,39,.45),0 2px 8px rgba(27,31,39,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kg-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kg-head b{font:700 20px/1.1 Calibri,Carlito,sans-serif;color:#1B1F27}
.kg-head .kg-pts{font:700 14px/1 Calibri,Carlito,sans-serif;color:#fff;background:#D81B66;border-radius:999px;padding:6px 9px}
#gThumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;margin:10px 0 8px;background:#fff}
.kg-prog{display:flex;align-items:center;gap:10px}
.kg-bar{flex:1;height:12px;border-radius:999px;background:rgba(27,31,39,.08);overflow:hidden}
.kg-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#A6C02A,#14A0C6);transition:width .35s}
.kg-prog span{font:700 14px/1 Calibri,Carlito,sans-serif;color:#1B1F27;white-space:nowrap}
.kg-meta{display:flex;justify-content:space-between;margin:8px 0 4px;font:700 14px/1.2 Calibri,Carlito,sans-serif;color:#5D636E}
.kg-warn{color:#D81B66}
.kg-card h3{font:700 15px/1.2 Calibri,Carlito,sans-serif;color:#1B1F27;margin:10px 0 4px}
#gChart{width:100%;display:block}
.kg-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kg-btns .kp-btn{flex:1}
.kg-win{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(238,244,246,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.kg-win[hidden]{display:none}
.kg-win-box{width:min(420px,92%);background:#fff;border-radius:28px;padding:22px 24px;box-shadow:0 40px 80px -30px rgba(27,31,39,.5);text-align:center;animation:kgPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes kgPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.kg-win-stars{font-size:46px;letter-spacing:6px;line-height:1}
.kg-win-box h2{font:700 26px/1.15 Calibri,Carlito,sans-serif;color:#1B1F27;margin:8px 0 12px}
.kg-row,.kg-sum{display:flex;justify-content:space-between;padding:7px 2px;border-bottom:1px solid rgba(27,31,39,.07);font:400 15px/1.3 Inter,sans-serif;color:#3D434D}
.kg-row b{font-family:Calibri,Carlito,sans-serif;color:#0C7C9C}
.kg-sum{border:0;font:700 20px/1.2 Calibri,Carlito,sans-serif;color:#1B1F27}
.kg-sum b{color:#D81B66;font-size:26px}
.kg-rank{font:700 15px/1.3 Calibri,Carlito,sans-serif;color:#0C7C9C;margin:6px 0 4px}
.kg-win-box .kg-badges{justify-content:center}
@media (max-width:980px){
  .kg-card{top:auto;bottom:86px;right:10px;left:10px;width:auto;max-height:42vh}
  .kg-card #gThumb{display:none}
}