* { box-sizing: border-box; }
:root { --action-gap: 20px; --action-font-size: 14px; color-scheme: light; font-family: Georgia, 'Times New Roman', serif; color: #444a4d; background: #f4f3f0; }
body { margin: 0; background-image: url('paper-grain.svg'); }
button { font: inherit; color: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .am-stage:focus-visible { outline: 2px solid #7b929f; outline-offset: 5px; }
#silver-studio { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(110px, 1fr) auto minmax(90px, 1fr); justify-items: center; padding: 0 24px; }
.site-heading { text-align: center; margin: 42px 0 0; align-self: start; }
h1 { font-size: 12px; font-weight: 400; letter-spacing: .36em; margin: 0; color: #77766e; }
.workspace { width: 584px; max-width: 100%; min-width: 0; }
.am-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; height: 44px; }
.am-toolbar button { border: 0; background: none; padding: 6px 0; min-width: 32px; min-height: 44px; font-size: var(--action-font-size); transition: color .2s; }
.am-toolbar button:hover { color: #111e26; }
.am-start { color: #46545c; }
.am-draw-actions { display: flex; column-gap: var(--action-gap); align-items: center; }
.am-draw-actions button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
.am-toolbar button:disabled { color: #b5b6af; cursor: default; }
.am-new, .am-add-layer { color: #86877f; }
.am-draw-actions [hidden] { display: none; }
.am-lift { color: #86877f; }
.am-lift[aria-pressed="true"] { color: #46545c; }
.am-stage { perspective: 1100px; position: relative; aspect-ratio: 1; outline: none; }
.am-plane { width: 100%; height: 100%; border-radius: 5px; overflow: hidden; transform-origin: center; background: #cdd2d6; box-shadow: 0 2px 3px #35435319, 0 18px 40px -22px #25324266, inset 0 0 0 1px #fff2; will-change: transform; }
.am-main { display: block; width: 100%; height: 100%; }
.am-tools { opacity: 1; transition: opacity .55s ease, transform .7s ease; transform-origin: 350px 350px; }
.am-tools.am-away { opacity: 0; transform: translateY(-12px) scale(1.035); pointer-events: none; }
.am-preview .am-engraving { visibility: hidden; }
.am-preview .am-stage { cursor: pointer; }
.am-complete .am-stage { cursor: grab; touch-action: pan-y; }
.am-complete .am-stage:active { cursor: grabbing; }
.am-controls { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 36px; margin-top: 29px; }
.control-group { min-width: 0; display: grid; grid-template-rows: 12px 34px; row-gap: 12px; }
h2 { font-size: 9px; line-height: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .18em; color: #93938b; margin: 0; }
.am-shapes, .am-wheels, .am-sides { display: flex; align-items: center; gap: 2px; }
.am-shape, .am-wheel { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 32px; height: 34px; padding: 0; border: 0; background: none; color: #a4aaa9; transition: color .18s; }
.am-shape svg, .am-wheel svg { display: block; flex-shrink: 0; overflow: visible; }
.am-shapes { gap: 6px; }
.am-shape:last-child { flex: 0 0 auto; }
.am-shape[aria-pressed="true"], .am-wheel[aria-pressed="true"] { color: #35434c; }
.am-shape:hover, .am-wheel:hover { color: #566670; }
.am-sides { gap: 15px; justify-content: flex-start; }
.am-sides button { font-size: 12px; height: 34px; padding: 0; border: 0; background: none; color: #93948d; transition: color .18s; }
.am-sides button[aria-pressed="true"] { color: #35434c; }
.am-sides button:hover { color: #35434c; }
.am-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
footer { align-self: end; padding: 32px 0; color: #a09f96; font-size: 11px; letter-spacing: .1em; word-spacing: .12em; }
.author-link { color: #777970; text-decoration: none; transition: color .2s; }
.author-link:hover { color: #141715; }
.author-link:focus-visible { outline: 2px solid #7b929f; outline-offset: 4px; }
.love-button { display: inline-flex; vertical-align: -3px; align-items: center; justify-content: center; padding: 5px 3px; margin: -5px 0; border: 0; background: none; color: #85887f; }
.love-button svg { transform-origin: 50% 70%; }
.love-button:hover { color: #333c3e; }
.love-button[aria-pressed="false"]:hover svg, .love-button[aria-pressed="false"]:focus-visible svg { animation: heart-sway 1s ease-in-out infinite; }
.love-button[aria-pressed="true"] svg > path { fill: url(#footer-heart-metal); stroke: none; }
@keyframes heart-sway { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

@media (prefers-reduced-motion: reduce) {
  .love-button svg { animation: none !important; }
  .am-tools { transition: none; }
  .am-plane { will-change: auto; }
}

/* Theme controls follow the same color-only selection language as the tools. */
.theme-switch { position: absolute; top: 28px; right: 28px; display: flex; gap: var(--action-gap); }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; width: 32px; height: 44px; color: #93948d; font-size: var(--action-font-size); }
.theme-switch svg { width: 16px; height: 16px; display: block; }
.theme-switch .theme-sun { display: none; }
[data-theme="dark"] .theme-switch .theme-sun { display: block; }
[data-theme="dark"] .theme-switch .theme-moon { display: none; }
.am-shadow, .am-layer-shadow { stroke: var(--cut-shadow, #526370); stroke-opacity: var(--cut-shadow-opacity, .25); }
.am-core, .am-layer-core { stroke-opacity: var(--cut-core-opacity, .7); }
:root[data-theme="dark"] { color-scheme: dark; background: #1b1d1c; color: #b9bfbb; --cut-shadow: #080a09; --cut-shadow-opacity: .95; --cut-core-opacity: .9; }
[data-theme="dark"] h1 { color: #b5bbb6; }
[data-theme="dark"] h2 { color: #989f99; }
[data-theme="dark"] .am-plane { background: #252827; box-shadow: 0 2px 4px #0007, 0 20px 44px -20px #000b, inset 0 0 0 1px #ffffff0d; }
[data-theme="dark"] .am-toolbar button, [data-theme="dark"] .am-sides button, [data-theme="dark"] .theme-switch button { color: #969e98; }
[data-theme="dark"] .am-shape, [data-theme="dark"] .am-wheel { color: #828c85; }
[data-theme="dark"] .am-start, [data-theme="dark"] button[aria-pressed="true"], [data-theme="dark"] button:hover { color: #e0e6e1; }
[data-theme="dark"] .am-toolbar button:disabled { color: #555d57; }
[data-theme="dark"] footer { color: #89918b; }
[data-theme="dark"] .author-link, [data-theme="dark"] .love-button { color: #b2bbb4; }
[data-theme="dark"] .author-link:hover, [data-theme="dark"] .love-button:hover { color: #f0f4f1; }
[data-theme="dark"] .am-flakes circle { fill: #c8d0cb; }


/* Wider dark groove and an offset lip read as depth instead of faint ink. */
[data-theme="dark"] .am-shadow, [data-theme="dark"] .am-layer-shadow { stroke-width: 1.75; }
[data-theme="dark"] .am-core, [data-theme="dark"] .am-layer-core { stroke-width: .82; }
[data-theme="dark"] .am-highlight, [data-theme="dark"] .am-layer-highlight { stroke-width: .52; }

/* The GPU material and the acrylic SVG share the exact 700-unit plate space. */
.am-plane { position: relative; }
.am-material-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; }
.am-webgl .am-material-canvas { opacity: 1; }
.am-main { position: relative; }
.am-webgl .am-main > rect, .am-webgl .am-bloom, .am-webgl .am-art-space { visibility: hidden; }
.am-webgl .am-flakes { visibility: visible; }

[data-theme="dark"] .am-wheel-moving > circle:first-of-type { fill: #a6b4ac; }
[data-theme="dark"] .am-wheel-moving > circle:last-of-type { stroke: #64766a; }

/* Compact mobile rows: labels left, grouped options aligned to the plate edge. */
@media (max-width: 700px) {
  #silver-studio {
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    grid-template-rows: auto auto minmax(88px, 1fr);
  }
  .site-heading {
    width: 584px; max-width: 100%; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    margin: max(20px, env(safe-area-inset-top)) 0 22px;
    min-height: 44px; text-align: center;
  }
  .site-heading h1 { grid-column: 2; }
  h1 { font-size: 10px; letter-spacing: .26em; }
  .theme-switch { position: static; grid-column: 3; justify-self: end; margin: 0; }
  .am-toolbar { height: 44px; margin-bottom: 10px; }
  .am-controls { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .control-group { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 44px; align-items: center; gap: 12px; }
  h2 { font-size: 10px; line-height: 14px; white-space: nowrap; }
  .am-shapes, .am-wheels { justify-content: flex-end; gap: 0; }
  .am-shape, .am-wheel, .am-shape:last-child { flex: 0 0 44px; height: 44px; justify-content: flex-end; }
  .am-sides { justify-content: flex-end; gap: 18px; }
  .am-sides button { min-width: 44px; height: 44px; font-size: 14px; text-align: right; }
  footer { padding: 28px 0 max(24px, env(safe-area-inset-bottom)); font-size: 11px; text-align: center; }
  .love-button { width: 44px; height: 44px; padding: 0; margin: -14px -6px; vertical-align: middle; }
  .author-link { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; }
}
@media (max-width: 379px) {
  #silver-studio { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
/* Touch browsers can retain :hover after a tap. Only selection changes the color. */
@media (hover: none) {
  .theme-switch button:not([aria-pressed="true"]), .am-sides button:not([aria-pressed="true"]) { color: #93948d; }
  .am-shape:not([aria-pressed="true"]), .am-wheel:not([aria-pressed="true"]) { color: #a4aaa9; }
  [data-theme="dark"] .theme-switch button:not([aria-pressed="true"]), [data-theme="dark"] .am-sides button:not([aria-pressed="true"]) { color: #969e98; }
  [data-theme="dark"] .am-shape:not([aria-pressed="true"]), [data-theme="dark"] .am-wheel:not([aria-pressed="true"]) { color: #828c85; }
  .love-button svg { animation: none !important; }
}