:root {
  --board-ink:var(--ink,#17324d);
  --board-teal:var(--teal,#08a6a6);
  --board-line:var(--line,#d9e6f2);
  --board-paper:var(--white,#fff);
  --board-cream:var(--blue-050,#f5f9fe);
  --board-coral:var(--coral,#ec7d65);
  --board-gold:var(--sun,#ffd166);
  --board-blue:var(--blue-900,#0f4e8d);
  --board-shadow:6px 7px 0 rgba(7,59,76,.14),0 18px 42px rgba(7,59,76,.14);
}

.personalize-maker-icon { position:relative; width:42px; height:50px; display:grid; place-items:center; }
.personalize-maker-icon img { width:40px; height:48px; display:block; object-fit:contain; }
.personalize-maker-icon b { position:absolute; top:-1px; right:1px; color:#0b99a6; font-size:12px; text-shadow:0 1px 0 #fffdf5; }

.board-studio-modal[hidden],.board-studio-restore[hidden],.board-studio-step[hidden],.board-studio-help-panel[hidden],.board-studio-text-composer[hidden],.board-studio-selection[hidden] { display:none !important; }
.board-studio-modal,.board-studio-modal * { box-sizing:border-box; }
.board-studio-modal {
  position:fixed; z-index:12000; inset:0; display:grid; place-items:center; padding:8px;
  background:rgba(7,59,76,.72); backdrop-filter:blur(5px);
  color:var(--board-ink); font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
}
.board-studio-shell {
  --board-studio-sidebar:176px; --board-studio-sidebar-min:176px; --board-studio-resizer:12px;
  position:relative; width:min(1390px,calc(100vw - 16px)); height:min(840px,calc(100vh - 16px)); display:grid; grid-template-rows:58px minmax(0,1fr);
  overflow:hidden; border:2px solid var(--board-blue); border-radius:22px; background:var(--board-paper);
  box-shadow:9px 10px 0 rgba(7,59,76,.25),0 30px 80px rgba(7,59,76,.30); transition:width .2s ease,height .2s ease;
}
.board-studio-shell[data-step="1"] { width:min(735px,calc(100vw - 16px)); height:min(448px,calc(100vh - 16px)); grid-template-rows:58px minmax(0,1fr); }
.board-studio-topbar {
  position:relative; z-index:4; display:grid; grid-template-columns:90px auto auto minmax(0,1fr); align-items:center; gap:12px;
  padding:5px 13px; border-bottom:2px solid var(--board-line); background:rgba(255,253,245,.98);
}
.board-studio-topbar > * { align-self:center; }
.board-studio-brand { height:44px; display:flex; align-items:center; }
.board-studio-brand img { display:block; width:78px; height:44px; object-fit:contain; object-position:left center; }
.board-studio-title { min-width:0; height:44px; display:flex; align-items:center; justify-self:center; }
.board-studio-title h2 { margin:0; color:var(--board-ink); font:900 clamp(20px,1.7vw,25px)/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; text-align:center; white-space:nowrap; }
.board-studio-step-pill { min-width:148px; height:36px; min-height:36px; display:inline-grid; grid-template-columns:auto 45px auto; align-items:center; gap:8px; padding:0 11px; border:1px solid #cfe3dd; border-radius:999px; background:linear-gradient(135deg,#fffdf5,#f3faf7); color:var(--board-blue); box-shadow:0 3px 9px rgba(7,59,76,.07); white-space:nowrap; }
.board-studio-step-pill > span { color:#58716a; font:900 8px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.board-studio-step-pill > i { display:grid; grid-template-columns:repeat(3,13px); gap:3px; }
.board-studio-step-pill > i b { display:block; height:5px; border-radius:999px; background:#d7e8e4; transition:background .18s ease; }
.board-studio-step-pill[data-step="1"] > i b:nth-child(1),.board-studio-step-pill[data-step="2"] > i b:nth-child(2),.board-studio-step-pill[data-step="3"] > i b:nth-child(3) { background:var(--board-coral); }
.board-studio-step-pill[data-step="2"] > i b:nth-child(1),.board-studio-step-pill[data-step="3"] > i b:nth-child(-n+2) { background:var(--board-teal); }
.board-studio-step-pill > strong { color:var(--board-blue); font:900 10px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.02em; }
.board-studio-title-editor { position:absolute; top:50%; left:50%; min-width:0; width:clamp(190px,22vw,230px); height:36px; display:flex; align-items:center; gap:8px; padding:0 12px; border:2px solid #9edbd4; border-radius:12px; background:var(--board-paper); box-shadow:none; transform:translate(-50%,-50%); }
.board-studio-title-editor input { min-width:0; flex:1; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--board-ink); font:900 14px/1 "Trebuchet MS",sans-serif; }
.board-studio-title-editor b { color:#005966; font-size:17px; }
.board-studio-top-actions { min-width:0; height:36px; display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.board-studio-icon-button,.board-studio-help,.board-studio-circle-button { border:2px solid var(--board-blue); background:var(--board-paper); color:var(--board-blue); box-shadow:2px 2px 0 var(--board-blue); cursor:pointer; transition:.18s ease; }
.board-studio-icon-button { min-width:66px; height:36px; padding:0 10px; border-radius:999px; font:900 12px/1 "Trebuchet MS",sans-serif; }
.board-studio-help { height:36px; display:flex; align-items:center; gap:7px; padding:0 12px; border-radius:999px; font:900 12px/1 "Trebuchet MS",sans-serif; }
.board-studio-help b { width:20px; height:20px; display:grid; place-items:center; border:1.5px solid; border-radius:50%; }
.board-studio-circle-button { width:36px; height:36px; display:grid; place-items:center; padding:0; border-radius:50%; color:var(--board-blue); font:500 23px/1 Arial,sans-serif; }
.board-studio-icon-button:hover,.board-studio-help:hover,.board-studio-circle-button:hover { background:var(--board-gold); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--board-blue); }
.board-studio-top-actions button:hover,.board-studio-top-actions button:focus-visible,.board-studio-modal button:focus-visible,.board-studio-modal input:focus-visible,.board-studio-modal select:focus-visible,.board-studio-modal label:focus-within { outline:3px solid rgba(8,166,166,.28); outline-offset:2px; }
.board-studio-modal .board-studio-title-editor:focus-within { border-color:#9edbd4; outline:none; outline-offset:0; box-shadow:none; background:var(--board-paper); }
.board-studio-modal .board-studio-title-editor input:focus,.board-studio-modal .board-studio-title-editor input:focus-visible { border-color:transparent; outline:none; outline-offset:0; box-shadow:none; background:transparent; }
.board-studio-modal .board-studio-title-editor:focus-within b { color:var(--board-coral); }
.board-studio-shell[data-step="1"] .board-studio-topbar { grid-template-columns:90px minmax(0,1fr) auto auto; padding:6px 18px; }
.board-studio-shell[data-step="1"] .board-studio-title h2 { font-size:21px; }
.board-studio-shell[data-step="1"] .board-studio-title-editor,.board-studio-shell[data-step="1"] .board-studio-icon-button,.board-studio-shell[data-step="1"] .board-studio-help { display:none; }
.board-studio-shell[data-step="3"] .board-studio-icon-button { display:none; }

.board-studio-help-panel { position:absolute; z-index:10; top:54px; right:70px; width:310px; padding:15px; border:2px solid var(--board-blue); border-radius:16px; background:var(--board-paper); box-shadow:var(--board-shadow); }
.board-studio-help-panel strong { font:900 14px/1.2 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; }
.board-studio-help-panel p { margin:7px 0 0; color:#587880; font-size:11px; line-height:1.45; }

.board-studio-step { min-height:0; background:var(--board-paper); }
.board-studio-choose { display:grid; grid-template-rows:minmax(0,1fr) 76px; padding:0 22px; }
.board-studio-board-grid { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; padding:0 0 14px; }
.board-studio-board-choice { position:relative; min-width:0; display:grid; grid-template-rows:168px auto minmax(37px,auto) 34px; justify-items:center; align-items:start; gap:5px; padding:10px 8px 8px; border:2px solid var(--board-blue); border-radius:16px; background:var(--board-paper); color:var(--board-ink); box-shadow:4px 5px 0 rgba(7,59,76,.14); cursor:pointer; transition:.18s ease; }
.board-studio-board-choice:hover,.board-studio-board-choice:focus-visible { background:var(--board-cream); transform:translate(-1px,-1px); box-shadow:5px 6px 0 rgba(7,59,76,.18); }
.board-studio-board-choice[aria-pressed="true"] { border-color:var(--board-blue); background:var(--coral-soft,#fff0e8); box-shadow:5px 6px 0 var(--board-blue); }
.board-studio-card-check { position:absolute; top:11px; left:11px; width:27px; height:27px; display:none; place-items:center; border:2px solid var(--board-blue); border-radius:50%; background:var(--board-coral); color:#fff; font:900 17px/1 Arial,sans-serif; }
.board-studio-board-choice[aria-pressed="true"] .board-studio-card-check { display:grid; }
.board-studio-board-silhouette { position:relative; align-self:end; width:96px; height:158px; display:grid; place-items:end center; }
.board-studio-board-silhouette img { width:100%; height:100%; display:block; object-fit:contain; }
.board-studio-skim-traction-preview { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.board-studio-skim-pad-body { fill:#252a2b; stroke:#075f6d; stroke-width:6; }
.board-studio-skim-pad-seams { fill:none; stroke:#fff0d2; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.board-studio-board-choice strong { align-self:end; font:900 14px/1.15 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; text-align:center; }
.board-studio-board-choice small { color:#324f58; font-size:10px; line-height:1.45; text-align:center; }
.board-studio-card-radio { align-self:end; width:24px; height:24px; display:block; border:2px solid var(--board-blue); border-radius:50%; background:var(--board-paper); }
.board-studio-board-choice[aria-pressed="true"] .board-studio-card-radio { border:2px solid var(--board-blue); box-shadow:inset 0 0 0 4px var(--board-paper); background:var(--board-coral); }
.board-studio-footer { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:2px solid var(--board-line); background:var(--board-paper); }
.board-studio-footer > div { display:flex; align-items:center; gap:12px; }
.board-studio-outline-button,.board-studio-coral-button,.board-studio-polish-button { min-height:44px; padding:0 25px; border-radius:999px; font:900 13px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; cursor:pointer; transition:.18s ease; }
.board-studio-outline-button { border:2px solid var(--board-blue); background:var(--board-paper); color:var(--board-blue); }
.board-studio-outline-button#boardStudioCancel { box-shadow:4px 5px 0 var(--board-blue); }
.board-studio-outline-button:hover { background:var(--board-cream); }
.board-studio-coral-button { border:2px solid var(--board-blue); background:var(--board-coral); color:#fffdf5; box-shadow:4px 5px 0 var(--board-blue); }
.board-studio-coral-button:hover { background:#ff806e; transform:translate(-1px,-1px); box-shadow:5px 6px 0 var(--board-blue); }
.board-studio-polish-button { border:2px solid var(--board-blue); background:var(--board-gold); color:var(--board-blue); box-shadow:4px 5px 0 var(--board-blue); }
.board-studio-polish-button:hover { background:#ffe08a; transform:translate(-1px,-1px); box-shadow:5px 6px 0 var(--board-blue); }

.board-studio-edit { position:relative; height:100%; display:grid; grid-template-rows:58px minmax(0,1fr) 58px; }
.board-studio-tool-grid { display:grid; grid-template-columns:repeat(9,minmax(72px,1fr)); align-items:stretch; gap:3px; padding:10px 19px; border:1px solid #d2eaec; border-radius:16px 16px 0 0; background:#fff; }
.board-studio-tool { min-width:0; display:grid; place-items:center; align-content:center; gap:6px; padding:7px 5px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--board-blue); font:900 10px/1 "Trebuchet MS",sans-serif; cursor:pointer; }
.board-studio-tool strong { color:var(--board-blue); font:500 29px/1 Georgia,serif; }
.board-studio-tool[aria-pressed="true"] { border-color:#9fc4e5; background:var(--board-cream); }
.board-studio-controlbar { min-width:0; display:grid; grid-template-columns:calc(var(--board-studio-sidebar) + var(--board-studio-resizer)) minmax(390px,1.55fr) minmax(145px,.72fr) minmax(145px,.72fr) minmax(300px,1.15fr); align-items:stretch; overflow-x:auto; overflow-y:hidden; border:0; border-bottom:2px solid var(--board-line); border-radius:0; background:var(--board-paper); }
.board-studio-control-group,.board-studio-pixel-control,.board-studio-tool-select { min-width:0; display:flex; align-items:center; gap:8px; padding:7px 10px; border-right:2px solid var(--board-line); }
.board-studio-control-group > strong,.board-studio-pixel-control > strong,.board-studio-tool-select > strong { color:var(--board-blue); font:900 10px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.board-studio-tool-select select { min-width:82px; width:100%; height:34px; padding:0 31px 0 11px; border:2px solid var(--board-blue); border-radius:999px; background:var(--board-paper); color:var(--board-ink); font:900 11px/1 "Trebuchet MS",sans-serif; cursor:pointer; }
.board-studio-color-control { position:relative; display:grid; grid-template-columns:34px minmax(170px,1fr) 26px; gap:7px; }
.board-studio-swatches { min-width:0; display:grid; grid-template-columns:repeat(8,minmax(18px,1fr)); align-items:center; gap:4px; }
.board-studio-swatch { width:100%; max-width:23px; aspect-ratio:1; min-width:18px; padding:0; border:1px solid rgba(7,59,76,.42); border-radius:6px; box-shadow:none; cursor:pointer; }
.board-studio-swatch[aria-pressed="true"] { outline:2px solid var(--board-blue); outline-offset:2px; }
.board-studio-universal-color { width:34px; height:34px; display:grid; place-items:center; border:2px solid var(--board-blue); border-radius:9px; background:var(--board-paper); box-shadow:2px 2px 0 var(--board-blue); cursor:pointer; }
.board-studio-universal-color input[type="color"] { width:24px; height:24px; padding:1px; border:0; border-radius:5px; background:transparent; cursor:pointer; }
.board-studio-palette-toggle { width:26px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:var(--board-blue); cursor:pointer; }
.board-studio-palette-toggle:hover,.board-studio-palette-toggle[aria-expanded="true"] { background:var(--board-cream); }
.board-studio-palette-toggle span { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .16s ease; }
.board-studio-palette-toggle[aria-expanded="true"] span { transform:translateY(2px) rotate(225deg); }
.board-studio-palette-explorer { position:fixed; z-index:12020; width:260px; max-height:min(420px,calc(100vh - 24px)); display:grid; grid-template-columns:1fr; gap:4px; overflow-y:auto; padding:7px; border:1px solid #8fd2ca; border-radius:12px; background:var(--board-paper); box-shadow:0 12px 30px rgba(7,59,76,.24); }
.board-studio-palette-explorer[hidden] { display:none; }
.board-studio-palette-explorer-title { padding:5px 7px 4px; color:var(--board-blue); font:900 9px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.board-studio-palette-explorer-choice { min-width:0; min-height:44px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:5px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--board-ink); text-align:left; cursor:pointer; }
.board-studio-palette-explorer-choice:hover,.board-studio-palette-explorer-choice[aria-checked="true"] { border-color:#9edbd4; background:var(--board-cream); }
.board-studio-palette-explorer-choice > span { min-width:0; display:grid; gap:3px; }
.board-studio-palette-explorer-choice strong { font:900 9px/1 "Trebuchet MS","Avenir Next",Avenir,"Segoe UI",sans-serif; }
.board-studio-palette-explorer-choice small { overflow:hidden; color:#587880; font:700 8px/1.15 "Trebuchet MS","Avenir Next",Avenir,"Segoe UI",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.board-studio-palette-explorer-choice i { display:flex; gap:2px; }
.board-studio-palette-explorer-choice b { width:7px; height:7px; display:block; border-radius:50%; background:var(--palette-dot); }
.board-studio-size-control { --brush-preview-size:4.6667px; --brush-outline-size:2.3333px; display:grid; grid-template-columns:auto 34px minmax(60px,1fr) 43px; gap:6px; }
.board-studio-opacity-control { display:grid; grid-template-columns:auto minmax(62px,1fr) 44px; gap:6px; }
.board-studio-size-control input,.board-studio-opacity-control input { --range-progress:50%; width:100%; min-width:60px; height:22px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.board-studio-size-control input::-webkit-slider-runnable-track,.board-studio-opacity-control input::-webkit-slider-runnable-track { width:100%; height:7px; border:0; border-radius:999px; background:linear-gradient(90deg,var(--board-teal) 0 var(--range-progress),#424849 var(--range-progress) 100%); }
.board-studio-size-control input::-webkit-slider-thumb,.board-studio-opacity-control input::-webkit-slider-thumb { width:20px; height:20px; margin-top:-6.5px; appearance:none; -webkit-appearance:none; border:0; border-radius:50%; background:var(--board-teal); box-shadow:none; }
.board-studio-size-control input::-moz-range-track,.board-studio-opacity-control input::-moz-range-track { width:100%; height:7px; border:0; border-radius:999px; background:#424849; }
.board-studio-size-control input::-moz-range-progress,.board-studio-opacity-control input::-moz-range-progress { height:7px; border-radius:999px; background:var(--board-teal); }
.board-studio-size-control input::-moz-range-thumb,.board-studio-opacity-control input::-moz-range-thumb { width:20px; height:20px; border:0; border-radius:50%; background:var(--board-teal); }
.board-studio-size-control output,.board-studio-opacity-control output { min-width:0; padding:6px 5px; border:1px solid #8fd2ca; border-radius:7px; background:var(--board-cream); color:var(--board-blue); font-size:10px; font-weight:900; line-height:1; text-align:center; text-transform:none; white-space:nowrap; }
.board-studio-brush-preview { width:34px; height:22px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:#d9f7f3; }
.board-studio-brush-preview i { width:var(--brush-preview-size); height:var(--brush-preview-size); max-width:18px; max-height:18px; display:block; border-radius:50%; background:var(--brush-preview-color,var(--board-blue)); }
.board-studio-size-control[data-tool="line"] .board-studio-brush-preview i { width:27px; height:var(--brush-preview-size); border-radius:999px; }
.board-studio-size-control[data-tool="eraser"] .board-studio-brush-preview i { width:16px; height:11px; border-radius:2px; background:#fff; border:2px solid var(--board-blue); transform:rotate(-28deg); }
.board-studio-size-control[data-tool="rectangle"] .board-studio-brush-preview i { width:24px; height:14px; border:var(--brush-outline-size) solid var(--brush-preview-color,var(--board-blue)); border-radius:1px; background:transparent; }
.board-studio-size-control[data-tool="ellipse"] .board-studio-brush-preview i { width:22px; height:15px; border:var(--brush-outline-size) solid var(--brush-preview-color,var(--board-blue)); border-radius:50%; background:transparent; }
.board-studio-size-control[data-tool="spray"] .board-studio-brush-preview i { width:24px; height:18px; background:radial-gradient(circle,var(--brush-preview-color,var(--board-blue)) 0 1px,transparent 1.5px) 0 0/6px 6px; }
.board-studio-size-control[data-tool="fill"] .board-studio-brush-preview i { width:24px; height:14px; border-radius:2px; }
.board-studio-size-control[data-tool="select"] .board-studio-brush-preview i { width:15px; height:18px; border-radius:0; clip-path:polygon(0 0,100% 65%,60% 68%,78% 100%,60% 100%,43% 70%,15% 100%); }
.board-studio-size-control[data-tool="text"] .board-studio-brush-preview i { width:auto; height:auto; border-radius:0; background:transparent; color:var(--board-blue); font:900 18px/1 Georgia,serif; }
.board-studio-size-control[data-tool="text"] .board-studio-brush-preview i::before { content:"T"; }
.board-studio-pixel-control { display:grid; grid-template-columns:minmax(72px,1fr) minmax(70px,1fr) minmax(58px,.8fr) 66px; gap:6px; border-right:0; }
.board-studio-view-toggle { min-width:0; display:grid; grid-template-rows:auto 25px; align-content:center; justify-items:start; gap:5px; }
.board-studio-view-toggle > strong { color:var(--board-blue); font:900 9px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; text-transform:uppercase; white-space:nowrap; }
.board-studio-view-toggle:has(input:disabled) { opacity:.5; }
.board-studio-pixel-control output { padding:8px 8px; border:2px solid var(--board-blue); border-radius:9px; background:var(--board-paper); color:var(--board-blue); font:900 12px/1 "Trebuchet MS",sans-serif; text-align:center; }
.board-studio-switch { position:relative; width:43px; height:25px; display:inline-block; }
.board-studio-switch input { position:absolute; opacity:0; pointer-events:none; }
.board-studio-switch i { position:absolute; inset:0; border-radius:999px; background:#b9cec9; transition:.18s ease; }
.board-studio-switch i::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:.18s ease; }
.board-studio-switch input:checked + i { background:var(--board-teal); }
.board-studio-switch input:checked + i::after { transform:translateX(18px); }

.board-studio-workspace { min-height:0; display:grid; grid-template-columns:var(--board-studio-sidebar) var(--board-studio-resizer) minmax(0,1fr); background:#fff; }
.board-studio-equipment { min-height:0; overflow-x:hidden; overflow-y:auto; padding:14px 13px; border:0; background:var(--board-cream); }
.board-studio-sidebar-resizer { position:relative; z-index:5; width:var(--board-studio-resizer); min-width:var(--board-studio-resizer); display:grid; place-items:center; align-self:stretch; padding:0; border:0; border-left:1px solid #b9e1dc; border-right:1px solid var(--board-line); outline:0; background:linear-gradient(90deg,#f2fbf8,#fffdf8); color:var(--board-blue); cursor:col-resize; touch-action:none; }
.board-studio-sidebar-resizer::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#8fd2ca; transform:translateX(-50%); }
.board-studio-sidebar-resizer > span { position:relative; width:10px; height:48px; display:grid; place-items:center; border:1px solid #79c8c0; border-radius:999px; background:var(--board-paper); box-shadow:1px 2px 0 rgba(7,59,76,.15); transition:background .16s ease,transform .16s ease,box-shadow .16s ease; }
.board-studio-sidebar-resizer > span::before { content:""; width:5px; height:2px; border-radius:999px; background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor; }
.board-studio-sidebar-resizer:hover > span,.board-studio-sidebar-resizer:focus-visible > span { background:var(--board-gold); transform:scale(1.04); box-shadow:2px 3px 0 rgba(7,59,76,.2); }
.board-studio-sidebar-resizer:focus-visible { outline:3px solid rgba(8,166,166,.3); outline-offset:-2px; }
.board-studio-sidebar-resizing,.board-studio-sidebar-resizing * { cursor:col-resize !important; user-select:none !important; }
.board-studio-equipment h3 { margin:0 0 14px; color:var(--board-blue); font:900 12px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.board-studio-equipment > label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px; color:var(--board-ink); font:900 12px/1.2 "Trebuchet MS",sans-serif; }
.board-studio-equipment > label.is-disabled { color:#78969c; }
.board-studio-equipment-art { display:grid; gap:8px; margin-top:15px; }
.board-studio-file { position:relative; min-height:37px; display:grid; place-items:center; overflow:hidden; border:1px dashed #5faeb5; border-radius:9px; background:#effafa; color:var(--board-ink); font-size:9px; font-weight:900; cursor:pointer; }
.board-studio-file input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.board-studio-fine-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:15px; padding-top:12px; }
.board-studio-fine-colors label { min-width:0; display:grid; justify-items:stretch; color:var(--board-blue); font-family:"Trebuchet MS","Avenir Next",Avenir,"Segoe UI",sans-serif; font-size:8px; font-weight:900; letter-spacing:0; text-align:center; text-transform:uppercase; }
.board-studio-fine-colors label > span { display:block; text-align:center; }
.board-studio-fine-colors input { width:100%; height:28px; display:block; margin-top:5px; padding:2px; border:1px solid #8fd2ca; border-radius:7px; background:var(--board-paper); }
.board-studio-fine-colors input:disabled { opacity:.42; cursor:not-allowed; }
.board-studio-stage { position:relative; min-width:0; min-height:0; overflow:hidden; border-bottom:1px solid var(--board-line); background:#fff; }
.board-studio-canvas-wrap { position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; background:#fff; scrollbar-color:#9cbfc1 #edf6f5; }
.board-studio-canvas-surface { position:relative; width:192px; height:288px; overflow:hidden; background:#fff; }
#boardStudioCanvas { display:block; width:100%; height:100%; max-width:none; max-height:none; touch-action:none; background:#fff; cursor:crosshair; }
#boardStudioCanvas:focus-visible { outline:3px solid rgba(27,105,183,.42); outline-offset:-3px; }
.board-studio-canvas-surface.is-pixel-preview #boardStudioCanvas { image-rendering:pixelated; }
.board-studio-pixel-grid-overlay { position:absolute; z-index:2; inset:0; pointer-events:none; background-image:linear-gradient(to right,rgba(0,94,112,.42) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,94,112,.42) 1px,transparent 1px); background-size:var(--board-pixel-size,2px) var(--board-pixel-size,2px); }
.board-studio-pixel-grid-overlay[hidden] { display:none; }
.board-studio-pixel-cursor { position:absolute; z-index:4; display:block; pointer-events:none; border:2px solid #073b4c; background:transparent; box-shadow:0 0 0 1px rgba(255,255,255,.9); }
.board-studio-pixel-cursor[hidden] { display:none; }
.board-studio-pixel-loupe {
  position:absolute; z-index:6; width:180px; height:180px; display:block; box-sizing:content-box; pointer-events:none;
  border:3px solid var(--board-blue); border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(9,49,86,.24);
  image-rendering:pixelated;
}
.board-studio-pixel-loupe[hidden] { display:none; }
.board-studio-navigator { position:absolute; z-index:3; right:12px; bottom:12px; width:108px; padding:9px; border:2px solid var(--board-blue); border-radius:14px; background:rgba(255,253,245,.97); box-shadow:var(--board-shadow); }
.board-studio-navigator strong { color:var(--board-blue); font:900 10px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.board-studio-navigator canvas { width:100%; height:auto; aspect-ratio:2/3; display:block; margin-top:6px; border:1px solid #9edbd4; border-radius:8px; background:var(--board-paper); cursor:grab; touch-action:none; }
.board-studio-navigator canvas:active { cursor:grabbing; }
.board-studio-text-composer { position:static; width:100%; max-height:none; overflow:visible; padding:0; border:1px solid #9edbd4; border-radius:10px; background:var(--board-paper); box-shadow:none; }
.board-studio-word-input { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:3px; margin:6px 7px 0; color:var(--board-blue); font-size:7px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.board-studio-word-input input[type="text"] { width:100%; height:28px; padding:0 7px; border:1px solid #9edbd4; border-radius:7px; outline:0; background:var(--board-paper); color:var(--board-ink); box-shadow:none; font:800 10px/1 "Trebuchet MS",sans-serif; }
.board-studio-modal .board-studio-word-input:focus-within { outline:none; outline-offset:0; box-shadow:none; }
.board-studio-modal .board-studio-word-input input[type="text"]:focus,.board-studio-modal .board-studio-word-input input[type="text"]:focus-visible { border-color:#79c8c0; outline:none; outline-offset:0; box-shadow:none; background:var(--board-paper); }
.board-studio-word-art-picker { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; margin:6px 7px 0; color:var(--board-blue); font-size:7px; font-weight:900; }
.board-studio-word-art-picker select { min-width:0; width:100%; height:28px; padding:0 22px 0 7px; border:1px solid #9edbd4; border-radius:7px; background:var(--board-paper); color:var(--board-ink); font:800 9px/1 "Trebuchet MS",sans-serif; }
.board-studio-word-art-preview { min-width:0; min-height:34px; display:grid; place-items:center; overflow:hidden; margin:5px 7px 0; padding:5px; border:1px solid #9edbd4; border-radius:7px; background:var(--board-cream); color:var(--board-coral); font:900 10px/1 Impact,sans-serif; text-align:center; white-space:nowrap; -webkit-text-stroke:.35px var(--board-ink); }
.board-studio-word-art-preview > span { max-width:100%; display:block; overflow:hidden; text-overflow:ellipsis; }
.board-studio-word-art-preview[data-word-art-preset="sunset-bold"] > span { font-family:Impact,sans-serif; }
.board-studio-word-art-preview[data-word-art-preset="wave-rider"] > span { font-family:"Arial Black",sans-serif; transform:skew(-8deg); }
.board-studio-word-art-preview[data-word-art-preset="retro-arch"] > span { font-family:"Trebuchet MS",sans-serif; transform:rotate(-4deg); }
.board-studio-word-art-preview[data-word-art-preset="coastal-serif"] > span { font-family:Georgia,serif; }
.board-studio-word-art-preview[data-word-art-preset="board-stack"] > span { font-family:Impact,sans-serif; letter-spacing:.08em; }
.board-studio-word-art-preview[data-word-art-preset="mono-surf"] > span { font-family:"Courier New",monospace; }
.board-studio-word-art-preview[data-word-art-preset="seafoam-script"] > span { font-family:"Brush Script MT",cursive; font-style:italic; }
.board-studio-word-art-preview[data-word-art-preset="tiki-tall"] > span { font-family:Impact,sans-serif; letter-spacing:.12em; }
.board-studio-word-art-preview[data-word-art-preset="sunray-arch"] > span { font-family:Verdana,sans-serif; transform:rotate(4deg); }
.board-studio-word-art-preview[data-word-art-preset="driftwood"] > span { font-family:"Palatino Linotype",serif; font-style:italic; }
.board-studio-composer-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin:6px 7px; }
.board-studio-composer-controls label { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:3px; padding:4px; border:1px solid #9edbd4; border-radius:7px; background:var(--board-cream); color:var(--board-blue); font-size:6px; font-weight:900; text-align:center; text-transform:uppercase; }
.board-studio-composer-controls label > span:first-child { white-space:nowrap; }
.board-studio-compact-number { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px; }
.board-studio-compact-number input[type="number"] { width:100%; height:25px; padding:0 2px 0 4px; border:1px solid #cfe0ee; border-radius:6px; background:#fff; color:var(--board-ink); font:800 9px/1 "Trebuchet MS",sans-serif; }
.board-studio-compact-number b { font-size:8px; }
.board-studio-composer-controls input[type="color"] { width:100%; height:25px; padding:1px; border:1px solid #cfe0ee; border-radius:6px; background:#fff; }
.board-studio-text-composer > .board-studio-coral-button { width:calc(100% - 14px); min-height:28px; margin:0 7px 7px; padding:0 9px; font-size:8px; }
.board-studio-selection { position:absolute; z-index:4; left:12px; bottom:12px; display:flex; align-items:center; gap:8px; max-width:calc(100% - 185px); padding:8px 11px; border:2px solid var(--board-blue); border-radius:10px; background:rgba(255,253,245,.97); color:var(--board-ink); box-shadow:3px 4px 0 rgba(7,59,76,.16); font-size:9px; }
.board-studio-selection small { color:var(--muted,#5d7184); }

.board-studio-edit-footer { min-width:0; height:58px; display:flex; align-items:center; justify-content:center; overflow-x:auto; padding:7px 12px; border-top:2px solid var(--board-line); background:var(--board-paper); }
.board-studio-footer-actions { width:max-content; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:6px; margin-inline:auto; }
.board-studio-edit-footer .board-studio-outline-button,.board-studio-edit-footer .board-studio-coral-button,.board-studio-edit-footer .board-studio-polish-button { height:38px; min-height:38px; flex:0 0 auto; display:grid; place-items:center; align-self:center; padding:0 14px; font-size:10px; line-height:1; box-shadow:2px 3px 0 var(--board-blue); }
.board-studio-delete-button { color:#b94b3c; border-color:var(--board-blue); }
.board-studio-delete-button:disabled { opacity:.42; cursor:not-allowed; }
.board-studio-edit-footer .board-studio-open-draft { position:relative; margin:0; overflow:hidden; cursor:pointer; }
.board-studio-open-draft input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.board-studio-polisher { height:100%; display:grid; grid-template-rows:42px minmax(0,1fr) 84px; padding:0 22px; }
.board-studio-polish-banner { display:grid; place-items:center; border:2px solid var(--board-blue); border-radius:14px; background:var(--board-gold); color:var(--board-blue); box-shadow:3px 4px 0 var(--board-blue); font:900 13px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; }
.board-studio-polish-grid { min-height:0; display:grid; grid-template-columns:285px minmax(0,1fr); gap:13px; padding:12px 0; }
.board-studio-polish-sidebar,.board-studio-polished-preview { min-width:0; min-height:0; border:2px solid var(--board-blue); border-radius:14px; background:var(--board-paper); box-shadow:4px 5px 0 rgba(7,59,76,.12); }
.board-studio-polish-sidebar { display:grid; grid-template-rows:auto minmax(120px,1fr) auto; gap:11px; padding:15px; }
.board-studio-polish-sidebar h3,.board-studio-polished-preview h3 { margin:0; color:var(--board-ink); font:900 14px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; text-transform:uppercase; }
.board-studio-before-preview { min-height:0; display:grid; place-items:center; border-radius:12px; background:var(--board-cream); overflow:hidden; }
.board-studio-before-preview canvas { width:100%; height:100%; max-height:220px; object-fit:contain; }
.board-studio-polished-preview { display:grid; grid-template-rows:46px minmax(0,1fr); padding:10px 16px 12px; }
.board-studio-polished-preview > h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.board-studio-preview-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.board-studio-polished-magnifier { height:41px; padding:0 14px; border:2px solid var(--board-blue); border-radius:11px; background:var(--board-paper); color:var(--board-ink); font:900 11px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; cursor:pointer; }
.board-studio-polished-magnifier:hover,.board-studio-polished-magnifier:focus-visible { background:var(--board-cream); }
.board-studio-polished-magnifier[aria-pressed="true"] { border-color:var(--board-blue); background:var(--board-coral); color:#fffdf5; }
.board-studio-preview-zoom { height:41px; display:flex; align-items:center; overflow:hidden; border:2px solid var(--board-blue); border-radius:11px; background:var(--board-paper); color:var(--board-ink); }
.board-studio-preview-zoom button { height:100%; min-width:38px; padding:0 10px; border:0; border-right:1px solid var(--board-blue); background:transparent; color:var(--board-ink); font:900 12px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; cursor:pointer; }
.board-studio-preview-zoom button:last-child { border-right:0; }
.board-studio-preview-zoom button:hover,.board-studio-preview-zoom button:focus-visible { background:var(--board-cream); }
.board-studio-preview-zoom button:disabled { opacity:.42; cursor:not-allowed; }
.board-studio-preview-zoom output { min-width:54px; align-self:stretch; display:grid; place-items:center; padding:0 7px; border-right:1px solid var(--board-blue); font:900 10px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; text-align:center; }
.board-studio-polished-preview > div { position:relative; min-height:0; display:grid; place-items:center; overflow:auto; }
.board-studio-polished-preview > div.is-zoomed { place-items:start center; }
.board-studio-polished-preview canvas { display:block; width:auto; height:auto; max-width:none; max-height:none; object-fit:contain; }
.board-studio-polished-preview .board-studio-polished-loupe { position:absolute; z-index:6; width:180px; height:180px; max-width:none; max-height:none; pointer-events:none; object-fit:fill; }
.board-studio-polish-modes { display:grid; grid-template-columns:repeat(3,1fr); margin:0; border:2px solid var(--board-blue); border-radius:11px; overflow:hidden; }
.board-studio-polish-modes button { min-height:41px; border:0; border-right:1px solid var(--board-blue); background:var(--board-paper); color:var(--board-ink); font-weight:900; cursor:pointer; }
.board-studio-polish-modes button:last-child { border-right:0; }
.board-studio-polish-modes button[aria-pressed="true"] { background:var(--board-coral); color:#fffdf5; }
.board-studio-export-button { display:flex; align-items:center; gap:8px; padding-inline:17px; }
.board-studio-png-badge { padding:4px 6px; border-radius:5px; background:var(--board-teal); color:#fff; font:900 8px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.04em; }
.board-studio-polisher .board-studio-footer .board-studio-outline-button { box-shadow:4px 5px 0 var(--board-blue); }

.board-studio-restore { position:fixed; z-index:12001; left:20px; bottom:20px; min-height:45px; padding:0 20px; border:2px solid var(--board-blue); border-radius:999px; background:var(--board-coral); color:#fff; box-shadow:4px 5px 0 var(--board-blue); font:900 12px/1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; cursor:pointer; }
.board-studio-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.board-studio-open { overflow:hidden; }
.board-picker-option[data-board-choice^="custom-"] img.board-art,.brand-board-picker[data-selected-board^="custom-"] img.board-art,.snippet-launcher-dock[data-selected-board^="custom-"] img { clip-path:none; }
.saved-board-context-menu {
  position:fixed; z-index:14000; min-width:210px; display:grid; gap:4px; padding:7px;
  border:2px solid var(--board-blue); border-radius:14px; background:var(--board-paper); box-shadow:var(--board-shadow);
}
.saved-board-context-menu[hidden] { display:none; }
.saved-board-context-menu button {
  min-height:38px; padding:0 12px; border:0; border-radius:8px; background:transparent;
  color:var(--board-ink); font:900 11px/1.2 "Trebuchet MS",sans-serif; text-align:left; cursor:pointer;
}
.saved-board-context-menu button:hover,.saved-board-context-menu button:focus-visible { outline:2px solid rgba(27,105,183,.25); background:var(--board-cream); }
.saved-board-context-menu button.is-danger { color:#a63224; }
.saved-board-context-menu button.is-danger:hover,.saved-board-context-menu button.is-danger:focus-visible { background:#fff0ed; outline-color:#db766d; }
.saved-board-action-toast {
  position:fixed; z-index:14001; left:50%; bottom:22px; max-width:min(440px,calc(100vw - 32px));
  transform:translateX(-50%); padding:11px 16px; border:1px solid var(--board-line); border-radius:999px;
  background:#fff; color:var(--board-ink); box-shadow:var(--board-shadow); font:900 11px/1.3 "Trebuchet MS",sans-serif;
}
.saved-board-action-toast[hidden] { display:none; }
.saved-board-action-toast.is-error { background:#fff0ed; color:#a63224; }

@media (max-width:1100px) {
  .board-studio-shell { --board-studio-sidebar:164px; --board-studio-sidebar-min:164px; width:calc(100vw - 12px); }
  .board-studio-topbar { grid-template-columns:76px auto auto minmax(0,1fr); padding-inline:12px; gap:8px; }
  .board-studio-title-editor { width:clamp(180px,24vw,210px); }
  .board-studio-icon-button span,.board-studio-help span { display:none; }
  .board-studio-icon-button { min-width:42px; }
  .board-studio-control-group,.board-studio-pixel-control,.board-studio-tool-select { padding-inline:10px; }
  .board-studio-polish-grid { grid-template-columns:245px minmax(330px,1fr); }
  .board-studio-edit-footer .board-studio-outline-button,.board-studio-edit-footer .board-studio-coral-button,.board-studio-edit-footer .board-studio-polish-button { padding-inline:12px; }
}
@media (max-width:820px) {
  .board-studio-modal { padding:0; }
  .board-studio-shell,.board-studio-shell[data-step="1"] { --board-studio-sidebar:150px; --board-studio-sidebar-min:150px; width:100%; height:100%; border:0; border-radius:0; grid-template-rows:58px minmax(0,1fr); }
  .board-studio-topbar,.board-studio-shell[data-step="1"] .board-studio-topbar { grid-template-columns:auto auto minmax(0,1fr); padding:6px 8px; }
  .board-studio-brand img { width:68px; height:44px; }
  .board-studio-title h2,.board-studio-shell[data-step="1"] .board-studio-title h2 { font-size:18px; }
  .board-studio-title-editor { display:none; }
  .board-studio-top-actions { grid-column:3; }
  .board-studio-step-pill { min-width:126px; grid-template-columns:auto 36px auto; gap:6px; padding-inline:8px; }
  .board-studio-step-pill > i { grid-template-columns:repeat(3,10px); }
  .board-studio-circle-button { width:36px; height:36px; font-size:24px; }
  .board-studio-shell[data-step="1"] .board-studio-top-actions { gap:5px; }
  .board-studio-choose { overflow:auto; }
  .board-studio-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .board-studio-edit { overflow:auto; grid-template-rows:58px 650px auto; }
  .board-studio-workspace { grid-template-columns:var(--board-studio-sidebar) var(--board-studio-resizer) minmax(520px,1fr); }
  .board-studio-edit-footer { justify-content:center; }
  .board-studio-polisher { overflow:auto; }
  .board-studio-polisher { grid-template-rows:42px auto auto; }
  .board-studio-polish-grid { grid-template-columns:1fr; }
  .board-studio-polish-sidebar { min-height:520px; }
  .board-studio-polished-preview { min-height:650px; }
  .board-studio-polisher .board-studio-footer { flex-wrap:wrap; padding:10px 0; }
  .board-studio-polisher .board-studio-footer > div { flex-wrap:wrap; justify-content:center; }
}
@media (max-width:520px) {
  .board-studio-brand { display:none; }
  .board-studio-topbar,.board-studio-shell[data-step="1"] .board-studio-topbar { grid-template-columns:auto minmax(0,1fr); }
  .board-studio-title { justify-items:start; }
  .board-studio-step-pill { display:none; }
  .board-studio-top-actions { grid-column:2; }
  .board-studio-board-grid { grid-template-columns:1fr; }
  .board-studio-board-choice { grid-template-rows:135px auto auto 30px; }
  .board-studio-board-silhouette { width:78px; height:122px; }
  .board-studio-footer { flex-wrap:wrap; justify-content:center; padding:10px 0; }
  .board-studio-navigator { width:104px; }
  .board-studio-polished-preview { padding-inline:10px; }
  .board-studio-preview-heading-actions { gap:4px; }
  .board-studio-polished-magnifier { padding-inline:8px; }
  .board-studio-polisher .board-studio-footer > div { width:100%; }
  .board-studio-polisher .board-studio-footer button { flex:1 1 155px; }
}