:root {
  color-scheme: dark;
  --ink: #eef4ff;
  --ink-muted: #98a5b9;
  --ink-quiet: #657286;
  --canvas: #0d131c;
  --panel: #121a25;
  --panel-2: #16202c;
  --line: rgba(202, 220, 255, 0.12);
  --line-strong: rgba(202, 220, 255, 0.24);
  --accent: #b4c8ff;
  --accent-strong: #8ea9ff;
  --glass-opacity: 0.2;
  --glass-blur: 28px;
  --glass-saturation: 1.45;
  --glass-border: 0.38;
  --glass-radius: 34px;
  --glass-glow: 0.68;
  --shadow-strength: 0.38;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 0%, rgba(87, 112, 165, 0.15), transparent 31rem),
    var(--canvas);
  font-size: 14px;
  letter-spacing: -0.01em;
}

button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(1440px, 100%); margin: 0 auto; padding: 0 42px 30px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; }
.brand small, .eyebrow, .size-note, .control-count, .card-kicker, .card-index, .scene-footer, .preview-label, .preview-live, .footer-note { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.brand small { display: block; margin-top: 4px; color: var(--ink-quiet); font-size: 8px; letter-spacing: 0.17em; }

.brand-mark { position: relative; display: grid; grid-template-columns: repeat(3, 8px); align-items: end; gap: 3px; width: 30px; height: 30px; padding: 7px; border: 1px solid rgba(190, 208, 255, 0.27); border-radius: 9px; background: linear-gradient(145deg, rgba(175, 199, 255, 0.18), rgba(255,255,255,0.03)); overflow: hidden; }
.brand-mark::after { content: ""; position: absolute; inset: -20% 22% 47%; background: rgba(231, 240, 255, 0.45); filter: blur(5px); transform: rotate(-25deg); }
.brand-mark i { position: relative; z-index: 1; display: block; border-radius: 3px 3px 1px 1px; background: rgba(226, 236, 255, 0.86); }
.brand-mark i:nth-child(1) { height: 6px; opacity: .45; }
.brand-mark i:nth-child(2) { height: 12px; opacity: .7; }
.brand-mark i:nth-child(3) { height: 16px; }

.topbar-actions { display: flex; align-items: center; gap: 18px; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 12px; }
.status-dot i, .preview-live i, .meta-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #85e8b0; box-shadow: 0 0 12px rgba(133,232,176,.8); }
.ghost-button { border: 0; padding: 7px 0; color: var(--ink-muted); background: none; transition: color .2s ease; }
.ghost-button:hover, .ghost-button:focus-visible { color: var(--ink); }
.ghost-button span { margin-right: 5px; font-size: 17px; vertical-align: -1px; }

.intro-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 64px 0 50px; }
.eyebrow { margin: 0 0 12px; color: var(--accent-strong); font-size: 9px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin-bottom: 0; font-size: clamp(32px, 4vw, 58px); font-weight: 540; line-height: 1.05; letter-spacing: -0.055em; }
h1 em { color: #8394b0; font-style: normal; }
.intro-copy { max-width: 330px; margin: 0 0 4px; color: var(--ink-muted); font-size: 13px; line-height: 1.7; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, .84fr); gap: 22px; align-items: start; }
.preview-column, .controls-panel { min-width: 0; }
.section-heading, .panel-heading { display: flex; align-items: end; justify-content: space-between; min-height: 48px; margin-bottom: 16px; }
h2 { margin-bottom: 0; font-size: 18px; font-weight: 590; letter-spacing: -0.03em; }
.size-note, .control-count { color: var(--ink-quiet); font-size: 9px; }

