:root {
  color-scheme: dark;
  --ink: #f5f3ef;
  --muted: #9a9ca9;
  --quiet: #6e7180;
  --bg: #090a12;
  --panel: #11131d;
  --panel-2: #161925;
  --line: rgba(255,255,255,.11);
  --cyan: #10d9d2;
  --rose: #ff4f87;
  --accent: var(--cyan);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "Noto Sans TC", sans-serif;
  background:
    radial-gradient(circle at 18% -10%, rgba(16,217,210,.12), transparent 29rem),
    radial-gradient(circle at 100% 25%, rgba(255,79,135,.09), transparent 32rem),
    var(--bg);
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, summary:focus-visible, [role="slider"]:focus-visible {
  outline: 3px solid rgba(16,217,210,.65);
  outline-offset: 3px;
}

.topbar {
  min-height: 76px;
  padding: 14px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: rgba(9,10,18,.78);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { color: var(--ink); text-decoration: none; font: 650 20px/1 Georgia, serif; }
.brand span { color: var(--cyan); }
.work-title { text-align: center; display: grid; gap: 3px; }
.work-title strong { font: 400 18px/1.1 Georgia, serif; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.quiet-button {
  justify-self: end;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
}
.quiet-button:hover { border-color: rgba(16,217,210,.55); color: var(--cyan); }

main { width: min(1420px, calc(100% - 40px)); margin: 0 auto; padding: clamp(34px,5vw,70px) 0 80px; }
.intro {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr);
  gap: clamp(28px,7vw,100px);
  align-items: end;
  margin-bottom: clamp(34px,5vw,64px);
}
.kicker { margin: 0 0 14px; color: var(--cyan); font-size: 13px; letter-spacing: .09em; }
h1 { margin: 0; font: 400 clamp(42px,6vw,84px)/.98 Georgia, "Songti TC", serif; letter-spacing: -.045em; }
h1 em { color: var(--rose); font-weight: 400; }
.lede { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }

.lab-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(350px,.8fr); gap: clamp(22px,3vw,42px); align-items: start; }
.stage-column { min-width: 0; }
.stage-shell {
  padding: clamp(10px,1.5vw,18px);
  background: linear-gradient(145deg,#1a1d29,#0c0e16);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
.canvas-frame {
  position: relative;
  aspect-ratio: 1.18 / 1;
  min-height: 420px;
  overflow: hidden;
  border-radius: 16px;
  background: #f7f4ed;
  isolation: isolate;
}
#art-canvas, #film-canvas { width: 100%; height: 100%; display: block; }
.film {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  filter: drop-shadow(3px 0 2px rgba(0,0,0,.14));
}
.film:active { cursor: grabbing; }
.film-edge {
  position: absolute;
  top: 39%;
  right: 4.5%;
  width: 34px;
  height: 86px;
  border-radius: 0 12px 12px 0;
  background: rgba(237,246,255,.76);
  border: 1px solid rgba(255,255,255,.8);
  border-left: 0;
  box-shadow: 8px 8px 22px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.film-edge b { display:block; width: 12px; height: 2px; background:#4a5060; border-radius:9px; }
.drag-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: white;
  background: rgba(5,7,12,.78);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 13px;
  pointer-events: none;
  transition: opacity .3s ease;
  backdrop-filter: blur(10px);
}
.hint-arrow { color: var(--cyan); font-size: 18px; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }

.status-row {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 14px 8px 12px;
  color: var(--quiet);
  font: 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.status-row b { color: #d9dbe3; font-weight: 500; }
.status-light { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); margin-right:8px; }
.transport { display:flex; gap:10px; }
.transport button { min-height:46px; border-radius:13px; padding:0 18px; cursor:pointer; border:1px solid var(--line); }
.primary-button { flex:1; border:0 !important; background:var(--ink); color:#0b0d14; font-weight:700; display:flex; justify-content:center; align-items:center; gap:10px; }
.primary-button:hover { background:var(--cyan); }
.control-button { background:var(--panel); color:#cacbd3; }
.control-button:hover { background:var(--panel-2); border-color:rgba(255,255,255,.22); }

.controls { display:grid; gap:14px; }
.control-card { border:1px solid var(--line); border-radius:var(--radius); background:rgba(17,19,29,.82); padding:19px; backdrop-filter:blur(14px); }
.section-heading { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-heading > div { display:flex; align-items:center; gap:10px; }
.section-heading span, .parameters summary i { color:var(--cyan); font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.section-heading h2 { margin:0; font-size:16px; }
.section-heading small, .parameters summary small { color:var(--quiet); font-size:12px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:5px; background:#090b12; padding:5px; border-radius:13px; }
.segment { min-height:42px; border:0; background:transparent; border-radius:9px; color:var(--muted); cursor:pointer; font-size:14px; }
.segment.active { color:#0b0d13; background:var(--ink); font-weight:700; }
.mode-explanation { margin:12px 2px 0; color:var(--muted); font-size:13px; line-height:1.65; }

.pattern-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pattern {
  min-height:64px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0e1018;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  cursor:pointer;
  text-align:left;
}
.pattern:last-child { grid-column:1 / -1; }
.pattern:hover, .pattern.active { border-color:rgba(16,217,210,.6); background:rgba(16,217,210,.07); }
.pattern.active { box-shadow: inset 3px 0 var(--cyan); }
.pattern span { display:grid; gap:3px; }
.pattern b { font-size:14px; }
.pattern small { color:var(--quiet); font-size:12px; }
.pattern-icon { width:31px; height:31px; flex:0 0 auto; border-radius:8px; background-color:#181b25; }
.pattern-icon.rings { background:repeating-radial-gradient(circle,#10d9d2 0 1px,transparent 2px 5px); }
.pattern-icon.spiral { background:repeating-conic-gradient(from 20deg,#ff4f87 0 8deg,transparent 9deg 18deg); }
.pattern-icon.radial { background:repeating-conic-gradient(#10d9d2 0 4deg,transparent 5deg 12deg); }
.pattern-icon.tunnel { background:repeating-linear-gradient(45deg,#ff4f87 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,#10d9d2 0 1px,transparent 1px 6px); }
.pattern-icon.waves { background:repeating-linear-gradient(135deg,#10d9d2 0 2px,transparent 2px 7px); }

.color-modes { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.color-mode { border:1px solid var(--line); background:#0d0f17; border-radius:11px; min-height:62px; padding:7px 3px; color:var(--muted); font-size:12px; cursor:pointer; display:grid; justify-items:center; gap:6px; }
.color-mode i { width:28px; height:18px; border-radius:99px; background:linear-gradient(90deg,var(--a),var(--a) 50%,var(--b) 50%); border:1px solid rgba(255,255,255,.28); }
.color-mode i.rainbow { background:linear-gradient(90deg,#ff4f87,#ffcc34,#3ee69a,#55aaff,#a95dff); }
.color-mode:hover, .color-mode.active { border-color:rgba(255,255,255,.42); color:var(--ink); background:#1b1e29; }
.palette-row { margin-top:12px; display:flex; gap:9px; padding:4px 2px; }
.swatch { width:42px; height:26px; border:2px solid transparent; border-radius:99px; padding:3px; background:linear-gradient(90deg,var(--a),var(--a) 50%,var(--b) 50%); cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.swatch.active { border-color:var(--ink); box-shadow:0 0 0 2px var(--rose); }
.color-observation { margin:13px 0 0; border-left:2px solid var(--rose); padding-left:11px; color:var(--muted); font-size:13px; line-height:1.6; }
.color-observation span { color:var(--rose); }

.parameters { padding:0; overflow:hidden; }
.parameters summary { list-style:none; min-height:58px; padding:0 19px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.parameters summary::-webkit-details-marker { display:none; }
.parameters summary > span { display:flex; gap:10px; align-items:center; }
.parameters[open] summary { border-bottom:1px solid var(--line); }
.slider-group { padding:15px 19px 2px; }
.slider-group:last-child { padding-bottom:18px; }
.slider-group label { display:flex; justify-content:space-between; color:#d6d7de; font-size:13px; }
.slider-group label small { color:var(--quiet); }
.slider-group output { color:var(--cyan); font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
input[type="range"] { width:100%; margin:12px 0 0; accent-color:var(--cyan); }
.slider-group.locked { opacity:.46; }

.learning-panel { margin-top:52px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; }
.learning-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.learning-header h2 { margin:10px 0 0; font:400 clamp(28px,4vw,48px)/1.1 Georgia,"Songti TC",serif; }
.learning-header button { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:25px; color:var(--muted); }
.question-grid { margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.question-grid article { min-height:190px; border:1px solid var(--line); border-radius:14px; padding:22px; background:#0e1018; }
.question-grid article span { color:var(--cyan); font-size:12px; letter-spacing:.14em; }
.question-grid h3 { margin:28px 0 10px; font:400 22px/1.3 Georgia,"Songti TC",serif; }
.question-grid p, .principle-strip p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.principle-strip { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; padding:20px 22px; background:rgba(16,217,210,.055); border-radius:14px; }
.principle-strip b { color:var(--ink); }
footer { width:min(1420px,calc(100% - 40px)); margin:auto; padding:22px 0 38px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--quiet); font-size:11px; letter-spacing:.08em; }

@media (max-width: 1050px) {
  .lab-layout { grid-template-columns:1fr; }
  .controls { grid-template-columns:1fr 1fr; }
  .parameters, .color-card { grid-column:span 1; }
  .canvas-frame { min-height:0; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns:1fr auto; }
  .work-title { display:none; }
  main { width:min(100% - 26px,1420px); padding-top:32px; }
  .intro { grid-template-columns:1fr; gap:20px; }
  h1 { font-size:clamp(40px,13vw,62px); }
  .lede { font-size:15px; }
  .canvas-frame { aspect-ratio:1 / 1.05; }
  .stage-shell { border-radius:20px; }
  .status-row { gap:8px; font-size:11px; }
  .status-row span:first-child { display:none; }
  .transport { display:grid; grid-template-columns:1fr 1fr; }
  .primary-button { grid-column:1 / -1; }
  .controls { grid-template-columns:1fr; }
  .parameters, .color-card { grid-column:auto; }
  .question-grid, .principle-strip { grid-template-columns:1fr; }
  .question-grid article { min-height:0; }
  footer { width:min(100% - 26px,1420px); display:block; line-height:1.7; }
}
@media (max-width: 390px) {
  .pattern-grid { grid-template-columns:1fr; }
  .pattern:last-child { grid-column:auto; }
  .color-modes { grid-template-columns:1fr 1fr; }
  .drag-hint { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}