:root {
  --face: #F5F7FA;
  --hi: #FFFFFF;
  --lo: #B7C0D4;
  --dk: #8591AD;
  --ink: #1E2340;
  --muted: #4A5373;
  --title1: #8FA8FF;
  --title2: #7DE3C3;
  --pink: #A9D6F5;
  --hot: #C9B8FF;
  --mint: #9DF0CF;
  --butter: #FFC2E2;
  --peach: #FF9F5A;
  --ui: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; font-variant-ligatures: none !important; font-feature-settings: "calt" 0, "liga" 0, "clig" 0 !important; }   /* Pixelify Sans turns "fi" into a stray glyph (finder reads "Ander") */
html, body { height: 100%; margin: 0; }
body {
  font: 400 13px/1.25 var(--body);
  color: var(--ink);
  background: var(--pink);
  overflow: hidden;
}
.desktop {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(#ffffffaa 1.5px, transparent 2px) 0 0 / 32px 32px,
    radial-gradient(#ffffff66 1.5px, transparent 2px) 16px 16px / 32px 32px,
    var(--pink);
}
.raised, .window, .btn95, .b95, .taskbar {
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #fff;
}
.sunken {
  background: var(--face);
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk), inset -1px -1px #fff;
}
.window {
  margin: 10px auto 6px;
  padding: 3px;
  flex: 1;
  min-height: 0;
  width: min(1240px, calc(100% - 20px));
  display: flex;
  flex-direction: column;
  box-shadow: 3px 3px 0 #8591AD88, inset -1px -1px var(--lo), inset 1px 1px #fff;
}
.titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, var(--title1), var(--title2));
  color: var(--ink); font: 600 14px var(--ui); padding: 2px 3px; height: 24px; flex: none;
}
.titlebar span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticon { width: 16px; height: 16px; flex: none; }
.tbtns { display: flex; gap: 2px; }
.b95 {
  font: 600 10px var(--ui); width: 18px; height: 16px; padding: 0; color: var(--ink); cursor: default;
  display: grid; place-items: center;
}
.b95:active, .btn95:active, .tool:active, .tool.on {
  border-color: var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow: inset 1px 1px var(--lo);
}
.menubar { display: flex; padding: 2px 0; position: relative; flex: none; font-family: var(--ui); font-size: 14px; }
.menu { padding: 2px 9px; cursor: default; position: relative; }
.menu:hover, .menu.open { background: var(--hot); color: var(--ink); }
.dd {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 190px; padding: 2px;
  background: var(--face); border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: 3px 3px 0 #1E234033; color: var(--ink);
}
.dd div { padding: 4px 22px 4px 18px; white-space: nowrap; }
.dd div:hover { background: var(--hot); }
.dd hr { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 3px 0; }

.body { display: flex; gap: 4px; flex: 1; min-height: 0; padding-top: 2px; }
.toolbox { width: 112px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.tool {
  height: 52px; padding: 0; background: var(--face); display: grid; place-items: center; cursor: default;
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo);
}
.tool.on { background: var(--hot); }
.tool svg { width: 36px; height: 36px; shape-rendering: crispEdges; }
.options { height: 110px; padding: 4px; display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: stretch; }
.opt { height: 18px; display: grid; place-items: center; cursor: default; padding: 0 2px; }
.opt i { display: block; width: 100%; background: var(--ink); }
.opt.on { background: var(--hot); }
.opt.txt { font: 600 13px var(--ui); height: 22px; }
.opt.shape { height: 16px; }
.opt.shape i { height: 100%; background: none; border: 2px solid var(--ink); }
.opt.shape.fill i { background: var(--lo); }
.opt.shape.solid i { background: var(--ink); }

