/*
 * Sticker Shader Editor — cute pastel theme.
 * Rounded "sticker" buttons with a dark outline and a dropped shadow, white
 * cards with pink borders on a blush background, candy sliders and pink toggles.
 */
:root {
  --bg: #fff4f8;
  --bg-dots: radial-gradient(rgba(255, 143, 184, .16) 1.4px, transparent 1.6px);
  --panel: #ffffff;
  --panel-2: #fff9fb;
  --line: #f6d4e1;
  --line-2: #eab8cc;
  --ink: #3a2a35;
  --text: #3a2a35;
  --muted: #9b7f8e;
  --accent: #ff8fb8;
  --accent-2: #ffc4d9;
  --accent-ink: #3a1f2b;
  --sky: #a3cbee;
  --sky-2: #dcecfb;
  --butter: #ffe08a;
  --mint: #9fdcbd;
  --danger: #ff6b8a;
  --shadow: 0 8px 22px rgba(150, 80, 115, .12);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Varela Round", "Nunito", "Arial Rounded MT Bold", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, -apple-system, sans-serif;
  --hand: "Patrick Hand", "Segoe Print", "Bradley Hand", "Comic Sans MS", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", cursive;
  --stage-ink: #3a2a35;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); background-image: var(--bg-dots); background-size: 18px 18px;
  color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow: hidden;
  display: flex; flex-direction: column;   /* the top bar may wrap; the stage takes whatever is left */
}
button, select, input, label { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }
::selection { background: var(--accent-2); }

