:root {
  color-scheme: dark;
  --bg: #151518;
  --panel: #1d1d22;
  --panel-2: #24242a;
  --text: #f2eee9;
  --muted: #a9a6a1;
  --line: rgba(255,255,255,.11);
  --accent: #df857d;
  --accent-2: #e7b46e;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
body { min-height: 100vh; background: radial-gradient(circle at 55% 18%, #2b2629 0, #17171a 38%, #111114 100%); }

.app-shell { width: min(1180px, 94vw); margin: 0 auto; padding: 26px 0 34px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 5px; color: var(--accent-2); letter-spacing: .18em; font-size: 11px; font-weight: 800; }
h1 { margin: 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.02em; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn { border: 1px solid var(--line); color: var(--text); background: var(--panel-2); padding: 10px 16px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(255,255,255,.25); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, #d66e6f, #b94e5c); border-color: transparent; box-shadow: 0 8px 26px rgba(185, 78, 92, .24); }

.workspace { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 18px; align-items: start; }
.steps-panel { position: sticky; top: 18px; background: rgba(29,29,34,.84); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.20); }
.progress-card { padding: 13px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 16px; }
.progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.progress-track { height: 7px; margin-top: 10px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.progress-track i { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }
.stage-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; }
.stage-list li { display: flex; align-items: center; gap: 10px; padding: 10px 11px; color: #8f8c88; border-radius: 12px; font-size: 13px; transition: .25s ease; }
.stage-list li span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 10px; font-weight: 800; }
.stage-list li.active { color: #fff; background: rgba(223,133,125,.12); box-shadow: inset 0 0 0 1px rgba(223,133,125,.15); }
.stage-list li.done { color: #c9c2bc; }
.stage-list li.done span { background: rgba(231,180,110,.16); color: #efc78e; }
.hint { margin: 15px 3px 0; font-size: 12px; line-height: 1.65; color: #88847f; }

.canvas-wrap { min-width: 0; }
.paper-frame { position: relative; margin: 0 auto; width: min(100%, 600px); aspect-ratio: 521 / 877; border-radius: 26px; padding: 12px; background: linear-gradient(145deg, #3a3030, #1d1b1d); box-shadow: 0 34px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08); }
.paper-frame::after { content: ""; position: absolute; inset: 12px; pointer-events: none; border-radius: 15px; box-shadow: inset 0 0 55px rgba(76,47,38,.14); }
#artwork { width: 100%; height: 100%; display: block; border-radius: 15px; background: #ebe6dc; }
.caption { max-width: 600px; margin: 10px auto 0; color: #8f8b87; font-size: 12px; text-align: center; }

/* SVG drawing language */
.stage { opacity: 1; }
.sketch, .string { fill: none; stroke: #3d3330; stroke-linecap: round; stroke-linejoin: round; }
.sketch { stroke-width: 2.1; }
.ghost { stroke: #3f4b46; stroke-width: 4; opacity: .34; }
.branch { stroke: #3c312f; stroke-width: 3.6; }
.tiny { stroke-width: 1.25; }
.hairline { stroke: #5e4e50; stroke-width: 1.35; opacity: .7; }
.fringe { stroke: #5c4d50; stroke-width: 1.2; opacity: .75; }
.face-outline { stroke: #8f675e; stroke-width: 1.6; }
.feature { stroke: #5f4d49; stroke-width: 1.7; }
.eyelash { stroke: #3b3130; stroke-width: 2.15; }
.lips { stroke: #a05555; stroke-width: 1.6; fill: #c36f6f; fill-opacity: .52; }
.jewelry { stroke: #b48831; stroke-width: 1.7; }
.hairpin { stroke: #808b8f; stroke-width: 2; }
.clothline { stroke: #81494b; stroke-width: 1.6; }
.trim { stroke: #697d89; stroke-width: 1.4; }
.trimPattern { stroke: #647783; stroke-width: 1.2; }
.bodice { stroke: #8e7d87; stroke-width: 1.15; opacity: .72; }
.waist, .ribbon { stroke: #84717e; stroke-width: 1.4; }
.flower { fill: #d6aaa7; stroke: #7b5b5a; stroke-width: 1; }
.plum { fill: #a3364f; stroke: #5e2536; stroke-width: 1; }
.instrument-edge { stroke: #6f392b; stroke-width: 3.2; }
.bridge { fill: #4f3027; stroke: #281c19; stroke-width: .9; }
.string { stroke: #59433a; stroke-width: 1.05; opacity: .88; }
.handline, .finger { stroke: #996c61; stroke-width: 1.15; }
.highlight { stroke: #fff4dd; stroke-width: 2.2; opacity: .32; }

/* Initial hidden state. JS toggles .is-running and .stage-visible */
#artwork.ready .stage { visibility: hidden; }
#artwork.ready .stage.stage-visible { visibility: visible; }
#artwork.ready .stage .fill-reveal { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.985); }
#artwork.ready .stage.stage-visible .fill-reveal { animation: paintFill .65s .18s ease forwards; }
#artwork.ready .stage .sketch,
#artwork.ready .stage .string { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
#artwork.ready .stage.stage-visible .sketch,
#artwork.ready .stage.stage-visible .string { animation: drawStroke var(--dur, 1.15s) var(--delay, 0s) cubic-bezier(.43,.06,.23,1) forwards; }

@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes paintFill { to { opacity: var(--target-opacity, 1); transform: scale(1); } }

@media (max-width: 860px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .workspace { grid-template-columns: 1fr; }
  .steps-panel { position: static; display: grid; grid-template-columns: 1fr; }
  .stage-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hint { display: none; }
}

@media (max-width: 520px) {
  .app-shell { width: 96vw; padding-top: 14px; }
  .stage-list { grid-template-columns: 1fr; }
  .paper-frame { padding: 7px; border-radius: 18px; }
  .paper-frame::after { inset: 7px; }
}