1:root {2 color-scheme: light;3 --page: #ffffff;4 --surface: #ffffff;5 --surface-raised: #ffffff;6 --ink: #000000;7 --muted: #666666;8 --line: #dddddd;9 --soft: #f3f3f3;10 --accent-surface: #80ff80;11 --accent-ink: #213f21;12 --unsaved: #b45309;13 --danger: #333333;14 --editor-active-line: #0000000b;15 --editor-selection: #213f2138;16 --syntax-keyword: #111111;17 --syntax-string: #333333;18 --syntax-comment: #858585;19 --syntax-number: #444444;20 --syntax-operator: #555555;21 --syntax-variable: #222222;22 --preview-bg: #ffffff;23 --preview-light-bg: #f8fafc;24 --preview-dark-bg: #000000;25 --preview-auto-bg: var(--preview-light-bg);26 --preview-dot-light: rgba(15, 23, 42, .16);27 --preview-dot-dark: rgba(203, 213, 225, .32);28 --shadow: 0 22px 70px rgba(0, 0, 0, .12);29 --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;30 --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;31 font-family: var(--font-sans);32 font-synthesis: none;33 text-rendering: optimizeLegibility;34}3536:root[data-theme="dark"] {37 color-scheme: dark;38 --page: #18191b;39 --surface: #1d1e20;40 --surface-raised: #242528;41 --ink: #f4f4f5;42 --muted: #a5a7aa;43 --line: #45484e;44 --soft: #2a2b2e;45 --accent-surface: #213f21;46 --accent-ink: #80ff80;47 --unsaved: #f59e0b;48 --danger: #fca5a5;49 --editor-active-line: #ffffff0b;50 --editor-selection: #80ff8032;51 --syntax-keyword: #f4f4f5;52 --syntax-string: #d4d4d8;53 --syntax-comment: #92949a;54 --syntax-number: #c5c6ca;55 --syntax-operator: #b4b5b9;56 --syntax-variable: #e4e4e7;57 --preview-bg: #18191b;58 --shadow: 0 22px 70px rgba(0, 0, 0, .4);59}6061@media (prefers-color-scheme: dark) {62 :root { --preview-auto-bg: var(--preview-dark-bg); }63}6465* { box-sizing: border-box; }6667html, body, #app { height: 100%; }6869body {70 margin: 0;71 overflow: hidden;72 background: var(--page);73 color: var(--ink);74}7576.brand,77button,78.preview-stage,79.editor-tabs,80.toast {81 user-select: none;82 -webkit-user-select: none;83}8485.monaco-editor,86.monaco-editor .view-lines,87.source-editor-textarea,88.document-title,89.share-options input,90.details-fields input,91.details-fields textarea,92.details-fields select {93 user-select: text;94 -webkit-user-select: text;95}9697button, input, select, textarea { font: inherit; }98button, select, textarea { color: inherit; }99button { cursor: pointer; }100101.sr-only {102 position: absolute;103 width: 1px;104 height: 1px;105 padding: 0;106 margin: -1px;107 overflow: hidden;108 clip: rect(0, 0, 0, 0);109 white-space: nowrap;110 border: 0;111}112113.app-shell {114 display: grid;115 grid-template-rows: 44px auto minmax(0, 1fr);116 height: 100%;117}118119.app-header {120 grid-row: 1;121 display: flex;122 align-items: center;123 justify-content: space-between;124 gap: 10px;125 padding: 0 12px;126 border-bottom: 1px solid var(--line);127 background: color-mix(in srgb, var(--page), transparent 5%);128 backdrop-filter: blur(14px);129 z-index: 10;130}131132.brand {133 display: inline-flex;134 align-items: center;135 color: var(--ink);136 text-decoration: none;137}138139.brand-mark {140 width: 28px;141 height: 28px;142 display: block;143}144145.document-identity {146 display: flex;147 align-items: center;148 flex: 0 1 420px;149 gap: 0;150 min-width: 0;151}152153.document-title {154 display: block;155 width: min(34vw, 420px);156 min-width: 90px;157 padding: 3px 6px;158 border: 1px solid transparent;159 border-radius: 5px;160 background: transparent;161 color: var(--ink);162 font-size: 13.5px;163 font-weight: 600;164 letter-spacing: -.01em;165 overflow: hidden;166 text-overflow: ellipsis;167 white-space: nowrap;168}169170.document-title:hover { border-color: var(--line); }171172.document-title:focus {173 border-color: var(--muted);174 background: var(--page);175 outline: 0;176}177178.document-title::placeholder { color: var(--muted); opacity: 1; }179180.draft-bar {181 grid-row: 2;182 display: flex;183 align-items: center;184 justify-content: space-between;185 gap: 16px;186 min-height: 46px;187 padding: 7px 14px 7px 20px;188 border-bottom: 1px solid var(--line);189 background: var(--soft);190}191192.draft-bar[hidden] { display: none; }193.draft-bar p { margin: 0; font-size: 13px; }194.draft-bar div { display: flex; flex: 0 0 auto; gap: 7px; }195196.draft-reset-icon {197 display: none;198 width: 18px;199 height: 18px;200 fill: none;201 stroke: currentColor;202 stroke-linecap: round;203 stroke-linejoin: round;204 stroke-width: 1.75;205}206207.draft-bar[data-anonymous="true"] #restore-saved {208 display: inline-grid;209 width: 36px;210 min-width: 36px;211 padding: 0;212 place-items: center;213}214215.draft-bar[data-anonymous="true"] .draft-reset-icon { display: block; }216217.workspace { grid-row: 3; }218219.render-status {220 flex: 0 0 auto;221 color: var(--muted);222 font-size: 11.5px;223 white-space: nowrap;224}225226.header-spacer { flex: 1 1 auto; }227228.unsaved-indicator {229 width: 6px;230 height: 6px;231 flex: 0 0 auto;232 border-radius: 50%;233 background: var(--unsaved);234}235236.document-reset {237 display: inline-flex;238 width: 0;239 height: 24px;240 flex: 0 0 auto;241 justify-content: center;242 align-items: center;243 gap: 7px;244 margin-left: 0;245 padding: 0;246 overflow: hidden;247 border: 1px solid transparent;248 border-radius: 6px;249 background: transparent;250 color: var(--muted);251 opacity: 0;252 pointer-events: none;253 transform: translateX(-8px);254 transition:255 width 180ms cubic-bezier(.2, .8, .2, 1),256 margin-left 180ms cubic-bezier(.2, .8, .2, 1),257 border-color 140ms ease,258 opacity 100ms ease,259 transform 180ms cubic-bezier(.2, .8, .2, 1);260}261.document-reset[data-visible="true"] {262 width: 44px;263 margin-left: 7px;264 border-color: var(--line);265 opacity: 1;266 pointer-events: auto;267 transform: translateX(0);268}269.document-reset-icon {270 width: 14px;271 height: 14px;272 flex: 0 0 auto;273 fill: none;274 stroke: currentColor;275 stroke-width: 1.8;276 stroke-linecap: round;277 stroke-linejoin: round;278 transform: translateX(-8px) rotate(-24deg);279 opacity: 0;280 transition: transform 180ms cubic-bezier(.2, .8, .2, 1), opacity 120ms ease 40ms;281}282.document-reset[data-visible="true"] .document-reset-icon {283 transform: translateX(0) rotate(0);284 opacity: 1;285}286.document-reset:hover:not(:disabled) { background: var(--soft); color: var(--ink); }287.document-reset:disabled { cursor: default; opacity: .5; }288289@media (prefers-reduced-motion: reduce) {290 .document-reset,291 .document-reset-icon { transition: none; }292}293294.type-command,295.command-trigger {296 display: inline-flex;297 align-items: center;298 gap: 7px;299 min-height: 28px;300 padding: 4px 9px;301 border: 1px solid var(--line);302 border-radius: 7px;303 background: transparent;304 color: var(--muted);305 font-size: 11.5px;306 white-space: nowrap;307}308309.type-command:hover,310.command-trigger:hover { background: var(--soft); color: var(--ink); }311312.type-command svg,313.command-trigger svg {314 width: 15px;315 height: 15px;316 fill: none;317 stroke: currentColor;318 stroke-linecap: round;319 stroke-linejoin: round;320 stroke-width: 1.7;321}322323kbd {324 padding: 2px 5px;325 border: 1px solid var(--line);326 border-radius: 4px;327 background: var(--soft);328 color: var(--muted);329 font: 10.5px/1.2 var(--font-mono);330 white-space: nowrap;331}332333.primary-action,334.secondary-action,335.preview-toolbar button,336.icon-button,337.share-options button {338 min-height: 36px;339 border: 1px solid var(--line);340 border-radius: 10px;341 background: var(--surface);342}343344.primary-action {345 padding: 7px 15px;346 border-color: var(--accent-surface);347 background: var(--accent-surface);348 color: var(--accent-ink);349 font-weight: 720;350}351352.secondary-action {353 min-height: 36px;354 padding: 7px 12px;355 border: 1px solid var(--line);356 border-radius: 10px;357 background: var(--surface);358 font-weight: 680;359}360361.secondary-action:hover { background: var(--soft); }362363.workspace {364 display: grid;365 grid-template-columns: minmax(340px, .82fr) minmax(440px, 1.18fr);366 min-width: 0;367 min-height: 0;368}369370.editor-panel,371.preview-panel { min-width: 0; min-height: 0; }372373.editor-panel {374 display: grid;375 grid-template-rows: 40px minmax(0, 1fr) 30px;376 overflow: hidden;377 border-right: 1px solid var(--line);378 background: var(--surface);379}380381.editor-tabs {382 display: grid;383 grid-template-columns: repeat(2, minmax(0, 1fr));384 min-width: 0;385 padding: 0;386 border-bottom: 1px solid var(--line);387 background: var(--page);388}389390.editor-tabs button {391 min-width: 0;392 min-height: 39px;393 padding: 6px 12px;394 border: 0;395 border-right: 1px solid var(--line);396 border-radius: 0;397 background: transparent;398 color: var(--muted);399 font-size: 12px;400 font-weight: 720;401}402403.editor-tabs button:last-child { border-right: 0; }404405.editor-tabs button[aria-selected="true"] {406 background: var(--soft);407 box-shadow: inset 0 -2px 0 var(--accent-ink);408 color: var(--ink);409}410411.editor-tabs button[data-invalid="true"] { color: var(--danger); }412413.syntax-dock {414 display: flex;415 align-items: center;416 gap: 10px;417 min-width: 0;418 padding: 0 10px;419 border-top: 1px solid var(--line);420 background: var(--page);421 color: var(--muted);422 font-size: 11px;423}424425.syntax-dock-summary {426 display: inline-flex;427 flex: 0 0 auto;428 align-items: center;429 gap: 4px;430 color: var(--ink);431 font-weight: 720;432}433434.diagnostic-icon {435 width: 14px;436 height: 14px;437 overflow: visible;438 fill: none;439 stroke: currentColor;440 stroke-linecap: round;441 stroke-linejoin: round;442 stroke-width: 1.8;443}444445.diagnostic-icon [data-diagnostic-icon] { display: none; }446.syntax-dock[data-severity="none"] [data-diagnostic-icon="none"],447.syntax-dock[data-severity="error"] [data-diagnostic-icon="error"],448.syntax-dock[data-severity="warning"] [data-diagnostic-icon="warning"],449.syntax-dock[data-severity="info"] [data-diagnostic-icon="info"] { display: block; }450451.syntax-dock[data-severity="error"] .syntax-dock-summary,452.syntax-dock[data-severity="error"] .details-validation { color: var(--danger); }453.syntax-dock[data-severity="warning"] .syntax-dock-summary { color: var(--unsaved); }454.syntax-dock[data-severity="info"] .syntax-dock-summary { color: var(--accent-ink); }455456.details-validation {457 min-width: 0;458 overflow: hidden;459 text-overflow: ellipsis;460 white-space: nowrap;461}462463.editor-surfaces { position: relative; min-width: 0; min-height: 0; }464#editor,465#details-editor { position: relative; width: 100%; height: 100%; }466#editor[hidden],467#details-editor[hidden] { display: none; }468469.monaco-editor { font-size: 14px; }470471.source-editor-textarea {472 display: block;473 width: 100%;474 height: 100%;475 margin: 0;476 padding: 28px 20px 80px;477 overflow: auto;478 resize: none;479 border: 0;480 outline: 0;481 background: var(--surface);482 color: var(--ink);483 font: 14px/1.65 var(--font-mono);484 tab-size: 4;485 white-space: pre;486}487488.source-editor-textarea:focus-visible {489 box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-ink), transparent 42%);490}491492.source-editor-textarea::selection { background: var(--editor-selection); }493494.preview-panel { background: var(--preview-bg); }495496.preview-stage {497 --preview-dot: var(--preview-dot-light);498 position: relative;499 width: 100%;500 height: 100%;501 min-height: 320px;502 overflow: hidden;503 touch-action: none;504 background-image: radial-gradient(var(--preview-dot) 1px, transparent 1px);505 background-size: 20px 20px;506 cursor: grab;507 background-color: var(--render-background, var(--preview-bg));508}509510.preview-stage[data-preview-theme="dark"] { --preview-dot: var(--preview-dot-dark); }511.preview-stage[data-preview-theme="light"] { --preview-dot: var(--preview-dot-light); }512513@media (prefers-color-scheme: dark) {514 .preview-stage[data-preview-theme="auto"] { --preview-dot: var(--preview-dot-dark); }515}516517.preview-stage[data-dragging="true"] { cursor: grabbing; }518519#preview-image {520 position: absolute;521 top: 0;522 left: 0;523 max-width: none;524 transform-origin: 0 0;525 user-select: none;526 -webkit-user-drag: none;527}528529.preview-stage:has(#preview-image:not([hidden])) .preview-empty { display: none; }530531.preview-empty {532 position: absolute;533 inset: 50% auto auto 50%;534 margin: 0;535 color: var(--muted);536 transform: translate(-50%, -50%);537}538539.preview-toolbar {540 position: absolute;541 left: 14px;542 bottom: 14px;543 display: flex;544 max-width: calc(100% - 28px);545 flex-wrap: wrap;546 align-items: center;547 gap: 6px;548 padding: 5px;549 border: 1px solid var(--line);550 border-radius: 14px;551 background: color-mix(in srgb, var(--surface-raised), transparent 7%);552 box-shadow: var(--shadow);553 backdrop-filter: blur(12px);554}555556.preview-zoom-controls,557.preview-appearance-controls {558 display: flex;559 gap: 6px;560}561562.preview-toolbar-divider {563 align-self: stretch;564 width: 1px;565 min-height: 28px;566 background: var(--line);567}568569.preview-toolbar button {570 min-width: 36px;571 padding: 6px 9px;572 background: transparent;573}574575.preview-toolbar button:hover { background: var(--soft); }576.preview-toolbar button[aria-pressed="true"] {577 border-color: var(--accent-surface);578 background: var(--accent-surface);579 color: var(--accent-ink);580}581.preview-toolbar button:disabled { cursor: not-allowed; opacity: .42; }582583.preview-control-icon {584 display: block;585 width: 18px;586 height: 18px;587 fill: none;588 stroke: currentColor;589 stroke-width: 1.5;590}591592.preview-theme-fill,593.preview-transparency-fill {594 fill: currentColor;595 stroke: none;596}597598.minimap {599 position: absolute;600 right: 14px;601 bottom: 14px;602 width: 168px;603 height: 108px;604 overflow: hidden;605 border: 1px solid var(--line);606 border-radius: 12px;607 background: var(--render-background, var(--preview-bg));608 box-shadow: var(--shadow);609 cursor: crosshair;610}611612.minimap img {613 width: 100%;614 height: 100%;615 object-fit: contain;616 pointer-events: none;617 user-select: none;618}619620#minimap-viewport {621 position: absolute;622 min-width: 4px;623 min-height: 4px;624 border: 2px solid var(--accent-ink);625 background: color-mix(in srgb, var(--accent-ink), transparent 82%);626 pointer-events: none;627}628629.mobile-panel-switch { display: none; }630631dialog {632 width: min(620px, calc(100% - 28px));633 max-height: calc(100% - 28px);634 padding: 0;635 color: var(--ink);636 border: 1px solid var(--line);637 border-radius: 12px;638 background: var(--surface-raised);639 box-shadow: var(--shadow);640}641642dialog::backdrop {643 background: color-mix(in srgb, var(--page), transparent 25%);644 backdrop-filter: blur(6px);645}646647.dialog-card { padding: 20px; }648649.dialog-header {650 display: flex;651 align-items: center;652 justify-content: space-between;653 gap: 12px;654 margin: -4px -4px 20px;655 padding: 0 0 12px;656 border-bottom: 1px solid var(--line);657}658659.dialog-header h1 {660 margin: 0;661 font-size: 17px;662 font-weight: 750;663 line-height: 1.25;664 letter-spacing: -.01em;665}666667.icon-button {668 flex: 0 0 auto;669 width: 32px;670 min-height: 32px;671 padding: 0;672 border-radius: 6px;673 font-size: 20px;674 line-height: 1;675}676677.share-options { display: grid; gap: 18px; }678.share-action-list {679 display: grid;680 grid-template-columns: repeat(2, minmax(0, 1fr));681 gap: 8px;682 margin-bottom: 20px;683}684.share-action-list button { min-width: 0; }685.share-action-list button:disabled { cursor: not-allowed; opacity: .42; }686.share-action-list button:last-child { grid-column: 1 / -1; }687.share-status,688.dialog-copy {689 margin: -8px 0 20px;690 color: var(--muted);691 line-height: 1.5;692}693.share-options label > span { display: block; margin-bottom: 7px; font-weight: 700; }694.share-options label > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }695.share-options input {696 min-width: 0;697 height: 40px;698 padding: 8px 10px;699 color: var(--ink);700 border: 1px solid var(--line);701 border-radius: 9px;702 background: var(--page);703 font: 12px/1.4 var(--font-mono);704}705.share-options button { padding: 7px 13px; font-weight: 700; }706.share-options button:disabled { cursor: not-allowed; opacity: .42; }707.share-options small { display: block; margin-top: 6px; color: var(--danger); }708709.details-fields { display: grid; gap: 18px; }710.details-fields label > span { display: block; margin-bottom: 7px; font-weight: 700; }711.details-fields input,712.details-fields textarea {713 width: 100%;714 padding: 10px 12px;715 color: var(--ink);716 border: 1px solid var(--line);717 border-radius: 10px;718 background: var(--page);719 resize: vertical;720}721.details-fields input { height: 42px; }722.details-fields textarea { min-height: 108px; line-height: 1.5; }723.open-file-action { width: 100%; margin-bottom: 18px; }724.open-input-fields textarea { min-height: 150px; font: 12px/1.5 var(--font-mono); }725726.privacy-fields {727 display: flex;728 align-items: center;729 justify-content: space-between;730 gap: 18px;731 margin: 2px 0 0;732 padding: 16px;733 border: 1px solid var(--line);734 border-radius: 12px;735}736.privacy-fields legend { padding: 0 6px; font-weight: 750; }737.privacy-fields strong { display: block; margin-bottom: 4px; }738.privacy-fields p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }739.privacy-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }740.share-privacy-fields { margin: 0 0 20px; }741.form-error { min-height: 20px; margin: 12px 0 -4px; color: var(--danger); font-size: 13px; }742743.dialog-actions {744 display: flex;745 flex-wrap: wrap;746 gap: 8px;747 justify-content: flex-end;748 margin-top: 22px;749}750751.conflict-actions { justify-content: space-between; }752753.toast {754 position: fixed;755 inset: auto 14px 14px auto;756 right: 14px;757 bottom: 14px;758 z-index: 30;759 margin: 0;760 max-width: min(420px, calc(100vw - 28px));761 padding: 9px 15px;762 border: 0;763 border-radius: 11px;764 background: var(--ink);765 color: var(--page);766 font-size: 13px;767 font-weight: 740;768 line-height: 1.4;769 overflow-wrap: anywhere;770 opacity: 0;771 transform: translateY(10px);772 transition: opacity 140ms ease, transform 140ms ease;773 pointer-events: none;774}775776.toast[data-visible="true"] { opacity: 1; transform: translateY(0); }777778:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }779780/* Launcher */781.launcher-shell {782 display: grid;783 grid-template-rows: 44px minmax(0, 1fr);784 height: 100%;785 background: var(--page);786}787788.launcher-header {789 display: flex;790 align-items: center;791 gap: 10px;792 padding: 0 12px;793 border-bottom: 1px solid var(--line);794 background: var(--surface);795}796797.launcher-brand {798 display: inline-flex;799 align-items: center;800 gap: 8px;801 color: var(--muted);802 font-size: 12.5px;803 font-weight: 700;804 text-decoration: none;805}806807.launcher-brand img { width: 28px; height: 28px; }808.launcher-docs { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: var(--muted); }809.launcher-docs:hover { background: var(--soft); color: var(--ink); }810.launcher-docs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }811812.launcher-layout {813 position: relative;814 display: grid;815 grid-template-columns: 214px minmax(0, 1fr) 322px;816 min-width: 0;817 min-height: 0;818}819820.launcher-rail {821 display: flex;822 min-width: 0;823 min-height: 0;824 flex-direction: column;825 border-right: 1px solid var(--line);826 background: color-mix(in srgb, var(--surface), var(--page) 48%);827}828829.launcher-rail-scroll { min-height: 0; flex: 1; overflow: auto; padding: 12px 10px; }830.launcher-rail h2,831.launcher-catalog-heading h2,832.command-section {833 margin: 14px 8px 7px;834 color: var(--muted);835 font-size: 10.5px;836 font-weight: 700;837 letter-spacing: .1em;838 text-transform: uppercase;839}840.launcher-rail h2:first-child { margin-top: 2px; }841.launcher-rail button { font: inherit; }842.launcher-rail-scroll > button,843.launcher-group,844.launcher-recents button {845 display: flex;846 width: 100%;847 min-height: 34px;848 align-items: center;849 gap: 8px;850 padding: 7px 8px;851 border: 0;852 border-radius: 7px;853 background: transparent;854 color: var(--ink);855 font-size: 12.5px;856 text-align: left;857}858.launcher-rail-scroll > button:hover,859.launcher-group:hover,860.launcher-recents button:hover { background: var(--soft); }861.launcher-rail-scroll > button kbd { margin-left: auto; }862.launcher-action-icon { width: 16px; color: var(--muted); font-size: 16px; text-align: center; }863.launcher-group small { margin-left: auto; color: var(--muted); font-size: 11px; }864.launcher-group[data-selected="true"],865.launcher-recents button[data-selected="true"] { background: var(--accent-surface); color: var(--accent-ink); }866.launcher-group[data-selected="true"] small,867.launcher-recents button[data-selected="true"] small { color: inherit; opacity: .72; }868.launcher-recents { display: grid; gap: 1px; }869.launcher-recents button { min-height: 42px; }870.recent-glyph {871 display: grid;872 width: 24px;873 height: 20px;874 flex: 0 0 auto;875 place-items: center;876 border: 1px solid currentColor;877 border-radius: 5px;878 color: var(--muted);879 font: 9px/1 var(--font-mono);880 opacity: .72;881}882.recent-copy { min-width: 0; }883.recent-copy strong,884.recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }885.recent-copy strong { font-size: 12px; font-weight: 650; }886.recent-copy small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }887.recent-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-left: auto; border-radius: 50%; background: var(--unsaved); }888.launcher-empty { margin: 0; padding: 8px; color: var(--muted); font-size: 12px; }889.launcher-storage { display: grid; gap: 4px; padding: 10px 18px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10.5px; line-height: 1.5; }890.launcher-storage button { width: max-content; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }891892.launcher-catalog-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; }893.launcher-filter-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }894.launcher-filter { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }895.launcher-filter svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }896.launcher-filter input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }897.launcher-filter input::-webkit-search-cancel-button { display: none; }898.launcher-view-toggle { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }899.launcher-view-toggle button { min-height: 32px; padding: 6px 10px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11.5px; }900.launcher-view-toggle button:last-child { border-right: 0; }901.launcher-view-toggle button[aria-pressed="true"] { background: var(--soft); color: var(--ink); font-weight: 700; }902.launcher-catalog-scroll { min-height: 0; flex: 1; overflow: auto; padding: 14px; }903.launcher-catalog-heading { display: flex; align-items: center; gap: 10px; margin: 14px 2px 9px; }904.launcher-catalog-heading:first-child { margin-top: 0; }905.launcher-catalog-heading h2 { margin: 0; }906.launcher-catalog-heading span { height: 1px; flex: 1; background: var(--line); }907.launcher-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }908.launcher-format-grid button {909 display: flex;910 min-width: 0;911 flex-direction: column;912 gap: 7px;913 padding: 9px;914 border: 1px solid var(--line);915 border-radius: 9px;916 background: var(--surface);917 color: var(--ink);918 text-align: left;919}920.launcher-format-grid button:hover { border-color: var(--muted); }921.launcher-format-grid button[data-selected="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }922:root[data-theme="dark"] .launcher-format-grid button[data-selected="true"] { border-color: #80ff80; box-shadow: 0 0 0 1px #80ff80; }923.launcher-preview-frame {924 position: relative;925 display: grid;926 overflow: hidden;927 place-items: center;928 color: var(--muted);929}930.launcher-preview-frame img {931 position: absolute;932 inset: 0;933 width: 100%;934 height: 100%;935 box-sizing: border-box;936 object-fit: contain;937}938.launcher-preview-placeholder {939 display: grid;940 place-items: center;941 gap: 6px;942 color: #7e8691;943 transition: opacity 120ms ease;944}945.launcher-preview-placeholder svg { width: 34px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }946.launcher-preview-placeholder small { font-size: 10px; font-weight: 600; }947.launcher-preview-frame[data-preview-state="ready"] .launcher-preview-placeholder { opacity: 0; }948.launcher-preview-frame[data-preview-state="error"] .launcher-preview-placeholder { color: #8b5e5e; }949.format-icon { display: grid; width: 100%; height: 58px; place-items: center; border-radius: 6px; background: var(--soft); color: var(--muted); }950.format-icon svg { width: 58px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }951.format-copy strong,952.format-copy small { display: block; }953.format-copy strong { font-size: 12.5px; font-weight: 700; }954.format-copy small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }955.launcher-catalog-scroll[data-view="list"] .launcher-format-grid { grid-template-columns: 1fr; gap: 4px; }956.launcher-catalog-scroll[data-view="list"] .launcher-format-grid button { min-height: 50px; flex-direction: row; align-items: center; }957.launcher-catalog-scroll[data-view="list"] .format-icon { width: 64px; height: 42px; flex: 0 0 auto; }958.launcher-catalog-scroll[data-view="list"] .format-icon svg { width: 45px; height: 36px; }959.launcher-no-match { display: grid; height: 100%; place-content: center; justify-items: center; color: var(--muted); text-align: center; }960.launcher-no-match strong { color: var(--ink); font-size: 14px; }961.launcher-no-match p { max-width: 440px; font-size: 12.5px; line-height: 1.5; }962.launcher-no-match button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }963964.launcher-detail { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface), var(--page) 48%); }965.launcher-detail-preview {966 width: 100%;967 height: clamp(240px, 30vh, 330px);968 flex: 0 0 auto;969 border-bottom: 1px solid var(--line);970 background-color: color-mix(in srgb, var(--surface), var(--page) 48%);971 background-image: radial-gradient(color-mix(in srgb, var(--muted), transparent 70%) 1px, transparent 1px);972 background-size: 15px 15px;973}974.launcher-detail-preview img { padding: 22px; }975.launcher-detail-preview .launcher-preview-placeholder { padding: 12px 16px; border-radius: 7px; background: var(--surface); }976.launcher-detail-preview .launcher-preview-placeholder svg { width: 48px; height: 32px; }977.launcher-detail-body { min-height: 0; flex: 1; overflow: auto; padding: 14px; }978.launcher-detail-body h1 { margin: 0; font-size: 16px; letter-spacing: -.01em; }979.launcher-detail-body > p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }980.launcher-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }981.launcher-tags span { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 10px; }982.launcher-detail-body dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 11.5px; }983.launcher-detail-body dt { color: var(--muted); }984.launcher-detail-body dd { margin: 0; overflow-wrap: anywhere; }985.launcher-detail-body pre { max-height: 250px; margin: 14px 0 0; padding: 9px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--page); color: var(--ink); font: 10.5px/1.65 var(--font-mono); white-space: pre-wrap; }986.launcher-detail-footer { display: flex; flex: 0 0 auto; gap: 7px; padding: 11px 14px; border-top: 1px solid var(--line); }987.launcher-detail-footer .primary-action { flex: 1; justify-content: center; }988989/* Editor command palette */990.command-dialog {991 width: min(600px, calc(100% - 28px));992 max-height: min(620px, calc(100% - 56px));993 padding: 0;994 overflow: hidden;995 border-radius: 13px;996}997.command-dialog[open] { margin-top: 60px; }998.command-dialog::backdrop { background: rgba(0, 0, 0, .46); backdrop-filter: none; }999.command-card { display: flex; max-height: min(620px, calc(100vh - 100px)); flex-direction: column; }1000.command-search { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); color: var(--muted); }1001.command-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }1002.command-search input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }1003.command-search input::-webkit-search-cancel-button { display: none; }1004.command-scope { padding: 3px 6px; border-radius: 5px; background: var(--accent-surface); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; }1005.command-results { min-height: 80px; overflow: auto; padding: 6px; }1006.command-section { margin: 8px 10px 5px; }1007.command-option { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }1008.command-option:hover:not(:disabled),1009.command-option[aria-selected="true"]:not(:disabled) { background: var(--accent-surface); color: var(--accent-ink); }1010.command-option:disabled { cursor: not-allowed; opacity: .42; }1011.command-option-copy { min-width: 0; }1012.command-option-copy strong,1013.command-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }1014.command-option-copy strong { font-size: 13px; font-weight: 700; }1015.command-option-copy small { margin-top: 2px; color: var(--muted); font-size: 11px; }1016.command-option[aria-selected="true"] small { color: currentColor; opacity: .74; }1017.command-option-spacer { flex: 1; }1018.command-option[aria-selected="true"] kbd { border-color: currentColor; background: transparent; color: currentColor; }1019.command-empty { margin: 0; padding: 30px 12px; color: var(--muted); font-size: 13px; text-align: center; }1020.command-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10.5px; }1021.command-footer span:last-child { margin-left: auto; }10221023.paste-dialog .details-fields select { width: 100%; height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }1024.paste-dialog textarea { min-height: 220px; font-family: var(--font-mono); }10251026@media (max-width: 760px) {1027 .app-shell { grid-template-rows: 44px auto minmax(0, 1fr); }1028 .render-status { display: none; }1029 .app-header { padding-left: 14px; }1030 .brand-mark { width: 28px; height: 28px; }1031 .document-identity { flex-basis: 140px; }1032 .document-title { width: 100%; font-size: 13px; }1033 .draft-bar { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px 14px; }1034 .draft-bar div { display: grid; grid-template-columns: 1fr 1fr; }1035 .draft-bar[data-anonymous="true"] div { display: flex; justify-content: flex-end; }1036 .workspace { grid-row: 3; display: block; width: 100%; overflow: hidden; }1037 .workspace[data-mobile-panel="editor"] .preview-panel,1038 .workspace[data-mobile-panel="preview"] .editor-panel { display: none; }1039 .editor-panel, .preview-panel { width: 100%; height: 100%; border-right: 0; }1040 .mobile-panel-switch {1041 position: fixed;1042 right: 14px;1043 bottom: calc(44px + env(safe-area-inset-bottom, 0px));1044 z-index: 9;1045 display: grid;1046 width: 52px;1047 height: 52px;1048 padding: 0;1049 place-items: center;1050 touch-action: manipulation;1051 border: 1px solid color-mix(in srgb, var(--accent-ink), transparent 58%);1052 border-radius: 50%;1053 background: var(--accent-surface);1054 color: var(--accent-ink);1055 box-shadow: var(--shadow);1056 }1057 .mobile-panel-switch:active { transform: translateY(1px); }1058 .mobile-panel-switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }1059 .mobile-panel-switch svg {1060 width: 24px;1061 height: 24px;1062 fill: none;1063 stroke: currentColor;1064 stroke-linecap: round;1065 stroke-linejoin: round;1066 stroke-width: 1.8;1067 }1068 .mobile-panel-switch[data-target-panel="preview"] [data-panel-icon="editor"],1069 .mobile-panel-switch[data-target-panel="editor"] [data-panel-icon="preview"] { display: none; }1070 .minimap {1071 right: 14px;1072 bottom: calc(110px + env(safe-area-inset-bottom, 0px));1073 width: 132px;1074 height: 88px;1075 }1076 .privacy-fields { align-items: stretch; flex-direction: column; }1077 .privacy-actions { justify-content: flex-start; }1078 .share-action-list { grid-template-columns: 1fr; }1079 .share-action-list button:last-child { grid-column: auto; }1080}10811082@media (max-width: 480px) {1083 .app-header { gap: 8px; }1084 .document-identity { flex: 0 0 auto; }1085 .document-title { display: block; max-width: 150px; }1086}10871088@media (max-width: 1080px) {1089 .launcher-layout { grid-template-columns: 190px minmax(0, 1fr) 282px; }1090 .launcher-format-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }1091}10921093@media (max-width: 820px) {1094 .launcher-layout { grid-template-columns: 178px minmax(0, 1fr); }1095 .launcher-detail {1096 position: absolute;1097 right: 12px;1098 bottom: 12px;1099 width: min(310px, calc(100% - 202px));1100 max-height: calc(100% - 24px);1101 z-index: 5;1102 border: 1px solid var(--line);1103 border-radius: 11px;1104 box-shadow: var(--shadow);1105 overflow: hidden;1106 }1107 .launcher-detail-preview { height: 120px; }1108 .launcher-detail-body pre { max-height: 130px; }1109 .launcher-catalog-scroll { padding-bottom: 220px; }1110 .command-dialog[open] { margin-top: 28px; }1111}11121113@media (max-width: 620px) {1114 .launcher-layout { display: block; overflow: auto; }1115 .launcher-rail { min-height: 310px; border-right: 0; border-bottom: 1px solid var(--line); }1116 .launcher-rail-scroll { overflow: visible; }1117 .launcher-catalog-pane { min-height: 620px; }1118 .launcher-detail {1119 position: fixed;1120 right: 8px;1121 bottom: 8px;1122 left: 8px;1123 width: auto;1124 max-height: 42vh;1125 }1126 .launcher-detail-preview,1127 .launcher-detail-body pre { display: none; }1128 .launcher-detail-body { padding: 12px; }1129 .launcher-detail-body dl { margin-top: 8px; }1130 .launcher-filter-bar { position: sticky; top: 0; z-index: 3; background: var(--page); }1131 .launcher-view-toggle { display: none; }1132 .launcher-catalog-scroll { overflow: visible; padding-bottom: 280px; }1133 .launcher-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }1134 .type-command span { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }1135 .command-trigger svg { display: none; }1136 .command-footer span:last-child { display: none; }1137}11381139@media (max-width: 390px) {1140 .primary-action, .secondary-action { padding-inline: 9px; }1141 .preview-toolbar { bottom: 10px; left: 10px; }1142 .mobile-panel-switch, .minimap { right: 10px; }1143}