/* The loading artwork is inline SVG, so it is ready before image collections. */
.site-loader { padding: 24px; color: #725064; text-align: center; overflow: auto; opacity: 1; transition: opacity .2s ease; }
html.is-loading #siteLoader, html.loading-done #siteLoader { background: radial-gradient(ellipse at 35% 35%, #fce6f4 0, transparent 48%), radial-gradient(ellipse at 70% 65%, #e2f1ff 0, transparent 45%), #fff7fb; }
html.loading-done #siteLoader { opacity: 0; pointer-events: none; }
.loading-card { width: min(360px, 100%); padding: 28px 8px; }
.loading-brand { font: 12px var(--sans); letter-spacing: .09em; color: #987a8c; }
.loading-art { position: relative; width: 250px; max-width: 100%; height: 206px; margin: 30px auto 20px; }
.loading-sticker { position: absolute; width: 126px; left: calc(50% - 63px); top: 25px; transform: rotate(-9deg); filter: drop-shadow(0 8px 0 #e6cad866); animation: loading-bob 2.6s ease-in-out infinite; }
.loading-sticker svg, .loading-orbit svg { display: block; width: 100%; height: auto; overflow: visible; }
.loading-orbit { position: absolute; display: block; filter: drop-shadow(0 3px 0 #e6cad866); }
.loading-cloud { width: 76px; left: 0; top: 104px; transform: rotate(-12deg); animation: loading-drift 3s ease-in-out infinite; }
.loading-heart { width: 56px; right: 2px; top: 22px; transform: rotate(16deg); animation: loading-drift 3s -.9s ease-in-out infinite; }
.loading-spark { position: absolute; font: 30px Georgia, serif; color: #dab065; animation: loading-twinkle 2.4s ease-in-out infinite; }
.loading-spark-one { left: 25px; top: 20px; }
.loading-spark-two { right: 26px; bottom: 9px; color: #a28cc4; animation-delay: -.8s; }
.loading-title { font: 32px/1.25 var(--hand); color: #724b66; }
.loading-message { margin-top: 10px; font: 13px/1.6 var(--sans); color: #987a8c; }
.loading-dots { display: flex; justify-content: center; gap: 8px; margin: 22px 0 26px; }
.loading-dots i { width: 9px; height: 9px; border-radius: 50%; background: #efa8c4; animation: loading-dot 1.4s ease-in-out infinite; }
.loading-dots i:nth-child(2) { background: #a8cfe8; animation-delay: .16s; }
.loading-dots i:nth-child(3) { background: #e9cf87; animation-delay: .32s; }
.loading-note { font: 12px/1.5 var(--hand); color: #ad8fa0; }
.loading-retry { margin: 16px auto 22px; padding: 9px 22px; border: 1.5px solid #bd7c9d; border-radius: 20px; background: #ffe3ef; color: #724b66; font: 13px var(--sans); cursor: pointer; }
.loading-retry:focus-visible { outline: 3px solid #7faccd; outline-offset: 4px; }
.site-loader [hidden] { display: none; }
.has-error .loading-dots { display: none; }
.has-error .loading-art * { animation: none; }
@keyframes loading-bob { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes loading-drift { 50% { translate: 0 -6px; } }
@keyframes loading-twinkle { 50% { opacity: .45; scale: .85; } }
@keyframes loading-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@media (max-height: 550px) { .loading-card { padding: 8px; } .loading-art { margin: 8px auto; height: 180px; } .loading-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .loading-art *, .loading-dots i { animation: none; } .site-loader { transition: none; } }

.delete-dialog { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; overflow: auto; border: 2px solid var(--ink); border-radius: 24px; background: var(--panel-2); color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 22px 70px #3a2a3533; }
.delete-dialog::backdrop { background: #3a2a3566; backdrop-filter: blur(3px); }
.artwork-dialog { width: min(620px, calc(100vw - 32px)); }
.artwork-heading, .artwork-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.artwork-actions { justify-content: flex-start; flex-wrap: wrap; margin: 16px 0; }
.artwork-intro, .artwork-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 12px 0; }
#artworkStatus { font-size: 12px; line-height: 1.5; margin: 12px 0; }
.artwork-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }
.artwork-card { min-width: 0; padding: 8px; border: 2px solid var(--line); border-radius: 16px; background: var(--panel); }
.artwork-add { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.artwork-add img { width: 100%; height: 100px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#eff1f5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.artwork-add span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.artwork-card small { color: var(--muted); font-size: 11px; }
.artwork-card > button { margin-top: 8px; }
.artwork-add:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 10px; }
.delete-dialog-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.delete-dialog-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1.5px solid var(--line-2); border-radius: 14px; color: #a62f53; background: #ffe4ec; }
.delete-dialog h2 { font-size: 19px; line-height: 1.3; }
.delete-item { display: flex; align-items: center; gap: 14px; padding: 10px; margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: 15px; background: #fff; }
.delete-item canvas { flex: none; width: 72px; height: 72px; border-radius: 9px; background-color: var(--sky-2); background-image: linear-gradient(#ffffff90 1px, transparent 1px), linear-gradient(90deg, #ffffff90 1px, transparent 1px); background-size: 18px 18px; }
.delete-item strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
#deleteDescription { color: #806674; font-size: 12px; line-height: 1.65; }
#deleteDescription p + p { margin-top: 5px; }
.delete-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 21px; padding-bottom: 4px; }
.delete-dialog-actions .btn { justify-content: center; height: 42px; }
.delete-dialog-actions .delete-confirm { color: #6e2039; background: #ffbad0; }
.delete-dialog-actions .btn.delete-confirm:hover:not(:disabled) { background: #ffa5c3; }
.delete-dialog-actions .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Top bar                                                            */
/* ---------------------------------------------------------------- */
.tour-invite { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.tour-invite[hidden] { display: none; }
#tourInviteStart { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; min-height: 60px; padding: 9px 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--panel-2); color: var(--ink); text-align: left; box-shadow: 0 3px 0 var(--ink); transition: background .15s, transform .15s, box-shadow .15s; }
.tour-invite-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid #b3cfe6; border-radius: 50%; background: var(--sky-2); }
.tour-invite-copy { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.tour-invite-copy > span { font-size: 11px; color: #806674; }
.tour-invite-copy strong { font-size: 14px; font-weight: 700; }
.tour-invite-arrow { flex: none; transition: transform .15s; }
#tourInviteStart:hover { background: #ffeaf2; box-shadow: 0 4px 0 var(--ink); transform: translateY(-1px); }
#tourInviteStart:hover .tour-invite-arrow { transform: translateX(2px); }
#tourInviteStart:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#tourInviteDismiss { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #806674; transition: background .15s, border-color .15s; }
#tourInviteDismiss:hover { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
#tourInvite button:focus-visible { outline: 3px solid #5685ad; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #tourInviteStart, .tour-invite-arrow, #tourInviteDismiss { transition: none; } #tourInviteStart:hover, #tourInviteStart:active, #tourInviteStart:hover .tour-invite-arrow { transform: none; } }
#btnGuide { background: var(--sky-2); }
.guide-compass { overflow: visible; }
.guide-compass, .guide-compass-ring, .guide-compass-needle { transform-box: view-box; transform-origin: 10px 10px; }
.toolbar-frame-icon, .toolbar-heart-icon, .toolbar-lanyard-icon, .toolbar-icons-icon { overflow: visible; }
.toolbar-frame-icon, .toolbar-heart { transform-box: view-box; transform-origin: 7px 7px; }
.toolbar-lanyard-swing { transform-box: view-box; transform-origin: 16px 3px; }
.toolbar-icons-star { transform-box: view-box; transform-origin: 15px 16px; }
.toolbar-heart-spark { transform-box: fill-box; transform-origin: center; }
.walkthrough { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); }
.walkthrough::backdrop { background: transparent; }
.walkthrough.tour-centered { background: #30202eb3; }
.tour-spotlight { position: fixed; border: 2px solid #ffb8d5; border-radius: 14px; box-shadow: 0 0 0 9999px #30202eb3, inset 0 0 0 2px #ffffffb3; pointer-events: none; }
.tour-card { position: fixed; display: flex; flex-direction: column; width: 380px; max-height: calc(100dvh - 28px); padding: 18px 20px 20px; border: 2px solid var(--ink); border-radius: 24px; background: var(--panel-2); box-shadow: 0 5px 0 var(--ink), 0 18px 50px #27121f44; }
.tour-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 32px; color: #8b4c69; font-size: 11px; font-weight: 800; letter-spacing: .025em; }
.tour-topline .btn { margin: -4px -5px -4px 0; font-size: 23px; line-height: 1; }
.tour-progress { flex: none; height: 4px; margin: 10px 0 12px; overflow: hidden; border-radius: 4px; background: #efdce5; }
.tour-progress span { display: block; height: 100%; border-radius: inherit; background: #e87fac; }
.tour-location { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex: none; }
#tourCount { flex: none; color: #856675; font-size: 11px; font-variant-numeric: tabular-nums; }
#tourJump { min-width: 0; flex: 1; width: 0; height: 30px; padding: 0 25px 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background-color: #fff; color: #684958; font-size: 11px; text-overflow: ellipsis; cursor: pointer; }
.tour-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.tour-card h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.tour-card h2:focus { outline: none; }
#tourBody { font-size: 12px; line-height: 1.65; color: #684f5f; }
#tourBody ul { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
#tourBody li { position: relative; padding-left: 17px; }
#tourBody li::before { content: ''; position: absolute; top: .55em; left: 1px; width: 6px; height: 6px; border: 1px solid #c16c94; border-radius: 2px; background: #ffd1e3; transform: rotate(45deg); }
.tour-context { margin-top: 13px; padding: 9px 11px; border: 1px solid #c7dfef; border-radius: 11px; background: #eaf5ff; color: #50667e; font-size: 11px; line-height: 1.5; }
.tour-preview { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 17px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background-color: #fff; background-image: var(--bg-dots); background-size: 14px 14px; }
.tour-preview[hidden] { display: none; }
.tour-preview canvas { flex: none; display: block; width: 40px; height: 40px; object-fit: contain; }
.tour-preview[data-kind="frames"] canvas { width: 74px; height: 76px; }
.tour-preview[data-kind="shakers"] canvas { width: 74px; height: 74px; }
.tour-preview[data-kind="frames"] canvas:nth-child(1) { transform: rotate(-8deg); }
.tour-preview[data-kind="frames"] canvas:nth-child(3) { transform: rotate(8deg); }
.tour-preview[data-kind="tools"] { gap: 6px; flex-wrap: wrap; }
.tour-tool { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff1f7; font-size: 11px; font-weight: 700; }
.tour-colours { width: 100%; height: 24px; border-radius: 999px; background: linear-gradient(100deg, #ff98ad, #ffcc8c, #fff39e, #a0efcb, #86d6ff, #c0a8fc, #ffa8dc); box-shadow: inset 0 0 0 1px #38263215; }
.tour-preview canvas.tour-motion { width: 100%; height: auto; }
.tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; padding-top: 20px; }
.tour-footer .btn { height: 38px; justify-content: center; font-size: 12px; }
.tour-footer .primary { margin-left: auto; min-width: 104px; }
.tour-card button:focus-visible, #tourJump:focus-visible, .tour-invite button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
@media (max-width: 960px) {
  body.tour-running::after { content: ''; display: block; flex: none; height: var(--tour-card-height, 440px); }
  body.tour-running .menu[open] > .menu-list { position: fixed; top: 12px; bottom: auto; max-height: var(--tour-room, 240px); }
  .tour-card { max-height: min(70dvh, calc(100dvh - 28px)); padding: 14px 17px 17px; border-radius: 21px; }
  .tour-card h2 { font-size: 21px; }
  .tour-location { margin-bottom: 12px; }
  .tour-footer { padding-top: 16px; }
  .tour-preview[data-kind="frames"] canvas { width: 65px; height: 67px; }
}

.topbar {
  flex: none; min-height: var(--topbar-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 18px;
  padding: 10px 16px; border-bottom: 2px solid var(--line); background: var(--panel);
  background-image: var(--bg-dots); background-size: 18px 18px;
}
/* the lockup: mark and a two-line wordmark, both centred on the bar's axis */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; height: 34px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; filter: drop-shadow(0 2px 0 #d9b6cb); }
.brand-mark svg { width: 36px; height: 36px; display: block; overflow: visible; }
.brand-prism { transform-origin: 50px 50px; transform: rotate(-9deg); transition: transform 450ms cubic-bezier(.22,1,.36,1); }
.brand-prism-spark { transform-origin: 50px 49px; transition: transform 450ms cubic-bezier(.22,1,.36,1); }
.brand-prism-sheen { opacity: 0; transform: translateX(-90px); }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-prism { transform: translateY(-2px) rotate(-4deg); }
  .brand:hover .brand-prism-spark { transform: scale(1.08); }
  .brand:hover .brand-prism-sheen { animation: brand-prism-shine 900ms cubic-bezier(.22,1,.36,1); }
}
@keyframes brand-prism-shine {
  0% { transform: translateX(-90px); opacity: 0; }
  20%, 65% { opacity: .8; }
  100% { transform: translateX(90px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-prism, .brand-prism-spark { transition: none; }
  .brand:hover .brand-prism { transform: rotate(-9deg); }
  .brand:hover .brand-prism-spark { transform: none; }
  .brand:hover .brand-prism-sheen { animation: none; }
}
.brand-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-name { font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.brand-sub { color: var(--accent); font-family: var(--hand); font-size: 14px; line-height: 1.1; margin-top: 1px; white-space: nowrap; }
/* Keep the familiar compact toolbar, with even spacing and quiet separators. */
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 6px; min-width: 0; }
.header-help { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 2px dotted var(--line); }
.header-guide { gap: 7px; }
@media (max-width: 1200px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .header-help { grid-area: 1 / 2; }
  .topbar-actions { grid-area: 2 / 1 / auto / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .brand { grid-area: 1 / 1 / auto / -1; }
  .header-help { grid-area: 2 / 1 / auto / -1; border: 0; padding: 0; }
  .header-help .btn, .header-help .lang { min-height: 38px; }
  .header-help .lang button { min-height: 28px; }
  .topbar-actions { grid-row: 3; }
}
.topbar-actions > * { flex-shrink: 0; }
.topbar-actions > .btn, .topbar-actions > .menu > .btn { padding-inline: 12px; }
.topbar .header-icon-button { padding-inline: 10px; gap: 6px; }
@media (min-width: 961px) and (max-width: 1550px) {
  .topbar-actions { column-gap: 5px; }
  .topbar-actions > .btn, .topbar-actions > .menu > .btn, .image-intake > .btn { padding-inline: 8px; }
}
.header-action-icon { display: block; overflow: visible; }
.header-action-icon, .header-action-icon * { transform-box: fill-box; transform-origin: center; }
.header-icon-button:is(:hover, :focus-visible) .header-sample-icon { animation: header-spark-turn 520ms cubic-bezier(.22,1,.36,1); }
.header-icon-button:is(:hover, :focus-visible) .header-artwork-front { animation: header-artwork-peek 480ms cubic-bezier(.22,1,.36,1); }
.header-icon-button:is(:hover, :focus-visible) .header-export-arrow { animation: header-arrow-drop 480ms cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: no-preference) {
  .header-icon-button:not(:disabled):is(:hover, :focus-visible) .header-shaker-icon { animation: header-shaker-wiggle 520ms ease-in-out; }
  .header-icon-button:not(:disabled):is(:hover, :focus-visible) .header-scissors { animation: header-cutout-tilt 480ms ease-in-out; }
}
@keyframes header-shaker-wiggle { 25% { transform: rotate(-12deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-5deg); } }
@keyframes header-cutout-tilt { 45% { transform: translateX(1px) rotate(-8deg); } }
@keyframes header-spark-turn { 45% { transform: rotate(-12deg) scale(1.14); } }
@keyframes header-artwork-peek { 45% { transform: translate(-1px, -1px) rotate(-8deg); } }
@keyframes header-arrow-drop { 45% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .topbar .header-icon-button .header-action-icon, .topbar .header-icon-button .header-action-icon * { animation: none; }
}
/* a quiet divider between button groups: history · making · preset and export */
.sep { flex: none; width: 0; height: 22px; border-left: 1px dashed var(--line-2); margin: 0 4px; }
@media (max-width: 640px) { .brand-sub { display: none; } .sep { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); white-space: nowrap; user-select: none; font-weight: 700;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s, box-shadow .1s, background .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--panel-2); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: 0 2px 0 var(--ink); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: #ff9fc2; }
.btn.active { background: var(--sky-2); color: var(--ink); border-color: var(--ink); }
.btn.small { height: 30px; padding: 0 12px; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
.btn.small:hover:not(:disabled) { box-shadow: 0 3px 0 var(--ink); }
.btn.icon { width: 34px; padding: 0; justify-content: center; }
.btn svg { flex: none; }
.history { display: inline-flex; gap: 6px; }

/* the language switch: one pill, two segments, the current language filled in */
.lang { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 3px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); }
.lang button { height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; line-height: 24px; cursor: pointer; transition: background .12s, color .12s; }
.lang button:hover { color: var(--ink); background: var(--panel-2); }
.lang button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); cursor: default; }
.lang button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-2); }

/* the preset picker is a pill like its neighbours, with the label inside it */
.preset {
  display: inline-flex; align-items: center; gap: 4px; width: 200px; flex: none; height: 34px; padding: 0 0 0 14px; border-radius: 999px; box-sizing: border-box;
  border: 2px solid var(--ink); background: #fff; color: var(--muted); font-weight: 700; white-space: nowrap; box-shadow: 0 3px 0 var(--ink);
  transition: box-shadow .1s;
}
.preset:focus-within { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--accent-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.image-start { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; max-width: 100%; }
.image-intake { display: inline-flex; align-items: center; gap: 0; flex: none; }
.topbar .preset select { flex: 1; min-width: 0; height: 30px; padding: 0 28px 0 6px; border: 0; border-radius: 999px; background-color: transparent; color: var(--ink); font-weight: 700; appearance: none; -webkit-appearance: none; cursor: pointer; box-shadow: none; }
.topbar .preset select:focus { outline: none; }
.preset select, .panel select, .pixel-filters select, #compareMaterial {
  height: 34px; padding: 0 30px 0 12px; border-radius: 999px; border: 2px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 700;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23ff8fb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.panel select:focus, .pixel-filters select:focus, .panel input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }

/* Selects share the candy controls' shape; browsers without a stylable picker
 * keep their native menu and keyboard/touch behaviour. */
.panel select {
  background-color: var(--panel-2); box-shadow: 0 2px 0 var(--line);
  cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.panel select:hover:not(:disabled) { border-color: var(--ink); background-color: var(--bg); box-shadow: 0 2px 0 var(--line-2); }
.panel select:focus-visible { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink), 0 0 0 3px var(--accent-2); }
.panel select:disabled { cursor: not-allowed; background-color: var(--panel-2); box-shadow: none; }
.preset:hover { background: var(--panel-2); }

@supports (appearance: base-select) {
  .preset { anchor-name: --preset-picker-anchor; }
  .panel select, .pixel-filters select, .topbar .preset select, .style-presets select, #tourJump, #compareMaterial, select::picker(select) { appearance: base-select; }
  .panel select, .pixel-filters select, .topbar .preset select, .style-presets select, #tourJump, #compareMaterial {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-right: 4px; background-image: none; overflow: hidden; white-space: nowrap;
  }
  select > button {
    display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%;
    padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left;
  }
  select selectedcontent { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  select::picker-icon {
    content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%233a2a35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
    transition: transform .15s, background-color .15s;
  }
  select:open::picker-icon { transform: rotate(180deg); background-color: var(--accent); }
  .panel select:open, .pixel-filters select:open { border-color: var(--ink); background-color: var(--bg); box-shadow: 0 2px 0 var(--ink); }
  select:disabled::picker-icon { opacity: .45; }
  select::picker(select) {
    box-sizing: border-box; padding: 6px; margin: 0; border: 2px solid var(--ink); border-radius: 16px;
    top: calc(anchor(bottom) + 7px); left: anchor(left); right: auto; bottom: auto;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    background: var(--panel-2); color: var(--ink);
    box-shadow: 0 3px 0 var(--ink), 0 10px 24px rgba(150, 80, 115, .18);
    font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.4;
    min-inline-size: 0; inline-size: anchor-size(self-inline); max-inline-size: calc(100vw - 24px);
    max-block-size: min(320px, 50dvh); overflow: hidden;
  }
  /* The label and value form one pill: anchor the menu to that whole control. */
  .topbar .preset select::picker(select) {
    position-anchor: --preset-picker-anchor;
  }
  #tourJump { padding-right: 4px; }
  /* Keep the scrolling surface inside the rounded shell, with room around the thumb. */
  .select-options {
    --option-height: 34px; --visible-options: 8;
    max-block-size: min(calc((var(--option-height) + 2px) * var(--visible-options) + 2px), calc(50dvh - 16px)); min-inline-size: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--line-2) var(--panel-2);
    scroll-behavior: smooth; scroll-padding-block: 4px; border-radius: 8px;
  }
  .select-options:hover { scrollbar-color: var(--accent) var(--panel-2); }
  @supports selector(::-webkit-scrollbar) {
    .select-options { scrollbar-width: auto; scrollbar-color: auto; }
    .select-options:hover { scrollbar-color: auto; }
    .select-options::-webkit-scrollbar { width: 10px; }
    .select-options::-webkit-scrollbar-track { margin-block: 4px; border-radius: 999px; background: var(--bg); }
    .select-options::-webkit-scrollbar-thumb {
      min-height: 32px; border: 3px solid var(--panel-2); border-radius: 999px;
      background: var(--line-2); background-clip: padding-box;
    }
    .select-options::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
  }
  select option {
    display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; column-gap: 10px;
    min-height: var(--option-height, 34px); padding: 7px 10px; text-align: start;
    margin: 2px 0; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--ink); white-space: normal; overflow-wrap: anywhere;
    cursor: pointer; outline: none;
  }
  select option:checked { background: var(--accent-2); border-color: var(--accent); }
  select option:hover:not(:disabled), select option:focus-visible { background: var(--sky-2); border-color: var(--sky); }
  select option:checked:hover, select option:checked:focus-visible { background: var(--accent-2); border-color: var(--ink); }
  select option:disabled { color: var(--muted); opacity: .55; cursor: not-allowed; }
  select option::checkmark {
    order: 1; grid-area: 1 / 2; align-self: center; justify-self: center;
    margin: 0; width: 18px; height: 18px; content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 7 2.5 2.5L11 4' fill='none' stroke='%233a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  @media (pointer: coarse) {
    .select-options { --option-height: 44px; --visible-options: 6; }
    select option { min-height: 44px; padding-block: 10px; font-size: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    select::picker-icon { transition: none; }
    .select-options { scroll-behavior: auto; }
  }
}
@media (prefers-reduced-motion: reduce) { .panel select { transition: none; } }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 300px; z-index: 30; padding: 8px;
  background: var(--panel); border: 2px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow), 0 3px 0 var(--line-2);
  display: flex; flex-direction: column;
}
.menu-list button {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: left; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 700; white-space: nowrap;
}
.menu-list button small { color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.menu-list hr { border: 0; border-top: 2px dotted var(--line); margin: 4px 8px; }
.menu-list button:hover:not(:disabled) { background: var(--bg); }
.menu-list button:disabled { opacity: .4; cursor: not-allowed; }

/* sticker tray: search + tabs pinned on top, one scrolling body */
.icon-menu { display: flex; flex-direction: column; min-height: 0; width: 100%; padding: 0; overflow: hidden; }
.decorate-menu { left: 0; right: auto; width: min(400px, calc(100vw - 24px)); max-height: min(78vh, 680px); padding: 0; overflow: hidden; }
.decorate-choices { padding: 8px; max-height: min(78vh, 680px); overflow-y: auto; box-sizing: border-box; }
.decorate-choices .menu-label { padding-bottom: 8px; }
.menu-list .decoration-choice { align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 12px; border: 1px solid transparent; white-space: normal; cursor: pointer; }
.menu-list .decoration-choice:hover { border-color: var(--line); }
.decoration-choice > svg { flex: none; width: 46px; height: 46px; padding: 7px; box-sizing: border-box; border-radius: 14px; background: #eaf3fd; }
.decoration-choice:nth-of-type(2) > svg { background: #fff0f6; }
.decoration-choice:nth-of-type(3) > svg { background: #fff7dc; }
.decoration-choice > span { display: flex; flex-direction: column; gap: 4px; }
.decoration-choice strong { font-size: 14px; }
.menu-list .decoration-choice small { white-space: normal; line-height: 1.45; font-size: 12px; }
.menu-list .decorate-back { flex: none; justify-content: flex-start; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.decorate-menu [hidden] { display: none; }
.image-intake > .btn { border-radius: 999px 0 0 999px; border-right-width: 1px; }
.import-options .import-toggle { width: 62px; padding: 0 10px 0 8px; gap: 6px; justify-content: center; border-radius: 0 999px 999px 0; border-left-width: 1px; background: var(--accent-2); }
.menu > .import-toggle::after { display: none; }
.import-toggle > svg { display: block; flex: none; }
.import-mode-icon { overflow: visible; }
#importModeGlyph, .import-choice-art use, .header-icon-spark { transform-box: fill-box; transform-origin: center; }
.import-chevron { transition: transform .15s ease; }
.import-options[open] .import-chevron { transform: rotate(180deg); }
/* Each face moves independently; the wrapper and popup stay in place. */
.image-intake :is(.btn.primary, .import-toggle) { --intake-lift: 0px; --intake-depth: 3px; transform: translateY(var(--intake-lift)); box-shadow: 0 var(--intake-depth) 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.image-intake .btn.primary { background: var(--intake-bg, var(--accent)); }
.image-intake .btn.import-toggle { background: var(--intake-bg, var(--accent-2)); }
.image-intake :is(.btn.primary, .import-toggle):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .image-intake :is(.btn.primary, .import-toggle):hover { --intake-lift: -1px; --intake-depth: 4px; }
  .image-intake .btn.primary:hover { --intake-bg: #ff9fc2; }
  .image-intake .btn.import-toggle:hover { --intake-bg: #ffd5e5; }
}
.image-intake .import-options[open] > .import-toggle { --intake-bg: #ffb8d6; }
.image-intake :is(.btn.primary, .import-toggle):active { --intake-lift: 2px; --intake-depth: 1px; }
.image-intake .btn.primary:active { --intake-bg: #f780ac; }
.image-intake .btn.import-toggle:active { --intake-bg: #ffb4d0; }
@media (prefers-reduced-motion: reduce) {
  .import-chevron { transition: none; }
  .image-intake :is(.btn.primary, .import-toggle) { transform: none; box-shadow: 0 3px 0 var(--ink); transition: none; }
}
.import-menu { left: 0; right: auto; width: 320px; min-width: 0; padding: 14px; gap: 12px; }
.import-menu > small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.import-choices { display: grid; gap: 8px; }
.import-menu .import-choice { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); background: #fff; white-space: normal; cursor: pointer; }
.import-choice > span { display: grid; gap: 4px; }
.import-menu .import-choice small { white-space: normal; line-height: 1.4; }
.import-choice-art { padding: 5px; border-radius: 10px; background: var(--panel-2); overflow: visible; }
.import-choice[data-import-mode="whole"] .import-choice-art { background: #eaf5ef; }
.import-choice-check { opacity: 0; color: var(--accent-ink); }
.import-menu .import-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--panel-2); box-shadow: 0 0 0 1px var(--accent); }
.import-choice[aria-pressed="true"] .import-choice-check { opacity: 1; }
.import-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.style-presets { width: calc(100% - 24px); height: auto; min-height: 44px; margin: 0 10px 12px; padding: 7px 10px; gap: 10px; border-color: var(--line-2); border-radius: 14px; box-shadow: 0 2px 0 var(--line-2); }
.style-presets > span { font-size: 12px; }
.style-presets select { flex: 1; min-width: 0; font-size: 12px; }
.style-presets:has(select:disabled) { opacity: .55; }
.icon-head { padding: 10px 10px 0; border-bottom: 2px dotted var(--line); background: var(--panel); }
.icon-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 999px; border: 2px solid var(--line-2); background: #fff; color: var(--muted); cursor: text; }
.icon-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
.icon-search svg { flex: none; }
.icon-search input { flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; }
.icon-search input:focus { outline: none; }
.icon-search input::placeholder { color: #c9aebb; font-weight: 400; }
.icon-search .btn { width: auto; height: 26px; padding: 0 10px; flex: none; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
/* the group tabs come in pages of four; the arrows turn the page */
.icon-tabbar { display: flex; align-items: center; gap: 2px; padding: 6px 0 8px; }
.icon-tabs { flex: 1; min-width: 0; display: flex; justify-content: space-evenly; gap: 2px; overflow: hidden; }
.icon-tabs button[hidden] { display: none; }
.menu-list .icon-tabbar .tab-arrow { flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; place-content: center; gap: 0; border: 0; border-radius: 999px; background: transparent; color: var(--accent); cursor: pointer; transition: background .12s, opacity .12s; }
.menu-list .icon-tabbar .tab-arrow:hover:not(:disabled) { background: var(--accent-2); color: var(--ink); }
.menu-list .icon-tabbar .tab-arrow:disabled { opacity: .3; cursor: default; }
.icon-tabs::-webkit-scrollbar { display: none; }
.icon-tabs button {
  flex: none; width: auto; height: 28px; padding: 0 12px; border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--muted);
  font-family: var(--hand); font-size: 16px; line-height: 1; white-space: nowrap; justify-content: center; text-align: center; transition: background .12s, color .12s;
}
.icon-search .btn[hidden] { display: none; }
.icon-tabs button:hover { background: var(--bg); color: var(--ink); }
.icon-tabs button.active { background: var(--accent-2); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 480px) {
  .icon-tabs button { padding: 0 4px; font-size: 13px; }
}
.icon-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; padding: 8px 10px 4px; min-height: 120px; }
.icon-body section[hidden] { display: none; }
.icon-menu.searching .icon-body section { margin-bottom: 4px; }
.icon-cells { display: grid; grid-template-columns: repeat(auto-fill, 72px); justify-content: center; gap: 4px; }
.icon-cells button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; width: 72px; height: 84px; padding: 6px 3px 4px;
  border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center;
}
.icon-cells button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icon-cells button[hidden] { display: none; }
.picture-cells img { display: block; width: 44px; height: 44px; object-fit: contain; }
.picture-cells.wide { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.menu-list .picture-cells.wide button { width: 100%; height: auto; min-height: 84px; padding: 10px; gap: 8px; }
.picture-cells.wide img { width: 100%; height: auto; max-width: 400px; }
.icon-cells button canvas { display: block; width: 44px; height: 44px; border-radius: 12px; background: var(--sky-2); box-shadow: 0 2px 0 rgba(58, 42, 53, .18); transition: transform .12s, background .12s; }
.icon-cells button:hover { color: var(--ink); background: var(--bg); }
.icon-cells button:hover canvas { transform: translateY(-2px) rotate(-4deg); background: var(--accent-2); }
.emoji-row { display: grid; grid-template-columns: repeat(auto-fill, 44px); justify-content: center; gap: 4px; }
/* selectors outrank the generic .menu-list button rule, which would otherwise give the pills its flex layout and padding */
.menu-list .emoji-row .emoji-pick { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; place-content: center; gap: 0; text-align: center; border: 0; border-radius: 12px; background: var(--sky-2); box-shadow: 0 2px 0 rgba(58, 42, 53, .18); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 24px; line-height: 1; transition: transform .12s, background .12s; }
.menu-list .emoji-row .emoji-pick:hover { background: var(--accent-2); transform: translateY(-2px) rotate(-6deg); }
/* kaomoji: little text tags in a fluid grid */
.kao-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.menu-list .kao-row .kao-pick { width: auto; height: 34px; padding: 0 8px; display: grid; place-items: center; place-content: center; gap: 0; border: 0; border-radius: 12px; background: var(--sky-2); box-shadow: 0 2px 0 rgba(58, 42, 53, .18); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .12s, background .12s; }
.menu-list .kao-row .kao-pick:hover { background: var(--accent-2); transform: translateY(-2px) rotate(-2deg); }
/* pixel art: the pictures themselves, crisp, on the same tiles as the emoji */
.pixel-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0 2px 10px; }
.pixel-filters[hidden], .pixel-group[hidden], .pixel-empty[hidden], .pixel-pick[hidden] { display: none; }
.pixel-filters label[hidden] { display: none; }
.pixel-filters.single-filter { grid-template-columns: minmax(0, 1fr); }
.pixel-filters label { min-width: 0; font-size: 11px; font-weight: 700; color: #806373; }
.pixel-filters label > span { display: block; margin-bottom: 4px; padding-left: 3px; }
.pixel-filters select { width: 100%; min-width: 0; font-size: 12px; border-radius: 11px; padding-left: 9px; }
.pixel-filters select > button, .pixel-filters select > button:hover { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.icon-body .menu-label { padding: 6px 2px 4px; }
.pixel-cells { display: grid; grid-template-columns: repeat(auto-fill, 48px); justify-content: center; gap: 4px; }
.menu-list .pixel-cells .pixel-pick { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; place-content: center; gap: 0; border: 0; border-radius: 12px; background: var(--sky-2); box-shadow: 0 2px 0 rgba(58, 42, 53, .18); transition: transform .12s, background .12s; }
.menu-list .pixel-cells .pixel-pick:hover { background: var(--accent-2); transform: translateY(-2px) rotate(-4deg); }
.pixel-pick img { display: block; width: auto; height: auto; max-width: 42px; max-height: 42px; image-rendering: pixelated; }
.pixel-pick img.tiny { width: 40px; height: 40px; }
.piknik-filters { grid-template-columns: minmax(0, 1fr); }
.piknik-cells { grid-template-columns: repeat(auto-fill, 64px); gap: 8px; padding: 4px 0 10px; }
.menu-list .piknik-cells .pixel-pick { width: 64px; height: 64px; background: #fff9f2; border: 1px solid var(--line); }
.piknik-cells img { max-width: 56px; max-height: 56px; image-rendering: auto; object-fit: contain; }
.pixel-cells.wide { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.menu-list .pixel-cells.wide .pixel-pick { width: 100%; height: 66px; padding: 6px; }
.menu-list .pixel-cells .pixel-pick[hidden] { display: none; }
.pixel-cells.wide img { max-width: 100%; max-height: 54px; object-fit: contain; }
@media (pointer: coarse) { .pixel-filters select { height: 44px; } }
.icon-hint { margin: 10px 4px 6px; color: var(--muted); font-size: 11px; text-align: center; }
.icon-foot { padding: 7px 12px 8px; border-top: 2px dotted var(--line); color: var(--muted); font-size: 11px; text-align: center; background: var(--panel); }

.menu-label { padding: 8px 12px 2px; color: var(--accent); font-family: var(--hand); font-size: 15px; line-height: 1; }
.menu-label:first-child { padding-top: 4px; }

/* ---------------------------------------------------------------- */
/* Layout                                                             */
/* ---------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: 1fr 350px; flex: 1; min-height: 0; }

.stage {
  --stage-bg: #a3cbee;
  position: relative; overflow: hidden; background: var(--stage-bg); min-width: 0; min-height: 0;
}
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.28) 100%);
}
.stage.checker {
  background-color: var(--stage-bg);
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.18) 75%),
    linear-gradient(45deg, rgba(128,128,128,.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.18) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
}
.stage.checker::before { display: none; }
.stage.patterned::before, .stage.light::before { display: none; }
#glCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage.editing #glCanvas { visibility: hidden; }
.stage.dragover::after {
  content: attr(data-drop-hint); position: absolute; inset: 12px; border: 3px dashed var(--accent); border-radius: 24px;
  display: grid; place-items: center; color: var(--accent-ink); font-family: var(--hand); font-size: 30px; background: rgba(255, 244, 248, .7); pointer-events: none; z-index: 5;
}
.stage-hint {
  position: absolute; left: 50%; top: 18px; transform: translate(-50%, -4px) rotate(-2deg);
  display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: calc(100% - 48px); padding: 0 8px 20px 0;
  color: #54213f; font: 400 20px/1.25 var(--hand); text-align: center;
  opacity: 0; transition: opacity .18s ease, transform .3s cubic-bezier(.22,1,.36,1); pointer-events: none; user-select: none;
}
.stage-hint .hint-sticker { flex: none; width: 44px; height: 44px; transform: rotate(-6deg); }
#stageHintText { position: relative; isolation: isolate; padding: 2px 3px; paint-order: stroke fill; -webkit-text-stroke: 3px #fffaf6; }
#stageHintText::before { content: ""; position: absolute; z-index: -1; left: -4px; right: -5px; top: 47%; bottom: -2px; background: linear-gradient(105deg, #ff78b1, #ffa7cd 65%, #ffd078); transform: rotate(-1deg); clip-path: polygon(2% 12%, 98% 0, 100% 80%, 71% 95%, 35% 87%, 0 100%); }
.stage-hint .hint-arrow { position: absolute; right: -16px; bottom: -9px; width: 66px; height: 43px; }
.stage-hint.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
.stage-hint.show .hint-sticker { animation: hint-sticker-lift .65s cubic-bezier(.22,1,.36,1); }
.stage-hint.show #stageHintText::before { transform-origin: left center; animation: hint-underline-draw .34s ease-out both; }
.stage-hint.show .hint-arrow-shaft { animation: hint-arrow-draw .46s .3s ease-out both; }
.stage-hint.show .hint-arrow-tip { animation: hint-arrow-draw .18s .74s ease-out both; }
.stage-hint.drop #stageHintText::before { background: linear-gradient(105deg, #73dfbb, #b3edb1); }
.stage-hint.drop .hint-arrow { transform: rotate(10deg); }
@keyframes hint-sticker-lift { 0% { transform: translateY(3px) rotate(-12deg); } 55% { transform: translateY(-2px) rotate(-3deg); } 100% { transform: rotate(-6deg); } }
@keyframes hint-underline-draw { from { transform: rotate(-1deg) scaleX(0); } to { transform: rotate(-1deg) scaleX(1); } }
@keyframes hint-arrow-draw { 0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 600px) { .stage-hint { font-size: 18px; top: 12px; } .stage-hint .hint-sticker { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .stage-hint { transition: none; } .stage-hint.show .hint-sticker, .stage-hint.show .hint-arrow-stroke, .stage-hint.show #stageHintText::before { animation: none; } }

.sticker-delete {
  position: absolute; left: 0; top: 0; z-index: 6; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  transform: translate(-50%, -50%); transition: background .12s, color .12s, transform .12s;
}
.sticker-delete:hover { background: var(--danger); color: #fff; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); }
.sticker-delete[hidden] { display: none; }
.stage.editing .sticker-delete { display: none; }

.dropzone { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; z-index: 4; }
.dropzone.hidden { display: none; }
.empty {
  max-width: 480px; text-align: center; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 28px;
  padding: 26px 30px 28px; box-shadow: 0 6px 0 var(--ink), var(--shadow);
}
.empty-art { display: flex; justify-content: center; gap: 4px; margin: -4px 0 8px; padding-top: 8px; }
.empty-sticker { --sticker-angle: 0deg; --sticker-y: 0px; flex: none; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; transform: translateY(var(--sticker-y)) rotate(var(--sticker-angle)); animation: welcome-sticker-hop 7s cubic-bezier(.22,1,.36,1) infinite; }
.empty-art canvas { width: 62px; height: 62px; display: block; filter: drop-shadow(0 2px 0 rgba(58, 42, 53, .25)); transition: transform 320ms cubic-bezier(.22,1,.36,1), filter 240ms; }
.empty-sticker:nth-child(1) { --sticker-angle: -12deg; --sticker-y: 6px; }
.empty-sticker:nth-child(2) { --sticker-angle: 6deg; animation-delay: .15s; }
.empty-sticker:nth-child(3) { --sticker-angle: -4deg; --sticker-y: -4px; animation-delay: .3s; }
.empty-sticker:nth-child(4) { --sticker-angle: 9deg; animation-delay: .45s; }
.empty-sticker:nth-child(5) { --sticker-angle: -8deg; --sticker-y: 6px; animation-delay: .6s; }
.empty-sticker:is(:hover, :focus-visible) { animation-play-state: paused; background: #fff0f7; }
.empty-sticker:is(:hover, :focus-visible) canvas { transform: translateY(-5px) rotate(8deg) scale(1.12); filter: drop-shadow(0 6px 0 #e7b3cb88); }
.empty-sticker:active canvas { transform: translateY(1px) scale(.96); }
.empty-sticker:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.empty .empty-play-hint { margin: 2px 0 12px; font-size: 11px; color: #99627e; }
.welcome-sample .sample-spark { overflow: visible; transform-origin: center; animation: welcome-sample-spark 7s ease-in-out 1.1s infinite; }
.empty-actions .welcome-sample:is(:hover, :focus-visible) { background: #fff0f7; }
.tour-running :is(.empty-sticker, .sample-spark) { animation-play-state: paused; }
@keyframes welcome-sticker-hop {
  0%, 18%, 100% { transform: translateY(var(--sticker-y)) rotate(var(--sticker-angle)); }
  6% { transform: translateY(calc(var(--sticker-y) - 10px)) rotate(calc(var(--sticker-angle) + 7deg)) scale(1.06); }
  11% { transform: translateY(calc(var(--sticker-y) + 2px)) rotate(calc(var(--sticker-angle) - 3deg)) scale(.98); }
  15% { transform: translateY(calc(var(--sticker-y) - 2px)) rotate(var(--sticker-angle)); }
}
@keyframes welcome-sample-spark {
  0%, 24%, 100% { transform: rotate(0) scale(1); }
  8% { transform: rotate(-16deg) scale(1.22); }
  15% { transform: rotate(12deg) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-sticker, .welcome-sample .sample-spark { animation: none; }
  .empty-art canvas { transition: none; }
  .empty-sticker:is(:hover, :focus-visible, :active) canvas { transform: none; }
}
.empty h1 { font-family: var(--hand); font-size: 38px; font-weight: 400; letter-spacing: .01em; line-height: 1.05; color: var(--ink); }
.empty p { margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.empty .fine { font-size: 12px; opacity: .8; margin-top: 16px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.empty .starter-entry { background: var(--sky-2); font-size: 12px; }
.background-collection { margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--panel-2); }
.background-collection > summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 700; }
.background-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.background-choice { min-width: 0; padding: 5px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--line); cursor: pointer; transition: border-color .15s, transform .15s; }
.background-choice canvas { width: 100%; height: auto; display: block; border-radius: 7px; }
.background-choice span { display: block; font-size: 11px; font-weight: 700; padding: 6px 0 2px; }
.background-choice:hover { border-color: var(--ink); transform: translateY(-1px); }
.background-choice[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-2); box-shadow: 0 2px 0 var(--ink); }
.background-choice:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .background-choice { transition: none; } .background-choice:hover { transform: none; } }
/* Canvas comparison stays transparent so the real scene and its backdrop show through. */
.material-compare { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; max-height: none; background: transparent; color: var(--ink); box-shadow: none; overflow: hidden; }
.material-compare[open] { display: flex; flex-direction: column; }
.material-compare::backdrop { background: transparent; backdrop-filter: none; }
.compare-surface { position: relative; flex: 1; min-height: 80px; touch-action: none; cursor: ew-resize; }
.compare-label { position: absolute; top: 16px; display: flex; flex-direction: column; gap: 2px; max-width: calc(50% - 34px); padding: 9px 14px; border: 2px solid var(--ink); border-radius: 15px; background: #fff9fc; box-shadow: 0 3px 0 var(--ink); pointer-events: none; }
.compare-label.before { left: 16px; }
.compare-label.after { right: 16px; background: #ffe1ef; text-align: right; }
.compare-label span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #945671; }
.compare-label strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-divider { position: absolute; top: 0; bottom: 0; left: var(--compare-split, 50%); width: 3px; transform: translateX(-50%); background: var(--ink); box-shadow: 0 0 0 2px #fff9fc, 0 0 15px #9c527955; pointer-events: none; }
#compareHandle { position: absolute; top: 50%; left: clamp(28px, var(--compare-split, 50%), calc(100% - 28px)); display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--accent-2); box-shadow: 0 4px 0 var(--ink), 0 0 0 5px #fff8fcaa; transform: translate(-50%, -50%); cursor: ew-resize; pointer-events: auto; transition: background .15s, box-shadow .15s; }
#compareHandle:hover, .dragging #compareHandle { background: var(--accent); box-shadow: 0 2px 0 var(--ink), 0 0 0 7px #fff8fcaa; }
#compareHandle:focus-visible { outline: 3px solid #658abb; outline-offset: 7px; }
.compare-controls { position: relative; flex: none; margin: 0 16px 18px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 22px; background: var(--panel-2); box-shadow: 0 5px 0 var(--ink), var(--shadow); }
.compare-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.compare-heading strong { font-size: 16px; }
.compare-heading p { margin: 4px 0 0; font-size: 11px; color: #886277; }
.compare-actions { display: flex; align-items: end; gap: 8px; }
.compare-controls .btn { flex: none; height: 36px; padding: 0 13px; font-size: 12px; }
.compare-picker { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #886277; }
#compareMaterial { width: 100%; height: 36px; min-width: 0; }
#compareMaterial optgroup { font-family: var(--sans); font-style: normal; font-weight: 700; color: #886277; }
.comparing-material :is(.stage-hint, .sticker-delete, .object-toolbar, .statusbar) { visibility: hidden; }
#compareOnCanvas { margin: 0 0 14px; background: var(--sky-2); }
#compareOnCanvas[hidden] { display: none; }
@media (max-width: 700px) {
  .compare-controls { margin: 0 10px 12px; padding: 12px; border-radius: 18px; }
  .compare-heading { gap: 6px; margin-bottom: 8px; }
  .compare-heading strong { font-size: 14px; }
  .compare-heading p { font-size: 10px; max-width: 230px; }
  .compare-controls .btn { padding: 0 10px; font-size: 11px; height: 38px; }
  .compare-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .compare-label { top: 12px; padding: 7px 10px; max-width: calc(50% - 24px); }
  .compare-label.before { left: 12px; } .compare-label.after { right: 12px; }
  #compareHandle { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { #compareHandle { transition: none; } }
.discovery-panel-action { width: 100%; justify-content: center; margin: 0 0 14px; background: #fff0f7; font-size: 12px; }
.discovery-dialog { box-sizing: border-box; width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 24px; border: 2px solid var(--ink); border-radius: 26px; background: #fffafd; color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 20px 70px #30202e55; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.discovery-dialog::backdrop { background: #30202e88; }
.discovery-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; top: -24px; padding: 8px 0; background: #fffafd; z-index: 2; }
.discovery-heading h2 { font-family: var(--hand); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 4px 0 0; }
.discovery-heading .btn { flex: none; font-size: 23px; }
.discovery-eyebrow { font-size: 11px; font-weight: 700; color: #99627e; }
.discovery-description, .discovery-status { font-size: 12px; color: #806373; line-height: 1.6; margin: 12px 0 18px; }
.discovery-status { margin: 16px 0 0; min-height: 20px; }
.discovery-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.discovery-dialog[data-mode="starters"] { width: min(680px, calc(100vw - 24px)); }
.discovery-dialog[data-mode="starters"] .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.discovery-tile { position: relative; min-width: 0; padding: 8px 8px 12px; text-align: left; border: 2px solid var(--line-2); border-radius: 18px; background: white; color: var(--ink); box-shadow: 0 3px 0 #edc7d8; cursor: pointer; transition: transform 160ms, border-color 160ms, box-shadow 160ms; }
.discovery-tile canvas { display: block; width: 100%; height: auto; border-radius: 11px; background-color: #f2f7fb; background-image: var(--bg-dots); background-size: 12px 12px; }
.discovery-tile strong { display: block; font-size: 12px; line-height: 1.4; margin: 10px 3px 0; }
.discovery-tile > span { display: block; color: #806373; font-size: 11px; line-height: 1.5; margin: 4px 3px 0; }
.discovery-tile:hover:not(:disabled), .discovery-tile:focus-visible { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 5px 0 var(--line-2); }
.discovery-tile:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.discovery-tile[aria-pressed="true"] { border-color: var(--ink); background: #ffe5f0; box-shadow: 0 3px 0 var(--ink); }
.discovery-tile[aria-pressed="true"]::after { content: '✓'; position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 23px; height: 23px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--accent-2); font-size: 13px; }
.discovery-tile:disabled { cursor: wait; opacity: .65; }
@media (max-width: 720px) { .discovery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .discovery-dialog { padding: 16px; border-radius: 22px; }
  .discovery-heading { top: -16px; }
  .discovery-heading h2 { font-size: 27px; }
  .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .discovery-tile { transition: none; } .discovery-tile:hover:not(:disabled), .discovery-tile:focus-visible { transform: none; } }
@media (max-width: 640px) {
  .dropzone { padding: 16px; }
  .empty { width: 100%; min-width: 0; max-height: 100%; overflow: auto; padding: 18px; border-radius: 24px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .empty-art canvas { width: 42px; height: 42px; }
  .empty h1 { font-size: 30px; }
  .empty p { margin-top: 10px; font-size: 12px; line-height: 1.5; }
  .empty .fine { margin-top: 12px; font-size: 11px; }
  .empty-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; gap: 8px; }
  .empty-actions .btn { min-width: 0; height: 32px; padding: 0 6px; font-size: 12px; }
  .tour-invite { margin-top: 12px; padding-top: 10px; gap: 8px; }
  #tourInviteStart { padding: 8px 10px; gap: 8px; }
}

/* status */
.statusbar {
  position: absolute; left: 14px; bottom: 14px; max-width: min(560px, calc(100% - 28px)); z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); font-size: 12px; font-weight: 700;
  transition: opacity .2s;
}
.statusbar.hidden { opacity: 0; pointer-events: none; }
.statusbar.error { border-color: var(--danger); box-shadow: 0 3px 0 var(--danger); color: #b0304f; }
.progress { width: 0; height: 6px; border-radius: 3px; background: var(--accent-2); overflow: hidden; transition: width .2s; }
.statusbar.busy .progress { width: 90px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.progress i.indeterminate { animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ---------------------------------------------------------------- */
/* Cutout editor                                                      */
/* ---------------------------------------------------------------- */
.editor { position: absolute; inset: 0; z-index: 7; background: var(--bg); background-image: var(--bg-dots); background-size: 18px 18px; }
.editor[hidden] { display: none; }
#editCanvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
#editCanvas:focus { outline: none; }
.editor.brush #editCanvas { cursor: none; }
.editor.keying #editCanvas { cursor: cell; }
.editor.panning #editCanvas, .editor[data-tool="pan"] #editCanvas { cursor: grab; }
.editor.dragging-view #editCanvas { cursor: grabbing; }
.editor[data-preview="original"] #editCanvas { cursor: default; }
.edit-toolbar {
  position: absolute; z-index: 2; left: 12px; right: 12px; top: 12px;
  padding: 10px 12px; border-radius: 20px; background: rgba(255, 255, 255, .97); border: 2px solid var(--line-2); box-shadow: 0 3px 0 var(--line-2), var(--shadow);
}
.edit-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.edit-titlebar strong { display: block; font-size: 15px; }
.edit-titlebar span { color: var(--muted); font-size: 11px; }
.tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tools button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 5px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--ink); font-size: 12px; font-weight: 700; }
.tools button > span:first-child { font-size: 18px; line-height: 1; }
.tools button svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tools button:hover:not(:disabled) { background: var(--bg); border-color: var(--line-2); }
.tools button.active { background: var(--accent-2); border-color: var(--ink); color: var(--accent-ink); box-shadow: 0 2px 0 var(--ink); }
.tools button[data-tool="brushAdd"].active { background: #d5f0e1; }
.tools button[data-tool="pan"].active { background: var(--sky-2); }
.edit-options { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.editor.brush .edit-options, .editor.keying .edit-options, .editor[data-tool="lasso"] .edit-options { margin-top: 10px; }
.mini { display: none; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.mini input[type=range] { width: 100px; min-width: 50px; }
.mini output { min-width: 38px; color: var(--ink); font: 11px var(--mono); }
.editor.brush .brush-only, .editor.keying .key-only { display: inline-flex; }
.brush-presets, .lasso-actions { display: none; gap: 4px; }
.brush-presets { flex-basis: 100%; }
.brush-presets button, .lasso-actions button { min-height: 28px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--ink); font: 700 11px var(--sans); }
.brush-presets button:hover:not(:disabled), .lasso-actions button:hover:not(:disabled) { border-color: var(--ink); background: var(--sky-2); }
.brush-presets button[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-2); }
.editor[data-tool="lasso"] .lasso-only { display: inline-flex; }
.lasso-actions { flex-wrap: wrap; }
.lasso-actions button[data-selection="erase"] { background: var(--accent-2); }
.lasso-actions button[data-selection="restore"] { background: #d5f0e1; }
.lasso-actions button[data-selection="keep"] { background: var(--sky-2); }
.edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 2px dotted var(--line); }
.edit-actions .btn.small { height: 27px; padding: 0 10px; font-size: 11px; }
.spacer { flex: 1; }
.edit-footer { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; padding: 8px 10px; border: 2px solid var(--line-2); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 3px 0 var(--line-2); }
.edit-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.edit-previews, .edit-zoom { display: flex; align-items: center; gap: 3px; }
.edit-previews { flex-wrap: wrap; }
.edit-viewbar button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 700; }
.edit-viewbar button:hover:not(:disabled) { background: var(--bg); }
.edit-previews button[aria-pressed="true"] { background: var(--accent-2); border-color: var(--line-2); }
.edit-zoom { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.edit-zoom output { min-width: 44px; font: 11px var(--mono); text-align: center; }
.edit-hint { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.editor button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.editor button:disabled { cursor: not-allowed; opacity: .4; }
.brush-cursor { position: absolute; z-index: 1; pointer-events: none; border: 2px solid #fff; border-radius: 50%; outline: 1px solid var(--ink); transform: translate(-50%, -50%); background: rgba(255,143,184,.1); }
.brush-cursor[hidden] { display: none; }
.brush-cursor i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed currentColor; border-radius: 50%; }
.brush-cursor[data-add="true"] { color: #208667; background: rgba(116,224,194,.15); }
.brush-cursor[data-add="false"] { color: #bd375d; }
.edit-busy { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 20px; border: 2px solid var(--ink); border-radius: 999px; background: var(--butter); box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
.edit-busy[hidden] { display: none; }
@media (max-width: 640px) {
  .tools { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tools button { flex-direction: column; min-height: 49px; font-size: 10px; gap: 3px; padding-inline: 2px; }
  .edit-toolbar { padding: 8px; }
  .edit-titlebar span { display: none; }
  .edit-options { gap: 6px; }
  .mini { flex: 1 1 100%; }
  .brush-presets button { flex: 1; }
  .lasso-actions { flex: 1 1 100%; }
  .lasso-actions button { flex: 1; padding-inline: 5px; font-size: 10px; }
  .mini > span { min-width: 64px; }
  .mini input[type=range] { flex: 1; }
  .edit-actions { gap: 6px; }
  .edit-actions .spacer { display: none; }
  .edit-viewbar button { padding-inline: 8px; }
  .edit-zoom { margin-left: auto; }
  .layout:has(.stage.editing) { grid-template-rows: max(82vh, 660px) auto; }
}

/* ---------------------------------------------------------------- */
/* Knob panel                                                         */
/* ---------------------------------------------------------------- */
.panel-wrap { display: flex; flex-direction: column; min-height: 0; border-left: 2px solid var(--line); background: var(--bg); background-image: var(--bg-dots); background-size: 18px 18px; }
/* Two paper tabs with the same die-cut rim and offset shadow as the editor's stickers. */
.panel-tabs { display: flex; flex: none; gap: 10px; margin: 14px 12px 0; padding-bottom: 10px; border-bottom: 2px dotted var(--line-2); }
.panel-tabs button {
  --tab-fill: var(--accent-2); --tab-shadow: var(--line-2); --tab-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; min-height: 54px; padding: 8px; border: 2px solid var(--line-2); border-radius: 16px 16px 10px 10px;
  background: var(--panel); color: #705463; box-shadow: 0 3px 0 var(--tab-shadow), inset 0 0 0 3px #fff;
  font: 700 13px/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--tab-ease), background 220ms ease, border-color 220ms ease, box-shadow 180ms var(--tab-ease), color 180ms ease;
}
#layersTab { --tab-fill: var(--sky-2); }
.panel-tab-icon { flex: none; width: 32px; height: 32px; overflow: visible; filter: drop-shadow(0 1px 0 rgba(58, 42, 53, .12)); }
.panel-tab-icon > * { transform-box: fill-box; transform-origin: center; }
.panel-tab-label { position: relative; min-width: 0; white-space: nowrap; }
/* A short ink stroke makes the current tab readable without relying on colour. */
.panel-tab-label::after { content: ""; position: absolute; height: 2px; bottom: -5px; left: 0; right: 0; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--tab-ease); }
.panel-tabs [aria-selected="true"] { --tab-shadow: var(--ink); border-color: var(--ink); background: var(--tab-fill); color: var(--ink); }
.panel-tabs [aria-selected="true"] .panel-tab-label::after { transform: scaleX(1); }
@media (hover: hover) {
  .panel-tabs button:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--tab-shadow), inset 0 0 0 3px #fff; }
  .panel-tabs [aria-selected="false"]:hover { background: var(--panel-2); }
}
.panel-tabs button:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--tab-shadow), inset 0 0 0 3px #fff; transition-duration: 80ms; }
.layer-count { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 8px 8px 8px 3px; background: var(--panel-2); color: #705463; font: 700 11px/1 var(--sans); font-variant-numeric: tabular-nums; transition: background .14s, border-color .14s, color .14s; }
.panel-tabs [aria-selected="true"] .layer-count { background: #fff; border-color: var(--ink); color: var(--ink); }
.layer-count[data-empty="true"] { color: #806373; }
@media (max-width: 360px) {
  .panel-tabs button { gap: 5px; font-size: 12px; }
  .panel-tab-icon { width: 26px; height: 26px; }
  .layer-count { min-width: 22px; padding-inline: 4px; }
}
.properties-pane, .layers-pane { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.properties-pane[hidden], .layers-pane[hidden] { display: none; }
.layers-heading { padding: 18px 16px 10px; }
.layers-heading strong { font-family: var(--hand); font-size: 23px; font-weight: 400; }
.layers-heading p, .layer-order p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 5px 0 0; }
.layer-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; margin: 0; scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; }
.layer-row { display: flex; align-items: center; gap: 4px; border: 2px solid var(--line-2); border-radius: 15px; background: #fff; margin-bottom: 8px; box-shadow: 0 2px 0 var(--line-2); }
.layer-row.selected { border-color: var(--accent); background: var(--panel-2); box-shadow: 0 2px 0 var(--accent); }
.layer-row.locked { background: #f7f4f6; }
.layer-select { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; border: 0; padding: 8px; border-radius: 12px; text-align: left; background: transparent; color: var(--ink); cursor: pointer; }
.layer-select canvas { flex: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#fff 0% 25%, #f4edf2 0% 50%) 50% / 12px 12px; }
.layer-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.layer-text strong { font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-text small { font-size: 10px; line-height: 1.4; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-row.attached .layer-text small { color: var(--accent-ink); }
.layer-lock { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: #806373; cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
.layer-lock[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-2); border-color: var(--accent); box-shadow: inset 0 1px 0 #ffffff80; }
.layer-lock:hover:not(:disabled), .layer-select:hover:not(:disabled) { background: var(--panel-2); }
.layer-lock:hover:not(:disabled) { border-color: var(--line-2); background: #ffe8f1; }
.layer-lock:active:not(:disabled) { box-shadow: inset 0 2px 3px #59364d14; }
.layer-lock:disabled { color: #917b86; background: #f3edf0; border-color: #e3d9de; cursor: default; }
.layer-order { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 12px; border-top: 2px solid var(--line); background: var(--panel); }
.layer-order .btn { flex: 1; justify-content: center; gap: 6px; min-width: 0; height: 42px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 999px; background: #fffafd; font-size: 11px; box-shadow: 0 3px 0 var(--ink); }
.layer-order .btn:hover:not(:disabled) { background: #ffe8f1; box-shadow: 0 4px 0 var(--ink); }
.layer-order .btn:active:not(:disabled) { box-shadow: 0 1px 0 var(--ink); }
.layer-order .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.layer-order .btn:disabled { opacity: 1; color: #a08b96; background: #faf5f8; border-color: #dbc8d2; box-shadow: 0 2px 0 #eadce3; }
.order-layer-back { fill: var(--sky-2); }
.order-layer-front { fill: var(--accent-2); }
.order-layer-front, .order-arrow { transition: transform 280ms cubic-bezier(.22,1,.36,1); }
.layer-order .btn[data-order="-1"] { --order-shift: 2px; }
.layer-order .btn[data-order="1"] { --order-shift: -2px; }
.layer-order .btn:is(:hover, :focus-visible):not(:disabled) .order-arrow { transform: translateY(var(--order-shift)); }
.layer-order .btn:is(:hover, :focus-visible):not(:disabled) .order-layer-front { transform: translateY(var(--order-shift)); }
.layer-order .btn:disabled .order-layer-back { fill: #f0eaf1; }
.layer-order .btn:disabled .order-layer-front { fill: #f5e7ee; }
.layer-order p { flex-basis: 100%; padding: 2px 3px 0; }
@media (prefers-reduced-motion: reduce) {
  .layer-order .btn, .order-layer-front, .order-arrow { transition: none; }
  .layer-order .btn:is(:hover, :focus-visible):not(:disabled) :is(.order-arrow, .order-layer-front) { transform: none; }
}
.layers-empty { margin: 24px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; }
.object-toolbar { position: absolute; z-index: 6; top: 0; left: 0; display: flex; flex-direction: column; width: max-content; max-width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 6px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 18px; background: #fffafd; box-shadow: 0 3px 0 var(--ink), 0 9px 24px #59364d18; }
.object-toolbar[hidden] { display: none; }
.resize-frame { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.resize-visibility { flex: none; margin: 0 12px 12px; padding: 5px 12px; border: 2px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: 0 2px 0 var(--line-2); }
.resize-visibility label { display: flex; align-items: center; gap: 9px; min-height: 32px; color: var(--ink); font: 700 12px/1.4 var(--sans); cursor: pointer; }
.resize-visibility label svg { flex: none; }
.resize-visibility .switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.resize-frame[hidden] { display: none; }
.resize-outline { width: 100%; height: 100%; overflow: hidden; fill: none; }
.resize-outline-halo { stroke: #fff9fc; stroke-width: 4; opacity: .9; }
.resize-outline-line { stroke: #c45589; stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.resize-frame.together .resize-outline-line { stroke-dasharray: none; }
.resize-handle { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
.resize-handle > span { width: 13px; height: 13px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 4px; background: var(--accent); box-shadow: 0 2px 0 var(--ink), 0 0 0 3px #fff9fc; transition: background .15s, box-shadow .15s; }
.resize-handle:hover:not(:disabled) > span, .resize-handle:focus-visible > span { background: #ffe1ee; box-shadow: 0 2px 0 var(--ink), 0 0 0 5px #ffc4ddaa; }
.resize-handle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.resize-handle:active:not(:disabled) > span { background: var(--sky-2); box-shadow: 0 1px 0 var(--ink), 0 0 0 4px #fff9fc; }
.resize-handle:disabled > span { background: #e6dce2; border-color: #9a8791; box-shadow: 0 1px 0 #9a8791, 0 0 0 3px #fff9fc; }
.resize-hint { position: absolute; transform: translateX(-50%); max-width: calc(100% - 24px); box-sizing: border-box; padding: 5px 11px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff9fc; color: var(--ink); box-shadow: 0 2px 0 var(--ink); font: 700 11px/1.4 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.resize-frame:is(.is-resizing, .blocked, :focus-within) .resize-hint { opacity: 1; }
.object-resize-together { display: flex; align-items: center; justify-content: center; gap: 7px; flex: none; margin-top: 5px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff9fc; font: 700 11px/1.3 var(--sans); cursor: pointer; }
.object-resize-together[hidden] { display: none; }
.object-resize-together svg { width: 15px; height: 15px; }
.object-resize-together i { width: 26px; height: 16px; box-sizing: border-box; padding: 2px; border: 1.5px solid var(--ink); border-radius: 10px; background: #efe5eb; }
.object-resize-together i::after { content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.object-resize-together[aria-pressed="true"] { background: #ffe8f2; border-color: #e5a5c2; }
.object-resize-together[aria-pressed="true"] i { background: var(--accent); }
.object-resize-together[aria-pressed="true"] i::after { transform: translateX(9px); }
.object-resize-together:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.object-resize-together:disabled { opacity: .55; cursor: default; }
.comparing-material .resize-frame { visibility: hidden; }
@media (pointer: coarse) { .resize-handle { width: 46px; height: 46px; } .resize-handle > span { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .resize-handle > span, .object-resize-together i::after { transition: none; } }
.object-image-action { display: flex; align-items: center; justify-content: center; flex: none; gap: 7px; min-height: 32px; margin-top: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sky-2); color: var(--ink); font: 700 11px/1.3 var(--sans); cursor: pointer; }
.object-image-action[hidden] { display: none; }
.object-image-action svg { width: 16px; height: 16px; }
.object-image-action:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent); }
.object-image-action:disabled { color: var(--muted); background: var(--panel-2); cursor: default; }
.object-image-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.object-actions { display: flex; flex: none; align-items: stretch; gap: 4px; min-width: 0; }
.object-action { position: relative; display: flex; flex: 1 1 60px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 60px; min-width: 0; min-height: 52px; padding: 6px 2px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ink); box-shadow: none; font: 700 11px/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
.object-action > svg { flex: none; width: 20px; height: 20px; }
.object-action[data-action="rotate"] { flex-basis: 72px; width: 72px; background: #f6eefc; border-color: #eadcf0; }
.object-angle-readout { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; }
.object-angle-readout svg { width: 17px; height: 17px; flex: none; }
.object-angle-value { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.object-angle-needle { transform-origin: 10px 10px; transform: rotate(var(--object-angle, 0deg)); }
.object-action[data-action="rotate"] .object-action-label { display: flex; align-items: center; gap: 5px; }
.object-action[data-action="rotate"] .object-action-label::after { content: ''; width: 4px; height: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.object-action[data-action="rotate"][aria-expanded="true"] .object-action-label::after { transform: translateY(1px) rotate(225deg); }
.object-action[hidden] { display: none; }
.object-action:hover:not(:disabled) { background: #ffe8f1; border-color: var(--line); }
.object-action[aria-pressed="true"], .object-action[aria-expanded="true"] { background: var(--accent-2); border-color: var(--accent); box-shadow: inset 0 1px 2px #59364d10; }
.object-action:active:not(:disabled) { background: var(--accent-2); box-shadow: inset 0 2px 3px #59364d18; }
.object-action:disabled { opacity: 1; color: #9a8791; background: #f6f0f3; border-color: #e5dce1; box-shadow: none; cursor: default; }
.object-delete { margin-left: 6px; color: #a53d5d; background: #fff0f4; }
.object-delete::before { content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.object-delete:hover:not(:disabled) { color: #922342; border-color: #e8adc0; background: #ffe0e9; }
.object-toolbar.rotation-open { min-width: min(286px, calc(100% - 16px)); }
.object-rotation { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); overflow: auto; overscroll-behavior: contain; }
.object-rotation[hidden] { display: none; }
.object-rotation .rotation-control { padding: 6px; border: 0; background: transparent; }
.object-rotation .rotation-head > label { font-size: 12px; font-weight: 700; }
.object-action:focus-visible, .layer-select:focus-visible, .layer-lock:focus-visible, .panel-tabs button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.panel-head { display: flex; flex: none; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 10px; font-weight: 700; }
.panel-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.panel-title #panelName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; color: var(--ink); }
.panel-sub { font-weight: 400; color: var(--accent); font-family: var(--hand); font-size: 15px; line-height: 1.15; }
.panel.idle .group:not([data-group="scene"]) .group-head span { color: var(--muted); }
.panel.idle .group:not([data-group="scene"]) .group-body { opacity: .5; pointer-events: none; }
.panel-tip { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--muted); font-size: 11px; line-height: 1.4; }
.panel-tip svg { flex: none; }
.properties-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; scrollbar-gutter: stable; }
.properties-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel { padding: 2px 10px 10px; }
.panel-foot { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 2px solid var(--line); background: var(--panel); }
.panel-foot-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.group { margin: 0 0 8px; background: var(--panel); border: 2px solid var(--line-2); border-radius: 18px; box-shadow: 0 3px 0 var(--line-2); overflow: hidden; }
.group[hidden] { display: none; }
.group-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; border: 0; background: var(--panel-2);
  color: var(--ink); font-weight: 700; font-size: 13px; text-align: left;
}
.group-head span { flex: 1; }
.group-head { --icon-ease: cubic-bezier(.22, 1, .36, 1); }
.group-head .section-icon { width: 32px; height: 32px; display: block; flex: none; overflow: visible; filter: drop-shadow(0 1px 0 rgba(58, 42, 53, .16)); transition: transform 140ms var(--icon-ease); }
.section-icon * { transform-box: fill-box; transform-origin: center; }
.section-icon .scissor-blade { transform-box: view-box; transform-origin: 14px 16px; }
[data-group="lanyard"] .section-icon-body, [data-group="pass"] .section-icon-body { transform-box: view-box; transform-origin: 16px 4px; }
.group-head:active .section-icon { transform: scale(.96); transition-duration: 80ms; }
.group-head .group-chevron { transition: transform 260ms var(--icon-ease), opacity 180ms ease; color: var(--accent); flex: none; opacity: .7; }
.group-head:is([data-icon-active], :focus-visible) .group-chevron { opacity: 1; }
.group.collapsed .group-head .group-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .group .group-head .section-icon, .group .group-head .section-icon * { animation: none !important; transition: none !important; }
  .group-head:active .section-icon { transform: none; }
  .group-head .group-chevron { transition: none; }
}
.group-body { padding: 8px 14px 12px; display: grid; gap: 8px; border-top: 2px dotted var(--line); }
.whole-image-note { margin: 0; padding: 9px 10px; border-radius: 10px; background: var(--sky-2); color: var(--ink); font-size: 11px; line-height: 1.6; }
.group:not(.whole-image) .whole-image-note, .group.whole-image [data-rebuild="cutout"] { display: none; }
.group.collapsed .group-body { display: none; }

/*
 * Every row is label | control. Every control is the same 28px pill of the
 * same width (slider with its value inside, select, text box, colour chip
 * with its hex), so edges line up down the whole panel.
 */
.control { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 28px; }
.control[hidden] { display: none; }
.control-effect-gallery { display: block; padding: 2px 0 12px; border-bottom: 2px dotted var(--line-2); }
.surface-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.surface-choice { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 7px; color: var(--ink); background: #fff; border: 2px solid var(--line-2); border-radius: 15px; box-shadow: 0 3px 0 var(--line-2); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.surface-choice[aria-pressed=true] { background: #fff0f6; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.surface-choice:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.surface-choice:focus-visible, .surface-preview:focus-visible { outline: 3px solid #92bfe9; outline-offset: 3px; }
.surface-choice-title { font: 700 12px/1.4 var(--sans); }
.surface-choice-caption { margin-top: 4px; font: 11px/1.4 var(--sans); color: var(--muted); }
.surface-choice[data-surface-effect=none] { padding: 8px; justify-content: center; border-radius: 999px; }
.surface-preview.btn { font-size: 12px; padding: 8px; min-width: 0; }
.surface-preview { align-self: center; }
.surface-choice:disabled { opacity: .4; cursor: default; }
.surface-effects-note { margin: 12px 0 0; color: var(--muted); font: 11px/1.6 var(--sans); }
.surface-demo { display: grid; place-items: center; height: 76px; width: 100%; border-radius: 9px; margin-bottom: 8px; background: radial-gradient(circle, #e9cfde 1px, transparent 1.5px) 0 0 / 10px 10px, #fcf5fb; perspective: 220px; }
.surface-demo-sticker { position: relative; display: grid; place-items: center; width: 51px; height: 55px; border: 2px solid var(--ink); border-radius: 10px; background: #d7e9fa; box-shadow: 3px 4px 0 #cbbdce; transform: rotate(-9deg); overflow: hidden; }
.surface-demo-sticker > span { color: #866998; font-size: 31px; }
.surface-demo-foil-reveal .surface-demo-sticker::after { content: ''; position: absolute; inset: -25px; background: linear-gradient(115deg, transparent 30%, #a6f6ed99 40%, #fffaff 47%, #f3a4efbb 55%, transparent 66%); transform: translateX(-90px); }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-foil-reveal .surface-demo-sticker::after { animation: surface-demo-shine 1.7s cubic-bezier(.2,.6,.3,1) both; }
.surface-demo-peel .surface-demo-sticker { background: #ffcddd; border-top-right-radius: 22px; }
.surface-demo-peel .surface-demo-sticker::after { content: ''; position: absolute; width: 23px; height: 23px; right: -3px; top: -3px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 0 0 9px; background: #fff4dc; transform-origin: top right; box-shadow: -2px 3px 4px #62415433; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-peel .surface-demo-sticker { animation: surface-demo-curl 1.8s cubic-bezier(.22,.8,.3,1) both; }
.surface-demo-ripple .surface-demo-sticker { background: linear-gradient(135deg, #d5fbfa99, #a7d1faaa); border-color: #617b9b; }
.surface-demo-ripple .surface-demo-sticker::after { content: ''; position: absolute; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 7px #9bd8ef66, 0 0 0 9px #ffffff88; transform: scale(.15); opacity: 0; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-ripple .surface-demo-sticker::after { animation: surface-demo-ripple 1.8s ease-out both; }
.surface-demo-lenticular .surface-demo-sticker { background: #e5d7fa; }
.surface-demo-lenticular .surface-demo-sticker::after { content: '♥'; display: grid; place-items: center; position: absolute; inset: 0; color: #c9638e; font-size: 32px; background: repeating-linear-gradient(90deg, #fbd0e5 0 3px, #fce3ed 3px 4px); opacity: 0; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-lenticular .surface-demo-sticker { animation: surface-demo-flip 2s ease-in-out both; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-lenticular .surface-demo-sticker::after { animation: surface-demo-change 2s ease-in-out both; }
.surface-demo-assembly .surface-demo-sticker { background: #fff; overflow: visible; border-radius: 4px; }
.surface-choice[data-surface-effect=assembly] { grid-column: 1 / -1; display: grid; grid-template-columns: 84px 1fr; column-gap: 12px; text-align: left; }
.surface-choice[data-surface-effect=assembly] .surface-demo { grid-row: 1 / 3; margin: 0; }
.surface-choice[data-surface-effect=assembly] .surface-choice-title { align-self: end; }
.surface-choice[data-surface-effect=assembly] .surface-choice-caption { align-self: start; }
.surface-demo-assembly .surface-demo-sticker > span { display: grid; place-items: center; width: 35px; height: 36px; margin-bottom: 8px; background: #fbd0e5; font-size: 24px; border: 1px solid #dbacc2; }
.surface-demo-assembly .surface-demo-sticker::after { content: '♥'; position: absolute; right: -8px; bottom: 0; color: #8769b0; font-size: 22px; filter: drop-shadow(0 2px 0 #fff); }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-assembly .surface-demo-sticker { animation: surface-demo-land .65s cubic-bezier(.2,.8,.3,1) both; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-assembly .surface-demo-sticker > span { animation: surface-demo-part .55s .2s both; }
.surface-choice:is(:hover,:focus-visible):not(:disabled) .surface-demo-assembly .surface-demo-sticker::after { animation: surface-demo-part .55s .45s both; }
.surface-assets { margin: 12px 0 18px; padding: 12px; border: 2px dashed var(--line-2); border-radius: 15px; background: #fff9fc; }
.surface-image-tools { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9px; }
.surface-image-tools canvas { width: 76px; height: 58px; justify-self: center; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; }
.surface-image-tools p { margin: 0; color: var(--muted); font: 12px/1.5 var(--sans); overflow-wrap: anywhere; }
.surface-image-tools .btn { min-width: 0; padding: 8px 6px; font-size: 11px; }
#btnFlipImage { background: var(--accent-2); grid-column: 1 / -1; }
.surface-assets-hint { margin: 10px 0 0; color: var(--muted); font: 11px/1.6 var(--sans); }
.surface-assets[hidden], .surface-image-tools[hidden], .surface-image-tools canvas[hidden] { display: none; }
@keyframes surface-demo-ripple { 0% { opacity: 0; transform: scale(.15); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes surface-demo-flip { 0%, 100% { transform: rotate(-9deg) rotateY(-18deg); } 50% { transform: rotate(-9deg) rotateY(22deg); } }
@keyframes surface-demo-change { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes surface-demo-land { 0% { transform: translateY(-12px) rotate(-18deg) scale(.8); opacity: 0; } 70% { transform: rotate(-7deg) scale(1.04); opacity: 1; } 100% { transform: rotate(-9deg); opacity: 1; } }
@keyframes surface-demo-part { 0% { transform: translateY(-9px) scale(.8); opacity: 0; } 75% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes surface-demo-shine { 0%, 8% { transform: translateX(-90px); } 75%, 100% { transform: translateX(90px); } }
@keyframes surface-demo-curl { 0%, 100% { transform: rotate(-9deg); } 42%, 58% { transform: rotate(-5deg) rotateY(-28deg) rotateX(12deg) translateY(-3px); box-shadow: 7px 8px 6px #cbbdce; } }
@media (prefers-reduced-motion: reduce) {
  .surface-choice { transition: none; }
  .surface-choice:hover:not(:disabled) { transform: none; }
  .surface-choice .surface-demo-sticker, .surface-choice .surface-demo-sticker::after, .surface-choice .surface-demo-sticker > span { animation: none !important; }
  .surface-demo-foil-reveal .surface-demo-sticker::after { transform: none; }
}
.control-frame-gallery { display: block; padding-block: 3px 6px; }
.frame-collection { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.frame-collection > summary { padding: 9px 10px; color: var(--accent-ink); font-size: 11px; font-weight: 700; cursor: pointer; }
.frame-collection > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.frame-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 7px 9px; }
.frame-gallery button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 3px 3px 7px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 10px; line-height: 1.3; font-weight: 700; transition: background .15s, border-color .15s; }
.frame-gallery canvas { display: block; width: 100%; max-width: 90px; height: 84px; object-fit: contain; }
.frame-gallery button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--accent); }
.frame-gallery button[aria-pressed=true] { background: var(--accent-2); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.frame-gallery button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.frame-gallery button:disabled { opacity: .4; cursor: default; }
.control-palette { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 3px 5px; }
.border-palettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.border-palettes button { min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--ink); font: 700 10px/1.4 var(--sans); cursor: pointer; }
.border-palette-swatch { display: block; height: 15px; margin-bottom: 4px; border: 1px solid #3a2a3518; border-radius: 5px; }
.border-palettes button:hover:not(:disabled) { border-color: var(--ink); background: var(--sky-2); }
.border-palettes button[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-2); box-shadow: 0 2px 0 var(--ink); }
.border-palettes button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.border-palettes button:disabled { opacity: .4; cursor: default; }
.control label { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.control output, .control code { font-family: var(--mono); font-size: 11px; color: var(--ink); opacity: .85; white-space: nowrap; }
.control output, .mini output, .edit-zoom output { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; opacity: 1; }
.field { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--line-2); background: #fff; min-width: 0; box-sizing: border-box; }
.field input[type=range] { flex: 1; min-width: 0; height: 20px; }
.field output { flex: none; min-width: 48px; padding: 3px 6px; margin-right: -5px; border-radius: 6px; background: var(--panel-2); color: var(--accent-ink); text-align: right; line-height: 1.2; }
.field.colour { position: relative; cursor: pointer; width: 100%; text-align: left; transition: border-color .15s, box-shadow .15s; }
.field.colour .chip { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--c, #fff); border: 2px solid var(--line-2); box-sizing: border-box; }
.field.colour code { flex: 1; text-align: left; }
.colour-trigger-dots { flex: none; color: var(--muted); font-size: 18px; font-weight: 700; line-height: 1; }
.field.colour:hover:not(:disabled), .field.colour[aria-expanded=true] { border-color: var(--ink); background: var(--panel-2); box-shadow: 0 2px 0 var(--line-2); }
.field.colour:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.field.colour:disabled { cursor: default; opacity: .45; }
.control-select select { height: 28px; font-size: 12px; width: 100%; min-width: 0; text-overflow: ellipsis; padding-left: 10px; border-radius: 10px; }
.control-toggle { grid-template-columns: minmax(0, 1fr) auto; }   /* the label gets the whole row, the switch sits on the right edge */
.control-toggle .switch { justify-self: end; }
.control-text input[type=text] {
  height: 28px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--line-2); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; min-width: 0; width: 100%;
}
.control-text input[type=text]::placeholder { color: #c9aebb; font-weight: 400; }

.control-rotation { display: block; }
.rotation-control { padding: 9px 10px 8px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--panel-2); }
.rotation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.rotation-head > label { color: var(--ink); }
.rotation-reset { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 7px; padding: 2px 5px; color: var(--muted); background: transparent; font-size: 10px; }
.rotation-reset svg { width: 12px; height: 12px; }
.rotation-reset:hover:not(:disabled) { color: var(--ink); background: var(--accent-2); }
.rotation-body { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; }
.rotation-dial { display: block; width: 84px; height: 84px; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
.rotation-dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rotation-disc { fill: white; stroke: var(--line-2); stroke-width: 1.5; }
.rotation-tick { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.rotation-tick.major { stroke: var(--ink); stroke-width: 2; }
.rotation-needle path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.rotation-needle circle { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
.rotation-pivot { fill: var(--ink); }
.rotation-dial:hover:not(:disabled) .rotation-disc, .rotation-control.dragging .rotation-disc { fill: var(--bg); stroke: var(--accent); }
.rotation-control.dragging .rotation-dial { cursor: grabbing; }
.rotation-values { display: grid; gap: 7px; min-width: 0; }
.rotation-stepper { display: flex; align-items: stretch; height: 36px; border: 1.5px solid var(--line-2); border-radius: 10px; background: white; overflow: hidden; }
.rotation-stepper > button { flex: none; width: 28px; border: 0; padding: 0; background: transparent; font-size: 18px; line-height: 1; }
.rotation-stepper > button:hover:not(:disabled) { background: var(--accent-2); }
.rotation-stepper .rotation-degree { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 2px; padding-right: 3px; overflow: visible; color: var(--ink); }
.rotation-degree input { appearance: textfield; width: var(--degree-width, 2ch); max-width: calc(100% - 10px); min-width: 0; padding: 0; border: 0; outline: none; background: transparent; text-align: right; color: var(--ink); font: 700 17px var(--sans); font-variant-numeric: tabular-nums; }
.rotation-degree input::-webkit-inner-spin-button, .rotation-degree input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.rotation-degree > span { font-size: 16px; font-weight: 700; }
.rotation-stepper:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-2); }
.rotation-stepper:has([aria-invalid=true]) { border-color: var(--danger); }
.rotation-turns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rotation-turns button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 3px 5px; border: 1px solid var(--line-2); border-radius: 8px; background: white; color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 var(--line); }
.rotation-turns button[data-turn="90"] svg { transform: scaleX(-1); }
.rotation-turns button:hover:not(:disabled) { border-color: var(--ink); background: var(--sky-2); }
.rotation-turns button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.rotation-hint { padding-top: 5px; color: var(--muted); font-size: 10px; text-align: center; }
.rotation-touch-hint { display: none; }
.rotation-control.disabled { opacity: .45; }
.rotation-control :disabled { cursor: default; }
.rotation-control button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .rotation-body { grid-template-columns: 88px minmax(0, 1fr); } .rotation-dial { width: 88px; height: 88px; } .rotation-stepper { height: 44px; } .rotation-stepper > button { width: 36px; } .rotation-turns button { min-height: 40px; } .rotation-reset { min-height: 32px; } .rotation-pointer-hint { display: none; } .rotation-touch-hint { display: inline; } }

input[type=range] {
  --t: 0.5;
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) calc(var(--t) * 100%), var(--accent-2) calc(var(--t) * 100%), var(--accent-2) 100%);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--accent-2); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-2); }
input[type=range]:disabled { cursor: not-allowed; }

.switch { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--accent-2); border: 2px solid var(--ink); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-sizing: border-box; transition: transform .15s, background .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:disabled { cursor: not-allowed; }


/* ---------------------------------------------------------------- */
/* Responsive                                                         */
/* ---------------------------------------------------------------- */
@media (max-width: 960px) {
  body { overflow: auto; }
  .topbar { padding: 10px 12px; }
  .layout { grid-template-columns: 1fr; grid-template-rows: 62vh auto; flex: none; }
  .panel-wrap { border-left: 0; border-top: 2px solid var(--line); }
  .properties-scroll { flex: none; overflow: visible; scrollbar-gutter: auto; }
  .layer-list { flex: none; max-height: 52vh; }
  .object-action { min-height: 54px; }
  .layer-order .btn { height: 44px; }
  .edit-toolbar { top: 8px; left: 8px; right: 8px; }
  /* menus become bottom sheets on small screens */
  .menu-list { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; min-width: 0; max-height: 72vh; overflow-y: auto; }
  .icon-menu { width: auto; max-height: 72vh; }
}
/* A shared palette card floats beside the property being edited. */
.colour-picker {
  position: fixed; inset: auto; margin: 0; width: 324px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  overflow: auto; overscroll-behavior: contain; padding: 16px; border: 2px solid var(--ink); border-radius: 20px;
  background: var(--panel-2); color: var(--ink); font: 12px/1.4 var(--sans);
  box-shadow: 0 4px 0 var(--ink), 0 14px 40px rgba(58, 42, 53, .2); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.colour-picker::backdrop { background: transparent; }
.colour-picker [hidden] { display: none !important; }
.colour-picker-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.colour-picker-head h2 { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.colour-picker-mark { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; transform: rotate(-8deg); }
.colour-picker-mark i { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.colour-picker-mark i:nth-child(2) { background: var(--sky); }
.colour-picker-mark i:nth-child(3) { background: var(--butter); }
.colour-picker-mark i:nth-child(4) { background: var(--mint); }
.colour-close { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: white; font-size: 23px; line-height: 1; }
.colour-close:hover { background: var(--accent-2); border-color: var(--ink); }
.colour-sv { position: relative; height: 176px; border: 1px solid rgba(58, 42, 53, .18); border-radius: 12px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--hue); cursor: crosshair; touch-action: none; }
.colour-handle { position: absolute; width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .65), 0 2px 5px #0004; pointer-events: none; }
.colour-hue-row { display: flex; align-items: center; gap: 12px; padding: 10px 0 12px; }
.colour-hue-row > span { flex: none; width: 28px; color: var(--muted); font-size: 11px; font-weight: 700; }
.colour-picker .colour-hue { height: 26px; }
.colour-picker .colour-hue::-webkit-slider-runnable-track { height: 12px; border-radius: 20px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.colour-picker .colour-hue::-moz-range-track { height: 12px; border-radius: 20px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.colour-picker .colour-hue::-moz-range-progress { background: transparent; }
.colour-picker .colour-hue::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -4px; border: 2px solid var(--ink); box-shadow: 0 1px 3px #0003; }
.colour-picker .colour-hue::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--ink); box-shadow: 0 1px 3px #0003; }
.colour-value-row { display: flex; gap: 8px; align-items: stretch; }
.colour-comparison { flex: none; display: flex; width: 54px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.colour-original, .colour-preview { width: 50%; padding: 0; border: 0; min-height: 42px; }
.colour-original { border-right: 1px solid #0002; }
.colour-original:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.colour-hex-label, .colour-rgb label { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 0 9px; background: white; }
.colour-hex-label { flex: 1; min-width: 0; }
.colour-hex-label > span, .colour-rgb label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.colour-picker input[type=text], .colour-picker input[type=number] { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font: 700 12px var(--mono); color: var(--ink); }
.colour-picker label:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-2); }
.colour-picker label:has([aria-invalid=true]) { border-color: var(--danger); background: #fff1f4; }
.colour-eyedropper { display: grid; place-items: center; flex: none; width: 42px; border: 1.5px solid var(--line-2); border-radius: 10px; background: white; }
.colour-eyedropper:hover { background: var(--sky-2); border-color: var(--ink); }
.colour-eyedropper:disabled { opacity: .5; }
.colour-rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.colour-rgb input[type=number] { height: 32px; font-family: var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.colour-error { margin-top: 7px; color: #b83360; font-size: 11px; }
.colour-section-label { margin: 15px 0 7px; font-size: 11px; font-weight: 700; color: var(--muted); }
.colour-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.colour-swatch { position: relative; height: 32px; border: 1px solid #3a2a3526; border-radius: 9px; background: var(--swatch); transition: transform .12s, box-shadow .12s; }
.colour-swatch:hover { transform: translateY(-2px); box-shadow: 0 2px 0 var(--ink); border-color: var(--ink); }
.colour-swatch[aria-pressed=true] { outline: 2px solid var(--ink); outline-offset: 2px; }
.colour-swatch[aria-pressed=true]::after { content: '✓'; display: grid; place-items: center; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: white; color: var(--ink); font-size: 12px; font-weight: 700; }
.colour-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; margin-top: 14px; border-top: 2px dotted var(--line); }
.colour-picker-foot > span { font-size: 11px; color: var(--muted); }
.colour-picker :is(button, .colour-sv):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (pointer: coarse) { .colour-swatch { height: 44px; } .colour-close { width: 44px; height: 44px; } .colour-rgb input[type=number] { height: 42px; } .colour-picker .colour-hue { height: 40px; } }
@media (max-width: 600px) { .colour-picker { width: 360px; } .colour-sv { height: 160px; } }
@media (prefers-reduced-motion: reduce) {
  .field.colour, .colour-swatch { transition: none; }
  .progress i.indeterminate { animation: none; }
  .btn, .sticker-delete, .icon-grid button canvas, .object-action, .layer-lock, .panel-tabs button, .panel-tab-label::after, .layer-count { transition: none; }
  .panel-tabs button .panel-tab-icon, .panel-tabs button .panel-tab-icon > * { transition: none; transform: none !important; }
  .panel-tabs button:is(:hover, :active) { transform: none; }
}
.shaker-controls { margin: 0 10px 10px; color: var(--ink); }
.shaker-controls[hidden], .shaker-controls [hidden] { display: none !important; }
.shaker-actions { display: flex; gap: 8px; padding: 2px 2px 10px; }
.shaker-actions .btn { flex: 1; min-height: 34px; }
.shaker-controls p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; }
.shaker-controls .shaker-empty { margin: 0 0 10px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; }
.shaker-section { margin: 0 0 8px; border: 2px solid var(--line-2); border-radius: 16px; background: var(--panel); box-shadow: 0 2px 0 var(--line-2); overflow: hidden; }
.shaker-section summary { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 13px; font-weight: 700; background: var(--panel-2); cursor: pointer; list-style: none; }
.shaker-section summary::-webkit-details-marker { display: none; }
.shaker-section summary::after { content: '›'; color: var(--accent); margin-left: auto; font-size: 20px; line-height: 14px; }
.shaker-section[open] > summary::after { transform: rotate(90deg); }
.shaker-section summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.shaker-section-body { display: grid; gap: 12px; padding: 12px; border-top: 2px dotted var(--line); }
.shaker-section-body.shaker-nested { padding: 0; border: 0; }
#shakerCount { color: var(--muted); font-size: 11px; font-weight: 400; }
.shaker-designs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.shaker-collections { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); }
.shaker-collections button { flex: 1; min-height: 32px; padding: 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: 700 12px var(--sans); cursor: pointer; }
.shaker-collections button[aria-pressed="true"] { border-color: var(--accent); background: #ffe5ef; color: var(--ink); box-shadow: 0 1px 0 var(--line-2); }
.shaker-designs[data-collection="taiwan"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shaker-designs[data-collection="taiwan"] button { padding: 8px 5px 6px; border-radius: 12px; }
.shaker-designs[data-collection="taiwan"] canvas { width: 96px; height: 96px; max-width: 100%; object-fit: contain; margin: 0 auto; }
.shaker-designs[data-collection="taiwan"] span { padding: 6px 2px 3px; font-size: 12px; line-height: 1.35; min-height: 25px; }
.shaker-designs button { min-width: 0; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; cursor: pointer; color: inherit; }
.shaker-designs canvas { width: 100%; height: auto; display: block; }
.shaker-designs span { font-size: 10px; line-height: 1.2; display: block; }
.shaker-designs [aria-pressed="true"], .shaker-piece[aria-pressed="true"] { background: #ffe5ef; outline: 2px solid #f47fab; }
.shaker-section-body > select { width: 100%; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 10px; background-color: #fff; color: var(--ink); font-size: 12px; }
.shaker-section-body > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.shaker-section-body > .shaker-range { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.shaker-range input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #f47fab; }
.shaker-range output { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shaker-pieces { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.shaker-piece-wrap { position: relative; }
.shaker-piece { width: 48px; height: 48px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: white; cursor: pointer; }
.shaker-piece canvas { width: 100%; height: 100%; }
.shaker-piece-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px solid white; border-radius: 50%; background: var(--accent-2); color: var(--ink); cursor: pointer; font: 16px/1 var(--sans); }
.shaker-controls button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* Pass-photo intake: a quiet workbench beside the finished lanyard. */
.lanyard-dialog{width:min(1020px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:24px;border:1px solid #d5dbe3;border-radius:22px;background:#fcfcfa;color:#263344;box-shadow:0 25px 100px #1d28454d;overflow:auto;box-sizing:border-box}
.lanyard-dialog::backdrop{background:#1824388c;backdrop-filter:blur(5px)}
.lanyard-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}.lanyard-heading h2{font-size:28px;margin:5px 0 8px}.lanyard-heading p{margin:0;color:#667386;line-height:1.5}.lanyard-heading .lanyard-eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#5870a2}
.lanyard-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px}.lanyard-upload-actions,.lanyard-crop-actions{display:flex;flex-wrap:wrap;gap:8px}.lanyard-intake{min-width:0}.lanyard-empty{min-height:275px;margin:16px 0;border:1px dashed #c1ccdb;border-radius:14px;padding:32px 24px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:#f3f5f8}.lanyard-empty[hidden]{display:none}.lanyard-empty>span{font-size:35px;color:#5976b1}.lanyard-empty h3{font-size:20px;font-weight:600;margin:14px 0 4px}.lanyard-empty p{font-size:13px;line-height:1.65;color:#6b7686;margin:7px 0}
.lanyard-preview-panel{position:relative;background:radial-gradient(ellipse at 50% 35%,#faf9f5,#e8e8e2);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:20px 10px 12px}.lanyard-preview-panel canvas{width:100%;max-width:390px;height:auto;display:block}.lanyard-preview-label{font-size:10px;letter-spacing:2px;color:#77818a;font-weight:700}.lanyard-preview-panel p{font-size:11px;color:#77818a;text-align:center;margin:4px 0}
.lanyard-field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#546277}.lanyard-field input,.lanyard-field select{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #cbd4df;border-radius:8px;padding:8px 10px;background:#fff;font:inherit;color:#283a51}.lanyard-field input[type=color]{padding:3px;min-width:70px;cursor:pointer}.lanyard-start-options{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;margin-top:20px}
#lanyardCropHint{font-size:12px;line-height:1.6;color:#607086;margin:18px 0 8px}.lanyard-crop-wrap{padding:17px;background:#e9eef4;border-radius:12px;margin-bottom:12px;overflow:hidden}.lanyard-crop-stage{position:relative;max-width:100%;margin:auto;touch-action:none}.lanyard-crop-stage canvas{display:block;width:100%;height:auto}.lanyard-crop-stage button{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:2px solid white;background:#3b61a9;box-shadow:0 1px 6px #152a4e80;color:#fff;font:700 11px sans-serif;padding:0;touch-action:none;cursor:grab}.lanyard-crop-stage button:focus-visible{outline:3px solid #f4b850;outline-offset:3px}.lanyard-crop-actions{margin-bottom:14px}.lanyard-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e1e5eb;margin-top:22px;padding-top:18px}.lanyard-footer p{font-size:12px;line-height:1.5;color:#6a5874;margin:0}.lanyard-footer .btn{flex-shrink:0}
@media(max-width:700px){.lanyard-dialog{padding:18px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.lanyard-workspace{grid-template-columns:minmax(0,1fr);gap:18px}.lanyard-preview-panel canvas{max-height:300px;width:auto;max-width:100%}.lanyard-empty{min-height:180px;padding:20px}.lanyard-heading h2{font-size:25px}.lanyard-footer{flex-direction:column;align-items:stretch;gap:10px}.lanyard-start-options{grid-template-columns:90px minmax(0,1fr)}}