@font-face {
  font-family: BlobPixel;
  src: url('./assets/fonts/Pixeled.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  /* Home scene: #232D2B background, #355F6C panels, #4A7887 buttons. */
  --bg: #232d2b;
  --panel: #355f6c;
  --panel-deep: #294b55;
  --panel-raised: #4a7887;
  --border: #87aab6;
  --border-soft: #587c86;
  --text: #fdf7e1;
  --muted: #bdd0d6;
  --accent: #fee501;
  --shadow: #152a30;
  --pixel: BlobPixel, monospace;
  --body: Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--pixel); -webkit-font-smoothing: antialiased; }
button, input, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.site-wrap { max-width: 1160px; margin: 0 auto; padding: 0 46px; }
.site-header { height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--border-soft); }
.wordmark { font: 20px var(--pixel); letter-spacing: -1px; text-decoration: none; }
.logo-dot { color: var(--accent); margin-left: 10px; font: 25px var(--body); }
.header-note { font: 13px var(--body); color: var(--muted); }
.intro { display: flex; justify-content: flex-end; align-items: flex-end; padding: 48px 0 34px; gap: 30px; }
.eyebrow { font: 8px/2 var(--pixel); letter-spacing: .05em; margin: 0 0 16px; color: var(--muted); text-transform: uppercase; }
h1 { font: 28px/1.75 var(--pixel); margin: 0; color: var(--text); text-transform: uppercase; }
.intro-side { position: relative; width: 300px; max-width: 100%; margin-left: auto; padding-bottom: 6px; flex-shrink: 0; }
.lookup { background: var(--panel-deep); border: 2px solid var(--border); display: flex; align-items: center; min-height: 38px; box-shadow: 0 4px 0 var(--shadow); }
.lookup > span { font: 8px var(--pixel); color: var(--muted); padding-left: 10px; }
.lookup input { width: 75px; min-width: 0; border: 0; background: transparent; outline: none; padding: 6px; color: var(--text); flex: 1; font: 9px/1.6 var(--pixel); }
.lookup input::placeholder { color: #a1bdc6; opacity: 1; }
.lookup:focus-within { border-color: var(--accent); }
.lookup button { align-self: stretch; border: 0; border-left: 2px solid var(--border); background: var(--panel-raised); color: var(--text); padding: 0 10px; font: 7px/1.8 var(--pixel); text-transform: uppercase; }
.lookup .random-kitty { flex: none; display: grid; place-items: center; padding: 0 8px; border-left: 0; border-right: 2px solid var(--border); }
.lookup button:hover { background: #5a8b99; }
.lookup button:active { background: var(--panel); }
.lookup button span { margin-left: 7px; font: 17px var(--body); }
.form-error { position: absolute; right: 0; width: 100%; color: #ffb1a2 !important; font: 8px/1.8 var(--pixel) !important; text-align: right; margin: 5px 0 0 !important; }
.kitty-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 2px solid var(--border); border-radius: 2px; overflow: hidden; box-shadow: 5px 7px 0 var(--shadow); }
.portrait-panel { display: flex; flex-direction: column; background-color: var(--panel-deep); min-height: 0; align-self: start; padding: 25px 25px 23px; position: relative; border-right: 2px solid var(--border-soft); background-image: radial-gradient(#4c7179 1px, transparent 1px); background-size: 16px 16px; }
.portrait-topline, .portrait-bottomline { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; gap: 12px; }
.stamp { font: 8px/1.8 var(--pixel); border: 2px solid var(--border); padding: 8px 10px; background: var(--panel); color: var(--text); }
.portrait-stage { position: relative; flex: none; display: grid; place-items: center; min-height: 160px; isolation: isolate; }
.portrait-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; text-align: center; pointer-events: none; }
.portrait-loading h2 { margin: 0; }
.kitty-card.is-loading .kitty-motion,
.kitty-card.is-loading .details-panel,
.kitty-card.is-loading .portrait-topline,
.kitty-card.is-loading .portrait-bottomline { visibility: hidden; }
.portrait-halo { position: absolute; width: 140px; height: 140px; max-width: 95%; border-radius: 50%; background: #466e75; z-index: -2; }
.portrait-halo::after { content: ''; position: absolute; inset: -12px; border: 2px solid #507881; border-radius: 50%; }
.kitty-motion { position: relative; z-index: 1; width: 155px; height: 155px; max-width: 100%; display: grid; place-items: center; }
#kitty-canvas { display: block; width: 155px; height: 155px; max-width: 100%; object-fit: contain; image-rendering: pixelated; position: relative; transform-origin: 50% 75%; animation: kitty-squish 1.4s ease-in-out infinite; }
.spark { position: absolute; z-index: 1; pointer-events: none; color: #a9c5bc; font: 39px/1 var(--body); }
.spark-a { left: 8%; top: 8%; transform: translate(-50%, -50%); }
.spark-b { right: 8%; bottom: 8%; transform: translate(50%, 50%); font-size: 22px; color: #d5ce78; }
.flavor-tag { font: 11px/1.5 var(--pixel); background: var(--flavor-color, #f0a9a9); border: 1px solid var(--flavor-color, #f0a9a9); padding: 3px 9px; color: #101716; max-width: 75%; }
/* Exact KittyInfoPop flavor colors from Utility.GetColor; indices are zero-based. */
.flavor-tag[data-flavor="sweet"] { --flavor-color: #f0a9a9; }
.flavor-tag[data-flavor="salty"] { --flavor-color: #34a225; }
.flavor-tag[data-flavor="sour"] { --flavor-color: #cdb829; }
.flavor-tag[data-flavor="bland"] { --flavor-color: #72d2f5; }
.flavor-tag[data-flavor="spicy"] { --flavor-color: #a31010; }
.flavor-tag[data-flavor="bitter"] { --flavor-color: #938001; }
.flavor-tag[data-flavor="dry"] { --flavor-color: #cc670e; }
.flavor-tag[data-flavor="juicy"] { --flavor-color: #ba77ed; }
.flavor-tag[data-flavor="fruity"] { --flavor-color: #fc8c28; }
.flavor-tag[data-flavor="nutty"] { --flavor-color: #73a1ff; }
.flavor-tag[data-flavor="umami"] { --flavor-color: #c9affa; }
.flavor-tag[data-flavor="pungent"] { --flavor-color: #465744; color: #fdf7e1; }
.life-stage { font: 7px/2 var(--pixel); color: var(--muted); }
.details-panel { padding: 30px 30px 25px; min-width: 0; }
.details-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.details-heading .eyebrow { font-size: 7px; margin: 0; }
.share-button { border: 2px solid var(--border); background: var(--panel-raised); color: var(--text); font: 7px/1.8 var(--pixel); padding: 7px 9px; white-space: nowrap; box-shadow: 0 3px 0 var(--shadow); text-transform: uppercase; }
.share-button:hover { background: #5a8b99; }
.share-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.share-button span { margin-left: 5px; font-family: var(--body); }
/* Custom names and prose use the same bundled Roboto font as the game. */
#kitty-name { font: 700 clamp(30px, 3.2vw, 43px)/1.2 var(--body); margin: 20px 0 15px; color: var(--text); overflow-wrap: anywhere; }
.kitty-description { font: 14px/1.8 var(--body); color: var(--muted); margin: 0 0 22px; white-space: pre-line; overflow-wrap: anywhere; }
.traits { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); margin: 0 0 23px; }
.traits dt { font: 7px/2 var(--pixel); color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
.traits dd { font: 8px/1.9 var(--pixel); overflow-wrap: anywhere; margin: 0; color: var(--text); }
.stats-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; gap: 12px; }
h3 { font: 8px/2 var(--pixel); margin: 0; text-transform: uppercase; }
.stats-heading > span { font: 7px/2 var(--pixel); color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.stat { --tier: var(--text); padding: 10px 11px; background: var(--panel-deep); border: 1px solid #628994; border-left: 3px solid var(--tier); border-radius: 2px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 2px 0 #23434c; }
.stat dt { font: 7px/2 var(--pixel); color: var(--text); text-transform: uppercase; }
.stat dd { font: 15px/1.7 var(--pixel); margin: 0; align-self: flex-start; color: var(--tier); }
.stat[data-tier=red] { --tier: #ff9e91; background: #603c40; }
.stat[data-tier=orange] { --tier: #ffb370; background: #5a4941; }
.stat[data-tier=yellow] { --tier: #fee777; background: #535342; }
.stat[data-tier=green] { --tier: #bfe876; background: #395749; }
.stat[data-tier=blue] { --tier: #9bd6fa; background: #355372; }
.stat[data-tier=purple] { --tier: #d9b5fa; background: #534569; }
.stat[data-tier=pink] { --tier: #ffb1d6; background: #68445e; }
.card-footnote { display: flex; justify-content: space-between; gap: 8px; font: 10px/1.7 var(--body); color: var(--muted); margin-top: 16px; }
.wardrobe { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border-soft); }
.wardrobe p { font: 13px/1.7 var(--body); color: var(--text); margin-bottom: 0; overflow-wrap: anywhere; }
.render-note { font: 12px/1.7 var(--body); color: #f6dfb0; background: #4b5144; border-left: 3px solid #c9b776; padding: 10px; margin-bottom: 0; }
.family { border-top: 1px solid var(--border-soft); padding-top: 17px; margin-top: 18px; font: 8px/2 var(--pixel); }
.family summary { cursor: pointer; color: var(--text); text-transform: uppercase; }
.family nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.family nav:empty { display: none; }
.family a { background: var(--panel-raised); border: 1px solid var(--border); padding: 5px 8px; text-decoration: none; color: var(--text); }
.family a:hover { color: var(--accent); }
.sample-note { text-align: center; font: 12px/1.8 var(--body); color: var(--muted); margin: 24px auto 0; max-width: 600px; }
footer { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin: 42px 0 30px; padding-top: 20px; border-top: 2px solid var(--border-soft); color: var(--muted); font: 12px/1.8 var(--body); }
footer a { text-decoration: none; }
footer .copyright { font: 8px/2 var(--pixel); }
footer .copyright-symbol { font: 400 14px/1 var(--body); vertical-align: baseline; }
footer > span { font: 7px/2 var(--pixel); }
footer > span > span { color: var(--accent); margin: 0 7px; }
.notice { border: 2px solid var(--border); box-shadow: 5px 7px 0 var(--shadow); background: var(--panel); text-align: center; padding: 75px 24px; min-height: 360px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.notice h2 { font: 700 27px/1.4 var(--body); margin: 18px 0 7px; }
.notice p { font: 14px/1.8 var(--body); max-width: 440px; color: var(--muted); }
.notice-symbol { font: 24px var(--pixel); color: var(--accent); }
.notice-actions { display: flex; gap: 20px; align-items: center; margin-top: 15px; font: 13px var(--body); }
.plain-button { padding: 12px 17px; background: var(--panel-raised); color: var(--text); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadow); font: 9px/1.8 var(--pixel); text-transform: uppercase; }
.plain-button:hover { background: #5a8b99; }
.plain-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow); }
.notice-actions a { text-underline-offset: 4px; }
.loading-dots { font: 22px var(--pixel); letter-spacing: 12px; color: var(--accent); animation: pulse 1s infinite alternate; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Gentle idle squash/stretch, around the visible feet, keeping the bottom planted. */
@keyframes kitty-squish {
  0%, 100% { transform: scale(1, 1); }
  40% { transform: scale(1.065, .91); }
  70% { transform: scale(.975, 1.045); }
}

@keyframes pulse { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .loading-dots, #kitty-canvas, .kitty-motion { animation: none; } }
@media (min-width: 1400px) { .intro { padding-top: 64px; } .kitty-card { margin-top: 7px; } }
@media (max-width: 940px) and (min-width: 781px) {
  h1 { font-size: 21px; }
  .intro-side { width: 295px; }
  .details-panel { padding: 25px 21px; }
  .details-heading { flex-wrap: wrap; }
  .stat { padding: 9px 7px; }
  .stat dt { font-size: 6px; }
}
@media (max-width: 780px) {
  .site-wrap { padding: 0 24px; }
  .site-header { height: 83px; }
  .header-note { display: none; }
  .intro { align-items: flex-start; flex-direction: column; padding-top: 35px; gap: 24px; }
  .intro-side { width: 300px; max-width: 100%; padding-bottom: 0; }
  h1 { font-size: clamp(18px, 5vw, 26px); line-height: 1.9; }
  .kitty-card { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .portrait-panel { min-height: 0; border-right: 0; border-bottom: 2px solid var(--border-soft); padding: 21px; }
  .portrait-stage { min-height: 145px; }
  #kitty-canvas, .kitty-motion { width: 140px; height: 140px; }
  .portrait-halo { width: 125px; height: 125px; }
  .details-panel { padding: 28px 24px; }
  .details-heading { flex-wrap: wrap; }
  .details-heading .eyebrow { font-size: 6px; }
  .stamp { font-size: 7px; }
  .flavor-tag { font-size: 10px; }
  .stat { padding: 9px 8px; }
  .stat dt { font-size: 6px; }
  .stats-heading h3 { font-size: 7px; }
  .sample-note { font-size: 12px; }
  footer { align-items: flex-start; font-size: 10px; }
  footer > span { font-size: 6px; text-align: right; }
  .notice-actions { flex-direction: column; }
}
@media (max-width: 360px) {
  .site-wrap { padding: 0 16px; }
  .details-panel { padding: 22px; }
  .wordmark { font-size: 17px; }
  .lookup button { padding: 0 8px; font-size: 7px; }
  .stats-heading { flex-wrap: wrap; }
}

#loading h2 { font: 9px/2 var(--pixel); }

.grade-badge { font: 9px/1.8 var(--pixel) !important; color: var(--text) !important; }
.grade-badge[data-tier=mint] { color: #bfe876 !important; }
.grade-badge[data-tier=purple] { color: #d9b5fa !important; }
.grade-badge[data-tier=blue] { color: #9bd6fa !important; }
.grade-badge[data-tier=green] { color: #bfe876 !important; }
.grade-badge[data-tier=yellow] { color: #fee777 !important; }
.grade-badge[data-tier=orange] { color: #ffb370 !important; }
.grade-badge[data-tier=red] { color: #ff9e91 !important; }

.name-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 15px; }
.name-heading #kitty-name { flex: 1 1 150px; min-width: 0; margin: 0; }
.name-heading .share-button { flex: 0 0 auto; }

#trait-quirk[data-quirk="error"] { color: #000; }

.family summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.family summary::-webkit-details-marker { display: none; }
.family summary::before { content: "\25B6"; display: inline-block; flex: 0 0 auto; font: 700 18px/1 var(--body); color: var(--text); }
.family[open] summary::before { content: "\25BC"; }

/* The sandbox shares the card palette, original sprites, and planted idle animation. */
.sandbox .portrait-panel { min-height: 0; }
.sandbox .portrait-stage { min-height: 150px; }
#sandbox-canvas { display:block; width:155px; height:155px; max-width:100%; object-fit:contain; image-rendering:pixelated; animation:kitty-squish 1.4s ease-in-out infinite; }
.sandbox-status { position:absolute; inset:0; z-index:2; display:grid; place-content:center; font:8px/2 var(--pixel); text-align:center; white-space:pre-line; color:var(--muted); margin:0; pointer-events:none; }
.sandbox.is-rendering .kitty-motion { visibility:hidden; }
.sandbox-settings { padding:24px; }
#sandbox-controls { display:grid; gap:22px; }
#sandbox-controls fieldset { min-width:0; margin:0; padding:14px 0 0; border:0; border-top:1px solid var(--border-soft); display:grid; grid-template-columns:1fr 1fr; gap:13px 12px; }
#sandbox-controls legend { font:9px/2 var(--pixel); padding:0 10px 0 0; color:var(--accent); }
.sandbox-field { min-width:0; display:flex; flex-direction:column; gap:7px; font:7px/2 var(--pixel); color:var(--muted); }
.sandbox-field select { width:100%; min-height:44px; min-width:0; padding:7px 5px; border:1px solid var(--border); border-radius:0; color:var(--text); background:var(--panel-deep); font:7px/2 var(--pixel); }
.sandbox-field select:disabled { opacity:.4; }
@media(min-width:781px) { .sandbox .portrait-panel { position:sticky; top:0; align-self:start; border-bottom:2px solid var(--border-soft); } }
@media(max-width:780px) { .sandbox .portrait-panel { min-height:0; } #sandbox-canvas { width:140px; height:140px; } .site-header .plain-button { padding:9px 10px; font-size:7px; } .wordmark { font-size:17px; } .sandbox-settings { padding:24px 20px; } }
@media(prefers-reduced-motion:reduce) { #sandbox-canvas { animation:none; } }

/* Compact portrait labels and a centered sandbox action below the preview. */
.portrait-bottomline { margin-top:-8px; }
.sandbox .portrait-topline .stamp { margin:0; justify-self:start; }
.sandbox-actions { display:flex; justify-content:center; margin-top:0; }
.sandbox-actions #sandbox-randomize { font-size:7px; padding:6px 10px; }
.sandbox-status:empty { display:none; }

/* Compact sandbox rows; age lives beside the flavor badge in the portrait. */
#sandbox-controls fieldset.sandbox-three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; }
#sandbox-controls legend { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:0; }
.sandbox-opacity { width:105px; flex-shrink:0; }
.sandbox-opacity select { min-height:32px; padding:4px 6px; }
.sandbox-age { width:130px; }
.sandbox-age select { min-height:30px; padding:4px 6px; }
.sandbox-field[data-field="patternTone"], .sandbox-field[data-field="maskTone"] { grid-column:1 / -1; }
@media(max-width:480px) {
  #sandbox-controls .sandbox-field select { font-size:6px; padding:6px 4px; min-height:40px; }
  #sandbox-controls .sandbox-opacity select { min-height:30px; padding:4px 6px; }
}

.sandbox .portrait-panel { padding-bottom:10px; }

/* Color and intensity share the section-heading row. */
#sandbox-controls legend.sandbox-control-heading { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr) minmax(0,1.1fr); gap:6px; align-items:end; }
#sandbox-controls legend.sandbox-control-heading.has-opacity { grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr) minmax(0,1.1fr) minmax(0,.9fr); }
.sandbox-control-heading .sandbox-section-title { align-self:center; }
.sandbox-control-heading .sandbox-field { width:auto; min-width:0; grid-column:auto; gap:4px; }
.sandbox-control-heading .sandbox-opacity { width:auto; }
#sandbox-controls .sandbox-control-heading select { min-height:34px; padding:4px; }
@media(max-width:480px) {
  #sandbox-controls legend.sandbox-control-heading { gap:4px; }
  .sandbox-control-heading .sandbox-section-title { font-size:7px; }
  .sandbox-control-heading .sandbox-field { font-size:5.5px; }
  #sandbox-controls .sandbox-control-heading select { font-size:5.5px; min-height:32px; padding:4px 2px; }
}

#sandbox-controls fieldset.sandbox-traits { border-top:0; padding-top:0; }

/* Portrait selectors replace the repeated flavor, quirk, and age displays. */
#sandbox-stage-control { position:relative; }
.sandbox-quirk { width:130px; position:absolute; bottom:calc(100% + 5px); right:0; }
.sandbox-quirk select { min-height:30px; padding:4px 6px; }
.sandbox-flavor { width:130px; }
.sandbox-flavor select.flavor-tag { max-width:100%; min-height:30px; padding:4px 6px; font-size:7px; background:var(--panel-deep); color:var(--flavor-color,#f0a9a9); border-color:var(--flavor-color,#f0a9a9); }
.sandbox-flavor select:is([data-flavor="spicy"],[data-flavor="salty"],[data-flavor="bitter"],[data-flavor="dry"],[data-flavor="pungent"]) { background:#fdf7e1; }
.sandbox-flavor option { background:var(--panel-deep); color:var(--text); }
#sandbox-controls fieldset.sandbox-body { border-top:0; padding-top:0; }
#sandbox-controls legend.sandbox-control-heading.has-fur { grid-template-columns:minmax(0,.65fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); }

@media(max-width:780px) {
  .sandbox .portrait-bottomline .sandbox-field { width:max-content; }
  .sandbox .portrait-bottomline .sandbox-field select { width:var(--selected-width,auto); }
}

.sandbox-field select { text-align:center; text-align-last:center; }
.sandbox-field select option { text-align:center; }

/* Reserve explicit arrow space so native select decorations cannot clip centered text. */
.sandbox .portrait-bottomline .sandbox-field { position:relative; }
.sandbox .portrait-bottomline .sandbox-field select { appearance:none; -webkit-appearance:none; padding:4px 22px; }
.sandbox .portrait-bottomline .sandbox-field::after { content:""; position:absolute; right:9px; top:50%; width:6px; height:6px; border-right:1px solid #87aab6; border-bottom:1px solid #87aab6; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.sandbox .portrait-bottomline .sandbox-quirk { position:absolute; }

/* Separate appearance tabs leave room for readable, evenly spaced controls. */
.sandbox-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sandbox-tabs button { border:1px solid var(--border); background:var(--panel-deep); color:var(--muted); padding:12px 6px; font:8px/1.8 var(--pixel); }
.sandbox-tabs button[aria-selected="true"] { background:var(--panel-raised); color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent); }
.sandbox-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#sandbox-controls fieldset[role="tabpanel"] { border:0; padding:0; gap:20px 14px; }
#sandbox-controls fieldset[role="tabpanel"] legend { width:1px; padding:0; }
#sandbox-controls fieldset[role="tabpanel"] .sandbox-field { width:auto; gap:8px; grid-column:auto; font-size:7px; }
#sandbox-controls fieldset[role="tabpanel"] .sandbox-field select { min-height:44px; padding:8px 5px; font-size:7px; }
#sandbox-controls fieldset[role="tabpanel"] .sandbox-opacity,
#sandbox-controls .sandbox-body [data-field="fur"] { grid-column:1 / -1; }

#sandbox-controls .sandbox-body [data-field="fur"] { grid-column:auto; }