:root { color-scheme: dark; --page: #111414; --surface: #181c1c; --line: #303535; --text: #ebece7; --muted: #909994; --accent: #dc9878; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.app { max-width: 1580px; margin: auto; padding: 0 48px; }
.masthead { height: 90px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); text-decoration: none; font-size: 13px; letter-spacing: 2.2px; font-weight: 600; }
.brand-mark { color: var(--accent); font-size: 24px; letter-spacing: -5px; margin-right: 6px; }
.brand-sub { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 1px; padding-left: 17px; margin-left: 5px; border-left: 1px solid var(--line); }
.experiment { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
.experiment b { color: var(--accent); margin-left: 8px; font-weight: 400; }
.intro { display: flex; align-items: end; justify-content: space-between; padding: 32px 0 30px; gap: 20px; }
.eyebrow { margin: 0 0 9px; font-size: 9px; letter-spacing: 2.5px; color: var(--accent); }
h1 { margin: 0; font-weight: 500; font-size: 42px; letter-spacing: 1px; line-height: 1.3; }
.title-dot { color: var(--accent); }
.en-title { font-family: Georgia, 'Times New Roman', serif; font-size: 33px; font-weight: 400; font-style: italic; color: #89938d; margin-left: 22px; letter-spacing: -1px; }
.intro-note { margin: 0 0 4px; color: #a9b0aa; font-size: 12px; line-height: 1.9; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 254px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stage { position: relative; min-width: 0; background: radial-gradient(ellipse at 51% 31%, #242b29 0, #191f1e 46%, #161b1b 80%); }
.stage::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(#6f7872 .65px, transparent .65px); background-size: 19px 19px; }
.stage-top, .stage-bottom { position: absolute; z-index: 2; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; color: #9aa59d; font-size: 10px; pointer-events: none; }
.stage-top { top: 22px; letter-spacing: .5px; }
.stage-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #9cb699; box-shadow: 0 0 8px #9cb69933; }
.stage-bottom { bottom: 21px; }
.mouse-icon { font-size: 16px; margin-right: 6px; color: var(--accent); }
.mono, output, .readouts b { font-family: 'Consolas', monospace; font-variant-numeric: tabular-nums; }
#canvas-host { position: relative; width: 100%; height: clamp(510px, 66vh, 740px); min-height: 100%; }
#canvas-host canvas { display: block; touch-action: none; }
#loading { position: absolute; inset: 45% 0 auto; text-align: center; color: var(--muted); font-size: 13px; }
.controls { background: var(--surface); border-left: 1px solid var(--line); padding: 27px 24px 22px; }
.panel-heading { margin-bottom: 28px; }
h2 { font-weight: 500; font-size: 14px; margin: 0 0 8px; }
.panel-heading > span { color: #818d85; font-size: 9px; letter-spacing: 1px; }
.control-group { margin-bottom: 24px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
output { font-size: 12px; color: var(--accent); }
input[type=range] { appearance: none; display: block; width: 100%; height: 3px; background: linear-gradient(to right, var(--accent) 31%, #39413c 31%); border-radius: 9px; margin: 20px 0 13px; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { appearance: none; height: 11px; width: 11px; border-radius: 50%; background: #f0c4a8; box-shadow: 0 0 0 3px #dc987810; }
input[type=range]::-moz-range-thumb { height: 11px; width: 11px; border: 0; border-radius: 50%; background: #f0c4a8; }
.range-notes { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.separator { height: 1px; background: var(--line); margin: 24px 0; }
.view-row { margin: 15px 0; }
.switch { display: block; position: relative; width: 29px; height: 17px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { display: block; width: 29px; height: 17px; border-radius: 12px; background: #3b4440; pointer-events: none; }
.switch span::after { content: ''; display: block; position: relative; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #a8b0aa; transition: transform .2s; }
.switch input:checked + span { background: #ad7359; }
.switch input:checked + span::after { background: #ffe2ce; transform: translateX(12px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.field-note { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 15px 0 0; min-height: 34px; }
.material-color { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.swatches { display: flex; gap: 9px; }
.swatch { width: 15px; height: 15px; border: none; border-radius: 50%; padding: 0; }
.swatch.selected { outline: 1px solid #bbc0b7; outline-offset: 3px; }
.copper { background: #c48765; }.cream { background: #c6bea3; }.teal { background: #719b91; }
.readouts { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 25px; }
.readouts > div { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 13px; }
.readouts b { font-size: 12px; color: #ced4c9; font-weight: 400; }
.readouts #broken-count { color: var(--accent); }
.actions { display: flex; gap: 8px; margin-top: 25px; }
.reset-button, .pause-button { border-radius: 5px; height: 37px; font-size: 12px; }
.reset-button { background: #dbab8e; color: #27241f; border: 1px solid #dbab8e; flex: 1; }
.reset-button span { font-size: 16px; margin-right: 7px; }.reset-button:hover { background: #efbc9c; }
.pause-button { width: 37px; background: transparent; border: 1px solid #465048; color: #c5cfc3; }
.pause-button:hover { background: #2a332d; }
.keyboard-hint { text-align: center; color: var(--muted); font-size: 9px; margin: 13px 0 0; }
kbd { font-family: inherit; }.keyboard-hint span { padding: 0 9px; }
footer { display: flex; justify-content: space-between; gap: 12px; color: #7e8b82; padding: 19px 0 26px; font-size: 10px; letter-spacing: .4px; }
footer b { font-weight: 500; color: #a9b5a8; }.footer-dot { margin: 0 9px; }
@media (min-width: 1600px) { .app { padding: 0 64px; } .intro { padding: 40px 0; } }
@media (max-width: 1000px) { .app { padding: 0 24px; }.workspace { grid-template-columns: minmax(0, 1fr) 225px; }.controls { padding: 24px 19px; }.intro-note { font-size: 11px; }.en-title { font-size: 29px; } }
@media (max-width: 740px) { .app { padding: 0 16px; }.masthead { height: 64px; }.brand-sub { display: none; }.brand { font-size: 11px; }.experiment { font-size: 8px; }.intro { padding: 25px 0; align-items: start; flex-direction: column; gap: 10px; } h1 { font-size: 34px; }.en-title { font-size: 27px; }.intro-note br { display: none; }.workspace { grid-template-columns: 1fr; }#canvas-host { height: 480px; min-height: 0; }.controls { border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; padding: 22px; }.panel-heading { grid-column: 1/-1; margin-bottom: 24px; }.controls .separator { display: none; }.view-row { margin: 5px 0 15px; }.field-note { grid-column: 1/-1; margin: 0 0 20px; min-height: 0; }.material-color { grid-column: 1/-1; }.readouts { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 15px; }.readouts > div { display: block; }.readouts b { display: block; margin-top: 8px; }.actions { margin-top: 8px; grid-column: 1/-1; }.keyboard-hint { grid-column: 1/-1; }.stage-top,.stage-bottom { left: 17px; right: 17px; font-size: 9px; } footer { font-size: 9px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none !important; } }