:root{
  --ink:#28243d; --muted:#736c88; --line:rgba(114,97,255,.16); --card:rgba(255,255,255,.82);
  --purple:#7b61ff; --pink:#ef56a5; --blue:#63a8ff; --green:#48d38a; --yellow:#ffd85a; --red:#ff5b61; --orange:#ff9850;
  --shadow:0 24px 70px rgba(67,58,110,.16); --radius:28px;
}
*{box-sizing:border-box} html{min-height:100%;background:#f7f6ff} body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);overflow-x:hidden;touch-action:manipulation}
button{font:inherit;color:inherit} .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 12% 8%,#fff4c7 0 15%,transparent 34%),radial-gradient(circle at 88% 5%,#ffd5ed 0 17%,transparent 36%),linear-gradient(140deg,#f9fff7,#fbf8ff 45%,#eef8ff)}.bg span{position:absolute;border-radius:999px;filter:blur(20px);opacity:.65}.bg span:nth-child(1){width:230px;height:230px;background:#d9fbe9;left:-60px;bottom:5%}.bg span:nth-child(2){width:240px;height:240px;background:#e9ddff;right:-80px;top:22%}.bg span:nth-child(3){width:180px;height:180px;background:#fff1b6;left:45%;top:8%}
.app{width:min(1180px,100%);margin:0 auto;padding:16px clamp(12px,3vw,24px) 40px}.top-card,.card,.mode-tabs{background:var(--card);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.top-card{border-radius:30px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:14px}.logo-grid{width:54px;height:54px;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(123,97,255,.12),0 12px 25px rgba(123,97,255,.12)}.logo-grid i{border-radius:9px}.logo-grid i:nth-child(1){background:var(--yellow)}.logo-grid i:nth-child(2){background:var(--pink)}.logo-grid i:nth-child(3){background:var(--green)}.logo-grid i:nth-child(4){background:var(--blue)}.eyebrow{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#716983}.top-card h1{margin:0;font-size:clamp(32px,7vw,58px);line-height:.92;letter-spacing:-.06em}.tagline{margin:7px 0 0;color:var(--muted);font-weight:700}.status,.badge{border-radius:999px;background:#f1edff;border:1px solid #ded5ff;color:#664dff;font-weight:900;padding:10px 14px;white-space:nowrap}.mode-tabs{position:sticky;top:10px;z-index:10;margin:14px 0 18px;padding:7px;border-radius:999px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mode-tab,.toggle,.turn-type{border:0;border-radius:999px;background:transparent;padding:13px 12px;font-weight:1000;color:#716983;cursor:pointer}.mode-tab.active,.toggle.active,.turn-type.active{color:white;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 14px 30px rgba(239,86,165,.24)}.view{display:none}.view.active{display:block}.home-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.card{border-radius:var(--radius);padding:22px}.intro{min-height:320px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,245,203,.72))}.intro h2,.section-head h2{margin:0;font-size:clamp(30px,5vw,50px);line-height:.98;letter-spacing:-.055em}.intro p{max-width:560px;color:var(--muted);font-weight:700;font-size:17px;line-height:1.55}.actions{display:flex;gap:10px;flex-wrap:wrap}.primary,.secondary,.text{border-radius:17px;border:0;padding:14px 18px;font-weight:1000;cursor:pointer}.primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 16px 34px rgba(123,97,255,.24)}.secondary{background:#fff;border:1px solid rgba(113,105,131,.14);color:#6d657f;box-shadow:0 12px 28px rgba(62,50,97,.08)}.text{background:transparent;color:#755cff}.feature{appearance:none;text-align:left;border:0;border-radius:26px;padding:22px;min-height:150px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;cursor:pointer}.feature span{font-size:34px}.feature strong{font-size:22px}.feature em{font-style:normal;color:rgba(40,36,61,.72);font-weight:800;line-height:1.35}.yellow{background:linear-gradient(145deg,#fff7c9,#fff)}.pink{background:linear-gradient(145deg,#ffe3f3,#fff)}.blue{background:linear-gradient(145deg,#e2f1ff,#fff)}.layout{display:grid;gap:18px}.solver-layout,.play-layout{grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr)}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.section-head.compact h2{font-size:25px}.stage-card{overflow:hidden}.solver-stage,.canvas-stage{position:relative;min-height:430px;border-radius:27px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(155deg,rgba(255,246,207,.65),rgba(235,249,255,.7));border:1px solid rgba(123,97,255,.08)}.solver-stage:before,.canvas-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(40,36,61,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(40,36,61,.04) 1px,transparent 1px);background-size:18px 18px;mask-image:radial-gradient(circle at 50% 45%,#000 0 55%,transparent 80%);opacity:.75}.solver-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.solver-tip{pointer-events:none}.canvas-stage{min-height:450px}.canvas-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.touch-tip{position:absolute;z-index:5;left:50%;bottom:20px;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(62,50,97,.12);border:1px solid rgba(123,97,255,.09);color:#654fff;padding:10px 14px;font-weight:1000;white-space:nowrap}.glow{position:absolute;right:22px;top:22px;z-index:6;width:76px;height:76px;border-radius:26px;background:linear-gradient(135deg,#ffd95b,#ff5e77);display:grid;place-items:center;color:white;font-size:28px;font-weight:1000;box-shadow:0 20px 40px rgba(255,94,119,.25)}.hidden{display:none!important}.message-card{margin-top:16px;border:1px solid rgba(123,97,255,.12);border-radius:23px;background:rgba(255,255,255,.74);padding:18px}.message-card span{display:inline-block;margin-bottom:10px;border-radius:999px;background:#f1edff;color:#654fff;padding:7px 12px;font-size:13px;font-weight:1000}.message-card strong{display:block;font-size:21px;line-height:1.2}.message-card p{margin:9px 0 0;color:var(--muted);font-weight:750;line-height:1.5}.playback-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.playback-row .full{grid-column:1/-1}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.color-btn{border:2px solid rgba(40,36,61,.1);border-radius:17px;padding:12px 8px;font-weight:1000;cursor:pointer;box-shadow:inset 0 -10px 18px rgba(0,0,0,.06)}.color-btn.active{outline:4px solid rgba(123,97,255,.20);transform:translateY(-1px)}.paint-help,.note{color:var(--muted);font-weight:800}.net{display:grid;grid-template-columns:repeat(12,26px);grid-template-rows:repeat(9,26px);gap:3px;justify-content:center;margin:18px auto}.sticker{width:26px;height:26px;border:2px solid rgba(40,36,61,.28);border-radius:7px;box-shadow:inset 0 -6px 9px rgba(0,0,0,.08);cursor:pointer}.sticker.center{box-shadow:0 0 0 3px rgba(0,0,0,.1),inset 0 -6px 9px rgba(0,0,0,.08);cursor:not-allowed}.counts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.count{border-radius:14px;background:#fff;border:1px solid rgba(113,105,131,.12);padding:9px;font-weight:900;color:#665f76}.count.good{color:#14825a;background:#effff8}.wrap{margin-top:14px}.toggle-row,.turn-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;background:rgba(40,36,61,.05);border-radius:22px;padding:7px}.turn-types{grid-template-columns:repeat(3,1fr);margin-bottom:16px}.main-actions{margin-top:16px}.move-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.move-btn{border:0;border-radius:18px;padding:14px 12px;min-height:72px;text-align:left;font-weight:1000;color:#fff;box-shadow:inset 0 -20px 26px rgba(0,0,0,.10);cursor:pointer}.move-btn small{display:block;margin-top:7px;color:rgba(255,255,255,.85);font-weight:900}.mini-lesson{margin-top:16px;border-radius:22px;background:#fff;border:1px solid rgba(113,105,131,.12);padding:16px;color:#756e86;font-weight:750}.mini-lesson h3{margin:0 0 8px;color:var(--ink)}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,120px);background:rgba(40,36,61,.92);color:#fff;border-radius:999px;padding:13px 18px;font-weight:900;box-shadow:0 18px 42px rgba(40,36,61,.22);z-index:99;transition:.25s ease}.toast.show{transform:translate(-50%,0)}
@media(max-width:900px){.home-grid,.solver-layout,.play-layout{grid-template-columns:1fr}.controls-card{order:2}.paint-card{order:2}.solver-stage,.canvas-stage{min-height:390px}.canvas-stage{min-height:420px}.top-card{align-items:flex-start}.status{display:none}}
@media(max-width:560px){.app{padding:10px 10px 30px}.top-card,.card{border-radius:24px;padding:16px}.mode-tabs{grid-template-columns:1fr;border-radius:24px}.mode-tab{padding:12px}.brand{align-items:flex-start}.logo-grid{width:46px;height:46px}.top-card h1{font-size:40px}.intro h2,.section-head h2{font-size:34px}.section-head{display:block}.badge{display:inline-block;margin-top:10px}.solver-stage{min-height:335px}.solver-stage canvas{height:100%}.canvas-stage{min-height:360px}.touch-tip{font-size:12px;bottom:14px}.glow{width:58px;height:58px;border-radius:20px;font-size:23px}.palette{grid-template-columns:repeat(2,1fr)}.net{grid-template-columns:repeat(12,21px);grid-template-rows:repeat(9,21px);gap:2px}.sticker{width:21px;height:21px;border-radius:6px}.counts{grid-template-columns:1fr}.move-grid{grid-template-columns:repeat(2,1fr)}.actions .primary,.actions .secondary,.actions .text{flex:1 1 130px}.playback-row{grid-template-columns:1fr}.playback-row .full{grid-column:auto}}

/* clean-final-v5 solver polish */
.stage-card{position:relative}.stage-card:after{content:"";position:absolute;inset:auto 22px 18px auto;width:110px;height:110px;border-radius:999px;background:radial-gradient(circle,#fff7bd,rgba(255,247,189,0));opacity:.35;pointer-events:none}.solver-stage,.canvas-stage{box-shadow:inset 0 1px 0 rgba(255,255,255,.88), inset 0 -35px 80px rgba(99,168,255,.08), 0 20px 55px rgba(70,60,110,.08)}.solver-stage canvas,.canvas-stage canvas{filter:drop-shadow(0 20px 30px rgba(40,36,61,.16))}.stage-bubbles{position:absolute;inset:0;z-index:1;pointer-events:none}.stage-bubbles span{position:absolute;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid rgba(123,97,255,.10);box-shadow:0 14px 35px rgba(123,97,255,.10)}.stage-bubbles span:nth-child(1){width:86px;height:86px;left:8%;top:14%;background:linear-gradient(135deg,rgba(255,216,90,.32),rgba(255,255,255,.55))}.stage-bubbles span:nth-child(2){width:64px;height:64px;right:13%;top:19%;background:linear-gradient(135deg,rgba(239,86,165,.22),rgba(255,255,255,.55))}.stage-bubbles span:nth-child(3){width:100px;height:100px;right:8%;bottom:18%;background:linear-gradient(135deg,rgba(72,211,138,.18),rgba(255,255,255,.55))}.solver-mini-panel{position:absolute;z-index:6;top:18px;left:18px;display:flex;gap:8px;flex-wrap:wrap}.solver-mini-panel span,.solver-mini-panel button{border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(123,97,255,.10);box-shadow:0 12px 28px rgba(62,50,97,.10);padding:8px 11px;color:#654fff;font-weight:1000;font-size:13px}.solver-mini-panel button{cursor:pointer}.paint-card{background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(251,248,255,.80) 45%,rgba(255,246,207,.38));position:relative;overflow:hidden}.paint-card:before{content:"";position:absolute;right:-56px;top:-56px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(239,86,165,.16),transparent 66%);pointer-events:none}.helper-card{margin-top:16px;border-radius:22px;padding:15px 16px;background:linear-gradient(135deg,#fff,rgba(241,237,255,.86));border:1px solid rgba(123,97,255,.12);box-shadow:0 14px 32px rgba(62,50,97,.07)}.helper-card strong{display:block;font-size:16px;margin-bottom:5px}.helper-card p{margin:0;color:var(--muted);font-weight:800;line-height:1.45}.color-btn,.sticker,.primary,.secondary,.mode-tab{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.color-btn:hover,.sticker:hover,.primary:hover,.secondary:hover{transform:translateY(-1px);filter:saturate(1.04)}.sticker:hover{box-shadow:0 0 0 4px rgba(123,97,255,.16), inset 0 -6px 9px rgba(0,0,0,.08)}.solver-stage.is-turning .solver-tip,.canvas-stage.is-turning .touch-tip{transform:translateX(-50%) translateY(-2px);background:rgba(255,255,255,.95)}
@media(max-width:560px){.solver-mini-panel{top:12px;left:12px}.solver-mini-panel span,.solver-mini-panel button{font-size:11px;padding:7px 9px}.stage-bubbles span:nth-child(3){display:none}}

/* v6 additions */
.speed-panel{margin-top:14px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(241,237,255,.72));border:1px solid rgba(123,97,255,.12);padding:14px 16px;box-shadow:0 14px 32px rgba(62,50,97,.07)}
.speed-panel>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--ink);font-weight:1000}.speed-panel span{border-radius:999px;background:#fff;color:#654fff;border:1px solid rgba(123,97,255,.12);padding:6px 10px;font-weight:1000}.speed-panel input{width:100%;accent-color:var(--purple);cursor:pointer}.play-stage .stage-bubbles span:nth-child(1){left:9%;top:12%;background:linear-gradient(135deg,rgba(99,168,255,.18),rgba(255,255,255,.58))}.play-stage .stage-bubbles span:nth-child(2){right:11%;top:15%;background:linear-gradient(135deg,rgba(255,216,90,.26),rgba(255,255,255,.58))}.play-stage .stage-bubbles span:nth-child(3){right:7%;bottom:16%;background:linear-gradient(135deg,rgba(239,86,165,.18),rgba(255,255,255,.58))}.play-mini-panel{top:18px;left:18px}.play-mini-panel span{background:rgba(255,255,255,.86)}.solver-stage canvas,.canvas-stage canvas{cursor:grab}.solver-stage canvas:active,.canvas-stage canvas:active{cursor:grabbing}
@media(max-width:560px){.speed-panel{padding:12px 13px}.speed-panel>div{font-size:14px}.play-mini-panel{top:12px;left:12px}.play-mini-panel span{font-size:11px;padding:7px 9px}}

/* clean-final-v8 polish: nicer mobile color picker / cube net area */
.paint-card .section-head.compact{margin-bottom:12px}
.paint-card .section-head.compact h2{letter-spacing:-.035em;line-height:1.05}
.paint-help{display:inline-flex;align-items:center;gap:8px;margin:14px 0 8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(123,97,255,.11);box-shadow:0 10px 24px rgba(62,50,97,.06)}
.net{--sticker-size:clamp(20px,5.6vw,26px);--sticker-gap:3px;position:relative;width:min(100%,calc((var(--sticker-size) * 12) + (var(--sticker-gap) * 11) + 18px));padding:9px;margin:14px auto 16px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(241,237,255,.42));border:1px solid rgba(123,97,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(62,50,97,.06);grid-template-columns:repeat(12,var(--sticker-size));grid-template-rows:repeat(9,var(--sticker-size));gap:var(--sticker-gap)}
.sticker{width:var(--sticker-size);height:var(--sticker-size)}
.counts{margin-top:6px}.count{box-shadow:0 10px 20px rgba(62,50,97,.045)}
.helper-card{position:relative}.helper-card:after{content:"✨";position:absolute;right:14px;top:12px;opacity:.55}
@media(max-width:760px){
  .paint-card{padding:18px;background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(251,248,255,.86) 42%,rgba(255,246,207,.44))}
  .paint-card .section-head.compact h2{font-size:24px}
  .palette{grid-template-columns:repeat(3,1fr);gap:8px}
  .color-btn{min-height:47px;padding:10px 6px;border-radius:15px;font-size:15px}
  .counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.count{font-size:14px;padding:9px 8px;text-align:center}
  .paint-card .actions.wrap{display:grid;grid-template-columns:1fr 1fr;gap:9px}.paint-card .actions.wrap button{width:100%;padding:13px 10px}
}
@media(max-width:390px){
  .net{--sticker-size:19px;--sticker-gap:2px;padding:7px;border-radius:18px}
  .palette{gap:7px}.color-btn{font-size:14px}.counts{grid-template-columns:1fr 1fr}.count{font-size:13px}
}


/* clean-final-v8: make the color net feel like a real cube map instead of floating squares */
.net{
  --sticker-size:clamp(17px,4.45vw,24px);
  --sticker-gap:3px;
  display:grid;
  grid-template-areas:
    ". u . ."
    "l f r b"
    ". d . .";
  grid-template-columns:repeat(4,max-content);
  grid-template-rows:repeat(3,max-content);
  justify-content:center;
  align-items:center;
  gap:8px;
  width:min(100%, 430px);
  padding:14px;
  margin:16px auto 16px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,216,90,.18), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(99,168,255,.16), transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(241,237,255,.54));
  border:1px solid rgba(123,97,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 36px rgba(62,50,97,.08);
}
.net:before,.net:after{display:none}
.net-face{
  display:grid;
  gap:5px;
  padding:7px;
  border-radius:16px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(40,36,61,.08);
  box-shadow:0 10px 22px rgba(62,50,97,.055);
}
.net-face-U{grid-area:u}.net-face-R{grid-area:r}.net-face-F{grid-area:f}.net-face-D{grid-area:d}.net-face-L{grid-area:l}.net-face-B{grid-area:b}
.net-label{
  display:block;
  text-align:center;
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#746d86;
  font-weight:1000;
}
.face-stickers{
  display:grid;
  grid-template-columns:repeat(3,var(--sticker-size));
  grid-template-rows:repeat(3,var(--sticker-size));
  gap:var(--sticker-gap);
}
.sticker{width:var(--sticker-size);height:var(--sticker-size)}
.speed-panel input{accent-color:var(--purple)}
@media(max-width:560px){
  .net{--sticker-size:clamp(15px,4.1vw,19px);--sticker-gap:2px;gap:5px;padding:10px;width:100%;border-radius:20px}
  .net-face{padding:5px;border-radius:13px;gap:4px}
  .net-label{font-size:8px}
  .paint-help{margin-top:12px}
}
@media(max-width:370px){
  .net{--sticker-size:14px;gap:4px;padding:8px}
  .net-face{padding:4px}
}

/* clean-final-v9: simplified Play With Cubie controls + tighter solver face picker */
.quick-actions{
  pointer-events:auto;
  align-items:center;
}
.quick-actions button{
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(123,97,255,.12);
  box-shadow:0 12px 28px rgba(62,50,97,.12);
  padding:8px 12px;
  color:#654fff;
  font-weight:1000;
  font-size:13px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.quick-actions button:hover,.quick-actions button:focus-visible{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 16px 32px rgba(62,50,97,.16);
}
.play-speed-panel{margin-top:16px}
.play-card .main-actions{margin-top:12px}
.play-card .message-card,.play-card .toggle-row{display:none!important}

.paint-card{overflow:visible}
.net{
  --sticker-size:18px;
  --sticker-gap:3px;
  display:grid!important;
  grid-template-areas:none!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  gap:10px!important;
  justify-content:stretch!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  padding:12px!important;
  margin:14px 0 16px!important;
  overflow:visible!important;
}
.net-face-U,.net-face-R,.net-face-F,.net-face-D,.net-face-L,.net-face-B{grid-area:auto!important}
.net-face{
  min-width:0;
  width:100%;
  justify-items:center;
  align-content:start;
  padding:9px 5px!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(249,247,255,.68));
}
.face-stickers{
  justify-content:center;
  grid-template-columns:repeat(3,var(--sticker-size))!important;
  grid-template-rows:repeat(3,var(--sticker-size))!important;
}
.net-label{font-size:9px!important;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticker{width:var(--sticker-size)!important;height:var(--sticker-size)!important;border-radius:6px!important}

@media(max-width:760px){
  .net{--sticker-size:17px;gap:8px!important;padding:10px!important}
  .net-face{padding:7px 4px!important;border-radius:15px!important}
}
@media(max-width:390px){
  .net{--sticker-size:16px;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:8px!important}
  .net-face{padding:6px 3px!important}
  .net-label{font-size:8px!important}
}
@media(max-width:340px){
  .net{--sticker-size:14px;gap:6px!important}
}
@media(max-width:560px){
  .quick-actions{top:12px;left:12px;gap:6px}
  .quick-actions button{font-size:11px;padding:7px 9px}
}


/* clean-final-v10 quick solver fixes */
.solver-mini-panel button{border:0;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(123,97,255,.10);box-shadow:0 12px 28px rgba(62,50,97,.10);padding:8px 11px;color:#654fff;font-weight:1000;font-size:13px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.solver-mini-panel button:hover,.solver-mini-panel button:focus-visible{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 16px 32px rgba(62,50,97,.16)}
@media(max-width:560px){.solver-mini-panel button{font-size:11px;padding:7px 9px}}


/* clean-final-v11: cleaner app header without personal name */
.top-card{
  padding:18px 22px;
  background:
    radial-gradient(circle at 8% 45%,rgba(255,216,90,.16),transparent 28%),
    radial-gradient(circle at 96% 20%,rgba(239,86,165,.12),transparent 26%),
    rgba(255,255,255,.84);
}
.brand{gap:16px}
.logo-grid{width:58px;height:58px;border-radius:20px;transform:rotate(-2deg)}
.top-card .eyebrow{font-size:11px;letter-spacing:.18em;color:#82798f;margin-bottom:3px}
.top-card h1{font-size:clamp(38px,6.5vw,58px);letter-spacing:-.055em}
.tagline{margin-top:8px;font-size:16px;color:#746d86;letter-spacing:-.015em}
.status{background:linear-gradient(135deg,#f4efff,#fff);box-shadow:0 12px 26px rgba(123,97,255,.12)}
@media(max-width:560px){
  .top-card{padding:15px 16px;border-radius:24px;align-items:center}
  .brand{gap:12px}
  .logo-grid{width:48px;height:48px;border-radius:17px}
  .top-card h1{font-size:38px}
  .tagline{font-size:14px;margin-top:5px}
}

/* clean-final-v16: direct paint colors beside the solver cube with clear labels */
.canvas-paint-palette{
  position:absolute;
  z-index:7;
  inset:82px 18px 78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.canvas-paint-palette .paint-stack{
  display:grid;
  gap:16px;
  pointer-events:auto;
}
.canvas-paint-chip{
  appearance:none;
  border:0;
  background:transparent;
  width:64px;
  min-height:86px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  cursor:pointer;
  position:relative;
  color:#5f5775;
  transition:transform .18s ease, filter .18s ease;
}
.canvas-paint-chip .paint-swatch{
  display:block;
  width:58px;
  height:58px;
  border-radius:18px;
  border:3px solid #211d32;
  box-shadow:0 16px 30px rgba(40,36,61,.14), inset 0 -10px 16px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
}
.canvas-paint-chip span{
  display:block;
  max-width:72px;
  z-index:2;
  font-size:10px;
  line-height:1.05;
  font-weight:1000;
  color:#5f5775;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(123,97,255,.14);
  border-radius:999px;
  padding:5px 8px;
  box-shadow:0 8px 18px rgba(62,50,97,.10);
  white-space:nowrap;
  pointer-events:none;
}
.canvas-paint-chip.active{
  transform:translateY(-1px);
}
.canvas-paint-chip.active .paint-swatch{
  transform:scale(1.06);
  outline:5px solid rgba(123,97,255,.26);
  box-shadow:0 20px 42px rgba(123,97,255,.20), inset 0 -10px 16px rgba(0,0,0,.08);
}
.canvas-paint-chip:hover .paint-swatch{filter:saturate(1.05)}
@media(max-width:760px){
  .canvas-paint-palette{inset:62px 10px 64px}
  .canvas-paint-palette .paint-stack{gap:12px}
  .canvas-paint-chip{width:54px;min-height:76px;gap:6px}
  .canvas-paint-chip .paint-swatch{width:46px;height:46px;border-radius:15px;border-width:2.5px}
  .canvas-paint-chip span{font-size:9px;padding:4px 6px;max-width:62px}
}
@media(max-width:430px){
  .canvas-paint-palette{inset:58px 6px 62px}
  .canvas-paint-palette .paint-stack{gap:10px}
  .canvas-paint-chip{width:48px;min-height:68px;gap:5px}
  .canvas-paint-chip .paint-swatch{width:40px;height:40px;border-radius:13px;border-width:2.5px}
  .canvas-paint-chip span{font-size:8.5px;padding:4px 6px;max-width:58px}
}
.solver-stage.paint-active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), inset 0 -35px 80px rgba(123,97,255,.10), 0 24px 60px rgba(123,97,255,.10);
}
.solver-stage.paint-active .solver-tip{
  background:rgba(255,255,255,.95);
  color:#664dff;
}
.solver-mini-panel button.active{
  color:#fff!important;
  background:linear-gradient(110deg,var(--purple),var(--pink))!important;
  box-shadow:0 16px 34px rgba(123,97,255,.24)!important;
}
@media(max-width:760px){
  .canvas-paint-palette{inset:70px 12px 72px}
  .canvas-paint-palette .paint-stack{gap:22px}
  .canvas-paint-chip{width:46px;height:46px;border-radius:15px;border-width:2.5px}
  .canvas-paint-chip span{font-size:9px;padding:4px 6px;top:calc(100% + 6px)}
}
@media(max-width:430px){
  .canvas-paint-palette{inset:66px 8px 66px}
  .canvas-paint-palette .paint-stack{gap:20px}
  .canvas-paint-chip{width:40px;height:40px;border-radius:13px}
  .canvas-paint-chip span{font-size:8.5px;padding:4px 6px;top:calc(100% + 5px)}
}