/* Workspace composition: a quiet paper studio, with the guide one click away.
   Loaded after the theme skins; wallpaper rendering is independent of this UI. */
:root {
  --font-mono: "SFMono-Regular", "Menlo", monospace;
  --studio-accent: #17503f;
  --studio-soft: #edf2ec;
  --studio-surface: #fffefa;
  --studio-line: #e5e7df;
  --studio-muted: #747d74;
}
:root[data-ui-theme="editorial"] {
  --font: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-editorial: "Iowan Old Style", "Songti SC", "STSong", serif;
  --bg: #f7f8f4;
  --panel: #fffefa;
  --paper: #fffefa;
  --paper-muted: #f2f4ed;
  --ink: #283b31;
  --sub: #727c73;
  --line: #e1e5db;
  --line-strong: #c6cec0;
  --accent: #17503f;
  --accent-2: #17503f;
  --accent-ink: #fffefa;
  --accent-soft: #e8efe5;
  --indigo: #42634e;
  --indigo-soft: #edf2e9;
}
:root[data-ui-theme="anime"] {
  --studio-accent: #7250ae;
  --studio-soft: #f3edfa;
  --studio-line: #e5d8f8;
}
:root[data-ui-theme="liquid"] {
  --studio-accent: #355e76;
  --studio-soft: #edf3f7;
  --studio-surface: #fcfdff;
  --studio-line: #dfe6ec;
}
:root[data-ui-theme="editorial"] body { background: #f7f8f4; }
:root[data-ui-theme="editorial"] body::before { background: radial-gradient(ellipse at 50% 0%, #eaf0e4, transparent 65%); opacity: .55; }
:root[data-ui-theme="editorial"] .float-deco { display: none; }
:root[data-ui-theme] .topbar {
  position: sticky;
  gap: 16px;
  min-height: 76px;
  padding: 13px clamp(20px, 2.5vw, 44px);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--studio-line);
}
:root[data-ui-theme="editorial"] .topbar { background: rgba(253,254,250,.94); box-shadow: none; }
:root[data-ui-theme] .brand { flex: 0 0 auto; gap: 11px; }
:root[data-ui-theme] .logo { width: 39px; height: 39px; border-radius: 12px; }
:root[data-ui-theme="editorial"] .logo { background: #244c3b; border: 0; box-shadow: none; font-family: Georgia, serif; }
:root[data-ui-theme] .logo::before, :root[data-ui-theme] .topbar h1::after { display: none; }
:root[data-ui-theme] .topbar h1 { font-family: "Avenir Next", var(--font); font-size: 21px; letter-spacing: -.7px; }
:root[data-ui-theme] .tagline { margin: 2px 0 0; font-size: 10px; font-weight: 500; }
:root[data-ui-theme] .top-actions.layout-actions {
  gap: 9px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-ui-theme] .top-actions.layout-actions::before,
:root[data-ui-theme] .top-actions.layout-actions::after { display: none; }
.top-actions .guide-nav { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui-theme] .guide-nav,
:root[data-ui-theme] .top-actions .support-nav { color: var(--sub); border-color: transparent; background: transparent; box-shadow: none; font-size: 11px; padding: 8px 5px; }
:root[data-ui-theme] .guide-nav:hover,
:root[data-ui-theme] .top-actions .support-nav:hover { color: var(--studio-accent); background: var(--studio-soft); }
.guide-nav .ic { width: 14px; height: 14px; }
:root[data-ui-theme] .ui-theme-picker { border-radius: 9px; padding: 2px; box-shadow: none; }
:root[data-ui-theme] .ui-theme-option { min-height: 29px; padding: 5px 7px; border-radius: 7px; font-size: 10px; }
.ui-theme-label { display: none; }
:root[data-ui-theme] .ui-theme-picker { grid-template-columns: repeat(3, auto); }
:root[data-ui-theme] .account-tools { gap: 7px; border-left: 1px solid var(--studio-line); padding-left: 11px; }
:root[data-ui-theme] .account-tools :is(a, button, span) { font-size: 10px; }
:root[data-ui-theme] .workbench {
  grid-template-columns: minmax(268px, .95fr) minmax(430px, 1.8fr) minmax(268px, .95fr);
  max-width: 1680px; padding: 0 clamp(20px, 2.5vw, 44px) 22px; gap: 22px;
  scroll-margin-top: 90px;
}
.workspace-intro { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 0 4px; }
.workspace-eyebrow { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--sub); }
.workspace-eyebrow > span { display: inline-block; width: 5px; height: 5px; margin: 0 6px 2px 0; background: var(--studio-accent); border-radius: 50%; }
.workspace-intro h2 { margin: 0; font: 500 clamp(26px, 2.5vw, 35px)/1.2 "Iowan Old Style", "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: -.035em; }
.workspace-intro h2 em { font-style: normal; color: var(--studio-accent); }
.workspace-intro-copy > p:last-child { margin: 11px 0 0; color: var(--sub); font-size: 11px; }
.welcome-guide { display: flex; align-items: center; text-align: left; gap: 14px; min-height: 73px; padding: 13px 17px; background: var(--paper); border: 1px solid var(--studio-line); border-radius: 13px; color: var(--ink); font-family: var(--font); cursor: pointer; transition: border-color .2s, transform .2s; }
.welcome-guide:hover { border-color: var(--studio-accent); transform: translateY(-2px); }
.welcome-guide-icon { display: grid; place-items: center; width: 39px; height: 45px; color: var(--studio-accent); background: var(--studio-soft); border: 1px solid var(--studio-line); border-radius: 7px; transform: rotate(-8deg); }
.welcome-guide-icon .ic { width: 23px; height: 23px; }
.welcome-guide small { display: block; font-size: 10px; color: var(--sub); margin-bottom: 5px; }
.welcome-guide b { font-size: 12px; font-weight: 600; }
.welcome-guide-arrow { font-size: 21px; color: var(--studio-accent); margin-left: 10px; }
:root[data-ui-theme] .panel { flex-direction: column; grid-row: 2; gap: 12px; }
:root[data-ui-theme] .panel-left { grid-column: 1; }
:root[data-ui-theme] .panel-right { grid-column: 3; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 7px; min-height: 30px; }
.panel-heading > span { font-size: 12px; font-weight: 650; white-space: nowrap; }
.panel-heading i { font: 500 10px var(--font-mono); color: var(--studio-accent); margin-right: 7px; }
.panel-heading small { color: var(--sub); font-size: 9px; }
:root[data-ui-theme] .panel-col { max-height: calc(100dvh - 279px); min-height: 220px; border: 1px solid var(--studio-line); border-radius: 14px; scrollbar-gutter: stable; box-shadow: 0 5px 18px rgba(26,46,30,.025); }
:root[data-ui-theme="editorial"] .panel-col { background: #fffefa; }
:root[data-ui-theme] .panel-col > .card { padding: 16px 14px; }
:root[data-ui-theme] .panel-col > details.card { padding: 0; }
:root[data-ui-theme="editorial"] .panel-col > .card:hover { background: #fffefa; box-shadow: none; }
:root[data-ui-theme] .card h2 { font-family: var(--font); font-size: 12px; letter-spacing: 0; }
:root[data-ui-theme] .h-emoji { border: 0; border-radius: 6px; }
:root[data-ui-theme] .lib-cards { gap: 6px; }
:root[data-ui-theme] .lib-card { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 7px; min-width: 0; padding: 9px 8px; border-radius: 8px; box-shadow: none; }
:root[data-ui-theme="editorial"] .lib-card { border: 1px solid #e7e9e1; background: #fffefa; }
:root[data-ui-theme="editorial"] .lib-card.on { border-color: #577663; background: #edf3e8; box-shadow: inset 0 0 0 .5px #577663; }
:root[data-ui-theme="editorial"] .lib-card.on::before { display: none; }
:root[data-ui-theme] .lib-icon { grid-column: 1; grid-row: 1 / 3; width: 22px; height: 25px; flex-shrink: 0; }
:root[data-ui-theme] .lib-body { display: contents; }
:root[data-ui-theme] .lib-body b { grid-column: 2; grid-row: 1; font-size: 10px; font-weight: 600; line-height: 1.4; white-space: normal; overflow: visible; }
:root[data-ui-theme] .lib-body i { display: none; }
:root[data-ui-theme] .lib-count { grid-column: 2; grid-row: 2; justify-self: start; font-size: 8px; padding: 0; background: none; color: var(--sub); }
:root[data-ui-theme="editorial"] :is(.lib-search input, .row select, .row input[type="number"], .rem-input input) { background: #fbfcf8; }
:root[data-ui-theme="editorial"] .btn.primary { color: #fff; background: #17503f; border-color: #17503f; }
:root[data-ui-theme="editorial"] .btn.primary:hover { background: #103e30; border-color: #103e30; box-shadow: 0 4px 12px #17503f18; }
:root[data-ui-theme] .preview { grid-column: 2; grid-row: 2; gap: 10px; }
:root[data-ui-theme] .preview-top { flex-wrap: wrap; width: 100%; min-height: 32px; gap: 12px; padding: 0 1px; }
.preview-heading h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font: 650 12px var(--font); }
.preview-live { font-size: 8px; font-weight: 500; padding: 2px 5px; border-radius: 4px; color: var(--studio-accent); background: var(--studio-soft); }
:root[data-ui-theme] #meta { display: block; font: 400 9px/1.5 var(--font); letter-spacing: 0; }
:root[data-ui-theme] .meta-actions { display: flex; gap: 5px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-ui-theme] .meta-actions::before, :root[data-ui-theme] .meta-actions::after { display: none; }
:root[data-ui-theme] .meta-actions .btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 10px; border-radius: 8px; font-size: 10px; }
.meta-actions .ic { width: 13px; height: 13px; }
:root[data-ui-theme] .preview-top { order: 0; }
:root[data-ui-theme] .stage { order: 1; padding: 24px; min-height: 300px; border-radius: 16px; overflow: hidden; }
:root[data-ui-theme="editorial"] .stage { border: 1px solid #dce3d6; background-color: #e9eee3; background-image: radial-gradient(#8699813b .8px, transparent .8px); background-size: 13px 13px; box-shadow: inset 0 1px 0 #fff8; }
:root[data-ui-theme="editorial"] .stage::before,
:root[data-ui-theme="editorial"] .stage::after { border-color: #789074; opacity: .5; width: 14px; height: 14px; }
:root[data-ui-theme="editorial"] #preview-canvas { border-radius: 7px; box-shadow: 0 14px 35px #33472b20, 0 2px 5px #33472b14; }
.preview-caption { order: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 1px 3px 3px; color: var(--sub); font-size: 9px; }
.preview-caption > span { display: inline-flex; align-items: center; gap: 5px; }
.preview-caption .ic { width: 12px; height: 12px; }
.preview-caption button { border: 0; background: none; color: var(--studio-accent); padding: 5px 0 5px 6px; font: inherit; white-space: nowrap; cursor: pointer; }
:root[data-ui-theme] .pet-dock { order: 3; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px 11px; align-items: center; padding: 13px; border-radius: 13px; border: 1px solid var(--studio-line); box-shadow: none; }
:root[data-ui-theme] .pet-dock::before, :root[data-ui-theme] .pet-dock::after { display: none; }
:root[data-ui-theme] .pet-dock-face { width: 32px; height: 32px; grid-row: 1; grid-column: 1; }
:root[data-ui-theme] .pet-dock-copy { grid-row: 1; grid-column: 2 / -1; }
:root[data-ui-theme] .pet-dock-copy b { font: 600 11px var(--font); }
:root[data-ui-theme] .pet-dock-copy span { color: var(--sub); font-size: 9px; line-height: 1.6; white-space: normal; }
:root[data-ui-theme] .pet-dock-fx { grid-column: 1 / 3; grid-row: 2; font-size: 9px; color: var(--sub); }
:root[data-ui-theme] .pet-dock-fx select { color: var(--ink); border: 1px solid var(--studio-line); background: var(--paper); font-size: 9px; }
:root[data-ui-theme] .pet-dock-sync { grid-column: 3; grid-row: 2; font-size: 9px; color: var(--sub); }
:root[data-ui-theme] .pet-dock-actions { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: flex-end; gap: 7px; }
:root[data-ui-theme] .pet-dock-actions .btn { width: auto; padding: 6px 10px; font-size: 10px; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; max-width: 1680px; margin: 0 auto; padding: 6px clamp(20px, 2.5vw, 44px) 33px; color: var(--sub); font-size: 9px; }
.workspace-footer i { font-style: normal; margin: 0 7px; }
.workspace-footer a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; margin-right: 145px; }
.workspace-footer .ic { width: 12px; height: 12px; }
.guide-launcher { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(19px, env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 9px; padding: 13px 17px; border: 1px solid #ffffff80; border-radius: 100px; color: #fff; background: var(--studio-accent); box-shadow: 0 6px 22px #173b3526, inset 0 1px 0 #ffffff21; font: 500 11px var(--font); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.guide-launcher:hover { transform: translateY(-3px); box-shadow: 0 9px 28px #173b353a; }
.guide-launcher .ic { width: 17px; height: 17px; }
.guide-launcher-arrow { font-size: 15px; opacity: .65; }
body.live .guide-launcher { display: none; }

/* Native dialog handles focus trapping, Escape, and inert background content. */
body.guide-open { overflow: hidden; }
.guide-dialog { width: min(780px, calc(100vw - 48px)); max-width: none; max-height: min(800px, calc(100dvh - 64px)); padding: 0; margin: auto; color: var(--ink); background: var(--studio-surface); border: 1px solid #ffffffc4; border-radius: 22px; box-shadow: 0 30px 100px #142b3440, 0 0 0 1px #26393112; overflow: hidden; }
.guide-dialog[open] { display: flex; flex-direction: column; animation: guide-enter .23s ease-out; }
.guide-dialog::backdrop { background: #283b354c; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes guide-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.guide-window-head { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; gap: 12px; padding: 17px 24px 13px; }
.guide-window-head > span { display: flex; align-items: center; gap: 9px; }
.guide-window-head .ic { width: 18px; height: 18px; color: var(--studio-accent); }
.guide-window-head b { font-size: 12px; font-weight: 600; }
.guide-close { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--studio-line); border-radius: 50%; color: var(--sub); background: transparent; font-size: 22px; cursor: pointer; }
.guide-close:hover { background: var(--studio-soft); color: var(--studio-accent); }
.guide-tabs { display: flex; gap: 24px; flex: 0 0 auto; padding: 0 28px; border-bottom: 1px solid var(--studio-line); }
.guide-tabs button { position: relative; padding: 12px 0 13px; border: 0; color: var(--sub); background: none; font: 500 12px var(--font); cursor: pointer; }
.guide-tabs button[aria-selected="true"] { color: var(--studio-accent); font-weight: 650; }
.guide-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--studio-accent); }
.guide-dialog .product-guide { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 30px; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: none; box-shadow: none; scrollbar-width: thin; }
.guide-tab-panel { outline-offset: -2px; }
.guide-about-hero { display: grid; grid-template-columns: minmax(0, 1fr) 204px; align-items: center; gap: 36px; padding: 5px 0 18px; }
.guide-dialog .guide-kicker { color: var(--studio-accent); font: 500 9px/1.5 var(--font-mono); letter-spacing: .12em; }
.guide-dialog .guide-heading h2 { font: 500 30px/1.5 "Iowan Old Style", "Songti SC", serif; letter-spacing: -.04em; margin: 11px 0 14px; }
.guide-heading h2 em { color: var(--studio-accent); font-style: normal; }
.guide-dialog .guide-heading > p:last-child { max-width: 380px; font-size: 12px; font-weight: 400; line-height: 1.9; }
.guide-paper { position: relative; padding: 23px 20px 17px; min-height: 268px; color: #325541; background: #eff3e7; border: 1px solid #dce2d2; border-radius: 8px; box-shadow: 7px 9px 0 #f6f3ea, 7px 9px 0 1px #e7e3d9, 0 13px 30px #2c463517; transform: rotate(4deg); }
.guide-paper > span:first-child { display: block; font: 500 7px var(--font-mono); letter-spacing: .1em; margin-bottom: 30px; }
.guide-paper > b { display: block; font: 500 25px Georgia, serif; letter-spacing: -.6px; }
.guide-paper > i { display: block; margin-top: 5px; font: 400 9px Georgia, serif; opacity: .65; }
.guide-paper > p { font-size: 9px; margin: 12px 0 18px; }
.guide-paper > div { width: 27px; height: 1px; background: #8ea47c; margin-bottom: 17px; }
.guide-paper > small { font: 400 10px/1.9 "Songti SC", serif; opacity: .8; }
.guide-paper-footer { display: flex; justify-content: space-between; margin-top: 27px; font: 500 6px var(--font-mono); letter-spacing: .12em; }
.guide-paper-footer i { font-style: normal; }
.guide-dialog .guide-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 20px; border-top: 1px solid var(--studio-line); padding-top: 23px; }
.guide-dialog .guide-facts article { padding: 0 16px; border: 0; border-right: 1px solid var(--studio-line); border-radius: 0; background: none; }
.guide-dialog .guide-facts article:first-child { padding-left: 0; }
.guide-dialog .guide-facts article:last-child { padding-right: 0; border: 0; }
.guide-facts .ic { width: 20px; height: 20px; color: var(--studio-accent); margin-bottom: 9px; }
.guide-dialog .guide-facts h3 { font-size: 12px; margin-bottom: 8px; }
.guide-dialog .guide-facts p { font-size: 10px; font-weight: 400; line-height: 1.8; }
.guide-section-heading h2 { font: 500 25px/1.5 "Songti SC", serif; margin: 8px 0; }
.guide-section-heading > p:last-child { font-size: 11px; color: var(--sub); margin: 0; }
.guide-dialog .guide-steps { display: flex; flex-direction: column; gap: 0; margin-top: 23px; }
.guide-dialog .guide-steps article { display: grid; grid-template-columns: 34px minmax(0, 1fr) 35px; align-items: start; gap: 13px; border: 0; border-top: 1px solid var(--studio-line); padding: 20px 0; background: none; border-radius: 0; }
.guide-dialog .guide-steps article > span { font: 400 24px Georgia, serif; color: var(--studio-accent); margin: 0; }
.guide-dialog .guide-steps h3 { font-size: 13px; margin: 2px 0 7px; }
.guide-dialog .guide-steps p { font-size: 11px; font-weight: 400; line-height: 1.8; }
.guide-steps article > .ic { width: 23px; height: 23px; margin-top: 7px; color: var(--studio-accent); opacity: .7; }
.guide-steps button { padding: 8px 0 0; font: 600 10px var(--font); color: var(--studio-accent); border: 0; background: none; cursor: pointer; }
.guide-steps button:hover { text-decoration: underline; }
.guide-tip { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 14px; border-radius: 9px; background: var(--studio-soft); color: var(--studio-accent); font-size: 10px; line-height: 1.7; }
.guide-tip .ic { flex-shrink: 0; width: 17px; height: 17px; }
.guide-dialog .guide-faq { margin-top: 23px; }
.guide-dialog .guide-faq > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.guide-dialog .guide-faq summary { font-size: 12px; font-weight: 550; padding: 17px 2px; }
.guide-dialog .guide-faq p { font-size: 11px; font-weight: 400; line-height: 1.9; }
.guide-dialog .guide-links a { font-size: 10px; color: var(--studio-accent); }
.guide-window-footer { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 28px; background: var(--studio-soft); border-top: 1px solid var(--studio-line); }
.guide-window-footer > span { color: var(--sub); font: 400 11px "Songti SC", serif; }
:root[data-ui-theme] .guide-window-footer .btn { display: flex; align-items: center; gap: 20px; padding: 10px 14px; border-radius: 9px; background: var(--studio-accent); color: #fff; border-color: var(--studio-accent); box-shadow: none; font-size: 11px; }

@media (max-width: 1250px) {
  :root[data-ui-theme] .workbench { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 16px; }
  :root[data-ui-theme] .preview-top { align-items: flex-start; }
  :root[data-ui-theme] .meta-actions { width: 100%; justify-content: flex-end; }
  .top-actions .guide-nav { display: none; }
  .panel-heading small { font-size: 8px; }
}
@media (max-width: 1080px) {
  :root[data-ui-theme] .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 860px; }
  :root[data-ui-theme] .preview { grid-column: 1 / -1; grid-row: 2; }
  :root[data-ui-theme] .panel-left { grid-column: 1; grid-row: 3; }
  :root[data-ui-theme] .panel-right { grid-column: 2; grid-row: 3; }
  :root[data-ui-theme] .panel-col { max-height: none; }
  :root[data-ui-theme] .preview-top { flex-wrap: nowrap; align-items: center; }
  :root[data-ui-theme] .meta-actions { width: auto; }
  :root[data-ui-theme] .topbar { position: relative; }
  :root[data-ui-theme] .top-actions.layout-actions { flex-wrap: wrap; }
  .workspace-footer { max-width: 860px; }
}
@media (max-width: 720px) {
  :root[data-ui-theme] .topbar { gap: 13px; padding: 15px 18px 12px; }
  :root[data-ui-theme] .top-actions.layout-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  :root[data-ui-theme] .top-actions .support-nav { margin-left: auto; }
  :root[data-ui-theme] .account-tools { margin-left: auto; }
  :root[data-ui-theme] .workbench { grid-template-columns: minmax(0, 1fr); padding: 0 16px 18px; gap: 21px; scroll-margin-top: 12px; }
  .workspace-intro { display: block; padding-top: 5px; }
  .workspace-intro-copy { padding: 15px 2px 19px; }
  .workspace-intro h2 { font-size: 29px; }
  .welcome-guide { width: 100%; min-height: 63px; padding: 10px 13px; gap: 12px; }
  .welcome-guide-icon { width: 30px; height: 36px; }
  .welcome-guide-icon .ic { width: 19px; height: 19px; }
  .welcome-guide-arrow { margin-left: auto; }
  :root[data-ui-theme] .preview { grid-column: 1; grid-row: 2; }
  :root[data-ui-theme] .preview-top { gap: 9px; flex-wrap: wrap; }
  :root[data-ui-theme] .preview-heading { width: 100%; }
  :root[data-ui-theme] .meta-actions { width: 100%; justify-content: flex-start; }
  :root[data-ui-theme] .meta-actions .btn { min-height: 38px; padding: 8px 14px; font-size: 11px; }
  :root[data-ui-theme] #btn-download2 { margin-left: auto; }
  :root[data-ui-theme] .panel-left { grid-column: 1; grid-row: 3; }
  :root[data-ui-theme] .panel-right { grid-column: 1; grid-row: 4; }
  :root[data-ui-theme] .stage { padding: 22px; min-height: 300px; }
  .panel-heading small { font-size: 10px; }
  :root[data-ui-theme] .panel-col > .card { padding: 18px; }
  :root[data-ui-theme] .panel-col > details.card { padding: 0; }
  .workspace-footer { padding: 8px 18px 85px; flex-wrap: wrap; gap: 10px; }
  .workspace-footer a { margin: 0; }
  .guide-launcher { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .guide-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); border-radius: 18px; }
  .guide-window-head { padding: 14px 18px 9px; }
  .guide-tabs { padding: 0 20px; gap: 22px; }
  .guide-tabs button { font-size: 11px; }
  .guide-dialog .product-guide { padding: 23px 20px; }
  .guide-about-hero { grid-template-columns: 1fr; gap: 25px; padding-top: 0; }
  .guide-dialog .guide-heading h2 { font-size: 28px; }
  .guide-paper { width: 185px; min-height: 250px; margin: 0 auto 8px; }
  .guide-dialog .guide-facts { grid-template-columns: 1fr; gap: 19px; padding-top: 20px; }
  .guide-dialog .guide-facts article { padding: 0; border: 0; }
  .guide-facts .ic { float: left; margin: 0 13px 30px 0; }
  .guide-dialog .guide-facts p { margin-left: 33px; }
  .guide-dialog .guide-steps article { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .guide-steps article > .ic { display: none; }
  .guide-window-footer { padding: 13px 18px; }
  .guide-window-footer > span { font-size: 10px; }
  .guide-section-heading h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-dialog[open] { animation: none; }
  .guide-launcher, .welcome-guide { transition: none; }
  .guide-launcher:hover, .welcome-guide:hover { transform: none; }
}

/* The public site introduces the Mac app; the installed app stays a workbench. */
:root[data-surface="app"] [data-showcase-only],
:root[data-surface="showcase"] [data-app-only] { display: none !important; }
.workspace-entry { display: flex; align-items: center; gap: 12px; }
.showcase-download { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.showcase-download small { color: var(--sub); font-size: 10px; }
:root[data-ui-theme] .app-download { min-height: 46px; padding: 12px 22px; border-radius: 11px; }
:root[data-surface="showcase"] .workspace-intro { padding-top: 36px; padding-bottom: 14px; }
:root[data-surface="showcase"] .welcome-guide { min-height: 46px; background: transparent; border: 0; padding: 10px; }
:root[data-surface="showcase"] .welcome-guide-icon { display: none; }
:root[data-surface="showcase"] .workspace-intro-copy > p:last-child { max-width: 430px; line-height: 1.8; }
@media (max-width: 1080px) { .workspace-entry { flex-wrap: wrap; } }
@media (max-width: 720px) { .workspace-entry { width: 100%; } }

/* Liquid uses a fixed light direction and opaque content surfaces. No pointer
   tracking, displacement filters, or nested blur; scrolling stays inexpensive. */
:root[data-ui-theme="liquid"] {
  --ink: #253442;
  --sub: #647583;
  --accent: #36728f;
  --accent-2: #285d79;
  --indigo: #36728f;
  --studio-accent: #285d79;
  --studio-line: #d1dde3;
  --glass-shadow: inset 0 1px 0 #fff, 0 5px 18px rgba(45,74,90,.07);
  --glass-regular: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,246,250,.86));
  --glass-thick: #f9fcfd;
}
:root[data-ui-theme="liquid"] body {
  background: radial-gradient(ellipse at 4% 0%, #f8fcfe, transparent 58%), linear-gradient(120deg, #e7f0f4, #e2eaed 60%, #edf1ed);
  background-attachment: scroll;
}
:root[data-ui-theme="liquid"] body::before,
:root[data-ui-theme="liquid"] body::after { display: none; }
:root[data-ui-theme="liquid"] .topbar { background: #f2f7f9; border-bottom-color: #d1dde3; }
:root[data-ui-theme="liquid"] .logo { background: linear-gradient(145deg, #7dabb9, #3f6b83); box-shadow: inset 0 1px 0 #cbe2eb, 0 3px 8px #426b8320; }
:root[data-ui-theme="liquid"] .panel-col { background: #f6fafc; border-color: #ccd9e0; border-radius: 18px; box-shadow: var(--glass-shadow); }
:root[data-ui-theme="liquid"] .panel-col > .card { animation: none; }
:root[data-ui-theme="liquid"] .stage {
  background: radial-gradient(ellipse at 20% 0%, #f5fbfd, transparent 65%), linear-gradient(145deg, #d4e5ec, #bacdd7 75%, #d5e1e4);
  border: 1px solid #f8fdff; border-radius: 22px;
  box-shadow: inset 0 0 0 5px #ffffff25, inset 0 -1px 0 #9bb4c3, 0 10px 26px #304f6512;
}
:root[data-ui-theme="liquid"] #preview-canvas { box-shadow: 0 10px 25px #344f6a26, 0 0 0 1px #fff9; border-radius: 9px; }
:root[data-ui-theme="liquid"] .pet-dock { background: var(--glass-regular); border: 1px solid #fff; border-radius: 16px; box-shadow: var(--glass-shadow); }
:root[data-ui-theme="liquid"] :is(.btn, .chip, .pattern-chip, .seg-btn, .ui-theme-option, .pet-dock-main, .pet-memory-shortcut) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
:root[data-ui-theme="liquid"] :is(.btn, .chip, .pattern-chip, .seg-btn, .ui-theme-option, .pet-dock-main, .pet-memory-shortcut):active:not(:disabled) { transform: scale(.97); }
:root[data-ui-theme="liquid"] :is(.btn.primary, .pet-dock-main) {
  color: #fff; border: 1px solid #34657e; border-radius: 10px;
  background: linear-gradient(180deg, #4e829b, #31637e);
  box-shadow: inset 0 1px 0 #ffffff40, 0 3px 7px #24485c20;
}
:root[data-ui-theme="liquid"] :is(.btn.primary, .pet-dock-main):hover { color: #fff; background: #285d79; }
:root[data-ui-theme="liquid"] :is(.ui-theme-option.on, .lib-card.on, .pattern-chip.on) { color: #285d79; border-color: #afc6d3; background: #e7f0f5; box-shadow: inset 0 1px 0 #fff; }
:root[data-ui-theme="liquid"] .word-inspector { position: absolute; background: #f8fbfd; border-color: #bdcfdb; box-shadow: 0 8px 24px #304f6526; }
:root[data-ui-theme="liquid"] :is(.guide-dialog, .modal-card) { background: #f8fbfd; border-color: #fff; box-shadow: 0 24px 65px #233b5330; }
:root[data-ui-theme="liquid"] .modal-overlay { background: #263b4d38; }
:root[data-ui-theme="liquid"] :is(.checkin-today, .checkin-calendar-panel) { background: #f1f6f9; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-ui-theme="liquid"] .guide-dialog::backdrop { background: #263b4d38; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-ui-theme="liquid"] .guide-launcher { color: #285d79; background: #f8fbfd; box-shadow: var(--glass-shadow); }
:root[data-ui-theme="liquid"] :is(button, input, select, textarea, a):focus-visible { outline: 2px solid #36728f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  :root[data-ui-theme="liquid"] *, :root[data-ui-theme="liquid"] *::before, :root[data-ui-theme="liquid"] *::after { animation: none !important; transition: none !important; }
  :root[data-ui-theme="liquid"] :is(.btn, .chip, .pattern-chip, .seg-btn, .ui-theme-option, .pet-dock-main, .pet-memory-shortcut):active:not(:disabled) { transform: none; }
}
@media (prefers-contrast: more) {
  :root[data-ui-theme="liquid"] { --sub: #394d5e; --studio-line: #839baa; }
  :root[data-ui-theme="liquid"] :is(.panel-col, .stage, .pet-dock, .modal-card, .guide-dialog) { border-color: #839baa; }
}
@media (forced-colors: active) {
  :root[data-ui-theme="liquid"] :is(.topbar, .panel-col, .stage, .pet-dock, .modal-card, .guide-dialog, .btn, .chip, .ui-theme-option, .lib-card, .word-inspector) { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  :root[data-ui-theme="liquid"] :is(.checks input[type="checkbox"], .srs-switch input) { background: Field; border: 1px solid ButtonText; }
  :root[data-ui-theme="liquid"] :is(.checks input[type="checkbox"], .srs-switch input)::before { background: ButtonText; }
}