.preview-frame { padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); box-shadow: 0 22px 60px rgba(0,0,0,.23); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 0 5px 9px; color: var(--ink-quiet); }
.window-dots { display: flex; gap: 4px; }
.window-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #536174; }
.window-dots i:nth-child(2) { background: #637891; }
.window-dots i:nth-child(3) { background: #899ab0; }
.preview-label { font-size: 8px; letter-spacing: .18em; }
.preview-live { display: flex; align-items: center; gap: 6px; color: #a9b9cf; font-size: 8px; }
.preview-live i { width: 4px; height: 4px; }

.preview-stage { position: relative; aspect-ratio: 16 / 10; min-height: 420px; overflow: hidden; isolation: isolate; border-radius: 11px; background-color: #09132c; background-image: var(--stage-background, url("./wallpaper.svg")); background-position: center; background-size: cover; }
.preview-stage::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,11,27,.02), transparent 48%, rgba(5,9,24,.25)); }
.wallpaper-grain { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.widget-pair { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; grid-template-columns: 1.03fr 1fr; gap: 4.5%; width: 88%; height: 76%; transform: translate(-50%, -50%); }
.glass-widget { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; border: 1px solid rgba(236, 246, 255, var(--glass-border)); border-radius: var(--glass-radius); background: linear-gradient(145deg, rgba(186, 218, 255, calc(var(--glass-opacity) + .12)) 0%, rgba(114, 151, 211, calc(var(--glass-opacity) + .045)) 44%, rgba(199, 216, 249, calc(var(--glass-opacity) * .8)) 100%); box-shadow: 0 22px 58px rgba(2, 8, 24, var(--shadow-strength)), 0 5px 18px rgba(72, 115, 255, calc(var(--glass-glow) * .12)), inset 0 1px 0 rgba(255,255,255, calc(.34 + var(--glass-glow) * .28)), inset 1px 0 0 rgba(255,255,255, calc(var(--glass-glow) * .3)), inset 0 -1px 0 rgba(225,239,255,.12); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); transition: border-radius .24s ease, box-shadow .24s ease, background .24s ease; }
.glass-widget::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--shine-x, 24%) var(--shine-y, 0%), rgba(242,250,255, calc(var(--glass-glow) * .3)), transparent 48%), linear-gradient(135deg, rgba(255,255,255, calc(var(--glass-glow) * .25)), transparent 26% 69%, rgba(255,255,255, calc(var(--glass-glow) * .12))); mix-blend-mode: screen; }
.glass-widget::after { content: ""; position: absolute; z-index: -1; top: -42%; left: -26%; width: 88%; height: 37%; border: 1px solid rgba(245,250,255, calc(var(--glass-glow) * .34)); border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255, calc(var(--glass-glow) * .18)), transparent); filter: blur(9px); transform: rotate(47deg); pointer-events: none; }
.calendar-widget { display: flex; flex-direction: column; justify-content: center; padding: 7.5% 8%; }
.widget-date-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8%; color: rgba(250,252,255,.91); text-shadow: 0 1px 14px rgba(18,46,102,.24); }
.widget-date-heading strong { font-size: clamp(18px, 2.25vw, 29px); font-weight: 640; letter-spacing: -.04em; }
.widget-date-heading span { color: rgba(237,245,255,.68); font-size: clamp(10px, 1.2vw, 14px); font-weight: 540; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; justify-items: center; row-gap: clamp(4px, 1.05vw, 12px); color: rgba(239,246,255,.8); }
.weekday, .day { display: grid; place-items: center; width: clamp(21px, 3.25vw, 38px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(10px, 1.45vw, 16px); font-weight: 580; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(6,17,46,.3); }
.weekday { color: rgba(225,237,255,.59); font-size: clamp(8px, 1.1vw, 12px); font-weight: 560; }
.empty-day { width: clamp(21px, 3.25vw, 38px); aspect-ratio: 1; }
.selected-day { color: #263757; background: rgba(244,248,255,.84); box-shadow: 0 2px 14px rgba(255,255,255,.24); text-shadow: none; }
.weather-widget { display: flex; flex-direction: column; justify-content: center; padding: 8% 10%; color: rgba(250,252,255,.93); text-shadow: 0 1px 14px rgba(18,46,102,.26); }
.weather-city { margin-bottom: 2%; font-size: clamp(17px, 2.35vw, 30px); font-weight: 650; letter-spacing: .04em; }
.weather-temperature { margin-left: -3px; font-size: clamp(58px, 8.5vw, 108px); font-weight: 260; line-height: .98; letter-spacing: -.075em; }
.weather-temperature span { font-size: .58em; vertical-align: top; }
.weather-cloud { width: clamp(28px, 4.2vw, 48px); height: auto; margin: 4% 0 1%; color: rgba(248,251,255,.88); filter: drop-shadow(0 2px 7px rgba(20,41,89,.16)); }
.weather-condition { margin-bottom: 7%; color: rgba(239,246,255,.82); font-size: clamp(13px, 1.7vw, 20px); font-weight: 540; }
.weather-range { display: flex; justify-content: space-between; gap: 9px; padding-top: 7%; border-top: 1px solid rgba(242,248,255,.21); color: rgba(225,238,255,.68); font-size: clamp(9px, 1.15vw, 13px); }
.weather-range strong { color: rgba(255,255,255,.92); font-size: 1.15em; font-weight: 590; }
.scene-caption { position: absolute; z-index: 3; right: 16px; bottom: 13px; display: flex; gap: 6px; color: rgba(222,235,255,.48); font-size: 7px; font-weight: 600; letter-spacing: .16em; }

.preview-meta { display: flex; justify-content: space-between; gap: 20px; padding: 14px 2px 0; color: var(--ink-quiet); font-size: 10px; letter-spacing: .04em; }
.preview-meta > span { display: flex; align-items: center; gap: 7px; }
.preview-meta strong { color: var(--ink-muted); font-weight: 550; }
.meta-dot { width: 5px; height: 5px; }

.controls-panel { padding: 0 22px 4px; border: 1px solid var(--line); border-radius: 18px; background: rgba(18, 26, 37, .82); box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.panel-heading { margin-right: -22px; margin-left: -22px; padding: 0 22px 16px; border-bottom: 1px solid var(--line); }
.control-group { padding: 22px 0 23px; border-bottom: 1px solid var(--line); }
.control-group:last-child { border-bottom: 0; }
.group-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.group-title-row h3 { margin: 0; font-size: 13px; font-weight: 620; }
.control-hint { color: var(--ink-quiet); font-size: 10px; }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.16); }
.segment { padding: 8px; border: 0; border-radius: 6px; color: var(--ink-muted); background: transparent; font-size: 11px; transition: all .2s ease; }
.segment:hover { color: var(--ink); }
.segment.is-active { color: #ecf2ff; background: rgba(167, 193, 255, .15); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.source-pane { padding-top: 16px; }
.source-pane.is-hidden { display: none; }
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch { position: relative; aspect-ratio: 1.35; padding: 3px; border: 1px solid transparent; border-radius: 8px; background: transparent; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 5px; }
.swatch.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(156, 180, 255, .1); }
.swatch-aurora { background: linear-gradient(135deg, #09142f 0 29%, #2d62d2 39%, #d9f0ff 50%, #224fb9 61%, #070f29 100%); }
.swatch-ember { background: linear-gradient(135deg, #eec6a3, #cf7d77 42%, #3f274e); }
.swatch-ink { background: linear-gradient(135deg, #4b5e85, #141e34 58%, #182c35); }
.swatch-moss { background: linear-gradient(135deg, #e2c6a6, #82977c 36%, #294c4a); }
.helper-text { margin: 12px 0 0; color: var(--ink-quiet); font-size: 10px; line-height: 1.5; }

.color-control { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); }
.color-control label { color: var(--ink-muted); font-size: 11px; }
.color-input-wrap { display: flex; align-items: center; gap: 9px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.color-input-wrap input { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; }
.color-input-wrap input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input-wrap input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.24); border-radius: 6px; }

.upload-zone { display: flex; align-items: center; gap: 11px; padding: 15px 13px; border: 1px dashed rgba(183, 203, 255, .31); border-radius: 9px; color: var(--ink-muted); background: rgba(157, 184, 255, .04); transition: border-color .2s ease, background .2s ease; cursor: pointer; }
.upload-zone:hover, .upload-zone.is-dragging { border-color: var(--accent); background: rgba(157,184,255,.09); }
.upload-zone input { display: none; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { color: var(--ink); font-size: 11px; font-weight: 550; }
.upload-zone small { margin-top: 3px; color: var(--ink-quiet); font-size: 9px; }
.upload-icon { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(200,216,255,.28); border-radius: 7px; color: var(--accent); font-size: 15px; }

.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 18px; }
.preset { padding: 8px 4px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-quiet); background: transparent; font-size: 10px; transition: all .2s ease; }
.preset:hover, .preset.is-active { color: var(--ink); border-color: rgba(179,200,255,.42); background: rgba(170,194,255,.08); }
.range-list { display: grid; gap: 15px; }
.range-control { display: grid; gap: 8px; }
.range-label { display: flex; align-items: center; justify-content: space-between; color: var(--ink-muted); font-size: 11px; }
.range-label output { min-width: 42px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-align: right; }
input[type="range"] { width: 100%; height: 3px; margin: 0; border-radius: 20px; outline: none; background: linear-gradient(90deg, var(--accent-strong) 0%, var(--accent-strong) var(--range-progress, 50%), rgba(201,216,248,.14) var(--range-progress, 50%), rgba(201,216,248,.14) 100%); appearance: none; -webkit-appearance: none; }
input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; border: 2px solid #dbe6ff; border-radius: 50%; background: #88a3ee; box-shadow: 0 0 0 4px rgba(136,163,238,.13); appearance: none; -webkit-appearance: none; }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #dbe6ff; border-radius: 50%; background: #88a3ee; }

.code-preview { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #0e151e; }
.code-preview code { display: block; min-height: 32px; color: #b9c9ea; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.copy-button { display: flex; align-items: center; gap: 6px; margin-top: 11px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); width: 100%; color: var(--accent); background: none; font-size: 11px; text-align: left; }
.copy-button:hover, .copy-button:focus-visible { color: #edf3ff; }
.copy-button span { font-size: 14px; }
.copy-status { min-height: 15px; margin: 8px 0 0; color: #86e4ad; font-size: 10px; }

.footer-note { display: flex; justify-content: space-between; gap: 20px; padding-top: 29px; color: var(--ink-quiet); font-size: 8px; letter-spacing: .13em; }

button:focus-visible, input:focus-visible, .upload-zone:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1040px) {
  .app-shell { padding: 0 26px 28px; }
  .workspace { grid-template-columns: 1fr; }
  .controls-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 0 22px; }
  .panel-heading { grid-column: 1 / -1; }
  .export-group { grid-column: 1 / -1; }
  .preview-stage { min-height: 0; }
}

@media (max-width: 640px) {
  .app-shell { padding: 0 16px 22px; }
  .topbar { height: 68px; }
  .status-dot { display: none; }
  .intro-row { display: block; padding: 42px 0 34px; }
  .intro-copy { max-width: 100%; margin-top: 18px; }
  .section-heading { min-height: 38px; }
  .preview-meta { display: grid; gap: 7px; }
  .scene-caption { top: 20px; left: 20px; }
  .scene-footer { right: 20px; bottom: 19px; left: 20px; }
  .preview-stage { aspect-ratio: 1 / 1.08; }
  .widget-pair { width: 92%; height: 76%; gap: 3.5%; }
  .glass-widget { border-radius: min(var(--glass-radius), 25px); }
  .calendar-widget { padding: 7% 5%; }
  .widget-date-heading { gap: 5px; margin-bottom: 8%; }
  .weekday, .day, .empty-day { width: clamp(17px, 5.1vw, 28px); }
  .calendar-grid { row-gap: clamp(2px, 1vw, 7px); }
  .weather-widget { padding: 8% 8%; }
  .weather-range { flex-direction: column; gap: 5px; }
  .scene-caption { font-size: 6px; }
  .controls-panel { display: block; padding: 0 17px; }
  .panel-heading { margin-right: -17px; margin-left: -17px; padding-right: 17px; padding-left: 17px; }
  .footer-note { display: grid; gap: 9px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-widget { background: rgba(42, 61, 101, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .glass-widget { background: rgba(25, 40, 75, .94); border-color: rgba(255,255,255,.82); }
  .weekday, .day, .weather-range, .widget-date-heading span { color: #fff; }
}