.canvas-area { align-self: flex-start; flex: 1; min-width: 0; background:
  repeating-conic-gradient(#E4EAF5 0 25%, #F5F7FA 0 50%) 0 0 / 8px 8px; overflow: auto; padding: 0; display: grid; place-items: center; }
.canvas-area::-webkit-scrollbar { width: 16px; height: 16px; }
.canvas-area::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, var(--pink) 0 50%) 0 0 / 2px 2px; }
.canvas-area::-webkit-scrollbar-thumb { background: var(--face); border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); }
.stage { position: relative; margin: 14px; background:
  repeating-conic-gradient(#DDE3F0 0 25%, #fff 0 50%) 0 0 / 14px 14px; box-shadow: 4px 4px 0 #8591AD66; cursor: crosshair; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
#grid { position: absolute; inset: 0; pointer-events: none; display: none; }
.stage.grid #grid { display: block; background:
  linear-gradient(to right, #1E234022 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
  linear-gradient(to bottom, #1E234022 1px, transparent 1px) 0 0 / var(--cell) var(--cell); }
.textbox { position: absolute; z-index: 5; background: #ffffffdd; border: 1px dashed var(--ink); font: 400 16px var(--ui); padding: 0 2px; min-width: 120px; outline: none; color: var(--ink); }

.side { width: 300px; flex: none; overflow-y: auto; padding: 2px 4px 2px 2px; display: flex; flex-direction: column; gap: 6px; }
.group { border: 2px groove #fff; margin: 0; padding: 6px 8px 8px; box-shadow: 0 0 0 1px var(--lo) inset; }
.group legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font: 600 14px var(--ui); }
.group legend + * { clear: both; }
.row { display: flex; align-items: center; gap: 6px; margin: 4px 0; justify-content: space-between; }
.row.chk { justify-content: flex-start; }
.row input[type=range] { flex: 1; accent-color: var(--hot); min-width: 0; }
.row output { width: 28px; text-align: right; }
input[type=checkbox] { accent-color: var(--hot); width: 15px; height: 15px; }
select, input:not([type]), input[type=text], input[type=email], textarea {
  font: 400 13px var(--body); color: var(--ink); background: #fff; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk); padding: 2px 4px; min-width: 0;
}
.row select, .row input:not([type]) { width: 160px; }
textarea { width: 100%; resize: none; }
input[type=color] { width: 34px; height: 22px; padding: 0; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: var(--face); }
.hint { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.btn95 { font: 600 14px var(--ui); padding: 5px 10px; cursor: default; color: var(--ink); }
.btn95.primary { background: var(--hot); }
.btn95.danger { background: #FFB4A8; }
.btn95:disabled { color: var(--muted); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions .btn95 { flex: 1; }
.btn95.big { flex-basis: 100%; padding: 10px; font-size: 16px; }

.bottom { display: flex; gap: 6px; align-items: center; padding: 5px 2px 2px; flex: none; }
.colorpick { width: 54px; height: 46px; position: relative; flex: none; }
.colorpick .bgc, .colorpick .fgc { position: absolute; width: 22px; height: 22px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.colorpick .fgc { left: 6px; top: 5px; box-shadow: 0 0 0 1px var(--ink); }
.colorpick .bgc { left: 22px; top: 17px; box-shadow: 0 0 0 1px var(--ink); }
.palette { display: grid; grid-template-columns: repeat(8, 24px); grid-template-rows: 24px 24px; gap: 0; }
.sw { border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: inset 0 0 0 1px var(--ink); }

.status { display: flex; gap: 2px; padding-top: 3px; flex: none; }
.cell { padding: 2px 6px; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell.grow { flex: 1; }
.cell.w120 { width: 100px; }

.taskbar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 3px 4px; flex: none; border-width: 2px 0 0; }
.taskbar .start { width: auto; height: 26px; padding: 0 10px; font-size: 14px; background: var(--mint); }
.tkitem { padding: 4px 10px; min-width: 190px; font: 600 13px var(--ui); }
.tray { margin-left: auto; padding: 4px 12px; font-family: var(--ui); }

.modal-back { position: fixed; inset: 0; background: #1E234066; display: grid; place-items: center; z-index: 50; }
.modal-back[hidden] { display: none; }
.dialog { margin: 0; width: min(640px, calc(100% - 24px)); flex: none; }
.dlgbody { display: flex; gap: 14px; padding: 14px; }
.dlgbody img { width: 240px; max-width: 45%; height: auto; align-self: flex-start; flex: none; }
.dlgtext { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dlgtext h2 { margin: 0; font: 600 20px var(--ui); }
.dlgtext p { margin: 0; line-height: 1.35; }
.dlgtext label { display: block; width: 100%; }

.pdialog { width: min(900px, calc(100% - 24px)); height: calc(100% - 40px); display: flex; flex-direction: column; }
.ptools { display: flex; gap: 6px; align-items: center; padding: 6px 2px; flex: none; }
.pview { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-content: start;
  background: repeating-conic-gradient(#E4EAF5 0 25%, #F5F7FA 0 50%) 0 0 / 8px 8px; }
.scene { background: var(--face); border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); padding: 8px; text-align: center; }
.scene svg { width: 100%; height: auto; display: block; }
.scene b { display: block; margin-top: 4px; font: 600 14px var(--ui); }

.pipeline { display: flex; align-items: stretch; gap: 0; padding: 4px 2px; flex: none; }
.pipeline .step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: default; position: relative; background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); min-width: 0; }
.pipeline .step + .step { margin-left: 14px; }
.pipeline .step + .step::before { content: "▸"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); font-weight: 600; }
.pipeline .num { width: 22px; height: 22px; display: grid; place-items: center; font: 600 13px var(--ui); border: 2px solid var(--ink); background: #fff; flex: none; }
.pipeline .t1 { font: 600 14px var(--ui); display: block; }
.pipeline .t2 { font-size: 11px; color: var(--muted); display: block; }
.pipeline .step.on { background: var(--hot); border-color: var(--dk) var(--hi) var(--hi) var(--dk); }
.pipeline .step.on .t2 { color: var(--ink); }
.pipeline .step.on .num { background: var(--butter); }
.pipeline .step.done .num { background: var(--mint); }

.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 6px 4px; flex: none; }
.pprice b { display: block; font: 600 30px/1 var(--ui); }
.pprice span { font-size: 12px; color: var(--muted); }
.pcta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.orderbtn { font: 600 20px var(--ui); padding: 12px 36px; color: var(--ink); background: var(--hot);
  border: 3px solid; border-color: #fff var(--dk) var(--dk) #fff; box-shadow: inset -2px -2px #9C86E8, 3px 3px 0 #8591AD88; }
.orderbtn:hover { background: #DDD0FF; }
.orderbtn:active { border-color: var(--dk) #fff #fff var(--dk); box-shadow: inset 2px 2px #9C86E8; transform: translate(2px, 2px); }
.orderbtn.sent { background: var(--mint); box-shadow: inset -2px -2px #7FD3A9, 3px 3px 0 #8591AD88; }
#pOrderMsg { font-size: 11.5px; color: var(--muted); max-width: 340px; text-align: right; }

@media (max-width: 860px) {
  body { overflow: auto; }
  .desktop { height: auto; min-height: 100vh; min-height: 100dvh; }
  .window { flex: 1 0 auto; width: calc(100% - 16px); margin: 8px; }
  .body { flex-direction: column; }
  .toolbox { width: auto; flex-direction: row; }
  .tools { grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 1; min-width: 0; }
  .tool { height: 40px; }
  .tool svg { width: 26px; height: 26px; }
  .options { width: 90px; height: auto; min-height: 44px; flex: none; }
  .canvas-area { flex: none; }
  .stage { margin: 8px; }
  .side { width: auto; overflow: visible; padding: 2px; }
  .row select, .row input:not([type]) { width: 55%; }
  .bottom { flex-wrap: wrap; }
  .palette { grid-template-columns: repeat(8, 1fr); grid-template-rows: 30px 30px; flex: 1; min-width: 220px; }
  .pipeline .t2 { display: none; }
  .pipeline .step { padding: 5px 6px; }
  .tkitem { display: none; }
  .dlgbody { flex-direction: column; }
  .dlgbody img { max-width: 70%; width: 70%; }
  .pfoot { flex-direction: column; align-items: stretch; }
  .pcta { align-items: stretch; }
  .menubar { overflow-x: auto; }
}

.checkout { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-content: start; }
.checkout[hidden], .pview[hidden], .pfoot[hidden] { display: none; }
.summary, .cform { background: var(--face); border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); padding: 12px; }
.summary img { width: 100%; height: auto; display: block; }
.summary h3, .cform h3 { margin: 0 0 8px; font: 600 16px var(--ui); }
.sumrow { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; }
.cform label { display: block; margin: 6px 0; }
.cform input, .cform select { width: 100%; margin-top: 2px; }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cform .orderbtn { width: 100%; margin-top: 10px; }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } }
.btn95.big2 { flex-basis: 100%; padding: 8px; }
.btn95:disabled { opacity: .5; }
a.b95.start { text-decoration: none; color: var(--ink); width: auto; }

.menu.home { margin-left: auto; order: 99; background: var(--hot); font: 600 14px var(--ui); text-decoration: none; color: var(--ink); }
.menu.home:hover { background: #DDD0FF; }
a.b95 { text-decoration: none; color: var(--ink); }
.photobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 8px; margin: 2px 0; flex: none; background: var(--mint);
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.photobar[hidden] { display: none; }
.photobar label { display: flex; align-items: center; gap: 6px; }
.photobar input[type=range] { accent-color: var(--ink); width: 110px; }
.photobar .phint { flex: 1; min-width: 160px; font-size: 12.5px; }
.photo-group { background: var(--mint); }
.startdlg { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; }
.startbody { padding: 14px 16px 16px; }
.startbody h2 { margin: 0 0 12px; font: 600 22px var(--ui); }
.startgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.startcard { text-align: left; padding: 14px; display: grid; gap: 6px; align-content: start; min-height: 112px; background: var(--face); color: var(--ink);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); font: 400 13.5px/1.35 var(--body); }
.startcard b { font: 600 17px var(--ui); }
.startcard.photo { background: var(--hot); }
.startcard:hover { filter: brightness(1.04); }
.startcard:active { border-color: var(--dk) var(--hi) var(--hi) var(--dk); }
.startcard.pulse { outline: 3px solid var(--ink); outline-offset: 2px; }
.presetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.presetgrid[hidden] { display: none; }
.presetgrid button { padding: 6px; background: #fff; display: grid; gap: 4px; font: 600 13px var(--ui); color: var(--ink);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); }
.presetgrid canvas { width: 100%; height: auto; display: block; }
.homelink { display: inline-block; margin-top: 14px; color: var(--ink); font: 600 14px var(--ui); }
@media (max-width: 700px) { .startgrid { grid-template-columns: 1fr; } .startcard { min-height: 0; } }

/* Preview and Checkout are inline tabs inside the Studio window, not pop-outs */
.window.on-checkout .body, .window.on-checkout .bottom, .window.on-checkout .photobar { display: none !important; }
.stepview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.stepview[hidden] { display: none; }
.stepview .pview { flex: 1 0 auto; }

.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pack { text-align: left; padding: 12px 14px 14px; display: grid; gap: 10px; align-content: start; color: var(--ink); background: var(--face); font: 400 14px/1.4 var(--body);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); }
.pack.on { background: var(--hot); border-color: var(--dk) var(--hi) var(--hi) var(--dk); box-shadow: inset 1px 1px var(--lo); }
.pack b { font: 600 20px var(--ui); }
.pack .sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; justify-items: center; }
.pack .sheet img { width: 100%; height: auto; display: block; }
.pack .sheet img:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; }
@media (max-width: 700px) { .packs { grid-template-columns: 1fr; } }

/* ---- guided Studio: simple mode, sticky bar, coach, checkout stages ---- */
.menu.modesw { display: flex; align-items: center; gap: 6px; font-family: var(--body); font-size: 13px; }
.menu.modesw:hover { background: none; }
.center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.center .canvas-area { flex: none; align-self: stretch; }
.lockednote { margin: 0; font-size: 12.5px; color: var(--muted); }
.window.simple .toolbox, .window.simple .side, .window.simple .bottom { display: none; }
.window.adv .maker { display: none; }
.maker { display: grid; gap: 10px; }
.makergrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mk { text-align: left; padding: 12px 14px; display: grid; gap: 4px; align-content: start; color: var(--ink); background: var(--face); font: 400 13px/1.3 var(--body);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); }
.mk b { font: 600 17px var(--ui); }
.mk.photo { background: var(--hot); }
.mk.on { border-color: var(--dk) var(--hi) var(--hi) var(--dk); box-shadow: inset 1px 1px var(--lo); background: var(--mint); }
.mk:active { border-color: var(--dk) var(--hi) var(--hi) var(--dk); }
.tray { background: #fff; padding: 10px 12px; display: grid; gap: 10px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.tray[hidden], .trayrow[hidden] { display: none; }
.trayrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.traylabel { font: 600 14px var(--ui); }
.trayhint { font-size: 12.5px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { padding: 5px 12px; font: 600 13px var(--ui); color: var(--ink); background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); }
.chips button.on { background: var(--hot); border-color: var(--dk) var(--hi) var(--hi) var(--dk); }
.slim { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.slim input[type=range] { width: 110px; accent-color: var(--ink); }
.swatches { display: grid; grid-template-columns: repeat(8, 38px); gap: 4px; }
.sw.big { width: 38px; height: 38px; padding: 0; }
.makerlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.linkbtn { background: none; border: 0; padding: 2px 0; color: var(--ink); font: 600 13.5px var(--body); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:disabled { opacity: .45; text-decoration: none; cursor: default; }
.stickybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 6px 4px; margin-top: 4px; flex: none; border-top: 2px solid var(--lo); }
.sbl { display: grid; gap: 2px; }
.sbl b { font: 600 15px var(--ui); }
.sbl span { font-size: 13px; color: var(--muted); }
.sbr { display: flex; align-items: center; gap: 10px; }
.orderbtn.small { font-size: 17px; padding: 9px 22px; }
.coach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 10px; margin: 2px 0; flex: none; background: var(--butter); border: 2px solid var(--ink); }
.coach[hidden] { display: none; }
.coach span { flex: 1; min-width: 200px; font-size: 14px; }
.cform h3 { font: 600 18px var(--ui); }
.hint.err { color: #B4302A; font-weight: 600; min-height: 1em; }
.sumrow.total { border-top: 2px solid var(--lo); padding-top: 8px; font-size: 16px; }
/* bigger advanced palette under the canvas */
.palette { grid-template-columns: repeat(8, 38px); grid-template-rows: 38px 38px; }
.colorpick { width: 74px; height: 64px; }
.colorpick .fgc, .colorpick .bgc { width: 30px; height: 30px; }
.colorpick .fgc { left: 6px; top: 6px; }
.colorpick .bgc { left: 28px; top: 24px; }
.window.adv .bottom { padding: 4px 0 0; }
@media (max-width: 860px) {
  .makergrid { grid-template-columns: 1fr 1fr; }
  .swatches { grid-template-columns: repeat(8, 1fr); }
  .sw.big { width: auto; height: 36px; }
  .palette { grid-template-columns: repeat(8, 1fr); grid-template-rows: 36px 36px; flex: 1; }
  .center { width: 100%; }
  .stickybar { position: sticky; bottom: 0; background: var(--face); z-index: 5; }
  .sbr { width: 100%; justify-content: space-between; }
  .orderbtn.small { flex: 1; }
}

.body { overflow-y: auto; overflow-x: hidden; }
@media (max-width: 860px) { .body { overflow: visible; } }

/* ---- pixel arrow cursor (tip hotspot), crosshair on the drawing canvas ---- */
html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2232%22 viewBox=%220 0 13 16%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%221%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%222%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%223%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%224%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%225%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%226%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%227%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%228%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%229%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2210%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2211%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2212%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2213%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%223%22 y=%220%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%221%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%221%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2211%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%227%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2210%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2211%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2212%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%226%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%228%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%225%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%229%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2211%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2210%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23E4E8FF%22/%3E%3Crect x=%2211%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2215%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2210%22 y=%2215%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3C/svg%3E") 6 0, auto; }
a, button:not(:disabled), summary, select, input[type=range], input[type=checkbox], label.menu, .menu, .tool, .opt, .sw, .mk, .startcard, .pack, .pcard, .step, .chips button, .linkbtn, .orderbtn, .btn95, .b95, [role=button] { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2232%22 viewBox=%220 0 13 16%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%221%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%222%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%223%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%224%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%225%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%226%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%227%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%228%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%229%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2210%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2211%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2212%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%220%22 y=%2213%22 width=%222%22 height=%221%22 fill=%22%23F2B8D8%22/%3E%3Crect x=%223%22 y=%220%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%221%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%221%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%222%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%223%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%224%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%225%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%227%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2211%22 y=%228%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%227%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2210%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2211%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2212%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%226%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%228%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%2210%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%225%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%224%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%227%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%229%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%2212%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%223%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2211%22 y=%2213%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%228%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2210%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23FFB3DA%22/%3E%3Crect x=%2211%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%229%22 y=%2215%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3Crect x=%2210%22 y=%2215%22 width=%221%22 height=%221%22 fill=%22%231E2340%22/%3E%3C/svg%3E") 6 0, pointer; }
input:not([type]), input[type=text], input[type=email], textarea { cursor: text; }
.stage, .stage canvas { cursor: crosshair; }
.textbox { cursor: text; }

@media (max-width: 860px) { .window { overflow-x: hidden; } .menubar { flex-wrap: wrap; } }

.packsel { display: flex; }
.packsel button { padding: 8px 14px; font: 600 14px var(--ui); color: var(--ink); background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo); }
.packsel button + button { margin-left: -2px; }
.packsel button.on { background: var(--hot); border-color: var(--dk) var(--hi) var(--hi) var(--dk); box-shadow: inset 1px 1px var(--lo); }
@media (max-width: 860px) { .sbr { flex-wrap: wrap; } .packsel { width: 100%; } .packsel button { flex: 1; } }

.window.on-checkout .coach { display: none; }

/* ---- professional checkout ---- */
.checkout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 24px; padding: 20px; }
.checkout .cform { background: #fff; border: 1px solid var(--lo); box-shadow: none; padding: 22px 24px; border-radius: 6px; }
.ch { margin: 0; font: 600 26px var(--ui); }
.csub { margin: 4px 0 18px; color: var(--muted); font-size: 14.5px; }
.csec { border: 0; margin: 0 0 22px; padding: 0; }
.csec legend { float: none; display: flex; align-items: center; gap: 10px; padding: 0 0 12px; margin: 0; font: 600 17px var(--ui); width: 100%; border-bottom: 1px solid #E4E8F2; margin-bottom: 14px; }
.cn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 13px var(--ui); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font: 600 14px var(--body); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.cform input, .cform select { width: 100%; margin: 0; padding: 11px 12px; font: 400 15px var(--body); color: var(--ink); background: #fff;
  border: 1px solid #9AA3B8; border-radius: 6px; box-shadow: none; min-height: 44px; }
.cform input:focus, .cform select:focus { outline: 3px solid #C9B8FF; outline-offset: 1px; border-color: var(--ink); }
.cform input[aria-invalid="true"] { border-color: #B4302A; background: #FFF6F5; }
.field small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.field small.ferr { color: #B4302A; font-weight: 600; min-height: 0; }
.field small.ferr:empty { display: none; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paynote { margin: 0; padding: 12px 14px; background: #F5F7FA; border: 1px dashed #9AA3B8; border-radius: 6px; font-size: 14px; }
.orderbtn.wide { width: 100%; margin-top: 4px; }
.trust { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.next { margin: 14px 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.45; }
.checkout .summary { background: #fff; border: 1px solid var(--lo); box-shadow: none; padding: 18px; border-radius: 6px; position: sticky; top: 8px; }
.summary h3 { font: 600 17px var(--ui); margin: 0 0 12px; }
.summary img { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.lines { margin: 0; }
.lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14.5px; }
.lines dt, .lines dd { margin: 0; }
.lines .total { border-top: 1px solid #E4E8F2; margin-top: 4px; padding-top: 12px; font: 600 17px var(--body); }
.perks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.perks li { padding-left: 22px; position: relative; }
.perks li::before { content: "\2713"; position: absolute; left: 0; color: #1B7F55; font-weight: 700; }
@media (max-width: 860px) {
  .checkout { grid-template-columns: 1fr; padding: 12px; }
  .checkout .summary { order: -1; position: static; }
  .frow { grid-template-columns: 1fr; }
  .checkout .cform { padding: 16px; }
}
.field label { display: block; }
.ch, .csec legend, .summary h3 { font-family: Fredoka, var(--ui); }