@charset "UTF-8";
/* Webcraft chrome only. These tokens never enter a generated page or project. */
:root {
  --wc-bg-app: #edf1f7;
  --wc-bg-panel: #ffffff;
  --wc-bg-raised: #f1f4f9;
  --wc-bg-soft: #f5f8fd;
  --wc-bg-input: #ffffff;
  --wc-bg-stage: #e9eef5;
  --wc-stage-dot: #c9d3e2;
  --wc-text-primary: #172237;
  --wc-text-secondary: #4f6078;
  --wc-text-muted: #5e6d82;
  --wc-border: #c7d1df;
  --wc-border-strong: #9aa8bd;
  --wc-input-border: #8493a9;
  --wc-accent: #1d54c7;
  --wc-accent-fill: #2563eb;
  --wc-accent-hover: #1d4ed8;
  --wc-accent-soft: #e8f0ff;
  --wc-accent-border: #789be4;
  --wc-on-accent: #ffffff;
  --wc-focus: #1d54c7;
  --wc-selection-wash: #2563eb14;
  --wc-canvas-selection: #2563eb;
  --wc-canvas-global-selection: #72509b;
  --wc-disabled-bg: #e7ecf3;
  --wc-disabled-text: #6c7b90;
  --wc-disabled-border: #b9c5d6;
  --wc-control-knob: #ffffff;
  --wc-danger: #a52d42;
  --wc-danger-fill: #a52d42;
  --wc-danger-soft: #fff0f2;
  --wc-danger-border: #d88898;
  --wc-success: #17674e;
  --wc-success-soft: #edf9f2;
  --wc-success-border: #90bdab;
  --wc-warning: #845b0a;
  --wc-warning-soft: #fff5dc;
  --wc-warning-border: #ceb675;
  --wc-global: #72509b;
  --wc-global-soft: #f2ebfa;
  --wc-global-border: #b9a3d2;
  --wc-code-tag: #913969;
  --wc-code-attr: #365d99;
  --wc-code-value: #0c7267;
  --wc-code-property: #85502a;
  --wc-shadow-color: #172b491a;
  --wc-backdrop: #17283e66;
  --wc-toast-bg: #253750;
  --panel-width: 248px;
  --inspector-width: 296px;
  /* Stable aliases for older editor integrations. */
  --blue: var(--wc-accent);
  --blue-deep: var(--wc-accent-hover);
  --blue-light: var(--wc-accent-soft);
  --text: var(--wc-text-primary);
  --muted: var(--wc-text-secondary);
  --line: var(--wc-border);
  --surface: var(--wc-bg-raised);
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 13px;
}
:root[data-theme="dark"] {
  --wc-bg-app: #10151e;
  --wc-bg-panel: #19212e;
  --wc-bg-raised: #222d3e;
  --wc-bg-soft: #1d293a;
  --wc-bg-input: #202b3b;
  --wc-bg-stage: #111923;
  --wc-stage-dot: #2e3b4e;
  --wc-text-primary: #f0f4fc;
  --wc-text-secondary: #c0cbdc;
  --wc-text-muted: #a8b7cd;
  --wc-border: #3d4c63;
  --wc-border-strong: #667a97;
  --wc-input-border: #7185a1;
  --wc-accent: #8eb4ff;
  --wc-accent-fill: #2c66dc;
  --wc-accent-hover: #2258c6;
  --wc-accent-soft: #223a60;
  --wc-accent-border: #6d9cf3;
  --wc-on-accent: #ffffff;
  --wc-focus: #9fc2ff;
  --wc-selection-wash: #8eb4ff22;
  --wc-disabled-bg: #293343;
  --wc-disabled-text: #8d9bb0;
  --wc-disabled-border: #4b5b72;
  --wc-danger: #ffa9b9;
  --wc-danger-soft: #442633;
  --wc-danger-border: #a26075;
  --wc-success: #8addb9;
  --wc-success-soft: #1c3a33;
  --wc-success-border: #537c70;
  --wc-warning: #f0cd83;
  --wc-warning-soft: #40351f;
  --wc-warning-border: #897443;
  --wc-global: #ceb0f2;
  --wc-global-soft: #322741;
  --wc-global-border: #7f699b;
  --wc-code-tag: #f1aad7;
  --wc-code-attr: #a7caff;
  --wc-code-value: #8cdec9;
  --wc-code-property: #edbf95;
  --wc-shadow-color: #00000040;
  --wc-backdrop: #030811aa;
  --wc-toast-bg: #293c57;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body:where(:not(#canvas *)) { margin: 0; color: var(--wc-text-primary); background: var(--wc-bg-app); -webkit-font-smoothing: antialiased; }
button:where(:not(#canvas *)), input:where(:not(#canvas *)), select:where(:not(#canvas *)), textarea:where(:not(#canvas *)) { font: inherit; }
button:where(:not(#canvas *)) { color: inherit; cursor: pointer; }
button:where(:not(#canvas *)), input:where(:not(#canvas *)), select:where(:not(#canvas *)), textarea:where(:not(#canvas *)), a:where(:not(#canvas *)) { -webkit-tap-highlight-color: transparent; }
button:where(:not(#canvas *)) { border: 0; background: transparent; }
button:disabled:where(:not(#canvas *)) { cursor: default; }
button:focus-visible:where(:not(#canvas *)), a:focus-visible:where(:not(#canvas *)), input:focus-visible:where(:not(#canvas *)), select:focus-visible:where(:not(#canvas *)), textarea:focus-visible:where(:not(#canvas *)), [contenteditable]:focus-visible:where(:not(#canvas *)), pre:focus-visible:where(:not(#canvas *)), summary:focus-visible:where(:not(#canvas *)) { outline: 3px solid var(--wc-focus); outline-offset: 3px; }
button:where(:not(#canvas *)), a:where(:not(#canvas *)), input:where(:not(#canvas *)), select:where(:not(#canvas *)), textarea:where(:not(#canvas *)) { transition: color .15s, background .15s, border-color .15s, box-shadow .15s; }
button:hover:where(:not(#canvas *)) { color: var(--wc-accent); }
input:where(:not(#canvas *)), select:where(:not(#canvas *)), textarea:where(:not(#canvas *)) { min-width: 0; }
svg.icon:where(:not(#canvas *)) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: middle; }
.icon-definitions:where(:not(#canvas *)) { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell:where(:not(#canvas *)) { height: 100dvh; min-height: 620px; display: flex; flex-direction: column; overflow: hidden; }
.app-header:where(:not(#canvas *)) { height: 76px; flex-shrink: 0; display: flex; align-items: center; gap: 21px; padding: 0 24px; border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-panel); z-index: 3; }
.brand:where(:not(#canvas *)) { display: flex; align-items: center; gap: 9px; color: var(--wc-text-primary); text-decoration: none; flex-shrink: 0; }
.brand-mark:where(:not(#canvas *)) { width: 36px; height: 36px; border-radius: 10px; background: var(--wc-accent-fill); display: grid; place-items: center; box-shadow: 0 3px 6px var(--wc-shadow-color); }
.brand-mark svg:where(:not(#canvas *)) { width: 29px; height: 29px; fill: none; stroke: var(--wc-on-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.brand-word:where(:not(#canvas *)) { font-size: 25px; font-weight: 760; letter-spacing: -1.1px; line-height: 1; }
.brand-dot:where(:not(#canvas *)) { color: var(--wc-accent); }
.brand-caption:where(:not(#canvas *)) { display: block; margin-top: 7px; font-size: 7.6px; letter-spacing: 1.7px; color: var(--wc-text-muted); font-weight: 600; line-height: 1; }
.header-divider:where(:not(#canvas *)) { height: 28px; width: 1px; background: var(--wc-border); }
.project-info:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 7px; white-space: nowrap; }
.project-name:where(:not(#canvas *)) { font-size: 12px; font-weight: 600; letter-spacing: .1px; }
.project-badge:where(:not(#canvas *)) { margin-left: 5px; padding: 2px 5px; background: var(--wc-bg-raised); color: var(--wc-text-secondary); font-size: 8px; border-radius: 4px; letter-spacing: .6px; vertical-align: 1px; font-weight: 600; }
.save-status:where(:not(#canvas *)) { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--wc-text-secondary); }
.status-dot:where(:not(#canvas *)) { height: 5px; width: 5px; border-radius: 50%; background: var(--wc-success); display: inline-block; flex: 0 0 auto; }
.device-switch:where(:not(#canvas *)) { display: flex; padding: 4px; border: 1px solid var(--wc-border); border-radius: 9px; background: var(--wc-bg-raised); gap: 2px; margin-left: auto; }
.device-button:where(:not(#canvas *)) { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; font-size: 11px; color: var(--wc-text-secondary); font-weight: 500; }
.device-button .icon:where(:not(#canvas *)) { width: 16px; height: 16px; }
.device-button.active:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-bg-panel); box-shadow: 0 1px 3px var(--wc-shadow-color); }
.header-actions:where(:not(#canvas *)) { display: flex; align-items: center; gap: 9px; }
.button:where(:not(#canvas *)) { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; padding: 0 13px; font-weight: 600; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.button .icon:where(:not(#canvas *)) { width: 15px; height: 15px; }
.button-primary:where(:not(#canvas *)) { background: var(--wc-accent-fill); color: var(--wc-on-accent); border: 1px solid var(--wc-accent-fill); box-shadow: 0 2px 3px var(--wc-shadow-color); }
.button-primary:hover:where(:not(#canvas *)) { background: var(--wc-accent-hover); color: var(--wc-on-accent); border-color: var(--wc-accent-hover); }
.button-secondary:where(:not(#canvas *)) { background: var(--wc-bg-panel); color: var(--wc-text-secondary); border: 1px solid var(--wc-border); }
.button-secondary:hover:where(:not(#canvas *)) { color: var(--wc-accent); border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.learning-toggle:where(:not(#canvas *)) { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; color: var(--wc-text-secondary); font-size: 11px; font-weight: 500; margin-right: 6px; }
.learning-toggle .icon:where(:not(#canvas *)) { width: 15px; height: 15px; color: var(--wc-text-secondary); }
.learning-toggle input:where(:not(#canvas *)) { opacity: 0; position: absolute; width: 1px; height: 1px; }
.switch-track:where(:not(#canvas *)) { width: 27px; height: 16px; border-radius: 100px; background: var(--wc-bg-raised); position: relative; transition: background .2s; }
.switch-track:where(:not(#canvas *))::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 100%; top: 2px; left: 2px; background: var(--wc-control-knob); box-shadow: 0 1px 2px var(--wc-shadow-color); transition: transform .2s; }
.learning-toggle input:checked + .switch-track:where(:not(#canvas *)) { background: var(--wc-accent); }
.learning-toggle input:checked + .switch-track:where(:not(#canvas *))::after { transform: translateX(11px); }
.learning-toggle input:focus-visible + .switch-track:where(:not(#canvas *)) { outline: 2px solid var(--wc-accent-border); outline-offset: 3px; }
.editor-layout:where(:not(#canvas *)) { display: grid; grid-template-columns: var(--panel-width) minmax(0,1fr) var(--inspector-width); flex: 1; min-height: 0; }
.left-panel:where(:not(#canvas *)) { background: var(--wc-bg-panel); border-right: 1px solid var(--wc-border); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.add-section:where(:not(#canvas *)) { padding: 27px 20px 25px; border-bottom: 1px solid var(--wc-border); }
.panel-heading:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
h2:where(:not(#canvas *)) { margin: 0; font-size: 12px; font-weight: 650; }
.subtle-label:where(:not(#canvas *)) { font-size: 8px; letter-spacing: 1.2px; color: var(--wc-text-muted); font-weight: 500; }
.panel-description:where(:not(#canvas *)) { font-size: 10px; color: var(--wc-text-secondary); margin: 9px 0 18px; }
.element-grid:where(:not(#canvas *)) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-element:where(:not(#canvas *)) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--wc-border); border-radius: 8px; min-height: 83px; padding: 13px 4px 12px; font-size: 10px; color: var(--wc-text-secondary); background: var(--wc-bg-panel); font-weight: 500; }
.add-element:hover:where(:not(#canvas *)) { color: var(--wc-accent); border-color: var(--wc-accent-border); background: var(--wc-accent-soft); box-shadow: 0 2px 6px var(--wc-shadow-color); }
.add-element:hover .element-icon:where(:not(#canvas *)) { color: var(--wc-accent); }
.element-icon:where(:not(#canvas *)) { display: grid; place-items: center; width: 25px; height: 25px; color: var(--wc-text-secondary); }
.element-icon .icon:where(:not(#canvas *)) { width: 23px; height: 23px; }
.add-plus:where(:not(#canvas *)) { position: absolute; right: 7px; top: 5px; font-size: 13px; color: var(--wc-text-secondary); line-height: 1; }
.add-element-wide:where(:not(#canvas *)) { grid-column: 1/-1; flex-direction: row; min-height: 48px; gap: 10px; justify-content: center; padding: 9px; }
.add-element-wide .icon:where(:not(#canvas *)) { width: 20px; height: 20px; }
.add-element-wide .add-plus:where(:not(#canvas *)) { top: 16px; right: 12px; }
.layer-section:where(:not(#canvas *)) { padding: 25px 0 15px; }
.layer-section > .panel-heading:where(:not(#canvas *)) { padding: 0 20px; }
.layer-count:where(:not(#canvas *)) { display: inline-grid; place-items: center; border-radius: 4px; background: var(--wc-bg-raised); color: var(--wc-text-secondary); font-size: 9px; font-weight: 500; min-width: 19px; height: 17px; margin-left: 6px; }
.layer-page-label:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; margin: 21px 18px 10px; font-size: 10px; color: var(--wc-text-secondary); font-weight: 600; }
.layer-page-label .icon:where(:not(#canvas *)) { width: 15px; height: 15px; color: var(--wc-text-secondary); }
.layer-page-badge:where(:not(#canvas *)) { margin-left: auto; letter-spacing: 1px; font-size: 7px; color: var(--wc-text-secondary); }
.layers:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 3px; padding: 0 10px; }
.layer-item:where(:not(#canvas *)) { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 39px; border-radius: 6px; padding: 0 9px; color: var(--wc-text-secondary); border: 1px solid transparent; cursor: pointer; }
.layer-item > .icon:where(:not(#canvas *)) { width: 16px; height: 16px; color: var(--wc-text-secondary); }
.layer-item:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); }
.layer-item.selected:where(:not(#canvas *)), .layer-item.is-selected:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); border-color: var(--wc-border); }
.layer-item.selected > .icon:where(:not(#canvas *)), .layer-item.is-selected > .icon:where(:not(#canvas *)) { color: var(--wc-accent); }
.layer-name:where(:not(#canvas *)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 11px; flex: 1; text-align: left; padding: 0; background: transparent; border: 0; }
.layer-tag:where(:not(#canvas *)) { color: var(--wc-text-muted); font-size: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.layer-delete:where(:not(#canvas *)) { display: grid; place-items: center; padding: 3px; border-radius: 4px; color: var(--wc-text-secondary); opacity: 0; }
.layer-delete .icon:where(:not(#canvas *)) { width: 13px; height: 13px; }
.layer-item:hover .layer-delete:where(:not(#canvas *)), .layer-item.selected .layer-delete:where(:not(#canvas *)), .layer-item.is-selected .layer-delete:where(:not(#canvas *)), .layer-delete:focus-visible:where(:not(#canvas *)) { opacity: 1; }
.layer-delete:hover:where(:not(#canvas *)) { background: var(--wc-danger-soft); color: var(--wc-danger); }
.layer-help:where(:not(#canvas *)) { margin: 17px 20px 0; color: var(--wc-text-secondary); font-size: 9px; }
.sidebar-bottom:where(:not(#canvas *)) { margin-top: auto; padding: 26px 20px 0; }
.beginner-note:where(:not(#canvas *)) { position: relative; border-radius: 10px; border: 1px solid var(--wc-border); padding: 19px 15px 17px; background: var(--wc-accent-soft); }
.note-icon:where(:not(#canvas *)) { display: block; color: var(--wc-accent); margin-bottom: 12px; }
.note-icon .icon:where(:not(#canvas *)) { width: 20px; height: 20px; }
.beginner-note strong:where(:not(#canvas *)) { font-size: 11px; font-weight: 600; color: var(--wc-text-primary); }
.beginner-note p:where(:not(#canvas *)) { font-size: 10px; line-height: 1.9; color: var(--wc-text-secondary); margin: 9px 0 14px; }
.note-rule:where(:not(#canvas *)) { display: block; width: 26px; height: 2px; border-radius: 4px; background: var(--wc-accent-soft); margin-bottom: 13px; }
.note-caption:where(:not(#canvas *)) { font-size: 8px; color: var(--wc-text-muted); }
.sidebar-footer:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; height: 51px; color: var(--wc-text-secondary); font-size: 8px; letter-spacing: .05px; }
.footer-dots:where(:not(#canvas *)) { display: flex; gap: 3px; }
.footer-dots i:where(:not(#canvas *)) { width: 3px; height: 3px; border-radius: 50%; background: var(--wc-bg-raised); }
.center-panel:where(:not(#canvas *)) { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.canvas-toolbar:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; height: 47px; padding: 0 23px; background: var(--wc-bg-raised); border-bottom: 1px solid var(--wc-border); font-size: 10px; flex-shrink: 0; }
.canvas-breadcrumb:where(:not(#canvas *)) { display: flex; align-items: center; gap: 8px; color: var(--wc-text-secondary); }
.canvas-breadcrumb strong:where(:not(#canvas *)) { font-weight: 500; color: var(--wc-text-primary); }
.canvas-breadcrumb .icon:where(:not(#canvas *)) { height: 10px; width: 10px; color: var(--wc-text-secondary); }
.canvas-view-meta:where(:not(#canvas *)) { display: flex; align-items: center; gap: 10px; color: var(--wc-text-secondary); font-size: 9px; }
.canvas-view-meta .icon:where(:not(#canvas *)) { width: 13px; height: 13px; color: var(--wc-text-secondary); }
.toolbar-divider:where(:not(#canvas *)) { width: 1px; height: 12px; background: var(--wc-bg-soft); margin: 0 1px 0 3px; }
.stage:where(:not(#canvas *)) { flex: 1; min-height: 180px; overflow: auto; background-color: var(--wc-bg-raised); background-image: radial-gradient(var(--wc-bg-raised) .7px, transparent .7px); background-size: 15px 15px; padding: 35px 30px 30px; display: flex; flex-direction: column; align-items: center; scroll-padding: 32px; }
.canvas-surround:where(:not(#canvas *)) { width: max-content; flex-shrink: 0; min-width: 0; max-width: 100%; }
.canvas-top-label:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 1px 12px; font-size: 7px; color: var(--wc-text-secondary); letter-spacing: 1px; }
.canvas-page-name:where(:not(#canvas *)) { font-size: 10px; letter-spacing: .1px; color: var(--wc-text-secondary); }
.tiny-dot:where(:not(#canvas *)) { width: 4px; height: 4px; display: inline-block; border-radius: 50%; margin-left: 4px; background: var(--wc-bg-raised); vertical-align: 1px; }
.canvas-scale { transform-origin: top left; position: relative; border: 1px solid #e0e5ed; background: #fff; box-shadow: 0 5px 18px #273a5710, 0 1px 2px #273a5704; border-radius: 3px; }
.canvas { width: 1200px; min-height: 560px; background: #fff; position: relative; padding: 72px 80px 96px; display: flex; flex-direction: column; align-items: stretch; border-radius: 2px; isolation: isolate; }
.canvas-bottom-hint:where(:not(#canvas *)) { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; font-size: 8px; line-height: 1.7; color: var(--wc-text-secondary); }
.canvas-bottom-hint .icon:where(:not(#canvas *)) { width: 12px; height: 12px; }
.hint-dot:where(:not(#canvas *)) { color: var(--wc-text-secondary); }
.canvas-element { flex-shrink: 0; position: relative; cursor: pointer; outline: 2px solid transparent; outline-offset: 7px; word-break: break-word; overflow-wrap: anywhere; }
.canvas-element:hover { outline-color: var(--wc-accent-border); }
.canvas-element.is-selected { outline-color: var(--wc-accent-border); }
.canvas-element.is-selected::before, .canvas-element.is-selected::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--wc-bg-panel); border: 1.5px solid var(--wc-accent-border); pointer-events: none; z-index: 2; }
.canvas-element.is-selected::before { left: -11px; top: -11px; }
.canvas-element.is-selected::after { right: -11px; bottom: -11px; }
.canvas-element[contenteditable="true"] { cursor: text; }
.canvas-element[contenteditable="true"]:focus { outline-color: var(--wc-accent-border); }
.canvas-element img, img.canvas-element { max-width: 100%; }
.canvas-element img { display: block; }
.element-label { position: absolute; left: -9px; top: -28px; background: var(--wc-accent); color: var(--wc-on-accent); font-size: 10px; font-weight: 500; line-height: 16px; padding: 1px 6px; border-radius: 3px 3px 0 0; pointer-events: none; }
.canvas-empty { padding: 80px 20px; text-align: center; color: var(--wc-text-secondary); font-size: 15px; }
.code-dock:where(:not(#canvas *)) { flex: 0 0 226px; display: flex; flex-direction: column; min-height: 0; background: var(--wc-bg-panel); border-top: 1px solid var(--wc-border); position: relative; }
.code-dock.expanded:where(:not(#canvas *)) { flex-basis: 49%; }
.code-dock.is-expanded:where(:not(#canvas *)) { flex-basis: 49%; }
.code-toolbar:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wc-border); height: 46px; flex-shrink: 0; padding: 0 15px 0 17px; gap: 6px; }
.code-tabs:where(:not(#canvas *)) { display: flex; height: 100%; gap: 17px; }
.code-tab:where(:not(#canvas *)) { position: relative; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--wc-text-secondary); padding: 0 3px; }
.code-tab .icon:where(:not(#canvas *)) { width: 15px; height: 15px; }
.code-tab.active:where(:not(#canvas *)) { color: var(--wc-accent); }
.code-tab.active:where(:not(#canvas *))::after { content: ""; height: 2px; background: var(--wc-accent); position: absolute; left: 0; right: 0; bottom: -1px; border-radius: 3px 3px 0 0; }
.tab-file:where(:not(#canvas *)) { margin-left: 1px; font-weight: 400; color: var(--wc-text-secondary); font-size: 9px; }
.css-braces:where(:not(#canvas *)) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; letter-spacing: -1px; }
.code-toolbar-actions:where(:not(#canvas *)) { display: flex; align-items: center; gap: 6px; }
.code-status:where(:not(#canvas *)) { display: flex; align-items: center; gap: 5px; color: var(--wc-text-secondary); font-size: 8px; margin-right: 10px; white-space: nowrap; }
.icon-button:where(:not(#canvas *)) { min-height: 28px; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; color: var(--wc-text-secondary); padding: 4px; font-size: 9px; }
.icon-button .icon:where(:not(#canvas *)) { width: 14px; height: 14px; }
.icon-button:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); }
.code-caption:where(:not(#canvas *)) { display: flex; justify-content: space-between; gap: 10px; padding: 12px 21px 9px; font-size: 8px; color: var(--wc-text-muted); }
.code-caption > span:first-child:where(:not(#canvas *)) { color: var(--wc-text-muted); }
.code-output:where(:not(#canvas *)) { flex: 1; min-height: 0; margin: 0; overflow: auto; padding: 4px 17px 18px 22px; font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 10.5px; line-height: 1.85; tab-size: 2; color: var(--wc-text-secondary); counter-reset: line; white-space: pre; }
.code-line:where(:not(#canvas *)) { display: block; min-height: 1.85em; position: relative; border-radius: 3px; padding-right: 12px; }
.code-line:where(:not(#canvas *))::before { counter-increment: line; content: counter(line); display: inline-block; width: 20px; margin-right: 17px; font-size: 9px; color: var(--wc-text-muted); text-align: right; user-select: none; }
.code-line.changed:where(:not(#canvas *)) { animation: code-change 2.5s ease-out forwards; }
@keyframes code-change { 0%, 35% { background: var(--wc-accent-soft); box-shadow: -3px 0 var(--wc-shadow-color); } 100% { background: transparent; box-shadow: -3px 0 transparent; } }
.token-tag:where(:not(#canvas *)) { color: var(--wc-code-tag); }
.token-attr:where(:not(#canvas *)) { color: var(--wc-code-attr); }
.token-value:where(:not(#canvas *)) { color: var(--wc-code-value); }
.token-comment:where(:not(#canvas *)) { color: var(--wc-text-muted); font-style: italic; }
.token-property:where(:not(#canvas *)) { color: var(--wc-code-property); }
.right-panel:where(:not(#canvas *)) { display: flex; flex-direction: column; min-height: 0; background: var(--wc-bg-panel); border-left: 1px solid var(--wc-border); }
.inspector-heading:where(:not(#canvas *)) { display: flex; align-items: center; gap: 10px; min-height: 77px; padding: 18px 20px; border-bottom: 1px solid var(--wc-border); flex-shrink: 0; }
.selected-element-icon:where(:not(#canvas *)) { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 8px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); border: 1px solid var(--wc-border); }
.selected-element-icon .icon:where(:not(#canvas *)) { width: 18px; height: 18px; }
.selected-info:where(:not(#canvas *)) { min-width: 0; }
.selected-info h2:where(:not(#canvas *)) { font-size: 12px; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-subtitle:where(:not(#canvas *)) { display: block; font-size: 9px; color: var(--wc-text-secondary); margin-top: 5px; }
.selected-tag:where(:not(#canvas *)) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; margin-left: auto; border: 1px solid var(--wc-border); background: var(--wc-bg-raised); color: var(--wc-text-secondary); border-radius: 4px; padding: 4px 6px; }
.inspector:where(:not(#canvas *)) { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 7px; scrollbar-gutter: stable; }
.inspector-section:where(:not(#canvas *)) { padding: 20px 20px 19px; border-bottom: 1px solid var(--wc-border); }
.section-title:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 650; color: var(--wc-text-primary); margin: 0 0 17px; }
.section-title .icon:where(:not(#canvas *)) { width: 12px; height: 12px; color: var(--wc-text-primary); }
.section-title span:where(:not(#canvas *)), .section-title small:where(:not(#canvas *)) { font-size: 8px; font-weight: 400; color: var(--wc-text-primary); }
.field:where(:not(#canvas *)) { margin-bottom: 14px; min-width: 0; }
.field:last-child:where(:not(#canvas *)) { margin-bottom: 0; }
.field-label:where(:not(#canvas *)), .field > label:where(:not(#canvas *)) { display: block; color: var(--wc-text-secondary); font-size: 9px; margin-bottom: 7px; line-height: 1.5; }
.field-label .unit:where(:not(#canvas *)) { float: right; color: var(--wc-text-secondary); }
.field-row:where(:not(#canvas *)), .dimension-row:where(:not(#canvas *)) { display: flex; gap: 9px; align-items: flex-start; }
.field-row > *:where(:not(#canvas *)), .dimension-row > *:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.field-row .field:where(:not(#canvas *)), .dimension-row .field:where(:not(#canvas *)) { margin-bottom: 14px; }
.field .input:where(:not(#canvas *)), .inspector input:not([type="range"]):not([type="color"]):not([type="checkbox"]):where(:not(#canvas *)), .inspector textarea:where(:not(#canvas *)), .inspector select:where(:not(#canvas *)) { width: 100%; background: var(--wc-bg-panel); border: 1px solid var(--wc-border); border-radius: 5px; padding: 8px 9px; min-height: 33px; color: var(--wc-text-secondary); font-size: 10px; outline-offset: 2px; }
.inspector input:hover:where(:not(#canvas *)), .inspector textarea:hover:where(:not(#canvas *)), .inspector select:hover:where(:not(#canvas *)) { border-color: var(--wc-border); }
.inspector input:focus:where(:not(#canvas *)), .inspector textarea:focus:where(:not(#canvas *)), .inspector select:focus:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.inspector textarea:where(:not(#canvas *)) { resize: vertical; line-height: 1.65; min-height: 56px; }
.inspector select:where(:not(#canvas *)) { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239aa7b9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px; }
.unit-input:where(:not(#canvas *)) { display: flex; align-items: center; position: relative; min-height: 33px; }
.inspector .unit-input input:not([type="range"]):where(:not(#canvas *)) { padding-right: 29px; }
.unit-input > span:where(:not(#canvas *)) { position: absolute; right: 9px; font-size: 9px; color: var(--wc-text-secondary); pointer-events: none; }
.range-row:where(:not(#canvas *)) { display: flex; gap: 12px; align-items: center; }
.range-row input[type="range"]:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.range-row input[type="number"]:where(:not(#canvas *)), .range-row .unit-input:where(:not(#canvas *)) { width: 61px!important; flex: 0 0 61px; }
input[type="range"]:where(:not(#canvas *)) { appearance: none; height: 3px; border-radius: 100px; background: var(--wc-accent-soft); accent-color: var(--wc-accent); cursor: pointer; margin: 12px 0; }
input[type="range"]:where(:not(#canvas *))::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wc-accent); border: 2px solid var(--wc-border); box-shadow: 0 0 0 1px var(--wc-shadow-color); }
input[type="range"]:where(:not(#canvas *))::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--wc-accent); border: 2px solid var(--wc-border); box-shadow: 0 0 0 1px var(--wc-shadow-color); }
.color-field:where(:not(#canvas *)) { display: flex; align-items: center; gap: 8px; position: relative; border: 1px solid var(--wc-border); border-radius: 5px; padding: 5px 7px; min-height: 33px; }
.color-field:focus-within:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.color-field .color-swatch:where(:not(#canvas *)), .color-field input[type="color"]:where(:not(#canvas *)) { border: 1px solid var(--wc-border); width: 19px; height: 19px; padding: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: transparent; flex: 0 0 19px; }
input[type="color"]:where(:not(#canvas *))::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]:where(:not(#canvas *))::-webkit-color-swatch { border: 0; border-radius: 2px; }
input[type="color"]:where(:not(#canvas *))::-moz-color-swatch { border: 0; border-radius: 2px; }
.inspector .color-field input[type="text"]:where(:not(#canvas *)) { border: 0; padding: 0; min-height: 20px; font-size: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; box-shadow: none; }
.color-field > span:last-child:where(:not(#canvas *)) { font-size: 8px; color: var(--wc-text-secondary); }
.toggle-group:where(:not(#canvas *)) { display: flex; border: 1px solid var(--wc-border); border-radius: 5px; padding: 3px; gap: 3px; background: var(--wc-bg-raised); }
.style-toggle:where(:not(#canvas *)) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-height: 27px; padding: 4px 8px; border-radius: 3px; color: var(--wc-text-secondary); font-size: 11px; }
.style-toggle .icon:where(:not(#canvas *)) { width: 14px; height: 14px; }
.style-toggle.active:where(:not(#canvas *)), .style-toggle[aria-pressed="true"]:where(:not(#canvas *)) { background: var(--wc-bg-panel); color: var(--wc-accent); box-shadow: 0 1px 3px var(--wc-shadow-color); }
.style-toggle:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); }
.inspector-checkbox:where(:not(#canvas *)) { display: flex; gap: 7px; align-items: center; color: var(--wc-text-secondary); font-size: 10px; }
input[type="checkbox"]:where(:not(#canvas *)) { accent-color: var(--wc-accent); }
.editor-empty:where(:not(#canvas *)) { margin: 34px 20px; padding: 26px 16px; background: var(--wc-accent-soft); border: 1px dashed var(--wc-border); border-radius: 9px; color: var(--wc-text-secondary); font-size: 11px; text-align: center; line-height: 1.9; }
.learning-panel:where(:not(#canvas *)) { margin: 15px 16px 5px; border-radius: 8px; background: var(--wc-accent-soft); border: 1px solid var(--wc-border); padding: 15px 13px; flex-shrink: 0; }
.learning-panel[hidden]:where(:not(#canvas *)) { display: none; }
.learning-heading:where(:not(#canvas *)) { display: flex; align-items: center; gap: 6px; }
.learning-icon:where(:not(#canvas *)) { display: flex; color: var(--wc-accent); }
.learning-icon .icon:where(:not(#canvas *)) { height: 15px; width: 15px; }
.learning-heading strong:where(:not(#canvas *)) { font-size: 10px; font-weight: 600; color: var(--wc-text-primary); }
.learn-live:where(:not(#canvas *)) { margin-left: auto; font-size: 7px; letter-spacing: 1px; color: var(--wc-accent); }
.learning-panel p:where(:not(#canvas *)) { margin: 11px 0 10px; font-size: 9px; line-height: 1.8; color: var(--wc-text-secondary); }
.learning-panel > code:where(:not(#canvas *)) { display: block; padding: 8px 9px; border: 1px solid var(--wc-border); border-radius: 4px; background: var(--wc-bg-panel); color: var(--wc-accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.inspector-footer:where(:not(#canvas *)) { height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--wc-text-secondary); font-size: 8px; flex-shrink: 0; }
.inspector-footer .status-dot:where(:not(#canvas *)) { width: 4px; height: 4px; background: var(--wc-accent-fill); }
.toast:where(:not(#canvas *)) { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%,15px); background: var(--wc-toast-bg); color: var(--wc-on-accent); border: 1px solid var(--wc-shadow-color); padding: 12px 19px; box-shadow: 0 6px 25px var(--wc-shadow-color); border-radius: 8px; opacity: 0; z-index: 20; font-size: 12px; pointer-events: none; max-width: calc(100% - 32px); transition: opacity .2s, transform .2s; }
.toast.visible:where(:not(#canvas *)), .toast.show:where(:not(#canvas *)) { opacity: 1; transform: translate(-50%,0); }
.export-dialog:where(:not(#canvas *)) { border: 1px solid var(--wc-border); border-radius: 16px; padding: 27px 30px 24px; width: 470px; max-width: calc(100% - 30px); color: var(--wc-text-primary); box-shadow: 0 25px 80px var(--wc-shadow-color); }
.export-dialog:where(:not(#canvas *))::backdrop { background: var(--wc-backdrop); backdrop-filter: blur(3px); }
.dialog-header:where(:not(#canvas *)) { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.dialog-brand-icon:where(:not(#canvas *)) { width: 42px; height: 42px; background: var(--wc-accent-soft); color: var(--wc-accent); border: 1px solid var(--wc-border); border-radius: 11px; display: grid; place-items: center; }
.dialog-brand-icon .icon:where(:not(#canvas *)) { width: 21px; height: 21px; }
.dialog-eyebrow:where(:not(#canvas *)) { color: var(--wc-text-muted); font-size: 8px; letter-spacing: 1.4px; font-weight: 600; }
.export-dialog h2:where(:not(#canvas *)) { font-size: 21px; font-weight: 650; margin: 10px 0 12px; letter-spacing: -.6px; }
.dialog-description:where(:not(#canvas *)) { font-size: 11px; line-height: 1.85; color: var(--wc-text-secondary); margin: 0 0 24px; }
.export-option:where(:not(#canvas *)) { display: flex; align-items: center; gap: 11px; border: 1px solid var(--wc-border); border-radius: 9px; padding: 14px 12px; margin-bottom: 9px; }
.export-file-icon:where(:not(#canvas *)) { width: 34px; height: 34px; background: var(--wc-global-soft); border: 1px solid var(--wc-global-border); border-radius: 7px; color: var(--wc-global); display: grid; place-items: center; }
.export-file-icon .icon:where(:not(#canvas *)) { width: 18px; height: 18px; }
.css-file-icon:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); border-color: var(--wc-border); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; }
.export-file-info:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.export-file-info strong:where(:not(#canvas *)) { display: block; font-size: 12px; font-weight: 600; }
.export-file-info span:where(:not(#canvas *)) { display: block; font-size: 9px; color: var(--wc-text-secondary); margin-top: 5px; }
.export-option .button:where(:not(#canvas *)) { min-height: 30px; font-size: 10px; padding: 0 10px; }
.export-download:where(:not(#canvas *)) { border: 1px solid var(--wc-border); height: 30px; width: 30px; }
.combined-export:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 17px; gap: 10px; }
.combined-export strong:where(:not(#canvas *)) { font-size: 11px; font-weight: 600; color: var(--wc-text-primary); }
.combined-export p:where(:not(#canvas *)) { font-size: 9px; color: var(--wc-text-secondary); margin: 6px 0 0; }
.full-width:where(:not(#canvas *)) { width: 100%; min-height: 40px; }
.export-note:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 8px; color: var(--wc-text-secondary); margin: 14px 0 0; }
.export-note .icon:where(:not(#canvas *)) { width: 12px; height: 12px; color: var(--wc-text-secondary); }
:not(#canvas):where(:not(#canvas *))::-webkit-scrollbar { width: 5px; height: 5px; }
:not(#canvas):where(:not(#canvas *))::-webkit-scrollbar-track { background: transparent; }
:not(#canvas):where(:not(#canvas *))::-webkit-scrollbar-thumb { background: var(--wc-bg-raised); border-radius: 100px; }
:not(#canvas):where(:not(#canvas *))::-webkit-scrollbar-thumb:hover { background: var(--wc-accent-fill); }
@media (min-width: 1600px) { :root { --panel-width: 260px; --inspector-width: 308px; } .app-header:where(:not(#canvas *)) { padding: 0 28px; gap: 25px; } .stage:where(:not(#canvas *)) { padding: 42px 44px 30px; } .code-dock:where(:not(#canvas *)) { flex-basis: 255px; } .canvas { min-height: 630px; } }
@media (max-width: 1250px) { :root { --panel-width: 220px; --inspector-width: 276px; } .app-header:where(:not(#canvas *)) { gap: 14px; padding: 0 18px; } .brand-word:where(:not(#canvas *)) { font-size: 23px; } .brand-mark:where(:not(#canvas *)) { width: 33px; height: 33px; } .project-info:where(:not(#canvas *)) { gap: 7px; } .project-name:where(:not(#canvas *)) { font-size: 10px; } .device-button:where(:not(#canvas *)) { padding: 8px 9px; font-size: 10px; } .header-actions:where(:not(#canvas *)) { gap: 7px; } .learning-toggle:where(:not(#canvas *)) { margin-right: 0; font-size: 10px; } .learning-toggle > .icon:where(:not(#canvas *)) { display: none; } .button:where(:not(#canvas *)) { padding: 0 10px; font-size: 10px; } .app-header .preview-button span:where(:not(#canvas *)) { display: none; } .app-header .preview-button:where(:not(#canvas *)) { width: 35px; padding: 0; } .add-section:where(:not(#canvas *)) { padding: 25px 16px; } .stage:where(:not(#canvas *)) { padding: 30px 25px 20px; } .canvas-bottom-hint:where(:not(#canvas *)) { font-size: 7px; gap: 5px; } .tab-file:where(:not(#canvas *)) { display: none; } .code-status:where(:not(#canvas *)) { font-size: 7px; margin-right: 3px; } .code-tabs:where(:not(#canvas *)) { gap: 14px; } }
@media (max-width: 1050px) { :root { --panel-width: 190px; --inspector-width: 253px; } .app-header:where(:not(#canvas *)) { height: 70px; gap: 12px; padding: 0 15px; } .project-info:where(:not(#canvas *)) { display: none; } .header-divider:where(:not(#canvas *)) { display: none; } .brand-caption:where(:not(#canvas *)) { font-size: 7px; letter-spacing: 1.4px; } .brand-word:where(:not(#canvas *)) { font-size: 22px; } .device-switch:where(:not(#canvas *)) { margin-left: auto; } .learning-toggle:where(:not(#canvas *)) { font-size: 9px; } .header-actions:where(:not(#canvas *)) { gap: 7px; } .add-section:where(:not(#canvas *)) { padding: 25px 13px; } .layer-section > .panel-heading:where(:not(#canvas *)) { padding: 0 15px; } .panel-description:where(:not(#canvas *)) { font-size: 9px; } .add-element:where(:not(#canvas *)) { min-height: 77px; font-size: 9px; } .add-element-wide:where(:not(#canvas *)) { min-height: 46px; } .sidebar-bottom:where(:not(#canvas *)) { padding: 25px 13px 0; } .inspector-heading:where(:not(#canvas *)) { padding: 17px 16px; } .inspector-section:where(:not(#canvas *)) { padding: 18px 16px; } .learning-panel:where(:not(#canvas *)) { margin: 12px 12px 5px; padding: 12px 10px; } .canvas-toolbar:where(:not(#canvas *)) { padding: 0 17px; } .code-caption > span:last-child:where(:not(#canvas *)) { display: none; } .code-status:where(:not(#canvas *)) { display: none; } .stage:where(:not(#canvas *)) { padding: 28px 21px 20px; } .canvas-bottom-hint .hint-dot:where(:not(#canvas *)), .canvas-bottom-hint span:last-child:where(:not(#canvas *)) { display: none; } }
@media (max-width: 850px) { .app-shell:where(:not(#canvas *)) { min-height: 700px; min-width: 720px; } :root { --panel-width: 163px; --inspector-width: 230px; } .brand-word:where(:not(#canvas *)) { font-size: 21px; } .brand-mark:where(:not(#canvas *)) { width: 31px; height: 31px; } .brand-caption:where(:not(#canvas *)) { font-size: 6px; letter-spacing: 1.4px; } .header-actions .learning-toggle > span:first-of-type:where(:not(#canvas *)) { display: none; } .device-button:where(:not(#canvas *)) { padding: 8px 8px; font-size: 9px; gap: 4px; } .device-button .icon:where(:not(#canvas *)) { width: 14px; height: 14px; } .button-primary:where(:not(#canvas *)) { font-size: 9px; gap: 5px; } .button-primary .icon:where(:not(#canvas *)) { height: 13px; width: 13px; } .element-grid:where(:not(#canvas *)) { gap: 6px; } .add-element:where(:not(#canvas *)) { min-height: 71px; gap: 6px; padding: 10px 2px; } .add-element-wide:where(:not(#canvas *)) { min-height: 42px; gap: 5px; } .add-element-wide .add-plus:where(:not(#canvas *)) { display: none; } .subtle-label:where(:not(#canvas *)) { font-size: 7px; letter-spacing: .6px; } .panel-heading h2:where(:not(#canvas *)) { font-size: 11px; } .panel-description:where(:not(#canvas *)) { font-size: 8px; } .layer-page-label:where(:not(#canvas *)) { margin: 19px 12px 9px; font-size: 9px; } .layers:where(:not(#canvas *)) { padding: 0 7px; } .layer-item:where(:not(#canvas *)) { gap: 6px; padding: 0 7px; } .layer-name:where(:not(#canvas *)) { font-size: 10px; } .layer-tag:where(:not(#canvas *)) { display: none; } .layer-help:where(:not(#canvas *)) { font-size: 8px; margin-left: 13px; margin-right: 13px; } .beginner-note:where(:not(#canvas *)) { padding: 15px 11px; } .beginner-note strong:where(:not(#canvas *)) { font-size: 9px; } .beginner-note p:where(:not(#canvas *)) { font-size: 9px; } .note-caption:where(:not(#canvas *)) { font-size: 7px; } .sidebar-footer > span:first-child:where(:not(#canvas *)) { font-size: 6px; } .inspector-section:where(:not(#canvas *)) { padding: 16px 13px; } .inspector-heading:where(:not(#canvas *)) { padding: 16px 13px; gap: 8px; } .selected-element-icon:where(:not(#canvas *)) { height: 30px; width: 30px; } .selected-info h2:where(:not(#canvas *)) { font-size: 11px; } .selected-subtitle:where(:not(#canvas *)) { font-size: 8px; } .selected-tag:where(:not(#canvas *)) { font-size: 8px; padding: 4px; } .canvas-toolbar:where(:not(#canvas *)) { padding: 0 13px; } .canvas-breadcrumb:where(:not(#canvas *)) { font-size: 8px; gap: 5px; } .canvas-view-meta:where(:not(#canvas *)) { font-size: 7px; gap: 5px; } .canvas-view-meta .icon:where(:not(#canvas *)) { display: none; } .stage:where(:not(#canvas *)) { padding: 25px 15px 20px; } .code-toolbar:where(:not(#canvas *)) { padding: 0 10px; } .code-tabs:where(:not(#canvas *)) { gap: 10px; } .code-tab:where(:not(#canvas *)) { font-size: 10px; } .copy-code > span:where(:not(#canvas *)) { display: none; } .code-toolbar-actions:where(:not(#canvas *)) { gap: 2px; } .code-caption:where(:not(#canvas *)) { padding: 11px 15px 8px; } .code-output:where(:not(#canvas *)) { font-size: 9px; padding-left: 11px; } .code-line:where(:not(#canvas *))::before { width: 14px; margin-right: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *:where(:not(#canvas *))::before, *:where(:not(#canvas *))::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }

/* Canvas rules match the portable page exported by model.js. */
.canvas { display: block; padding: 64px; min-height: 640px; font-family: Arial, "Noto Sans JP", sans-serif; }
.canvas-element { display: block; word-break: normal; }
.canvas-element:is(h1,p,button) { white-space: pre-wrap; }
.canvas-element img, img.canvas-element { max-width: none; }
.layer-name:where(:not(#canvas *)) { display: flex; gap: 10px; align-items: center; width: 100%; min-width: 0; text-align: left; }
.layer-name > span:last-child:where(:not(#canvas *)) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-icon:where(:not(#canvas *)) { width: 18px; flex: 0 0 18px; font-size: 13px; text-align: center; color: var(--wc-text-secondary); }
.code-line:where(:not(#canvas *))::before { display: none; }
.line-number:where(:not(#canvas *)) { display: inline-block; width: 24px; margin-right: 18px; color: var(--wc-text-muted); text-align: right; user-select: none; }
.line-content:where(:not(#canvas *)) { white-space: pre; }
.size-range:where(:not(#canvas *)) { width: 100%; }
.spacing-text:where(:not(#canvas *)) { flex: 0 0 110px; max-width: 110px; }
.clear-color:where(:not(#canvas *)) { width: 24px; height: 22px; border-radius: 4px; color: var(--wc-text-secondary); font-size: 17px; }
.clear-color:hover:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); }
.field-hint:where(:not(#canvas *)) { font-size: 9px; line-height: 1.7; color: var(--wc-text-secondary); margin: 7px 0 0; }
.inspector [aria-invalid="true"]:where(:not(#canvas *)) { border-color: var(--wc-danger-border)!important; }
.inspector-empty:where(:not(#canvas *)) { color: var(--wc-text-secondary); padding: 40px 20px; text-align: center; font-size: 12px; line-height: 1.9; }
.layers-empty:where(:not(#canvas *)) { font-size: 10px; line-height: 1.8; padding: 10px; color: var(--wc-text-secondary); }
.editor-empty > span:where(:not(#canvas *)) { display: block; color: var(--wc-accent); font-size: 30px; }
.editor-empty > strong:where(:not(#canvas *)) { display: block; font-size: 18px; color: var(--wc-text-primary); }
.preview-dialog:where(:not(#canvas *)) { border: 1px solid var(--wc-border); padding: 0; border-radius: 14px; width: min(1300px,94vw); max-width: 94vw; height: min(820px,90vh); background: var(--wc-accent-soft); box-shadow: 0 25px 80px var(--wc-shadow-color); }
.preview-dialog:where(:not(#canvas *))::backdrop { background: var(--wc-backdrop); backdrop-filter: blur(3px); }
.preview-head:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; height: 60px; background: var(--wc-bg-panel); padding: 14px 22px; border-bottom: 1px solid var(--wc-border); }
.preview-head strong:where(:not(#canvas *)) { font-size: 14px; }
.preview-head span:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 12px; margin-left: 16px; }
.preview-head button:where(:not(#canvas *)) { font-size: 23px; }
.preview-stage:where(:not(#canvas *)) { padding: 24px; height: calc(100% - 60px); overflow: auto; }
.preview-stage iframe:where(:not(#canvas *)) { display: block; background: #fff; border: 1px solid #e2e8f0; height: 100%; min-height: 400px; margin: 0 auto; }

/* Keep editing labels and values readable at standard laptop sizes. */
.panel-description:where(:not(#canvas *)) { font-size: 10.5px; color: var(--wc-text-secondary); line-height: 1.6; }
.add-element:where(:not(#canvas *)) { font-size: 11.5px; color: var(--wc-text-secondary); }
.layer-page-label:where(:not(#canvas *)) { font-size: 11px; }
.layer-name:where(:not(#canvas *)) { font-size: 12px; }
.layer-help:where(:not(#canvas *)) { font-size: 10.5px; line-height: 1.7; color: var(--wc-text-secondary); }
.beginner-note strong:where(:not(#canvas *)) { font-size: 12px; }
.beginner-note p:where(:not(#canvas *)) { font-size: 11px; color: var(--wc-text-secondary); }
.note-caption:where(:not(#canvas *)) { font-size: 9.5px; color: var(--wc-text-muted); }
.selected-info h2:where(:not(#canvas *)) { font-size: 13px; }
.selected-subtitle:where(:not(#canvas *)) { font-size: 10.5px; color: var(--wc-text-secondary); }
.section-title:where(:not(#canvas *)) { font-size: 12px; }
.field-label:where(:not(#canvas *)), .field > label:where(:not(#canvas *)) { font-size: 11px; color: var(--wc-text-secondary); }
.field .input:where(:not(#canvas *)), .inspector input:not([type="range"]):not([type="color"]):not([type="checkbox"]):where(:not(#canvas *)), .inspector textarea:where(:not(#canvas *)), .inspector select:where(:not(#canvas *)) { font-size: 11.5px; color: var(--wc-text-secondary); }
.inspector .color-field input[type="text"]:where(:not(#canvas *)) { font-size: 11.5px; }
.unit-input > span:where(:not(#canvas *)) { font-size: 10.5px; }
.style-toggle:where(:not(#canvas *)) { font-size: 12px; min-width: 0; }
.field-hint:where(:not(#canvas *)) { font-size: 10.5px; color: var(--wc-text-secondary); }
.learning-heading strong:where(:not(#canvas *)) { font-size: 11px; }
.learning-panel p:where(:not(#canvas *)) { font-size: 11px; line-height: 1.75; color: var(--wc-text-secondary); }
.learning-panel > code:where(:not(#canvas *)) { font-size: 11px; }
.canvas-breadcrumb:where(:not(#canvas *)), .canvas-view-meta:where(:not(#canvas *)) { font-size: 10.5px; }
.canvas-page-name:where(:not(#canvas *)) { font-size: 11px; }
.canvas-bottom-hint:where(:not(#canvas *)) { font-size: 9.5px; }
.code-caption:where(:not(#canvas *)) { font-size: 10px; }
.copy-code:where(:not(#canvas *)) { font-size: 10.5px; }
@media (max-width: 850px) {
  .panel-description:where(:not(#canvas *)), .layer-help:where(:not(#canvas *)) { font-size: 10px; }
  .add-element:where(:not(#canvas *)) { font-size: 10.5px; }
  .add-element-wide:where(:not(#canvas *)) { font-size: 10px; }
  .beginner-note strong:where(:not(#canvas *)) { font-size: 11px; }
  .beginner-note p:where(:not(#canvas *)) { font-size: 10.5px; }
  .note-caption:where(:not(#canvas *)) { font-size: 8.5px; }
  .canvas-breadcrumb:where(:not(#canvas *)), .canvas-view-meta:where(:not(#canvas *)) { font-size: 9px; }
  .learning-heading strong:where(:not(#canvas *)) { font-size: 10.5px; }
  .learn-live:where(:not(#canvas *)) { font-size: 6px; letter-spacing: .6px; }
  .style-toggle:where(:not(#canvas *)) { padding: 4px; }
}

/* Pages, HTML tools, and the built-in beginner guide. */
.project-info:where(:not(#canvas *)) { min-width: 95px; max-width: 165px; }
.project-name:where(:not(#canvas *)) { display: block; overflow: hidden; text-overflow: ellipsis; }
.app-header:where(:not(#canvas *)) { gap: 16px; }
.pages-section:where(:not(#canvas *)) { padding: 17px 16px 15px; border-bottom: 1px solid var(--wc-border); flex-shrink: 0; }
.panel-actions:where(:not(#canvas *)) { display: flex; align-items: center; gap: 2px; }
.panel-actions .icon-button:where(:not(#canvas *)) { min-height: 25px; min-width: 25px; }
.add-page-button:where(:not(#canvas *)) { font-size: 19px; color: var(--wc-accent); }
.page-list:where(:not(#canvas *)) { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; max-height: 144px; overflow-y: auto; padding: 2px; }
.page-row:where(:not(#canvas *)), .page-item:where(:not(#canvas *)) { display: flex; align-items: center; border: 1px solid transparent; border-radius: 6px; min-width: 0; gap: 2px; }
.page-row:hover:where(:not(#canvas *)), .page-item:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); }
.page-row.active:where(:not(#canvas *)), .page-row.is-selected:where(:not(#canvas *)), .page-item.active:where(:not(#canvas *)) { background: var(--wc-accent-soft); border-color: var(--wc-border); }
.page-select:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 8px 7px; text-align: left; font-size: 11px; color: var(--wc-text-secondary); border-radius: 5px; overflow: hidden; }
.page-select .icon:where(:not(#canvas *)) { width: 14px; height: 14px; }
.page-select > span:where(:not(#canvas *)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-select small:where(:not(#canvas *)) { font-size: 8px; color: var(--wc-text-secondary); margin-left: auto; }
.page-select.active:where(:not(#canvas *)), .page-row.active .page-select:where(:not(#canvas *)), .page-row.is-selected .page-select:where(:not(#canvas *)), .page-item.active .page-select:where(:not(#canvas *)) { color: var(--wc-accent); font-weight: 600; }
.page-rename:where(:not(#canvas *)), .page-delete:where(:not(#canvas *)) { min-width: 23px; height: 25px; padding: 3px; border-radius: 4px; color: var(--wc-text-secondary); font-size: 12px; }
.page-rename .icon:where(:not(#canvas *)), .page-delete .icon:where(:not(#canvas *)) { width: 12px; height: 12px; }
.page-rename:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); }
.page-delete:hover:where(:not(#canvas *)) { background: var(--wc-danger-soft); color: var(--wc-danger); }
.page-name-label:where(:not(#canvas *)) { display: block; font-size: 9px; color: var(--wc-text-secondary); margin: 12px 0 6px 2px; }
.page-name-field:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; border: 1px solid var(--wc-border); padding: 6px 8px; border-radius: 5px; background: var(--wc-bg-panel); }
.page-name-field:focus-within:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.page-name-field .icon:where(:not(#canvas *)) { color: var(--wc-text-secondary); width: 12px; height: 12px; }
.page-name-field input:where(:not(#canvas *)) { width: 100%; border: 0; outline: 0; font-size: 11px; color: var(--wc-text-secondary); background: transparent; }
.left-panel .add-section:where(:not(#canvas *)) { padding: 20px 16px 17px; flex-shrink: 0; }
.add-section .panel-description:where(:not(#canvas *)) { margin: 7px 0 12px; font-size: 10px; }
.element-grid:where(:not(#canvas *)) { gap: 7px; }
.element-grid .add-element:where(:not(#canvas *)) { min-height: 63px; gap: 5px; padding: 8px 2px; font-size: 10px; }
.element-grid .element-icon:where(:not(#canvas *)) { width: 22px; height: 22px; }
.element-grid .element-icon .icon:where(:not(#canvas *)) { width: 20px; height: 20px; }
.element-grid .add-element-wide:where(:not(#canvas *)) { min-height: 39px; gap: 7px; padding: 6px; }
.element-grid .add-element-wide .add-plus:where(:not(#canvas *)) { top: 12px; }
.more-elements-button:where(:not(#canvas *)) { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; width: 100%; border: 1px dashed var(--wc-border); background: var(--wc-accent-soft); padding: 9px 9px; border-radius: 6px; color: var(--wc-text-secondary); font-size: 10px; }
.more-elements-button:hover:where(:not(#canvas *)) { border-color: var(--wc-accent-border); color: var(--wc-accent); background: var(--wc-accent-soft); }
.more-elements-button .icon:where(:not(#canvas *)) { width: 11px; height: 11px; }
.layer-section:where(:not(#canvas *)) { padding-top: 19px; flex-shrink: 0; }
.layer-page-label:where(:not(#canvas *)) { margin-top: 15px; }
.sidebar-bottom:where(:not(#canvas *)) { padding-top: 18px; }
.beginner-note:where(:not(#canvas *)) { padding: 15px 13px; }
.note-icon:where(:not(#canvas *)) { margin-bottom: 8px; }
.studio-dialog:where(:not(#canvas *)) { border: 1px solid var(--wc-border); border-radius: 14px; padding: 0; width: 660px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 56px); color: var(--wc-text-primary); background: var(--wc-bg-panel); box-shadow: 0 25px 80px var(--wc-shadow-color); overflow: auto; }
.studio-dialog:where(:not(#canvas *))::backdrop { background: var(--wc-backdrop); backdrop-filter: blur(3px); }
.studio-dialog-header:where(:not(#canvas *)) { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 25px 27px 21px; border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-panel); }
.studio-dialog-header h2:where(:not(#canvas *)) { font-size: 21px; letter-spacing: -.5px; margin: 9px 0 8px; font-weight: 650; }
.studio-dialog-header p:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 11px; line-height: 1.7; margin: 0; }
.studio-dialog-header .icon-button:where(:not(#canvas *)) { margin: -5px -7px 0 0; }
.dialog-body:where(:not(#canvas *)) { padding: 22px 27px; }
.dialog-field:where(:not(#canvas *)) { margin: 0 0 18px; }
.dialog-field:last-child:where(:not(#canvas *)) { margin-bottom: 0; }
.dialog-field > label:where(:not(#canvas *)) { display: block; font-size: 11px; font-weight: 600; color: var(--wc-text-secondary); margin-bottom: 8px; }
.dialog-field input:where(:not(#canvas *)), .dialog-field textarea:where(:not(#canvas *)) { display: block; width: 100%; border: 1px solid var(--wc-border); border-radius: 6px; padding: 10px 12px; background: var(--wc-bg-panel); color: var(--wc-text-secondary); font-size: 12px; line-height: 1.65; }
.dialog-field input:where(:not(#canvas *))::placeholder, .dialog-field textarea:where(:not(#canvas *))::placeholder { color: var(--wc-text-secondary); }
.dialog-field textarea:where(:not(#canvas *)) { min-height: 62px; resize: vertical; }
.dialog-field input:focus:where(:not(#canvas *)), .dialog-field textarea:focus:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.dialog-field p:where(:not(#canvas *)) { margin: 7px 0 0; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.7; }
.field-optional:where(:not(#canvas *)) { margin-left: 5px; font-size: 9px; color: var(--wc-text-secondary); font-weight: 400; }
.dialog-field .code-input:where(:not(#canvas *)), .raw-html-input:where(:not(#canvas *)), .code-input:where(:not(#canvas *)) { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: 11px; background: var(--wc-accent-soft); line-height: 1.8; tab-size: 2; }
.studio-dialog-footer:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--wc-border); padding: 17px 27px; background: var(--wc-accent-soft); }
.studio-dialog-footer > span:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 10px; }
.guide-dialog:where(:not(#canvas *)) { width: 800px; }
.guide-layout:where(:not(#canvas *)) { display: grid; grid-template-columns: 205px minmax(0,1fr); min-height: 390px; }
.guide-nav:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; border-right: 1px solid var(--wc-border); background: var(--wc-accent-soft); }
.guide-nav button:where(:not(#canvas *)) { padding: 11px 13px; border-radius: 6px; text-align: left; color: var(--wc-text-secondary); font-size: 11px; line-height: 1.5; }
.guide-nav button:hover:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); }
.guide-nav button.active:where(:not(#canvas *)), .guide-nav button[aria-selected="true"]:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); font-weight: 600; }
.guide-content:where(:not(#canvas *)) { padding: 27px 30px 31px; color: var(--wc-text-secondary); line-height: 1.85; font-size: 12px; }
.guide-content h3:where(:not(#canvas *)) { font-size: 20px; color: var(--wc-text-primary); letter-spacing: -.4px; font-weight: 650; margin: 0 0 13px; line-height: 1.6; }
.guide-content h4:where(:not(#canvas *)) { color: var(--wc-text-primary); font-size: 12px; margin: 21px 0 7px; }
.guide-content p:where(:not(#canvas *)) { margin: 0 0 14px; }
.guide-content ol:where(:not(#canvas *)), .guide-content ul:where(:not(#canvas *)) { margin: 15px 0 20px; padding-left: 22px; }
.guide-content li:where(:not(#canvas *)) { margin: 9px 0; padding-left: 3px; }
.guide-content li:where(:not(#canvas *))::marker { color: var(--wc-accent); font-weight: 600; }
.guide-content strong:where(:not(#canvas *)) { color: var(--wc-text-primary); font-weight: 600; }
.guide-content code:where(:not(#canvas *)) { font-family: "Cascadia Code", Consolas, monospace; font-size: 10.5px; padding: 3px 6px; color: var(--wc-accent); background: var(--wc-accent-soft); border-radius: 4px; }
.guide-content pre:where(:not(#canvas *)) { padding: 14px; background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 7px; overflow: auto; font-size: 11px; }
.guide-content pre code:where(:not(#canvas *)) { padding: 0; background: transparent; }
.guide-tip:where(:not(#canvas *)), .guide-note:where(:not(#canvas *)) { margin-top: 20px; padding: 14px 16px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 8px; font-size: 11px; }
.guide-step:where(:not(#canvas *)) { padding: 13px 0; border-bottom: 1px solid var(--wc-border); }
.guide-step:last-child:where(:not(#canvas *)) { border-bottom: 0; }
.guide-step strong:where(:not(#canvas *)) { display: block; margin-bottom: 5px; }
.elements-dialog:where(:not(#canvas *)) { width: 690px; }
.element-library section + section:where(:not(#canvas *)) { margin-top: 26px; }
.element-library h3:where(:not(#canvas *)) { margin: 0 0 12px; font-size: 11px; font-weight: 600; color: var(--wc-text-primary); }
.library-grid:where(:not(#canvas *)) { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.library-grid > button:where(:not(#canvas *)) { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--wc-border); border-radius: 8px; padding: 12px; color: var(--wc-text-secondary); background: var(--wc-bg-panel); text-align: left; }
.library-grid > button:hover:where(:not(#canvas *)) { color: var(--wc-accent); border-color: var(--wc-accent-border); background: var(--wc-accent-soft); box-shadow: 0 3px 8px var(--wc-shadow-color); }
.library-glyph:where(:not(#canvas *)) { display: grid; place-items: center; width: 30px; height: 30px; font-size: 21px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); border-radius: 6px; margin-bottom: 9px; }
.library-grid strong:where(:not(#canvas *)) { font-size: 11px; font-weight: 600; }
.library-grid small:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 9px; margin-top: 5px; line-height: 1.7; }
.library-footer:where(:not(#canvas *)) { justify-content: flex-start; gap: 8px; }
.library-footer .icon:where(:not(#canvas *)) { color: var(--wc-text-secondary); width: 16px; height: 16px; }
.project-export:where(:not(#canvas *)) { border-top: 1px solid var(--wc-border); margin-top: 22px; padding-top: 19px; }
.project-export strong:where(:not(#canvas *)) { font-size: 11px; color: var(--wc-text-primary); }
.project-export p:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 9px; margin: 7px 0 13px; }
.inspector .raw-html-input:where(:not(#canvas *)) { min-height: 190px; font-size: 10px; }
.attr-field:where(:not(#canvas *)) { margin-bottom: 10px; }
.attr-field .attr-row:where(:not(#canvas *)), .attribute-row:where(:not(#canvas *)) { display: flex; gap: 6px; margin-bottom: 6px; }
.attr-row > input:where(:not(#canvas *)), .attribute-row > input:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.attr-row > button:where(:not(#canvas *)), .attribute-row > button:where(:not(#canvas *)) { flex-shrink: 0; }
.checkbox-field:where(:not(#canvas *)), .inspector .checkbox-field:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--wc-text-secondary); }
.checkbox-field input:where(:not(#canvas *)) { width: 13px; height: 13px; }
.html-element-badge:where(:not(#canvas *)) { display: inline-flex; border: 1px solid var(--wc-border); background: var(--wc-accent-soft); color: var(--wc-text-secondary); border-radius: 4px; padding: 3px 6px; font-size: 9px; }
.custom-html-frame { display: block; width: 100%; border: 0; min-height: 110px; background: transparent; }
@media (max-width: 1360px) {
  .app-header:where(:not(#canvas *)) { gap: 13px; padding-left: 18px; padding-right: 18px; }
  .project-info:where(:not(#canvas *)) { max-width: 138px; }
  .guide-button span:where(:not(#canvas *)) { display: none; }
  .guide-button:where(:not(#canvas *)) { width: 35px; padding: 0; }
}
@media (max-width: 1050px) {
  .left-panel .pages-section:where(:not(#canvas *)), .left-panel .add-section:where(:not(#canvas *)) { padding-left: 13px; padding-right: 13px; }
  .element-grid .add-element:where(:not(#canvas *)) { font-size: 9px; }
  .element-grid .add-element-wide:where(:not(#canvas *)) { font-size: 9px; }
  .more-elements-button:where(:not(#canvas *)) { font-size: 9px; }
  .page-select:where(:not(#canvas *)) { font-size: 10px; }
}
@media (max-width: 850px) {
  .left-panel .pages-section:where(:not(#canvas *)), .left-panel .add-section:where(:not(#canvas *)) { padding-left: 10px; padding-right: 10px; }
  .page-select:where(:not(#canvas *)) { padding-left: 5px; gap: 5px; }
  .page-select .icon:where(:not(#canvas *)) { width: 12px; height: 12px; }
  .page-select small:where(:not(#canvas *)) { display: none; }
  .library-grid:where(:not(#canvas *)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .guide-layout:where(:not(#canvas *)) { grid-template-columns: 1fr; }
  .guide-nav:where(:not(#canvas *)) { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--wc-border); padding: 12px; }
  .guide-nav button:where(:not(#canvas *)) { padding: 8px; font-size: 10px; }
  .guide-content:where(:not(#canvas *)) { padding: 22px; }
  .studio-dialog-header:where(:not(#canvas *)), .dialog-body:where(:not(#canvas *)), .studio-dialog-footer:where(:not(#canvas *)) { padding-left: 20px; padding-right: 20px; }
  .studio-dialog-footer > span:where(:not(#canvas *)) { font-size: 9px; }
}

/* Advanced tools sit beside the visual controls and can be closed at any time. */
.app-shell:has(.editor-layout.advanced-visible):where(:not(#canvas *)) { min-width: 1040px; }
.editor-layout.advanced-visible:where(:not(#canvas *)) { grid-template-columns: 210px minmax(300px,1fr) 250px 280px; }
.advanced-panel:where(:not(#canvas *)) { display: none; flex-direction: column; min-height: 0; background: var(--wc-accent-soft); border-left: 1px solid var(--wc-border); }
.editor-layout.advanced-visible > .advanced-panel:where(:not(#canvas *)) { display: flex; }
.advanced-panel[hidden]:where(:not(#canvas *)) { display: none; }
.advanced-toggle[aria-expanded="true"]:where(:not(#canvas *)) { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); color: var(--wc-accent); }
.advanced-heading:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 77px; padding: 18px 18px 16px; border-bottom: 1px solid var(--wc-border); background: var(--wc-bg-panel); flex-shrink: 0; }
.advanced-heading h2:where(:not(#canvas *)) { font-size: 13px; color: var(--wc-text-primary); }
.advanced-heading .subtle-label:where(:not(#canvas *)) { display: block; margin-top: 7px; font-size: 7px; letter-spacing: 1.5px; color: var(--wc-text-muted); }
.advanced-heading .icon-button:where(:not(#canvas *)) { color: var(--wc-text-secondary); }
.advanced-scroll:where(:not(#canvas *)) { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 7px; scrollbar-gutter: stable; }
.advanced-intro:where(:not(#canvas *)) { padding: 17px 17px 18px; border-bottom: 1px solid var(--wc-border); }
.advanced-intro p:where(:not(#canvas *)) { font-size: 11px; line-height: 1.9; color: var(--wc-text-secondary); margin: 0 0 12px; }
.advanced-intro .button:where(:not(#canvas *)) { font-size: 10px; min-height: 34px; }
.advanced-section:where(:not(#canvas *)) { padding: 19px 17px; border-bottom: 1px solid var(--wc-border); }
.advanced-section h3:where(:not(#canvas *)) { margin: 0 0 12px; font-size: 11px; color: var(--wc-text-primary); font-weight: 650; }
.advanced-description:where(:not(#canvas *)) { margin: -3px 0 11px; font-size: 10px; color: var(--wc-text-secondary); line-height: 1.8; }
.advanced-save-note:where(:not(#canvas *)) { margin: 9px 0 0; font-size: 9px; }
.advanced-panel textarea:where(:not(#canvas *)), .advanced-panel select:where(:not(#canvas *)), .advanced-panel input:not([type="checkbox"]):not([type="color"]):not([type="range"]):where(:not(#canvas *)) { width: 100%; padding: 9px 10px; border: 1px solid var(--wc-border); border-radius: 5px; background: var(--wc-bg-panel); color: var(--wc-text-secondary); font-size: 11.5px; line-height: 1.75; }
.advanced-panel textarea:where(:not(#canvas *)) { resize: vertical; min-height: 74px; }
.advanced-panel textarea:where(:not(#canvas *))::placeholder, .advanced-panel input:where(:not(#canvas *))::placeholder { color: var(--wc-text-secondary); }
.advanced-panel textarea:focus:where(:not(#canvas *)), .advanced-panel input:focus:where(:not(#canvas *)), .advanced-panel select:focus:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.advanced-panel .code-input:where(:not(#canvas *)), .advanced-panel .raw-html-input:where(:not(#canvas *)) { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: 11.5px; background: var(--wc-bg-panel); line-height: 1.8; tab-size: 2; }
.advanced-panel .raw-html-input:where(:not(#canvas *)) { min-height: 180px; }
.advanced-panel .inspector-section:where(:not(#canvas *)) { padding: 0 0 16px; border-bottom: 0; }
.advanced-panel .inspector-section:last-child:where(:not(#canvas *)) { padding-bottom: 0; }
.advanced-panel .section-title:where(:not(#canvas *)) { font-size: 10px; margin-bottom: 12px; }
.advanced-panel .field-label:where(:not(#canvas *)), .advanced-panel .field > label:where(:not(#canvas *)) { font-size: 10px; color: var(--wc-text-secondary); }
.advanced-panel .field-hint:where(:not(#canvas *)) { font-size: 9px; color: var(--wc-text-secondary); }
.advanced-panel .inspector-empty:where(:not(#canvas *)) { padding: 12px 0; font-size: 11px; }
.advanced-panel .checkbox-field:where(:not(#canvas *)) { font-size: 10px; }
.advanced-panel .attribute-row:where(:not(#canvas *)), .advanced-panel .attr-row:where(:not(#canvas *)) { align-items: center; }
.advanced-panel .attribute-row input:where(:not(#canvas *)), .advanced-panel .attr-row input:where(:not(#canvas *)) { padding: 7px; font-size: 10px; }
.advanced-panel .attribute-row > button:where(:not(#canvas *)), .advanced-panel .attr-row > button:where(:not(#canvas *)) { color: var(--wc-text-secondary); }
.advanced-footer:where(:not(#canvas *)) { display: flex; justify-content: center; align-items: center; gap: 6px; height: 31px; font-size: 8px; color: var(--wc-text-secondary); border-top: 1px solid var(--wc-border); flex-shrink: 0; }
.advanced-footer .status-dot:where(:not(#canvas *)) { width: 4px; height: 4px; background: var(--wc-accent-fill); }
.page-settings-help:where(:not(#canvas *)) { display: flex; align-items: flex-start; gap: 7px; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; margin: 21px 0 0; }
.page-settings-help .icon:where(:not(#canvas *)) { width: 14px; height: 14px; margin-top: 2px; color: var(--wc-text-secondary); }
@media (min-width: 1600px) {
  .editor-layout.advanced-visible:where(:not(#canvas *)) { grid-template-columns: 240px minmax(300px,1fr) 280px 300px; }
}
@media (max-width: 1250px) {
  .app-header .advanced-toggle span:where(:not(#canvas *)) { display: none; }
  .app-header .advanced-toggle:where(:not(#canvas *)) { width: 35px; padding: 0; }
}

.app-header .short-label:where(:not(#canvas *)) { display: none; }
.canvas-element:is(h1,h2,h3,h4,h5,h6,a) { white-space: pre-wrap; }
table.canvas-element { display: table; border-collapse: collapse; }
table.canvas-element th, table.canvas-element td { border: 1px solid #e5e7eb; padding: 10px 14px; text-align: inherit; }
.canvas-content-frame { display: block; width: 100%; border: 0; min-height: 80px; background: transparent; }
.isolated-element:where(:not(#canvas *)) { position: relative; }
.embedded-select { position: absolute; top: 4px; right: 4px; z-index: 2; padding: 5px 7px; font-size: 9px; border-radius: 4px; border: 1px solid var(--wc-border); background: var(--wc-accent-soft); color: var(--wc-text-secondary); box-shadow: 0 1px 3px var(--wc-shadow-color); }
.embedded-select:hover { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); color: var(--wc-accent); }
@media (max-width: 1100px) {
  .app-shell:has(.editor-layout.advanced-visible):where(:not(#canvas *)) { min-width: 720px; }
  .editor-layout.advanced-visible:where(:not(#canvas *)) { grid-template-columns: var(--panel-width) minmax(0,1fr) var(--inspector-width); }
  .editor-layout.advanced-visible > .advanced-panel:where(:not(#canvas *)) { position: fixed; top: 76px; bottom: 0; right: 0; width: 280px; height: calc(100dvh - 76px); z-index: 15; background: var(--wc-accent-soft); box-shadow: -12px 0 32px var(--wc-shadow-color); }
  .app-header .guide-button:where(:not(#canvas *)), .app-header .advanced-toggle:where(:not(#canvas *)) { width: auto; padding: 0 8px; gap: 4px; }
  .app-header .guide-button .full-label:where(:not(#canvas *)), .app-header .advanced-toggle .full-label:where(:not(#canvas *)) { display: none; }
  .app-header .guide-button .short-label:where(:not(#canvas *)), .app-header .advanced-toggle .short-label:where(:not(#canvas *)) { display: inline; font-size: 10px; }
}
@media (max-width: 1050px) {
  .editor-layout.advanced-visible > .advanced-panel:where(:not(#canvas *)) { top: 70px; height: calc(100dvh - 70px); }
}
@media (max-width: 850px) {
  .app-header .guide-button:where(:not(#canvas *)), .app-header .advanced-toggle:where(:not(#canvas *)) { padding: 0 6px; gap: 3px; }
  .app-header .guide-button .short-label:where(:not(#canvas *)), .app-header .advanced-toggle .short-label:where(:not(#canvas *)) { font-size: 9px; }
  .app-header #export-button span:where(:not(#canvas *)) { display: none; }
  .app-header #export-button:where(:not(#canvas *))::after { content: "出力"; }
}

/* Shared layouts and parts use the same visual editor as each page. */
[hidden] { display: none !important; }
.visually-hidden:where(:not(#canvas *)) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shared-layout-section:where(:not(#canvas *)), .components-section:where(:not(#canvas *)) { padding: 18px 16px 17px; border-bottom: 1px solid var(--wc-border); flex-shrink: 0; }
.shared-layout-section .panel-description:where(:not(#canvas *)), .components-section .panel-description:where(:not(#canvas *)) { margin: 8px 0 12px; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.75; }
.panel-section-icon:where(:not(#canvas *)) { width: 15px !important; height: 15px !important; color: var(--wc-text-secondary); }
.layout-region-list:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 4px; }
.layout-region-button:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; width: 100%; border-radius: 6px; min-height: 34px; padding: 7px 8px; color: var(--wc-text-secondary); font-size: 10.5px; text-align: left; border: 1px solid transparent; }
.layout-region-button > .icon:where(:not(#canvas *)) { width: 14px; height: 14px; color: var(--wc-text-secondary); }
.layout-region-button > span:nth-child(2):where(:not(#canvas *)) { min-width: 0; flex: 1; }
.layout-region-button:hover:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); }
.layout-region-button.active:where(:not(#canvas *)) { color: var(--wc-accent); border-color: var(--wc-border); background: var(--wc-accent-soft); font-weight: 600; }
.layout-region-button.active > .icon:where(:not(#canvas *)) { color: var(--wc-accent); }
.global-badge:where(:not(#canvas *)), :where(#canvas) .region-label > .global-badge, :where(#canvas) .component-reference > .global-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--wc-border); color: var(--wc-global); background: var(--wc-global-soft); padding: 3px 5px; font-size: 7px; line-height: 1; font-weight: 650; letter-spacing: .7px; border-radius: 4px; vertical-align: middle; white-space: nowrap; }
.page-content-badge:where(:not(#canvas *)), :where(#canvas) .region-label > .page-content-badge { font-size: 7px; letter-spacing: .7px; color: var(--wc-text-secondary); font-weight: 600; }
.components-section .panel-heading .icon-button:where(:not(#canvas *)) { font-size: 18px; color: var(--wc-accent); }
.component-list:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; max-height: 210px; overflow-y: auto; }
.component-list:empty:where(:not(#canvas *)) { margin: 0; }
.component-list .component-empty:where(:not(#canvas *)), .component-list .empty-state:where(:not(#canvas *)), .component-list > p:where(:not(#canvas *)) { padding: 7px 4px; margin: 0 0 8px; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; }
.component-row:where(:not(#canvas *)), .component-list-item:where(:not(#canvas *)) { display: flex; align-items: center; gap: 5px; padding: 5px 4px 5px 8px; border: 1px solid var(--wc-border); border-radius: 6px; background: var(--wc-accent-soft); min-width: 0; }
.component-row:hover:where(:not(#canvas *)), .component-list-item:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); border-color: var(--wc-border); }
.component-row.active:where(:not(#canvas *)), .component-list-item.active:where(:not(#canvas *)) { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.component-row > .icon:where(:not(#canvas *)), .component-list-item > .icon:where(:not(#canvas *)) { width: 14px; height: 14px; color: var(--wc-global); }
.component-row .component-name:where(:not(#canvas *)), .component-list-item .component-name:where(:not(#canvas *)), .component-row > button:first-child:where(:not(#canvas *)), .component-list-item > button:first-child:where(:not(#canvas *)) { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--wc-text-secondary); line-height: 1.6; padding: 4px 0; }
.component-row .icon-button:where(:not(#canvas *)), .component-list-item .icon-button:where(:not(#canvas *)) { min-height: 24px; min-width: 24px; padding: 3px; }
.component-place-button:where(:not(#canvas *)) { min-height: 34px; font-size: 10px; }
.scope-toolbar:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 23px 12px; background: var(--wc-bg-panel); border-bottom: 1px solid var(--wc-border); flex-shrink: 0; min-height: 65px; }
.scope-toolbar-info:where(:not(#canvas *)) { min-width: 0; }
.scope-heading:where(:not(#canvas *)) { display: flex; align-items: center; gap: 9px; }
.scope-heading strong:where(:not(#canvas *)) { font-size: 12px; color: var(--wc-text-primary); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-badge:where(:not(#canvas *)) { display: inline-flex; font-size: 7px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 4px; padding: 4px 6px; line-height: 1; font-weight: 650; letter-spacing: .7px; flex-shrink: 0; }
.scope-toolbar p:where(:not(#canvas *)) { margin: 6px 0 0; font-size: 10px; color: var(--wc-text-secondary); line-height: 1.5; }
.scope-toolbar.is-global:where(:not(#canvas *)) { background: var(--wc-global-soft); }
.scope-toolbar.is-global .scope-badge:where(:not(#canvas *)) { color: var(--wc-global); background: var(--wc-global-soft); border-color: var(--wc-border); }
.scope-back-button:where(:not(#canvas *)) { min-height: 29px; padding: 0 9px; font-size: 9px; }
.scope-back-button > .icon:where(:not(#canvas *)) { transform: rotate(180deg); width: 12px; height: 12px; }
.shared-notice:where(:not(#canvas *)) { border: 1px solid var(--wc-global-border); border-radius: 7px; margin: 13px 14px 0; background: var(--wc-global-soft); padding: 12px 11px; color: var(--wc-text-secondary); font-size: 10.5px; line-height: 1.85; flex-shrink: 0; }
.shared-notice:where(:not(#canvas *))::before { content: "GLOBAL"; display: block; width: fit-content; border: 1px solid var(--wc-border); color: var(--wc-global); background: var(--wc-global-soft); padding: 3px 5px; font-size: 7px; line-height: 1; font-weight: 650; letter-spacing: .7px; border-radius: 4px; margin-bottom: 8px; }
.shared-notice:has(> .global-badge):where(:not(#canvas *))::before { display: none; }
.shared-notice > strong:where(:not(#canvas *)) { display: block; font-size: 10px; line-height: 1.8; font-weight: 600; margin-top: 7px; }
.shared-notice > p:where(:not(#canvas *)) { font-size: 10px; margin: 5px 0 0; line-height: 1.8; color: var(--wc-global); }
.shared-notice .global-badge:where(:not(#canvas *)) { letter-spacing: .9px; font-size: 7px; }
.layer-region:where(:not(#canvas *)) { padding: 0; margin: 5px 0 3px; }
.layer-region-title:where(:not(#canvas *)) { list-style: none; display: flex; align-items: center; gap: 7px; min-height: 31px; width: 100%; padding: 7px 7px; border-radius: 5px; color: var(--wc-text-secondary); font-size: 10px; cursor: pointer; text-align: left; }
.layer-region-title:where(:not(#canvas *))::-webkit-details-marker { display: none; }
.layer-region-title .icon:where(:not(#canvas *)) { width: 12px; height: 12px; }
.layer-region-title:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-text-secondary); }
.layer-region-title .global-badge:where(:not(#canvas *)) { margin-left: auto; }
.layer-region.active > .layer-region-title:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); }
.layer-region > .layer-region-title:where(:not(#canvas *))::before { content: "▸"; color: var(--wc-text-secondary); font-size: 11px; width: 8px; }
.layer-region[open] > .layer-region-title:where(:not(#canvas *))::before { content: "▾"; }
.layer-nested:where(:not(#canvas *)) { margin: 2px 0 2px 8px; padding: 0 0 0 7px; border-left: 1px solid var(--wc-border); display: flex; flex-direction: column; gap: 2px; }
.layer-nested .layer-item:where(:not(#canvas *)) { min-height: 34px; gap: 6px; padding: 0 6px; }
.layer-nested .layer-name:where(:not(#canvas *)) { font-size: 10.5px; }
.layer-nested .layer-tag:where(:not(#canvas *)) { font-size: 7px; }
.layer-item .global-badge:where(:not(#canvas *)) { padding: 3px 4px; font-size: 6px; letter-spacing: .4px; }
.layer-component:where(:not(#canvas *)) { border-color: var(--wc-global-border); background: var(--wc-global-soft); }
.layer-component > .icon:where(:not(#canvas *)) { color: var(--wc-global); }
.layer-empty:where(:not(#canvas *)) { font-size: 9px; color: var(--wc-text-secondary); line-height: 1.8; padding: 8px 12px; margin: 0; }
.layer-collapse:where(:not(#canvas *)), .layer-expand:where(:not(#canvas *)) { min-width: 15px; height: 24px; padding: 2px; color: var(--wc-text-secondary); font-size: 10px; }
.canvas-region { position: relative; display: block; flex-shrink: 0; margin: 0; }
.canvas-region.is-active { outline: 1px dashed var(--wc-accent-border); outline-offset: 4px; }
.canvas-region > .region-label { position: absolute; left: 0; top: -17px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 4px; font-family: Inter, "Yu Gothic UI", Meiryo, sans-serif; line-height: 1; font-size: 11px; color: var(--wc-text-secondary); background: var(--wc-bg-panel); z-index: 3; cursor: pointer; letter-spacing: .2px; white-space: nowrap; }
.canvas-region > .region-label .global-badge { font-size: 6px; padding: 3px 4px; }
.canvas-region.is-active > .region-label { color: var(--wc-text-secondary); background: var(--wc-accent-soft); }
.canvas-region > .region-empty { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 36px; margin: 0; padding: 7px 12px; text-align: center; border: 1px dashed var(--wc-border); border-radius: 5px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-family: Inter, "Yu Gothic UI", Meiryo, sans-serif; font-size: 12px; line-height: 1.7; cursor: pointer; }
.canvas-region > .region-empty:hover { color: var(--wc-accent); border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.canvas-group { position: relative; display: block; }
.canvas-group:empty { border: 1px dashed #dfe7f2; background: #fbfcff; }
.canvas-group > .component-caption { color: var(--wc-text-muted); font-size: 12px; line-height: 1.8; }
.shared-element { position: relative; }
.shared-element.is-selected { outline-color: var(--wc-global-border); }
.shared-element.is-selected::before, .shared-element.is-selected::after { border-color: var(--wc-global-border); }
.component-reference { position: relative; }
.component-reference:hover { outline-color: var(--wc-global-border); }
.component-reference.is-selected { outline-color: var(--wc-global-border); }
.component-reference > .global-badge { position: absolute; right: 7px; top: 7px; }
.component-reference .component-caption { font-size: 12px; line-height: 1.8; color: var(--wc-global); }
.canvas-element:is(nav):not(.canvas-group) > ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.canvas-element:is(nav):not(.canvas-group) > ol > li + li::before { content: var(--breadcrumb-separator, "›"); margin-right: 8px; }
.drag-grip { position: absolute; top: 0; left: -28px; display: grid; place-items: center; width: 22px; height: 28px; border: 1px solid var(--wc-border); color: var(--wc-text-secondary); background: var(--wc-accent-soft); border-radius: 4px; font-family: sans-serif; font-size: 15px; letter-spacing: -2px; line-height: 1; cursor: grab; touch-action: none; opacity: 0; z-index: 7; }
.canvas-element:hover > .drag-grip, .canvas-element.is-selected > .drag-grip, .drag-grip:focus-visible { opacity: 1; }
.layer-item > .drag-grip { position: static; border: 0; width: 12px; height: 25px; background: transparent; flex-shrink: 0; opacity: .7; color: var(--wc-text-secondary); font-size: 12px; }
.drag-grip:active { cursor: grabbing; }
.resize-handle { position: absolute; right: -15px; bottom: -15px; width: 22px; height: 22px; padding: 5px; background: var(--wc-bg-panel); border: 1px solid var(--wc-border); box-shadow: 0 1px 5px var(--wc-shadow-color); border-radius: 4px; color: var(--wc-accent); cursor: nwse-resize; touch-action: none; z-index: 8; }
.resize-handle::after { content: ""; display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.canvas-element.is-selected::after { display: none; }
.canvas-tools > .drag-grip { opacity: 1; }
.dragging { opacity: .38; }
.canvas-element.drop-before { outline: 2px solid var(--wc-accent-border); box-shadow: 0 -6px 0 -3px var(--wc-shadow-color) !important; }
.layer-item.drop-before:where(:not(#canvas *)) { border-top: 2px solid var(--wc-accent-border); background: var(--wc-accent-soft); }
.canvas-element.drop-after { outline: 2px solid var(--wc-accent-border); box-shadow: 0 6px 0 -3px var(--wc-shadow-color) !important; }
.layer-item.drop-after:where(:not(#canvas *)) { border-bottom: 2px solid var(--wc-accent-border); background: var(--wc-accent-soft); }
.component-actions:where(:not(#canvas *)) { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.component-actions .button:where(:not(#canvas *)) { font-size: 10px; min-height: 33px; }
.component-actions .button-secondary:where(:not(#canvas *)) { background: var(--wc-global-soft); border-color: var(--wc-global-border); color: var(--wc-global); }
.library-section-note:where(:not(#canvas *)) { margin-left: 8px; color: var(--wc-text-secondary); font-weight: 400; font-size: 9px; }
.library-semantic-hint:where(:not(#canvas *)) { font-size: 10px; line-height: 1.8; margin: 12px 0 0; color: var(--wc-text-secondary); }
.components-dialog:where(:not(#canvas *)) { width: 790px; }
.components-library-head:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; }
.components-library-head h3:where(:not(#canvas *)) { font-size: 12px; color: var(--wc-text-primary); margin: 0; font-weight: 650; }
.components-library-head .button:where(:not(#canvas *)) { font-size: 10px; min-height: 31px; }
.components-library:where(:not(#canvas *)) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.components-library .component-empty:where(:not(#canvas *)), .components-library .empty-state:where(:not(#canvas *)), .components-library > p:where(:not(#canvas *)) { grid-column: 1/-1; margin: 0; padding: 23px 18px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); border: 1px dashed var(--wc-border); border-radius: 7px; font-size: 11px; text-align: center; line-height: 1.8; }
.component-card:where(:not(#canvas *)) { border: 1px solid var(--wc-border); border-radius: 8px; padding: 15px; background: var(--wc-bg-panel); min-width: 0; }
.component-card h3:where(:not(#canvas *)), .component-card strong:where(:not(#canvas *)) { font-size: 12px; color: var(--wc-text-primary); line-height: 1.7; margin: 0 0 8px; font-weight: 650; }
.component-card p:where(:not(#canvas *)) { font-size: 10px; line-height: 1.7; color: var(--wc-text-secondary); margin: 6px 0 13px; }
.component-card .global-badge:where(:not(#canvas *)) { margin-left: 6px; font-size: 6px; }
.component-card .button:where(:not(#canvas *)) { min-height: 30px; font-size: 10px; padding: 0 10px; }
.component-card-actions:where(:not(#canvas *)) { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.component-create-section:where(:not(#canvas *)) { margin-top: 23px; border-top: 1px solid var(--wc-border); padding-top: 21px; }
.component-create-section h3:where(:not(#canvas *)) { margin: 0 0 7px; font-size: 12px; color: var(--wc-text-primary); }
.component-create-section > p:where(:not(#canvas *)) { margin: 0 0 13px; color: var(--wc-text-secondary); font-size: 11px; line-height: 1.8; }
.component-create-fields:where(:not(#canvas *)) { display: flex; gap: 9px; }
.component-create-fields > input:where(:not(#canvas *)) { flex: 1; min-width: 0; border: 1px solid var(--wc-border); border-radius: 6px; padding: 9px 12px; font-size: 12px; color: var(--wc-text-secondary); line-height: 1.5; }
.component-create-fields > input:where(:not(#canvas *))::placeholder { color: var(--wc-text-secondary); }
.component-create-fields > input:focus:where(:not(#canvas *)) { border-color: var(--wc-accent-border); box-shadow: 0 0 0 2px var(--wc-shadow-color); }
.sitemap-dialog:where(:not(#canvas *)) { width: min(1250px,95vw); max-width: 95vw; }
.sitemap-content:where(:not(#canvas *)) { max-height: 75vh; overflow: auto; min-height: 350px; }
.sitemap-toolbar:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 27px; border-bottom: 1px solid var(--wc-border); background: var(--wc-accent-soft); }
.sitemap-toolbar-caption:where(:not(#canvas *)) { color: var(--wc-text-muted); font-size: 10px; display: inline-flex; align-items: center; gap: 7px; }
.sitemap-toolbar-caption .icon:where(:not(#canvas *)) { width: 14px; height: 14px; }
.sitemap-toolbar .checkbox-field:where(:not(#canvas *)) { color: var(--wc-text-secondary); cursor: pointer; }
.sitemap-toolbar input:where(:not(#canvas *)) { accent-color: var(--wc-accent); }
@media (max-width: 1550px) {
  .app-header:where(:not(#canvas *)) { gap: 12px; }
  .app-header .project-info:where(:not(#canvas *)) { max-width: 130px; }
  .header-actions:where(:not(#canvas *)) { gap: 6px; }
  .sitemap-button:where(:not(#canvas *)) { padding: 0 9px; }
}
@media (max-width: 1360px) {
  .app-header .sitemap-button:where(:not(#canvas *)) { width: 35px; padding: 0; }
  .app-header .sitemap-button span:where(:not(#canvas *)) { display: none; }
}
@media (max-width: 1050px) {
  .shared-layout-section:where(:not(#canvas *)), .components-section:where(:not(#canvas *)) { padding-left: 13px; padding-right: 13px; }
  .layout-region-button:where(:not(#canvas *)) { padding: 7px 5px; gap: 5px; font-size: 9px; }
  .global-badge:where(:not(#canvas *)), :where(#canvas) .region-label > .global-badge, :where(#canvas) .component-reference > .global-badge { font-size: 6px; letter-spacing: .3px; padding: 3px 4px; }
  .component-place-button:where(:not(#canvas *)) { font-size: 9px; gap: 5px; padding: 0 7px; }
  .scope-toolbar:where(:not(#canvas *)) { padding-left: 16px; padding-right: 16px; }
  .scope-back-button:where(:not(#canvas *)) { padding: 0 6px; font-size: 8px; }
  .scope-back-button .icon:where(:not(#canvas *)) { display: none; }
}
@media (max-width: 850px) {
  .shared-layout-section:where(:not(#canvas *)), .components-section:where(:not(#canvas *)) { padding-left: 10px; padding-right: 10px; }
  .layout-region-button > .icon:where(:not(#canvas *)) { display: none; }
  .shared-layout-section .panel-description:where(:not(#canvas *)), .components-section .panel-description:where(:not(#canvas *)) { font-size: 9px; }
  .scope-toolbar:where(:not(#canvas *)) { padding: 10px 13px; min-height: 62px; }
  .scope-heading:where(:not(#canvas *)) { gap: 6px; }
  .scope-heading strong:where(:not(#canvas *)) { font-size: 10.5px; }
  .scope-badge:where(:not(#canvas *)) { font-size: 6px; letter-spacing: .2px; padding: 4px 5px; }
  .scope-toolbar p:where(:not(#canvas *)) { font-size: 9px; }
  .scope-back-button:where(:not(#canvas *)) { white-space: normal; line-height: 1.6; max-width: 76px; }
}
@media (max-width: 600px) {
  .components-library:where(:not(#canvas *)) { grid-template-columns: 1fr; }
  .component-create-fields:where(:not(#canvas *)) { flex-direction: column; }
  .sitemap-toolbar:where(:not(#canvas *)) { align-items: flex-start; padding-left: 20px; padding-right: 20px; }
  .sitemap-toolbar-caption:where(:not(#canvas *)) { max-width: 150px; line-height: 1.7; }
}

/* Direct editing controls keep readable sizes while the page is fitted to view. */
.history-toolbar:where(:not(#canvas *)) { display: inline-flex; align-items: center; padding: 3px; gap: 2px; background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 7px; flex: 0 0 auto; }
.history-button:where(:not(#canvas *)) { min-width: 29px; min-height: 29px; padding: 5px; color: var(--wc-text-secondary); }
.history-button .icon:where(:not(#canvas *)) { width: 16px; height: 16px; }
.history-button:hover:not(:disabled):where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); }
.history-button:disabled:where(:not(#canvas *)) { opacity: .35; cursor: default; }
.history-button:disabled:hover:where(:not(#canvas *)) { background: transparent; color: var(--wc-text-secondary); }
.scope-toolbar.is-global:where(:not(#canvas *)) { background: var(--wc-global-soft); border-bottom-color: var(--wc-global-border); }
.scope-toolbar.is-global .scope-badge:where(:not(#canvas *)) { color: var(--wc-global); background: var(--wc-global-soft); border-color: var(--wc-global-border); font-size: 9px; font-weight: 750; line-height: 1.25; letter-spacing: .5px; padding: 4px 7px; }
.scope-toolbar.is-global #scope-description:where(:not(#canvas *)) { color: var(--wc-global); font-weight: 550; }
.scope-usage:where(:not(#canvas *)) { margin-top: 7px; color: var(--wc-global); font-size: 10px; line-height: 1.8; max-height: 80px; overflow: auto; overflow-wrap: anywhere; }
.scope-usage > strong:where(:not(#canvas *)), .scope-usage-title:where(:not(#canvas *)) { display: block; color: var(--wc-global); font-size: 10px; font-weight: 650; }
.scope-usage-pages:where(:not(#canvas *)) { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.scope-usage-page:where(:not(#canvas *)), .scope-usage > button:where(:not(#canvas *)) { display: inline-flex; align-items: center; border: 1px solid var(--wc-global-border); border-radius: 4px; padding: 2px 6px; background: var(--wc-bg-panel); color: var(--wc-global); font-size: 9px; line-height: 1.7; }
.scope-usage-page:hover:where(:not(#canvas *)), .scope-usage > button:hover:where(:not(#canvas *)) { background: var(--wc-global-soft); color: var(--wc-global); border-color: var(--wc-global-border); }
.canvas-tools > .drag-grip { width: calc(18px / var(--canvas-scale, 1)); height: calc(24px / var(--canvas-scale, 1)); left: calc(-26px / var(--canvas-scale, 1)); border-width: calc(1px / var(--canvas-scale, 1)); border-radius: calc(4px / var(--canvas-scale, 1)); font-size: calc(14px / var(--canvas-scale, 1)); letter-spacing: calc(-2px / var(--canvas-scale, 1)); }
.resize-handle { width: calc(16px / var(--canvas-scale, 1)); height: calc(16px / var(--canvas-scale, 1)); padding: 0; border-width: calc(1px / var(--canvas-scale, 1)); border-radius: calc(3px / var(--canvas-scale, 1)); }
.resize-handle:hover { color: var(--wc-accent); background: var(--wc-accent-soft); border-color: var(--wc-accent-border); }
.resize-handle::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(7px / var(--canvas-scale, 1)); height: calc(7px / var(--canvas-scale, 1)); border-right-width: calc(1.5px / var(--canvas-scale, 1)); border-bottom-width: calc(1.5px / var(--canvas-scale, 1)); }
.resize-handle.resize-right { right: calc(-9px / var(--canvas-scale, 1)); top: 50%; bottom: auto; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.resize-bottom { right: auto; bottom: calc(-9px / var(--canvas-scale, 1)); left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.resize-corner { right: calc(-9px / var(--canvas-scale, 1)); bottom: calc(-9px / var(--canvas-scale, 1)); cursor: nwse-resize; }
.resize-handle.resize-right::after { width: calc(2px / var(--canvas-scale, 1)); height: calc(8px / var(--canvas-scale, 1)); background: currentColor; border: 0; border-radius: calc(1px / var(--canvas-scale, 1)); }
.resize-handle.resize-bottom::after { width: calc(8px / var(--canvas-scale, 1)); height: calc(2px / var(--canvas-scale, 1)); background: currentColor; border: 0; border-radius: calc(1px / var(--canvas-scale, 1)); }
.resize-size-label { position: absolute; left: 50%; top: calc(100% + 16px / var(--canvas-scale, 1)); transform: translateX(-50%); padding: calc(4px / var(--canvas-scale, 1)) calc(7px / var(--canvas-scale, 1)); border-radius: calc(4px / var(--canvas-scale, 1)); background: var(--wc-accent-fill); color: var(--wc-on-accent); font-family: Inter, "Yu Gothic UI", Meiryo, sans-serif; font-size: calc(11px / var(--canvas-scale, 1)); font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; z-index: 25; box-shadow: 0 2px 6px var(--wc-shadow-color); }
.canvas-element.drop-inside, .canvas-region.drop-inside { outline: 2px solid var(--wc-accent-border); outline-offset: 4px; }
.canvas-element.drop-inside::before, .canvas-region.drop-inside::before { content: ""; position: absolute; inset: -3px; width: auto; height: auto; background: var(--wc-selection-wash); border: 0; pointer-events: none; z-index: 11; }
.canvas-element.drop-invalid, .canvas-region.drop-invalid { outline: 2px dashed var(--wc-danger-border); outline-offset: 4px; }
.drop-indicator-label { position: absolute; pointer-events: none; display: inline-flex; align-items: center; background: var(--wc-accent-fill); color: var(--wc-on-accent); border-radius: calc(4px / var(--canvas-scale, 1)); padding: calc(4px / var(--canvas-scale, 1)) calc(7px / var(--canvas-scale, 1)); font-family: Inter, "Yu Gothic UI", Meiryo, sans-serif; font-size: calc(11px / var(--canvas-scale, 1)); font-weight: 600; line-height: 1.4; white-space: nowrap; z-index: 45; box-shadow: 0 2px 6px var(--wc-shadow-color); }
.drop-indicator-label.is-invalid { background: var(--wc-bg-raised); }
.layer-item:where(:not(#canvas *)), .layer-container-summary:where(:not(#canvas *)) { position: relative; }
.layer-item.drop-inside:where(:not(#canvas *)), .layer-container-summary.drop-inside:where(:not(#canvas *)) { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); color: var(--wc-accent); outline: 1px solid var(--wc-accent-border); }
.layer-item.drop-invalid:where(:not(#canvas *)), .layer-container-summary.drop-invalid:where(:not(#canvas *)) { background: var(--wc-danger-soft); border-color: var(--wc-danger-border); }
.layer-item:is(.drop-before,.drop-after,.drop-inside):where(:not(#canvas *))::after, .layer-container-summary:is(.drop-before,.drop-after,.drop-inside):where(:not(#canvas *))::after { display: block; position: absolute; right: 5px; padding: 2px 5px; border-radius: 3px; background: var(--wc-accent-fill); color: var(--wc-on-accent); font-size: 8px; line-height: 1.4; pointer-events: none; z-index: 4; box-shadow: 0 1px 4px var(--wc-shadow-color); }
.layer-item.drop-before:where(:not(#canvas *))::after, .layer-container-summary.drop-before:where(:not(#canvas *))::after { content: "前に追加"; top: -9px; }
.layer-item.drop-after:where(:not(#canvas *))::after, .layer-container-summary.drop-after:where(:not(#canvas *))::after { content: "後ろに追加"; bottom: -9px; }
.layer-item.drop-inside:where(:not(#canvas *))::after, .layer-container-summary.drop-inside:where(:not(#canvas *))::after { content: "ここに追加"; top: -9px; }
.layer-nested.drop-inside:where(:not(#canvas *)), .layer-children.drop-inside:where(:not(#canvas *)), .layer-region.drop-inside:where(:not(#canvas *)) { position: relative; background: var(--wc-accent-soft); outline: 1px solid var(--wc-accent-border); border-radius: 5px; }
.layer-nested.drop-inside:where(:not(#canvas *))::after, .layer-children.drop-inside:where(:not(#canvas *))::after, .layer-region.drop-inside:where(:not(#canvas *))::after { content: "ここに追加"; position: absolute; right: 5px; top: -9px; padding: 2px 5px; border-radius: 3px; background: var(--wc-accent-fill); color: var(--wc-on-accent); font-size: 8px; line-height: 1.4; pointer-events: none; z-index: 4; }
.layer-container:where(:not(#canvas *)) { margin: 2px 0; min-width: 0; }
.layer-container-summary:where(:not(#canvas *)) { list-style: none; display: flex; align-items: center; min-height: 34px; cursor: pointer; border-radius: 6px; }
.layer-container-summary:where(:not(#canvas *))::-webkit-details-marker { display: none; }
.layer-container-summary:where(:not(#canvas *))::before { content: "▸"; width: 10px; flex: 0 0 10px; font-size: 10px; color: var(--wc-text-secondary); text-align: center; }
.layer-container[open] > .layer-container-summary:where(:not(#canvas *))::before, details[open] > .layer-container-summary:where(:not(#canvas *))::before { content: "▾"; }
.layer-container-summary .layer-item:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.layer-children:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 1px solid var(--wc-border); margin: 3px 0 3px 13px; padding: 0 0 0 7px; }
.layer-children .layer-children:where(:not(#canvas *)) { margin-left: 8px; padding-left: 5px; }
.layer-children .layer-item:where(:not(#canvas *)) { min-height: 33px; gap: 5px; padding: 0 5px; }
.layer-children .layer-name:where(:not(#canvas *)) { font-size: 10px; }
.layer-children .layer-icon:where(:not(#canvas *)) { width: 14px; flex-basis: 14px; font-size: 11px; }
.breadcrumb-items:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 9px; margin-bottom: 11px; }
.breadcrumb-item:where(:not(#canvas *)) { min-width: 0; border: 1px solid var(--wc-border); border-radius: 7px; background: var(--wc-accent-soft); padding: 10px; margin-bottom: 9px; }
.breadcrumb-item:last-child:where(:not(#canvas *)) { margin-bottom: 0; }
.breadcrumb-item-title:where(:not(#canvas *)), .breadcrumb-item .item-title:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--wc-text-secondary); font-weight: 650; margin: 0 0 10px; }
.breadcrumb-item-title .icon-button:where(:not(#canvas *)), .breadcrumb-item .item-title .icon-button:where(:not(#canvas *)) { min-height: 22px; min-width: 22px; padding: 2px; color: var(--wc-text-secondary); }
.breadcrumb-item-title .icon-button:hover:where(:not(#canvas *)), .breadcrumb-item .item-title .icon-button:hover:where(:not(#canvas *)) { background: var(--wc-danger-soft); color: var(--wc-danger); }
.breadcrumb-item-fields:where(:not(#canvas *)), .breadcrumb-item .item-fields:where(:not(#canvas *)) { display: grid; gap: 8px; min-width: 0; }
.breadcrumb-item .field:where(:not(#canvas *)) { margin-bottom: 0; }
.breadcrumb-item .field-label:where(:not(#canvas *)) { font-size: 10px; }
.breadcrumb-item :is(input,select).input:where(:not(#canvas *)) { padding: 7px 8px; min-height: 31px; font-size: 11px; }
.breadcrumb-remove:where(:not(#canvas *)), .breadcrumb-delete:where(:not(#canvas *)) { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 4px; color: var(--wc-text-secondary); }
.breadcrumb-remove:hover:where(:not(#canvas *)), .breadcrumb-delete:hover:where(:not(#canvas *)) { background: var(--wc-danger-soft); color: var(--wc-danger); }
.breadcrumb-add:where(:not(#canvas *)), .breadcrumb-add-button:where(:not(#canvas *)) { width: 100%; min-height: 32px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--wc-accent-border); border-radius: 6px; font-size: 10px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); }
.breadcrumb-add:hover:where(:not(#canvas *)), .breadcrumb-add-button:hover:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); border-color: var(--wc-accent-border); }
.breadcrumb-item-current:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 9px; padding: 3px 5px; border-radius: 3px; background: var(--wc-accent-soft); }
.image-ratio-field:where(:not(#canvas *)) { padding: 9px 0 2px; font-size: 11px; }
.image-ratio-field input:where(:not(#canvas *)) { accent-color: var(--wc-accent); width: 14px; height: 14px; }
.image-ratio-hint:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 10px; line-height: 1.7; margin: 7px 0 0; }
@media (max-width: 850px) {
  .app-header:where(:not(#canvas *)) { gap: 9px; }
  .history-toolbar:where(:not(#canvas *)) { padding: 2px; }
  .history-button:where(:not(#canvas *)) { min-width: 25px; min-height: 27px; padding: 4px; }
  .device-button span:where(:not(#canvas *)) { display: none; }
  .device-button:where(:not(#canvas *)) { min-width: 30px; justify-content: center; padding: 8px 6px; }
  .scope-toolbar.is-global .scope-badge:where(:not(#canvas *)) { font-size: 8px; padding: 4px 5px; }
  .scope-usage:where(:not(#canvas *)) { font-size: 9px; }
}

/* Size values stay readable; learning notes never consume the whole inspector. */
.right-panel:where(:not(#canvas *)) { container-type: inline-size; container-name: inspector-panel; }
.inspector:where(:not(#canvas *)) { min-height: 200px; }
.size-fields:where(:not(#canvas *)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.size-fields > .field:where(:not(#canvas *)) { min-width: 0; }
.inspector .dimension-row:where(:not(#canvas *)) { display: grid; grid-template-columns: minmax(60px, 1fr) 44px; align-items: center; gap: 5px; }
.inspector .dimension-row .unit-input input:not([type="range"]):where(:not(#canvas *)) { padding: 8px 6px; font-variant-numeric: tabular-nums; }
.inspector .dimension-row select:where(:not(#canvas *)) { min-width: 44px; padding: 8px 14px 8px 5px; background-position: right 4px center; background-size: 10px; font-size: 10.5px; }
.learning-panel:where(:not(#canvas *)) { max-height: clamp(120px, calc(100dvh - 500px), 220px); overflow-y: auto; flex-shrink: 0; }
.learning-panel > code:where(:not(#canvas *)) { max-height: 105px; overflow: auto; }
@container inspector-panel (max-width: 285px) {
  .size-fields:where(:not(#canvas *)) { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Saving feedback must not move the history buttons under the pointer. */
.app-header .project-info:where(:not(#canvas *)) { width: 130px; min-width: 130px; max-width: 130px; flex: 0 0 130px; }
.app-header .project-name:where(:not(#canvas *)), .app-header .save-status:where(:not(#canvas *)) { width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .save-status:where(:not(#canvas *)) { display: block; line-height: 1.4; }
.app-header .save-status > .status-dot:where(:not(#canvas *)) { margin-right: 5px; vertical-align: 2px; }

/* Account controls occupy a stable, compact part of the existing toolbar. */
.account-area:where(:not(#canvas *)) { display: flex; align-items: center; gap: 5px; padding-left: 9px; margin-left: 3px; border-left: 1px solid var(--wc-border); flex: 0 0 auto; }
.standalone-badge:where(:not(#canvas *)) { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--wc-border); border-radius: 6px; padding: 0 8px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 9px; white-space: nowrap; }
.app-header .account-button:where(:not(#canvas *)) { min-width: 88px; max-width: 178px; padding: 0 9px; gap: 6px; }
.account-button #account-label:where(:not(#canvas *)) { overflow: hidden; text-overflow: ellipsis; max-width: 106px; font-size: 10px; }
.account-button > .icon:where(:not(#canvas *)) { width: 15px; height: 15px; }
.projects-button:where(:not(#canvas *)) { width: 30px; height: 34px; border-radius: 7px; color: var(--wc-text-secondary); }
.projects-button:hover:where(:not(#canvas *)) { background: var(--wc-accent-soft); color: var(--wc-accent); }
.plan-badge:where(:not(#canvas *)) { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; border-radius: 5px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 8px; font-weight: 750; letter-spacing: .6px; line-height: 1; white-space: nowrap; flex-shrink: 0; }
.plan-badge.is-pro:where(:not(#canvas *)), .plan-badge[data-plan="pro"]:where(:not(#canvas *)) { color: var(--wc-accent); background: var(--wc-accent-soft); }
.auth-dialog:where(:not(#canvas *)), .access-dialog:where(:not(#canvas *)), .pro-dialog:where(:not(#canvas *)), .project-confirm-dialog:where(:not(#canvas *)) { width: 490px; }
.account-dialog:where(:not(#canvas *)) { width: 750px; }
.cloud-conflict-dialog:where(:not(#canvas *)) { width: 520px; }
.cloud-conflict-description:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 12px; line-height: 1.9; margin: 0 0 20px; overflow-wrap: anywhere; }
.cloud-conflict-actions:where(:not(#canvas *)) { display: flex; flex-wrap: wrap; gap: 9px; }
.cloud-conflict-actions .button:where(:not(#canvas *)) { flex: 1; min-height: 40px; }
.auth-tabs:where(:not(#canvas *)) { display: flex; gap: 4px; padding: 4px; margin-bottom: 23px; background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 8px; }
.auth-tabs button:where(:not(#canvas *)) { flex: 1; padding: 9px 12px; border-radius: 5px; font-size: 12px; color: var(--wc-text-secondary); font-weight: 600; }
.auth-tabs button.active:where(:not(#canvas *)), .auth-tabs button[aria-selected="true"]:where(:not(#canvas *)) { background: var(--wc-bg-panel); color: var(--wc-accent); box-shadow: 0 1px 4px var(--wc-shadow-color); }
.auth-dialog .dialog-field input:where(:not(#canvas *)) { min-height: 43px; }
.auth-dialog .button-primary:where(:not(#canvas *)) { min-height: 42px; font-size: 12px; }
.account-message:where(:not(#canvas *)) { margin: 0 0 15px; color: var(--wc-text-secondary); font-size: 11px; line-height: 1.85; overflow-wrap: anywhere; }
.account-message:empty:where(:not(#canvas *)) { display: none; }
.account-message.is-error:where(:not(#canvas *)), .account-message[data-kind="error"]:where(:not(#canvas *)) { color: var(--wc-danger); background: var(--wc-danger-soft); border: 1px solid var(--wc-danger-border); border-radius: 7px; padding: 10px 12px; }
.account-message.is-success:where(:not(#canvas *)), .account-message[data-kind="success"]:where(:not(#canvas *)) { color: var(--wc-success); background: var(--wc-success-soft); border: 1px solid var(--wc-success-border); border-radius: 7px; padding: 10px 12px; }
.auth-preserve-note:where(:not(#canvas *)) { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.85; }
.auth-preserve-note .icon:where(:not(#canvas *)) { margin-top: 3px; width: 14px; height: 14px; color: var(--wc-text-secondary); }
.account-identity:where(:not(#canvas *)) { display: flex; align-items: center; gap: 12px; padding-bottom: 19px; margin-bottom: 20px; border-bottom: 1px solid var(--wc-border); }
.account-avatar:where(:not(#canvas *)) { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: var(--wc-accent-soft); color: var(--wc-accent); flex-shrink: 0; }
.account-identity-details:where(:not(#canvas *)) { min-width: 0; flex: 1; }
.account-identity-details strong:where(:not(#canvas *)) { display: block; font-size: 12px; font-weight: 650; color: var(--wc-text-primary); overflow-wrap: anywhere; }
.account-identity-details > span:where(:not(#canvas *)) { display: block; color: var(--wc-text-secondary); font-size: 9px; margin-top: 5px; }
.account-identity #account-current-plan:where(:not(#canvas *)) { padding: 6px 8px; font-size: 9px; }
.account-identity .button:where(:not(#canvas *)) { min-height: 31px; font-size: 9px; }
.cloud-create-section:where(:not(#canvas *)) { padding: 18px 19px; background: var(--wc-accent-soft); border: 1px solid var(--wc-border); border-radius: 10px; }
.cloud-section-heading:where(:not(#canvas *)) { display: flex; align-items: center; gap: 8px; }
.cloud-section-heading .icon:where(:not(#canvas *)) { width: 17px; height: 17px; color: var(--wc-accent); }
.account-dialog h3:where(:not(#canvas *)) { margin: 0; color: var(--wc-text-primary); font-size: 12px; font-weight: 650; }
.cloud-create-section > p:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 10px; line-height: 1.9; margin: 9px 0 16px; }
.cloud-create-section .dialog-field:where(:not(#canvas *)) { margin-bottom: 12px; }
.cloud-create-section .dialog-field input:where(:not(#canvas *)) { min-height: 40px; }
.cloud-create-actions:where(:not(#canvas *)) { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-create-actions .button:where(:not(#canvas *)) { min-height: 38px; font-size: 10px; }
.cloud-create-section > .cloud-copy-note:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 9px; margin: 11px 0 0; }
.cloud-list-section:where(:not(#canvas *)) { margin-top: 24px; }
.cloud-list-header:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.cloud-list-header .button:where(:not(#canvas *)) { min-height: 30px; font-size: 9px; }
.account-status:where(:not(#canvas *)) { display: flex; align-items: center; gap: 7px; padding: 9px 11px; margin: 0 0 10px; border-radius: 6px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.cloud-project-list:where(:not(#canvas *)) { display: flex; flex-direction: column; gap: 8px; }
.cloud-empty:where(:not(#canvas *)) { margin: 0; padding: 23px 12px; border: 1px dashed var(--wc-border); border-radius: 8px; color: var(--wc-text-secondary); text-align: center; font-size: 11px; line-height: 1.9; }
.cloud-project-row:where(:not(#canvas *)) { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid var(--wc-border); border-radius: 9px; background: var(--wc-bg-panel); }
.cloud-project-row.is-active:where(:not(#canvas *)) { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.cloud-project-main:where(:not(#canvas *)) { flex: 1; min-width: 0; }
.cloud-project-main strong:where(:not(#canvas *)) { display: block; color: var(--wc-text-primary); font-size: 11px; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.cloud-project-main small:where(:not(#canvas *)), .cloud-project-main time:where(:not(#canvas *)) { display: block; color: var(--wc-text-secondary); font-size: 9px; line-height: 1.7; margin-top: 3px; }
.cloud-project-actions:where(:not(#canvas *)) { display: flex; align-items: center; flex-shrink: 0; gap: 6px; }
.cloud-project-actions .button:where(:not(#canvas *)) { min-height: 29px; font-size: 9px; padding: 0 9px; }
.cloud-project-actions .icon-button:where(:not(#canvas *)) { width: 29px; height: 29px; color: var(--wc-text-secondary); }
.cloud-project-actions .icon-button .icon:where(:not(#canvas *)) { height: 13px; width: 13px; }
.cloud-project-actions .danger-button:hover:where(:not(#canvas *)) { color: var(--wc-danger); background: var(--wc-danger-soft); }
.cloud-recovery-button:where(:not(#canvas *)) { margin-bottom: 14px; min-height: 33px; font-size: 10px; }
.cloud-local-cache:where(:not(#canvas *)) { display: block; width: 100%; margin: 0 0 9px; min-height: 37px; border: 1px solid var(--wc-border); border-radius: 6px; background: var(--wc-bg-panel); color: var(--wc-text-secondary); padding: 7px 10px; font-size: 10px; }
.account-dialog-footer .button:where(:not(#canvas *)) { min-width: 89px; }
.access-lock-icon:where(:not(#canvas *)) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--wc-border); background: var(--wc-accent-soft); color: var(--wc-accent); margin-bottom: 15px; }
.access-lock-icon .icon:where(:not(#canvas *)) { width: 22px; height: 22px; }
.access-description:where(:not(#canvas *)), .project-confirm-description:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 12px; line-height: 1.9; margin: 0 0 20px; overflow-wrap: anywhere; }
.project-confirm-description:where(:not(#canvas *)) { margin-bottom: 0; }
.access-actions:where(:not(#canvas *)) { display: flex; gap: 9px; }
.pro-preparing:where(:not(#canvas *)) { padding: 13px 15px; margin: 0 0 19px; border: 1px solid var(--wc-border); border-radius: 8px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 11px; line-height: 1.85; }
.plan-comparison:where(:not(#canvas *)) { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.plan-comparison section:where(:not(#canvas *)) { border: 1px solid var(--wc-border); padding: 15px; border-radius: 9px; }
.plan-comparison h3:where(:not(#canvas *)) { color: var(--wc-text-primary); font-size: 11px; font-weight: 650; line-height: 1.8; margin: 12px 0 7px; }
.plan-comparison p:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 10px; line-height: 1.9; margin: 0; }
.feature-lock-card:where(:not(#canvas *)) { border: 1px solid var(--wc-border); border-radius: 7px; background: var(--wc-accent-soft); padding: 12px; margin: 10px 0; }
.feature-lock-card p:where(:not(#canvas *)) { color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; margin: 7px 0 10px; }
.feature-lock-label:where(:not(#canvas *)) { display: inline-flex; align-items: center; gap: 6px; color: var(--wc-text-secondary); font-size: 10px; font-weight: 600; }
.feature-lock-label .icon:where(:not(#canvas *)) { width: 12px; height: 12px; }
.feature-tier:where(:not(#canvas *)) { padding: 3px 5px; border-radius: 4px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 8px; font-weight: 650; }
.feature-lock-button:where(:not(#canvas *)) { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; max-width: 100%; min-height: 37px; padding: 8px 10px; margin: 7px 0; border: 1px solid var(--wc-border); border-radius: 7px; color: var(--wc-text-secondary); background: var(--wc-accent-soft); font-size: 10px; font-weight: 600; text-align: left; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.feature-lock-button:hover:where(:not(#canvas *)) { color: var(--wc-accent); border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.feature-lock-button .icon:where(:not(#canvas *)) { width: 13px; height: 13px; }
.feature-plan:where(:not(#canvas *)) { display: inline-flex; margin-left: auto; padding: 3px 5px; border-radius: 4px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 8px; font-weight: 700; letter-spacing: .5px; line-height: 1; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1550px) {
  .app-header .account-button:where(:not(#canvas *)) { max-width: 137px; gap: 4px; }
  .account-button #account-label:where(:not(#canvas *)) { max-width: 77px; }
  .app-header .account-button .plan-badge:where(:not(#canvas *)) { font-size: 7px; padding: 4px; }
  .account-area:where(:not(#canvas *)) { padding-left: 6px; margin-left: 0; gap: 3px; }
}
@media (max-width: 1360px) {
  .app-header .device-button:where(:not(#canvas *)) { width: 35px; padding: 8px; justify-content: center; }
  .app-header .device-button > span:where(:not(#canvas *)) { display: none; }
  .app-header .device-switch:where(:not(#canvas *)) { flex-shrink: 0; }
  .app-header .account-button:where(:not(#canvas *)) { max-width: 133px; }
}
@media (max-width: 1180px) {
  .app-header .header-divider:where(:not(#canvas *)), .app-header .project-name:where(:not(#canvas *)) { display: none; }
  .app-header .project-info:where(:not(#canvas *)) { width: 104px; min-width: 104px; max-width: 104px; flex-basis: 104px; }
  .app-header .save-status:where(:not(#canvas *)) { font-size: 9px; }
  .app-header:where(:not(#canvas *)) { gap: 9px; }
  .app-header .header-actions:where(:not(#canvas *)) { gap: 5px; }
}
@media (max-width: 850px) {
  .app-header .account-button:where(:not(#canvas *)) { max-width: 101px; min-width: 68px; padding: 0 6px; gap: 3px; }
  .account-button #account-label:where(:not(#canvas *)) { max-width: 54px; font-size: 9px; }
  .app-header .account-button > .icon:where(:not(#canvas *)) { display: none; }
  .projects-button:where(:not(#canvas *)) { width: 24px; }
  .standalone-badge:where(:not(#canvas *)) { padding: 0 5px; font-size: 8px; }
  .account-area:where(:not(#canvas *)) { padding-left: 4px; }
}
@media (max-width: 600px) {
  .auth-dialog:where(:not(#canvas *)), .account-dialog:where(:not(#canvas *)), .access-dialog:where(:not(#canvas *)), .pro-dialog:where(:not(#canvas *)), .project-confirm-dialog:where(:not(#canvas *)), .cloud-conflict-dialog:where(:not(#canvas *)) { max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); }
  .cloud-conflict-actions:where(:not(#canvas *)) { flex-direction: column; }
  .cloud-conflict-dialog .studio-dialog-footer:where(:not(#canvas *)) { align-items: flex-start; }
  .cloud-conflict-dialog .studio-dialog-footer > span:where(:not(#canvas *)) { max-width: 190px; line-height: 1.8; }
  .account-identity:where(:not(#canvas *)) { flex-wrap: wrap; gap: 9px; }
  .account-identity-details:where(:not(#canvas *)) { flex-basis: calc(100% - 55px); }
  .account-identity #account-current-plan:where(:not(#canvas *)) { margin-left: 48px; }
  .cloud-create-section:where(:not(#canvas *)) { padding: 15px; }
  .cloud-create-actions:where(:not(#canvas *)) { flex-direction: column; }
  .cloud-project-row:where(:not(#canvas *)) { flex-wrap: wrap; gap: 10px; }
  .cloud-project-main:where(:not(#canvas *)) { flex-basis: 100%; }
  .cloud-project-actions:where(:not(#canvas *)) { justify-content: flex-end; width: 100%; }
  .account-dialog-footer:where(:not(#canvas *)) { align-items: flex-start; }
  .account-dialog-footer > span:where(:not(#canvas *)) { max-width: 180px; line-height: 1.8; }
  .plan-comparison:where(:not(#canvas *)) { grid-template-columns: 1fr; }
}

/* Account panels keep their first and last actions visible at any viewport height. */
.account-dialog:where(:not(#canvas *)) {
  width: min(750px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.account-dialog[open]:where(:not(#canvas *)) { display: flex; flex-direction: column; }
.account-dialog .studio-dialog-header:where(:not(#canvas *)) { flex: 0 0 auto; padding: 18px 24px 16px; }
.account-dialog .studio-dialog-header h2:where(:not(#canvas *)) { margin: 7px 0 6px; }
.account-dialog .dialog-body:where(:not(#canvas *)) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: 16px 24px;
}
.account-dialog .studio-dialog-footer:where(:not(#canvas *)) { flex: 0 0 auto; padding: 12px 24px; }
.account-dialog .account-identity:where(:not(#canvas *)) { gap: 10px; padding-bottom: 12px; margin-bottom: 14px; }
.account-dialog .account-message:where(:not(#canvas *)) { margin-bottom: 12px; }
.account-dialog .cloud-create-section:where(:not(#canvas *)) { padding: 14px 16px; }
.account-dialog .cloud-create-section > p:where(:not(#canvas *)) { margin: 7px 0 12px; line-height: 1.75; }
.account-dialog .cloud-create-section > .cloud-copy-note:where(:not(#canvas *)) { margin: 8px 0 0; }
.account-dialog .cloud-create-section .dialog-field:where(:not(#canvas *)) { margin-bottom: 10px; }
.account-dialog .cloud-list-section:where(:not(#canvas *)) { margin-top: 18px; }
.account-dialog .cloud-list-header:where(:not(#canvas *)) { margin-bottom: 8px; }
.account-dialog .cloud-recovery-button:where(:not(#canvas *)) { margin-bottom: 10px; }
.account-dialog .cloud-project-list:where(:not(#canvas *)) {
  min-height: 0;
  max-height: min(264px, 38dvh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  gap: 7px;
}
.account-dialog .cloud-project-list > *:where(:not(#canvas *)) { flex-shrink: 0; }
.account-dialog .cloud-project-row:where(:not(#canvas *)) { padding: 10px 12px; }

/* Keep the full email in the accessible name and tooltip, without clipping it visually. */
.app-header .account-button:has(#account-plan:not([hidden])):where(:not(#canvas *)) {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  padding: 0 8px;
  gap: 6px;
}
.app-header .account-button:has(#account-plan:not([hidden])) #account-label:where(:not(#canvas *)) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.app-header .account-button:has(#account-plan:not([hidden])) > .icon:where(:not(#canvas *)) { display: block; }
@media (max-width: 1550px) {
  .app-header .device-button:where(:not(#canvas *)) { width: 35px; padding: 8px; justify-content: center; }
  .app-header .device-button > span:where(:not(#canvas *)) { display: none; }
  .app-header .device-switch:where(:not(#canvas *)) { flex-shrink: 0; }
  .app-header .sitemap-button:where(:not(#canvas *)), .app-header .guide-button:where(:not(#canvas *)), .app-header .preview-button:where(:not(#canvas *)) { width: 35px; padding: 0; }
  .app-header .sitemap-button > span:where(:not(#canvas *)), .app-header .guide-button > span:where(:not(#canvas *)), .app-header .preview-button > span:where(:not(#canvas *)) { display: none; }
}
@media (max-height: 560px) {
  .account-dialog .studio-dialog-header:where(:not(#canvas *)) { padding-top: 12px; padding-bottom: 12px; }
  .account-dialog .studio-dialog-header h2:where(:not(#canvas *)) { font-size: 18px; margin: 5px 0; }
  .account-dialog .studio-dialog-footer:where(:not(#canvas *)) { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 600px) {
  .account-dialog .studio-dialog-header:where(:not(#canvas *)), .account-dialog .dialog-body:where(:not(#canvas *)), .account-dialog .studio-dialog-footer:where(:not(#canvas *)) { padding-left: 16px; padding-right: 16px; }
}

/* Billing shares the compact account layout and keeps payment actions accessible. */
.billing-panel:where(:not(#canvas *)) { padding: 14px 16px; margin: 0 0 14px; border: 1px solid var(--wc-border); border-radius: 9px; background: var(--wc-accent-soft); }
.billing-panel-heading:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.billing-eyebrow:where(:not(#canvas *)) { display: block; margin-bottom: 5px; color: var(--wc-text-muted); font-size: 8px; font-weight: 650; letter-spacing: 1.2px; }
.account-dialog .billing-panel h3:where(:not(#canvas *)) { color: var(--wc-text-primary); font-size: 13px; }
.billing-test-badge:where(:not(#canvas *)) { display: inline-flex; align-items: center; padding: 5px 7px; border: 1px solid var(--wc-border); border-radius: 5px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 8px; font-weight: 700; letter-spacing: .25px; line-height: 1; white-space: nowrap; }
.billing-price:where(:not(#canvas *)) { margin: 9px 0; color: var(--wc-text-secondary); font-size: 11px; line-height: 1.7; }
.billing-renewal:where(:not(#canvas *)) { margin: 0 0 9px; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.billing-actions:where(:not(#canvas *)) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.billing-actions .button:where(:not(#canvas *)) { min-height: 36px; font-size: 10px; }
.billing-actions .button:disabled:where(:not(#canvas *)) { cursor: default; }
.billing-status-message:where(:not(#canvas *)) { margin: 10px 0 0; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.billing-status-message:empty:where(:not(#canvas *)) { display: none; }
.billing-status-message.is-error:where(:not(#canvas *)), .billing-status-message[data-kind="error"]:where(:not(#canvas *)) { color: var(--wc-danger); }
.billing-status-message.is-success:where(:not(#canvas *)), .billing-status-message[data-kind="success"]:where(:not(#canvas *)) { color: var(--wc-success); }
.pro-dialog:where(:not(#canvas *)) { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.pro-dialog[open]:where(:not(#canvas *)) { display: flex; flex-direction: column; }
.pro-dialog .studio-dialog-header:where(:not(#canvas *)) { flex: 0 0 auto; padding: 20px 24px 18px; }
.pro-dialog .studio-dialog-header h2:where(:not(#canvas *)) { margin: 8px 0; }
.pro-dialog .dialog-body:where(:not(#canvas *)) { flex: 1 1 auto; min-height: 0; padding: 18px 24px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.pro-dialog .studio-dialog-footer:where(:not(#canvas *)) { flex: 0 0 auto; padding: 12px 24px; gap: 10px; }
.pro-price-header:where(:not(#canvas *)) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pro-billing-price:where(:not(#canvas *)) { margin: 0; color: var(--wc-text-secondary); font-size: 18px; font-weight: 650; line-height: 1.6; }
.billing-test-note:where(:not(#canvas *)) { padding: 10px 12px; margin: 0 0 15px; border: 1px solid var(--wc-border); border-radius: 7px; background: var(--wc-accent-soft); color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; }
.pro-dialog .plan-comparison h3:where(:not(#canvas *)) { margin-top: 10px; }
.pro-feature-list:where(:not(#canvas *)) { padding: 0 0 0 16px; margin: 0; color: var(--wc-text-secondary); font-size: 10px; line-height: 2; }
.pro-checkout-note:where(:not(#canvas *)) { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0 0; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.8; }
.pro-checkout-note .icon:where(:not(#canvas *)) { width: 13px; height: 13px; margin-top: 2px; }
.pro-dialog-footer > .button:where(:not(#canvas *)) { min-height: 36px; font-size: 10px; flex-shrink: 0; }
@media (max-height: 560px) {
  .pro-dialog .studio-dialog-header:where(:not(#canvas *)) { padding-top: 12px; padding-bottom: 12px; }
  .pro-dialog .studio-dialog-header h2:where(:not(#canvas *)) { margin: 5px 0; font-size: 18px; }
  .pro-dialog .studio-dialog-footer:where(:not(#canvas *)) { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 600px) {
  .pro-dialog .studio-dialog-header:where(:not(#canvas *)), .pro-dialog .dialog-body:where(:not(#canvas *)), .pro-dialog .studio-dialog-footer:where(:not(#canvas *)) { padding-left: 16px; padding-right: 16px; }
  .pro-dialog-footer:where(:not(#canvas *)) { align-items: flex-end; flex-wrap: wrap; }
  .pro-dialog-footer .billing-actions:where(:not(#canvas *)) { flex: 1 0 100%; }
  .billing-panel-heading:where(:not(#canvas *)) { align-items: flex-start; }
}

/* Theme finish: clear boundaries and states without changing the editor layout. */
.app-header:where(:not(#canvas *)), .left-panel:where(:not(#canvas *)), .right-panel:where(:not(#canvas *)), .advanced-panel:where(:not(#canvas *)), .code-dock:where(:not(#canvas *)) {
  border-color: var(--wc-border-strong);
}
.stage:where(:not(#canvas *)) { background-color: var(--wc-bg-stage); background-image: radial-gradient(var(--wc-stage-dot) .7px, transparent .7px); }
.canvas-scale { border-color: var(--wc-border-strong); box-shadow: 0 5px 18px var(--wc-shadow-color), 0 1px 2px var(--wc-shadow-color); }
.canvas {
  /* Authored page defaults are fixed, independently of editor appearance. Inline
     page styles still win, as do styles inside isolated page preview frames. */
  color: #222b39;
  color-scheme: only light;
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --blue-light: #edf4ff;
  --text: #222b39;
  --muted: #8a929f;
  --line: #e9ecf1;
  --surface: #f6f7f9;
}
.canvas-element.is-selected { outline-width: 2px; }
.canvas-element.is-selected, .canvas-element[contenteditable="true"]:focus,
.canvas-element.drop-inside, .canvas-region.drop-inside { outline-color: var(--wc-canvas-selection); }
.canvas-element.is-selected::before, .canvas-element.is-selected::after { border-color: var(--wc-canvas-selection); }
.canvas-element.drop-before, .canvas-element.drop-after { outline-color: var(--wc-canvas-selection); }
.shared-element.is-selected, .component-reference.is-selected { outline-color: var(--wc-canvas-global-selection); }
.shared-element.is-selected::before, .shared-element.is-selected::after,
.component-reference.is-selected::before, .component-reference.is-selected::after { border-color: var(--wc-canvas-global-selection); }
.canvas-region > .region-label, .canvas-region > .region-empty,
.canvas-group > .component-caption, .component-reference > .component-caption,
.embedded-select, .drag-grip, .resize-handle {
  color-scheme: normal;
  color: var(--wc-text-secondary);
}
.canvas-region > .region-label, .canvas-region > .region-empty, .embedded-select,
.drag-grip, .resize-handle { background-color: var(--wc-bg-soft); border-color: var(--wc-accent-border); }
.canvas-region > .region-label { border: 0; }
.canvas-empty, .canvas-group > .component-caption, .component-reference > .component-caption {
  color: var(--wc-text-secondary);
  background: var(--wc-bg-soft);
}
.canvas :is(.region-label, .region-empty, .embedded-select, .drag-grip, .resize-handle):focus-visible,
.canvas .global-badge:focus-visible {
  outline: 3px solid var(--wc-canvas-selection);
  outline-offset: 3px;
}
.preview-stage iframe:where(:not(#canvas *)), .canvas-content-frame, .custom-html-frame { color-scheme: only light; }
.canvas-region.is-active > .region-label, .embedded-select:hover,
.drag-grip:hover, .resize-handle:hover { color: var(--wc-accent); background-color: var(--wc-accent-soft); }
.element-label, .resize-size-label, .drop-indicator-label {
  color: var(--wc-on-accent); background: var(--wc-accent-fill);
}
.drop-indicator-label.is-invalid { color: var(--wc-on-accent); background: var(--wc-danger-fill); }
.left-panel .layer-tag:where(:not(#canvas *)), .left-panel .page-content-badge:where(:not(#canvas *)) { color: var(--wc-text-muted); }
.layer-item.selected:where(:not(#canvas *)), .layer-item.is-selected:where(:not(#canvas *)),
.page-row.active:where(:not(#canvas *)), .page-row.is-selected:where(:not(#canvas *)), .page-item.active:where(:not(#canvas *)),
.layout-region-button.active:where(:not(#canvas *)), .guide-nav button.active:where(:not(#canvas *)),
.guide-nav button[aria-selected="true"]:where(:not(#canvas *)) {
  background: var(--wc-accent-soft);
  border-color: var(--wc-accent-border);
  box-shadow: inset 3px 0 0 var(--wc-accent);
  font-weight: 650;
}
.device-button.active:where(:not(#canvas *)), .style-toggle.active:where(:not(#canvas *)), .style-toggle[aria-pressed="true"]:where(:not(#canvas *)),
.auth-tabs button.active:where(:not(#canvas *)), .auth-tabs button[aria-selected="true"]:where(:not(#canvas *)) {
  color: var(--wc-accent);
  background: var(--wc-accent-soft);
  box-shadow: inset 0 0 0 1px var(--wc-accent-border), 0 1px 3px var(--wc-shadow-color);
  font-weight: 700;
}
.code-tab.active:where(:not(#canvas *))::after { height: 3px; }
.code-tab.active .tab-file:where(:not(#canvas *)) { color: var(--wc-accent); }
.learning-toggle input:checked + .switch-track:where(:not(#canvas *)) { background: var(--wc-accent-fill); }
.switch-track:where(:not(#canvas *)) { background: var(--wc-disabled-border); }
.learning-toggle input:focus-visible + .switch-track:where(:not(#canvas *)) { outline: 3px solid var(--wc-focus); }

.field .input:where(:not(#canvas *)),
.inspector input:not([type="range"]):not([type="color"]):not([type="checkbox"]):where(:not(#canvas *)),
.inspector textarea:where(:not(#canvas *)), .inspector select:where(:not(#canvas *)),
.advanced-panel textarea:where(:not(#canvas *)), .advanced-panel select:where(:not(#canvas *)),
.advanced-panel input:not([type="checkbox"]):not([type="color"]):not([type="range"]):where(:not(#canvas *)),
.dialog-field input:where(:not(#canvas *)), .dialog-field textarea:where(:not(#canvas *)), .dialog-field select:where(:not(#canvas *)),
.component-create-fields > input:where(:not(#canvas *)), .cloud-local-cache:where(:not(#canvas *)), .theme-select:where(:not(#canvas *)),
.preview-head select:where(:not(#canvas *)) {
  color: var(--wc-text-primary);
  background-color: var(--wc-bg-input);
  border-color: var(--wc-input-border);
}
.page-name-field:where(:not(#canvas *)), .color-field:where(:not(#canvas *)) { background: var(--wc-bg-input); border-color: var(--wc-input-border); }
.page-name-field input:where(:not(#canvas *)) { color: var(--wc-text-primary); }
.inspector .color-field input[type="text"]:where(:not(#canvas *)) { background: transparent; border: 0; }
.dialog-field select:where(:not(#canvas *)), .preview-head select:where(:not(#canvas *)) {
  min-height: 33px;
  padding: 6px 9px;
  border: 1px solid var(--wc-input-border);
  border-radius: 6px;
  font: inherit;
}
:is(.inspector, .advanced-panel, .dialog-field, .component-create-fields, .page-name-field) :is(input,textarea):where(:not(#canvas *))::placeholder {
  color: var(--wc-text-muted);
  opacity: 1;
}
:is(.inspector, .advanced-panel, .dialog-field) :is(input,select,textarea):focus:where(:not(#canvas *)),
.page-name-field:focus-within:where(:not(#canvas *)), .color-field:focus-within:where(:not(#canvas *)), .component-create-fields > input:focus:where(:not(#canvas *)) {
  border-color: var(--wc-focus);
  box-shadow: 0 0 0 2px var(--wc-accent-soft);
}
:is(.inspector, .advanced-panel, .dialog-field) :is(input,select,textarea):focus-visible:where(:not(#canvas *)),
.component-create-fields > input:focus-visible:where(:not(#canvas *)), .theme-select:focus-visible:where(:not(#canvas *)) {
  outline: 3px solid var(--wc-focus);
  outline-offset: 2px;
}
.page-name-field:has(input:focus-visible):where(:not(#canvas *)) { outline: 3px solid var(--wc-focus); outline-offset: 2px; }
.preview-dialog:where(:not(#canvas *)), .studio-dialog:where(:not(#canvas *)), .export-dialog:where(:not(#canvas *)) { color: var(--wc-text-primary); background: var(--wc-bg-panel); border-color: var(--wc-border-strong); }
.studio-dialog-header:where(:not(#canvas *)), .preview-head:where(:not(#canvas *)) { background: var(--wc-bg-panel); }
.studio-dialog-footer:where(:not(#canvas *)), .guide-nav:where(:not(#canvas *)), .sitemap-toolbar:where(:not(#canvas *)) { background: var(--wc-bg-soft); }
.account-dialog .account-identity-details strong:where(:not(#canvas *)), .account-dialog h3:where(:not(#canvas *)),
.pro-billing-price:where(:not(#canvas *)), .plan-comparison h3:where(:not(#canvas *)) { color: var(--wc-text-primary); }
.account-message:where(:not(#canvas *)), .account-status:where(:not(#canvas *)), .billing-price:where(:not(#canvas *)), .billing-renewal:where(:not(#canvas *)),
.billing-status-message:where(:not(#canvas *)), .billing-test-note:where(:not(#canvas *)), .pro-feature-list:where(:not(#canvas *)), .pro-checkout-note:where(:not(#canvas *)) {
  color: var(--wc-text-secondary);
}
.billing-status-message.is-error:where(:not(#canvas *)), .billing-status-message[data-kind="error"]:where(:not(#canvas *)) { color: var(--wc-danger); }
.billing-status-message.is-success:where(:not(#canvas *)), .billing-status-message[data-kind="success"]:where(:not(#canvas *)) { color: var(--wc-success); }
.cloud-project-row.is-active:where(:not(#canvas *)) { border-color: var(--wc-accent-border); background: var(--wc-accent-soft); }
.cloud-project-actions .danger-button:hover:where(:not(#canvas *)), .layer-delete:hover:where(:not(#canvas *)),
.page-delete:hover:where(:not(#canvas *)), .breadcrumb-remove:hover:where(:not(#canvas *)), .breadcrumb-delete:hover:where(:not(#canvas *)) {
  color: var(--wc-danger); background: var(--wc-danger-soft);
}
.toast:where(:not(#canvas *)) { background: var(--wc-toast-bg); color: var(--wc-on-accent); border-color: var(--wc-border-strong); }
:not(#canvas):where(:not(#canvas *))::-webkit-scrollbar-thumb { background: var(--wc-border-strong); }
.button-secondary:where(:not(#canvas *)), .add-element:where(:not(#canvas *)), .library-grid > button:where(:not(#canvas *)), .export-option:where(:not(#canvas *)) {
  border-color: var(--wc-border-strong);
}

/* Disabled controls retain sharp labels; reduced contrast and a dashed edge
   distinguish availability without fading the surrounding panel. */
button:disabled:where(:not(#canvas *)), .button:disabled:where(:not(#canvas *)),
.history-button:disabled:where(:not(#canvas *)), .history-button:disabled:hover:where(:not(#canvas *)),
.billing-actions .button:disabled:where(:not(#canvas *)) {
  opacity: 1;
  color: var(--wc-disabled-text);
  background: var(--wc-disabled-bg);
  border: 1px dashed var(--wc-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}
input:disabled:where(:not(#canvas *)), select:disabled:where(:not(#canvas *)), textarea:disabled:where(:not(#canvas *)) {
  opacity: 1;
  color: var(--wc-disabled-text);
  background: var(--wc-disabled-bg);
  border-color: var(--wc-disabled-border);
  border-style: dashed;
  cursor: not-allowed;
}

/* A compact native selector stays usable with keyboard and OS form controls. */
.theme-switch:where(:not(#canvas *)) { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--wc-text-secondary); }
.theme-switch-label:where(:not(#canvas *)) { font-size: 10px; font-weight: 600; white-space: nowrap; }
.theme-select:where(:not(#canvas *)) { width: 84px; min-width: 0; min-height: 35px; padding: 6px 5px 6px 8px; border: 1px solid var(--wc-input-border); border-radius: 7px; font-size: 10px; font-weight: 600; cursor: pointer; }
.theme-select:hover:where(:not(#canvas *)) { border-color: var(--wc-accent); }
@media (max-width: 1700px) { .theme-switch-label:where(:not(#canvas *)) { display: none; } }
@media (max-width: 1250px) { .theme-select:where(:not(#canvas *)) { width: 74px; padding-left: 6px; min-height: 34px; } }

/* Sitemap owns an injected stylesheet. Scope these rules more specifically so
   its cards, arrows and late-created details share the current UI theme. */
.sitemap-dialog .sitemap-view:where(:not(#canvas *)) { color: var(--wc-text-primary); }
.sitemap-dialog .sitemap-legend:where(:not(#canvas *)), .sitemap-dialog .sitemap-level:where(:not(#canvas *)),
.sitemap-dialog .sitemap-node small:where(:not(#canvas *)), .sitemap-dialog .sitemap-node-meta:where(:not(#canvas *)),
.sitemap-dialog .sitemap-details .sm-filename:where(:not(#canvas *)), .sitemap-dialog .sitemap-details h4:where(:not(#canvas *)),
.sitemap-dialog .sitemap-link-button small:where(:not(#canvas *)), .sitemap-dialog .sitemap-hint:where(:not(#canvas *)),
.sitemap-dialog .sitemap-note:where(:not(#canvas *)), .sitemap-dialog .sitemap-global-title:where(:not(#canvas *)),
.sitemap-dialog .sitemap-global-middle:where(:not(#canvas *)), .sitemap-dialog .sitemap-components-label:where(:not(#canvas *)),
.sitemap-dialog .sitemap-component-chip small:where(:not(#canvas *)), .sitemap-dialog .sitemap-empty:where(:not(#canvas *)) {
  color: var(--wc-text-secondary);
}
.sitemap-dialog .sitemap-scroll:where(:not(#canvas *)) { background: var(--wc-bg-stage); border-color: var(--wc-border); }
.sitemap-dialog .sitemap-board:where(:not(#canvas *)) { background-image: radial-gradient(var(--wc-stage-dot) 1px, transparent 1px); }
.sitemap-dialog .sitemap-node:where(:not(#canvas *)), .sitemap-dialog .sitemap-details:where(:not(#canvas *)),
.sitemap-dialog .sitemap-global-chip:where(:not(#canvas *)), .sitemap-dialog .sitemap-component-chip:where(:not(#canvas *)) {
  background: var(--wc-bg-panel); color: var(--wc-text-primary); border-color: var(--wc-border-strong);
}
.sitemap-dialog .sitemap-node:hover:where(:not(#canvas *)) { color: var(--wc-text-primary); border-color: var(--wc-accent); }
.sitemap-dialog .sitemap-node.sm-active:where(:not(#canvas *)) { background: var(--wc-accent-soft); border-color: var(--wc-accent); box-shadow: 0 0 0 3px var(--wc-selection-wash); }
.sitemap-dialog .sitemap-badge:where(:not(#canvas *)), .sitemap-dialog .sitemap-link-button:where(:not(#canvas *)) {
  color: var(--wc-accent); background: var(--wc-accent-soft);
}
.sitemap-dialog .sitemap-badge.sm-unconnected:where(:not(#canvas *)), .sitemap-dialog .sitemap-note-banner:where(:not(#canvas *)) {
  color: var(--wc-warning); background: var(--wc-warning-soft);
}
.sitemap-dialog .sitemap-global-layout:where(:not(#canvas *)) { background: var(--wc-bg-soft); border-color: var(--wc-border); }
.sitemap-dialog .sitemap-components:where(:not(#canvas *)) { border-color: var(--wc-border); }
.sitemap-dialog .sitemap-global-chip strong:where(:not(#canvas *)) { color: var(--wc-global); }
.sitemap-dialog .sitemap-edit-page:where(:not(#canvas *)) { color: var(--wc-on-accent); background: var(--wc-accent-fill); }
.sitemap-dialog .sitemap-edit-page:hover:where(:not(#canvas *)) { color: var(--wc-on-accent); background: var(--wc-accent-hover); }
.sitemap-dialog .sitemap-line:where(:not(#canvas *)) { stroke: var(--wc-text-muted); }
.sitemap-dialog .sitemap-line.sm-shared:where(:not(#canvas *)) { stroke: var(--wc-global); }
.sitemap-dialog .sitemap-line.sm-selected:where(:not(#canvas *)) { stroke: var(--wc-accent); }
.sitemap-dialog .sitemap-lines marker path:where(:not(#canvas *)) { fill: var(--wc-text-secondary); }
.sitemap-dialog .sitemap-legend i:where(:not(#canvas *)) { border-color: var(--wc-text-muted); }
.sitemap-dialog .sitemap-legend .sm-shared-key:where(:not(#canvas *)) { border-color: var(--wc-global); }
/* Legal links belong to the account UI, independently of authored page styles. */
.auth-dialog .auth-consent label { display:flex; align-items:flex-start; gap:10px; line-height:1.7; cursor:pointer; }
.auth-dialog .auth-consent input { flex-shrink:0; width:18px; height:18px; margin:4px 0 0; accent-color:var(--wc-accent-fill); }
.auth-dialog .auth-consent a, .auth-dialog .auth-legal-links a { color:var(--wc-accent); text-decoration:underline; text-underline-offset:3px; }
.auth-dialog .auth-consent p { margin:6px 0 0 28px; font-size:12px; color:var(--wc-text-secondary); }
.auth-dialog .auth-legal-links { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:16px; font-size:12px; }