/* Glass belongs to the workspace chrome, never to the artwork canvas. */
:root {
  --ui:#e8eeeb; --ink:#24352f; --muted:#58665e;
  --glass-tint:255 255 255; --glass-alpha:.14; --glass-blur:5px;
  --glass-ink:#24352f; --glass-muted:#53645b; --glass-line:#344b3826;
  --glass-edge:#ffffffbf; --glass-highlight:#ffffff85;
  --glass-field:#ffffff30; --glass-hover:#ffffff65;
  --glass-selected:#ffffffad; --glass-selected-ink:#20372c;
  --glass-solid:#e7efea; --glass-action:#264336; --glass-action-ink:#fff;
}
:root[data-appearance=smoke] {
  --glass-tint:23 39 34; --glass-alpha:.72; --glass-blur:6px;
  --glass-ink:#f7faf8; --glass-muted:#d9e4dc; --glass-line:#ffffff30;
  --glass-edge:#ffffff69; --glass-highlight:#ffffff36;
  --glass-field:#0b241a1c; --glass-hover:#ffffff17;
  --glass-selected:#ffffff30; --glass-selected-ink:#fff;
  --glass-solid:#344b40; --glass-action:#e4eee6; --glass-action-ink:#23392d;
}
html {background:var(--ui)}
body {
  background:
    linear-gradient(118deg,transparent 12%,#ffffff71 13%,#ffffff6b 26%,transparent 27%,transparent 59%,#ffffff5c 60%,#ffffff66 77%,transparent 78%),
    radial-gradient(ellipse at 5% 0%,#c8dadd 0%,transparent 57%),
    linear-gradient(140deg,#e4eae5,#f2f4ee 58%,#cbd9d2);
  color:var(--ink);
}
.app-header {background:transparent}
#settings-button {color:#42574b}
#settings-button svg {width:22px;height:22px}
#settings-button:hover {background:#ffffff5e;box-shadow:inset 0 1px 1px #fff9}
.header-save {
  color:#f8fcf9;background:linear-gradient(145deg,#4d695a,#213e30 72%);
  border:1px solid #ffffffa8;box-shadow:inset 0 1px 2px #ffffff90,inset 0 -1px 1px #091e2766,0 4px 10px #183f292a;
}
.header-save:hover {background:linear-gradient(145deg,#5d7c69,#2f4d3c 72%)}
.handoff-button {background:#ffffff10;border-color:#ffffff7a;box-shadow:inset 0 1px 1px #ffffff6b}
.handoff-button:hover {background:#ffffff55;border-color:#fff9}
.editor,.tool-dock,.caption-actions,dialog,.typing-toolbar {
  --ink:var(--glass-ink);--navy:var(--glass-ink);--muted:var(--glass-muted);--line:var(--glass-line);
  color:var(--glass-ink);
  background:
    radial-gradient(ellipse 94% 44% at var(--shine-x,24%) var(--shine-y,8%),var(--glass-highlight),#ffffff18 34%,transparent 69%),
    linear-gradient(116deg,transparent 18%,#ffffff05 33%,#ffffff33 37%,#ffffff08 42%,transparent 51%),
    rgb(var(--glass-tint) / var(--glass-alpha));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  box-shadow:inset 0 1px 1px #ffffffe0,inset 1px 0 1px #ffffff55,inset 0 -1px 2px #2345302e,0 9px 24px -7px #1f412e35,0 1px 2px #273e3030;
}
.editor {position:relative;border-radius:27px}
.editor-open .editor {animation:none}
.tool-dock {border-radius:27px}
.caption-actions {position:relative}
/* Two quiet edge reflections. The hollow mask never washes over the text. */
.header-save,.handoff-button {position:relative}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
  :is(.editor,.tool-dock,.caption-actions,dialog,.typing-toolbar,.header-save,.handoff-button,.appearance-choice)::after {
    content:'';position:absolute;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none;
    background:radial-gradient(ellipse 150px 105px at 0 0,#fffffff2,transparent 76%),radial-gradient(ellipse 130px 95px at 100% 100%,#ffffffa6,transparent 76%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
}
.panel-scroll {scrollbar-color:var(--glass-line) transparent}
.inspector-heading h1 {font-weight:600}
.close-button {background:var(--glass-field);color:var(--glass-ink);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 1px #ffffff70}
.close-button:hover {background:var(--glass-hover)}
.tabs button {color:var(--glass-muted);border:1px solid transparent}
.tabs button[aria-selected=true],
.caption-actions .create-shortcut[aria-pressed=true],.editor-open .caption-actions .create-shortcut[aria-pressed=true] {
  background:linear-gradient(145deg,#ffffff51,transparent 65%),var(--glass-selected);
  color:var(--glass-selected-ink);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -1px 1px #29453216,0 3px 7px #163c2517;
}
.tabs button:hover:not([aria-selected=true]),.caption-actions button:hover:not([aria-pressed=true]) {background:var(--glass-hover);color:var(--glass-ink)}
.caption-actions .create-shortcut,.editor-open .caption-actions .create-shortcut {color:var(--glass-muted);border:1px solid transparent}
.preview-meta {color:#576b60}
#preview-mode-label {color:#344b3d}
.editor :is(textarea,input[type=text],input[type=date]),dialog :is(textarea,input[type=text],input[type=date]) {
  background:var(--glass-field);color:var(--glass-ink);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 3px #2443320b,0 1px 0 #ffffff2c;
}
.editor ::placeholder,dialog ::placeholder {color:var(--glass-muted);opacity:.9}
.editor :is(.ruby-button,.date-controls button,.photo-button,.segmented,.shape-options button,.decoration-options button,.reel-speed,.reel-duration button,.reel-preset),
dialog :is(.secondary-button,.install-guide,.draft-summary,.photo-edit-stage,.photo-zoom-actions>button) {
  color:var(--glass-ink);background:var(--glass-field);border-color:var(--glass-line);
}
.editor :is(.ruby-button,.photo-button,.font-card,.mora-button,.date-controls button,.reel-preset):hover,
dialog .secondary-button:hover {color:var(--glass-ink);background:var(--glass-hover)}
.editor :is(.segmented button,.shape-options button,.decoration-options button,.reel-speed button,.reel-duration button,.reel-preset,.font-card)[aria-pressed=true] {
  color:var(--glass-selected-ink);background:var(--glass-selected);border-color:var(--glass-edge);
  box-shadow:inset 0 1px 1px #ffffff90,0 2px 6px #1638260d;
}
.editor .font-card[aria-pressed=true]:after {background:var(--glass-ink)}
.editor .font-card small,.editor .signature-field label span,.editor .date-field label span,
.editor .field-hint,.editor .text-footer,.editor .photo-status {color:var(--glass-muted)}
.editor .check-row input {background:var(--glass-line)}
.editor .check-row input:checked {background:var(--glass-action)}
.editor .check-row input:checked:before {background:var(--glass-action-ink)}
.editor input[type=range]::-webkit-slider-runnable-track {background:linear-gradient(to right,var(--glass-ink) var(--range-progress,50%),var(--glass-line) var(--range-progress,50%))}
.editor input[type=range]::-moz-range-track {background:var(--glass-line)}
.editor .paper-choice[aria-pressed=true] canvas {box-shadow:0 0 0 2px var(--glass-solid),0 0 0 3.5px var(--glass-ink)}
.editor .swatch[aria-pressed=true]:after,.editor .ink-options button[aria-pressed=true] {border-color:var(--glass-ink)}
:root[data-appearance=smoke] .font-card img {filter:invert(1) grayscale(1) brightness(1.6)}
:root[data-appearance=smoke] .editor input[type=date] {color-scheme:dark}
.editor .save-button,dialog .save-button,.typing-toolbar button {
  background:var(--glass-action);color:var(--glass-action-ink);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 2px #ffffff6b;
}
.editor .save-button:hover,dialog .save-button:hover,.typing-toolbar button:hover {filter:brightness(1.08)}
dialog {--glass-alpha:.88}
:root[data-appearance=smoke] dialog {--glass-alpha:.94}
dialog::backdrop {background:#293e3333;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog a {color:var(--glass-ink)}
dialog .license-list a {background:var(--glass-field);border-color:var(--glass-line)}
dialog .small-note {color:var(--glass-muted)}
dialog :is(.ruby-error,.reel-error),.editor .reel-status.reel-error {color:#873e20}
:root[data-appearance=smoke] dialog .ruby-error,:root[data-appearance=smoke] .editor .reel-status.reel-error {color:#ffd1b6}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {outline:2px solid #487a9a;outline-offset:3px}
:root[data-appearance=smoke] :is(.editor,.tool-dock,.caption-actions,dialog) :focus-visible {outline-color:#bfdfee}

/* Native radios keep keyboard and VoiceOver selection behavior intact. */
#settings-dialog {max-width:460px;padding:26px}
.appearance-field {margin:20px 0 0;padding:0;border:0;min-width:0}
.appearance-field legend {font-size:.875rem;margin-bottom:14px}
.appearance-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.appearance-choice {position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:10px 10px 14px;border:1px solid var(--glass-line);border-radius:18px;cursor:pointer}
.appearance-choice:has(input:checked) {border-color:var(--glass-ink);box-shadow:0 0 0 1px var(--glass-ink)}
.appearance-choice:has(input:focus-visible) {outline:2px solid #487a9a;outline-offset:4px}
.appearance-choice input {position:absolute;right:18px;top:18px;margin:0;width:18px;height:18px;z-index:1;accent-color:#294b36}
.appearance-sample {display:block;position:relative;height:104px;overflow:hidden;border-radius:10px;background:linear-gradient(118deg,#cfddda 25%,#eef2e9 26%,#eef2e9 62%,#d0dcd5 63%)}
.appearance-sample i {position:absolute;left:15px;top:15px;width:42px;height:73px;border:1px solid #ffffffc0;border-radius:12px;background:linear-gradient(145deg,#ffffff97,transparent 70%),#ffffff24;box-shadow:inset 0 1px 1px #fff,0 4px 7px #213b292a}
.appearance-sample i:after {content:'';position:absolute;left:8px;top:20px;width:22px;height:2px;background:#365643;box-shadow:0 10px 0 #365643,0 20px 0 #365643}
.appearance-sample b {position:absolute;width:38px;height:58px;top:28px;right:17px;background:#fffdf7;box-shadow:0 4px 7px #213b2925}
.sample-smoke i {background:linear-gradient(145deg,#ffffff5c,transparent 70%),#183929b8}
.sample-smoke i:after {background:#f4fcf4;box-shadow:0 10px 0 #f4fcf4,0 20px 0 #f4fcf4}
.appearance-label {font-size:.9375rem;padding:0 3px;font-weight:550}
.appearance-label small {display:block;font-size:.75rem;line-height:1.7;margin-top:4px;font-weight:400;color:var(--glass-muted)}
.appearance-note {font-size:.8125rem;line-height:1.8;color:var(--glass-muted);margin:18px 0 24px}
.settings-help {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 2px;border-top:1px solid var(--glass-line);background:transparent;font-size:.875rem;color:var(--glass-ink);text-align:left}
.settings-help:hover {background:var(--glass-hover)}
.settings-version {display:block;font-size:.6875rem;color:var(--glass-muted);margin-top:16px}
@media(max-width:599px) {
  #settings-dialog {padding:20px}
  .appearance-options {gap:10px}
  .appearance-choice {padding:8px 8px 12px}
  .appearance-label small {font-size:.6875rem}
  .appearance-sample {height:96px}
  .header-actions #settings-button {position:static;width:36px;min-width:36px;height:44px}
}
@media(max-width:359px) {
  .header-actions #settings-button {width:32px;min-width:32px}
  .header-save {min-width:66px}
  .handoff-button {width:36px;padding:8px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .editor,.tool-dock,.caption-actions,dialog,.typing-toolbar {background:var(--glass-solid)}
}
@media(prefers-reduced-transparency:reduce) {
  .editor,.tool-dock,.caption-actions,dialog,.typing-toolbar {background:var(--glass-solid);backdrop-filter:none;-webkit-backdrop-filter:none}
  :is(.editor,.tool-dock,.caption-actions,dialog,.typing-toolbar,.header-save,.handoff-button,.appearance-choice)::after {display:none}
}
@media(forced-colors:active) {
  :is(.editor,.tool-dock,.caption-actions,dialog,.typing-toolbar,.header-save,.handoff-button,.appearance-choice)::after {display:none}
  .editor,.tool-dock,.caption-actions,dialog,.typing-toolbar {background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}
  .tabs button[aria-selected=true],.caption-actions .create-shortcut[aria-pressed=true] {outline:2px solid Highlight}
}