@font-face { font-family: Onest; src: url('assets/Onest-variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root { --ws-ground:#edf3fa; --ws-ink:#243e5b; --ws-muted:#536b85; --ws-accent:#1769cb; --ws-focus:#1769cb; --ws-glass:rgba(255,255,255,.68); --ws-edge:rgba(255,255,255,.88); --ws-radius:28px; --ws-thumb:#a8bbcf; --ws-track:#edf3fa; --ws-thumb-hover:#829dbb; --ws-thumb-active:#536b85; color-scheme:light; font:16px/1.5 Onest,Arial,sans-serif; color:var(--ws-ink); background:var(--ws-ground); scrollbar-color:var(--ws-thumb) var(--ws-track); scrollbar-width:thin; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; min-width:320px; background:radial-gradient(ellipse at 5% 5%,#dbe8f8 0,transparent 52%),radial-gradient(ellipse at 95% 90%,#e5ece5 0,transparent 48%),var(--ws-ground); }
a { color:inherit; text-decoration:none; cursor:pointer; }
button { font:inherit; cursor:pointer; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid var(--ws-focus); outline-offset:5px; }
a:active,button:active { opacity:.8; }
::selection { background:#b9d7ff; color:#153a66; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 20px; background:white; z-index:20; }
.skip-link:focus { top:12px; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:var(--ws-track); }
*::-webkit-scrollbar-thumb { background:var(--ws-thumb); border:2px solid var(--ws-track); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover { background:var(--ws-thumb-hover); }
*::-webkit-scrollbar-thumb:active { background:var(--ws-thumb-active); }
.workspace-header { position:relative; z-index:5; display:flex; align-items:center; gap:28px; min-height:100px; padding:20px 40px; }
.brand { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.brand img { width:112px; height:auto; object-fit:contain; }
.brand>span { font-size:14px; color:var(--ws-muted); }
.tool-nav { margin-left:auto; min-width:0; }
.fallback-nav { display:flex; flex-wrap:wrap; gap:6px; }
.fallback-nav a { padding:10px 14px; font-size:13px; border-radius:999px; }
.fallback-nav a:hover,.fallback-nav a[aria-current=page] { background:white; }
.fallback-nav svg { width:16px; height:16px; margin-right:7px; vertical-align:middle; }
.tool-nav .workspace-waterline { --n-fg:var(--ws-ink); --n-fg-soft:var(--ws-muted); --n-tint:rgba(255,255,255,.3); font-family:Onest,Arial,sans-serif; }
.tool-nav .nimbus-item { height:44px; padding:0 14px; gap:8px; font-size:13px; }
.tool-nav .nimbus-item .nv-ico svg { width:17px; height:17px; }
.tool-nav .nimbus-water { max-width:calc(100% + 28px); }
.standalone { display:flex; align-items:center; gap:8px; font-size:13px; padding:10px; border-radius:12px; white-space:nowrap; }
.standalone:hover { background:rgba(255,255,255,.8); }
.home { max-width:1180px; margin:auto; padding:46px 40px 30px; }
.home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; }
h1 { font-size:38px; line-height:1.13; font-weight:550; letter-spacing:-.035em; margin:0 0 14px; text-wrap:balance; }
.home-heading p { font-size:15px; margin:0; color:var(--ws-muted); }
.tool-count { font-size:13px; color:var(--ws-muted); padding-bottom:3px; white-space:nowrap; }
/* Three 340px folder stages + two 40px gutters = the 1100px library canvas. */
.project-folders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:40px; row-gap:46px; align-items:start; }
.project-group { min-width:0; padding-top:10px; }
.project-group:has(.gf-root[data-open]) { z-index:2; }
.project-library .project-folder { display:block; margin:0 auto; font-family:Onest,Arial,sans-serif; --gf-ink:var(--ws-ink); --gf-ink-soft:var(--ws-muted); }
.project-library .gf-root[data-tone=dark] { --gf-ink:#f5f8fc; --gf-ink-soft:#bdccdf; }
.project-library .gf-title { font-size:21px; font-weight:550; letter-spacing:-.025em; max-width:260px; }
.project-library .gf-meta { font-family:inherit; font-size:13px; letter-spacing:0; }
.project-library .gf-label { max-width:270px; }
.project-library .gf-sheet-meta { display:none; }
.project-library .gf-sheet-name { font-family:Onest,Arial,sans-serif; font-weight:550; font-size:13px; }
.project-library .gf-sheet-head { top:0; bottom:auto; left:0; right:0; min-height:36px; padding:10px 14px; background:rgba(255,255,255,.96); }
.project-library .gf-sheet--art .gf-sheet-name { color:#243e5b; }
.project-library .gf-sheet--art::after { background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.project-library .gf-sheet-art { top:36px; object-position:top; height:148px; }
.project-library .gf-shadow { opacity:.4; }
.project-library .gf-root[data-tone=dark] .gf-shadow { opacity:.32; }
.project-library .gf-hit:focus-visible { outline:0; }
.project-library .gf-hit:focus-visible~.gf-label .gf-title { text-decoration:underline; text-underline-offset:5px; }
.project-library .gf-sheet:focus-visible { outline:3px solid #1769cb; outline-offset:3px; }
.group-description { margin:25px 0 12px; font-size:13px; color:var(--ws-muted); }
.project-shortcuts { display:flex; flex-direction:column; gap:3px; }
.project-shortcuts a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:40px; padding:5px 0; font-size:13px; border-radius:8px; }
.project-shortcuts a svg { width:16px; height:16px; color:var(--ws-muted); transition:transform .2s; }
.project-shortcuts a:hover { color:var(--ws-accent); }
.project-shortcuts a:hover svg { transform:translateX(4px); color:var(--ws-accent); }
.continue-link { margin-top:38px; display:flex; align-items:center; gap:14px; font-size:13px; min-height:52px; border-radius:16px; padding:12px 18px; background:rgba(255,255,255,.5); }
.continue-link>span { color:var(--ws-muted); }
.continue-link strong { font-weight:500; }
.continue-link svg { margin-left:auto; }
.continue-link:hover { background:white; }
.home-footer { display:flex; justify-content:space-between; gap:24px; margin-top:32px; font-size:12px; color:var(--ws-muted); }
/* Plain links remain usable when the optional React enhancement cannot load. */
body[data-visual-ui=fallback] .project-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tool-card { min-width:0; display:block; padding:24px; background:rgba(255,255,255,.8); border-radius:24px; }
.card-title { display:flex; gap:10px; align-items:center; }
.card-title h2 { font-size:20px; margin:0; }
.card-description,.card-meta { font-size:13px; color:var(--ws-muted); }
.card-meta { display:flex; justify-content:space-between; gap:10px; }
.card-arrow { display:none; }
.preview-window { margin-top:16px; height:130px; overflow:hidden; }
.preview-window img { width:100%; height:100%; object-fit:cover; object-position:top; }
body[data-view=tool] { height:100dvh; overflow:hidden; }
body[data-view=tool] main { min-height:0; height:calc(100dvh - var(--header-height,100px)); }
.workbench,.frames { height:100%; min-height:0; }
.frames iframe { display:block; width:100%; height:100%; border:0; background:white; }
.frame-status { position:fixed; z-index:6; left:50%; top:calc(var(--header-height,100px) + 20px); transform:translateX(-50%); max-width:calc(100% - 32px); padding:14px 20px; background:white; border-radius:16px; box-shadow:0 8px 28px rgba(36,62,91,.12); font-size:14px; }
.frame-status button,.frame-status a { margin-left:12px; color:var(--ws-accent); border:0; background:transparent; text-decoration:underline; text-underline-offset:3px; }
.frame-status button:disabled { cursor:wait; opacity:.55; }
@media (max-width:1179px) { .project-folders { grid-template-columns:repeat(2,minmax(0,1fr)); gap:46px 32px; } }
@media (max-width:1050px) { .workspace-header { padding:18px 24px; gap:18px; flex-wrap:wrap; } .brand>span { display:none; } .tool-nav .nimbus-item { padding:0 11px; } .standalone { margin-left:auto; } .home { padding:38px 24px 26px; } .home-heading h1 { font-size:32px; } }
@media (max-width:707px) {
  .workspace-header { padding:16px; gap:18px; min-height:126px; }
  .brand img { width:104px; }
  .tool-nav { order:3; width:100%; margin:0; }
  .tool-nav .workspace-waterline { display:flex; width:100%; padding:5px; gap:0; }
  .tool-nav .nimbus-item { justify-content:center; flex:1; min-width:0; padding:0 6px; font-size:11px; height:44px; }
  .tool-nav .nv-ico { display:none; }
  .tool-nav .home-link .nimbus-label { font-size:0; }
  .tool-nav .home-link .nimbus-label::after { content:'Все'; font-size:11px; }
  .standalone { padding:4px 8px; font-size:12px; } .standalone svg { width:16px; }
  .home { padding:26px 16px 24px; }
  .home-heading { margin-bottom:22px; align-items:flex-start; }
  .home-heading h1 { font-size:30px; margin-bottom:12px; }
  .home-heading p { font-size:14px; max-width:28ch; }
  .tool-count { font-size:12px; margin-top:7px; }
  .project-folders { grid-template-columns:1fr; gap:40px; }
  .project-group { padding-top:2px; }
  .project-library .gf-root[data-open] { --gf-spread:24px; --gf-fan:3deg; }
  .group-description { margin-top:22px; }
  .project-shortcuts a { min-height:44px; }
  .home-footer { font-size:11px; flex-direction:column; gap:6px; margin-top:28px; }
  .continue-link { flex-wrap:wrap; gap:5px 12px; } .continue-link>span { width:100%; }
  .frame-status { font-size:13px; }
  body[data-visual-ui=fallback] .project-library { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .project-shortcuts a:hover svg { transform:none; } }
@media (prefers-reduced-transparency:reduce) { .tool-nav .nimbus-glass,.tool-nav .nimbus-drop { background:#f8fbff; backdrop-filter:none !important; } .tool-nav .nimbus-water { display:none; } .project-library .gf-front { backdrop-filter:none; } .project-library .gf-tint { background:#f4f7fb; } .project-library .gf-root[data-tone=dark] .gf-tint { background:#162330; } }
@supports not (backdrop-filter:blur(1px)) { .tool-nav .nimbus-glass { background:#f8fbff; } .project-library .gf-tint { background:#f4f7fb; } .project-library .gf-root[data-tone=dark] .gf-tint { background:#162330; } }
@media (prefers-contrast:more) { :root { --ws-muted:#314d6b; } .tool-nav .nimbus-glass { background:white; backdrop-filter:none; } .project-library .gf-tint { background:#f4f7fb; } .project-library .gf-root[data-tone=dark] .gf-tint { background:#162330; } }
@media (forced-colors:active) { :root { scrollbar-color:auto; } .tool-nav .nimbus-glass,.project-library .gf-front { outline:1px solid CanvasText; } a:focus-visible,button:focus-visible { outline-color:Highlight; } }
/* Two workspace-wide appearances. Tool chrome inherits the same mode. */
.workspace-chrome { position:relative; z-index:5; }
.workspace-header { gap:20px; min-height:92px; padding:18px 32px; }
.theme-switch { display:flex; flex-shrink:0; gap:2px; padding:4px; margin:0; border:0; border-radius:999px; background:rgba(255,255,255,.38); }
.theme-switch label { position:relative; cursor:pointer; }
.theme-switch input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.theme-switch span { display:block; padding:9px 14px; min-height:38px; border-radius:999px; font-size:12px; line-height:20px; color:var(--ws-muted); }
.theme-switch input:checked+span { color:var(--ws-ink); background:white; }
.theme-switch input:focus-visible+span { outline:3px solid var(--ws-focus); outline-offset:3px; }
.theme-switch label:hover span { background:rgba(255,255,255,.55); }
.theme-switch input:checked+span:hover { background:white; }
.workspace-context { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 32px 24px; }
.context-heading { min-width:0; }
.context-heading h1 { margin:0 0 8px; font-size:27px; line-height:1.2; letter-spacing:-.025em; }
.context-heading p { margin:0; max-width:64ch; color:var(--ws-muted); font-size:13px; }
.context-actions,#letter-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.shell-button { min-height:40px; border:0; border-radius:12px; padding:10px 14px; font-size:12px; line-height:20px; white-space:nowrap; }
.shell-button-primary { color:white; background:var(--ws-accent); }
.shell-button-primary:hover { background:#0055dc; }
.shell-button-secondary { color:var(--ws-ink); background:rgba(255,255,255,.8); }
.shell-button-secondary:hover { background:white; }
[data-workspace-theme=custom] [data-letter-action=download],[data-workspace-theme=custom] [data-letter-action=copy],
[data-workspace-theme=brand] [data-letter-action=liquid-open] { display:none; }
:root[data-workspace-theme=brand] { --ws-ground:#f4f7fc; --ws-ink:#141414; --ws-muted:#586b82; --ws-accent:#0064ff; --ws-focus:#aaff00; --ws-header-ink:#fff; }
[data-workspace-theme=brand] body { background:#0064ff; }
[data-workspace-theme=brand] .workspace-chrome { background:#0064ff; color:white; }
[data-workspace-theme=brand] .context-heading p { color:#fff; }
[data-workspace-theme=brand] .theme-switch { background:rgba(0,35,117,.28); }
[data-workspace-theme=brand] .theme-switch span { color:white; }
[data-workspace-theme=brand] .theme-switch input:checked+span { background:#aaff00; color:#141414; }
[data-workspace-theme=brand] .theme-switch label:hover span { background:rgba(255,255,255,.18); }
[data-workspace-theme=brand] .theme-switch input:checked+span:hover { background:#aaff00; }
[data-workspace-theme=brand] .tool-nav .workspace-waterline { --n-fg:#fff; --n-fg-soft:#fff; --n-tint:rgba(0,35,117,.2); }
[data-workspace-theme=brand] .fallback-nav a:hover,[data-workspace-theme=brand] .fallback-nav a[aria-current=page] { background:rgba(255,255,255,.18); }
[data-workspace-theme=brand] .standalone:hover { background:rgba(255,255,255,.18); }
[data-workspace-theme=brand] .shell-button-primary { color:#141414; background:#aaff00; }
[data-workspace-theme=brand] .shell-button-primary:hover { background:#bdff3d; }
[data-workspace-theme=brand] .shell-button-secondary { color:white; background:rgba(0,35,117,.24); }
[data-workspace-theme=brand] .shell-button-secondary:hover { background:rgba(0,35,117,.4); }
[data-workspace-theme=brand] .home-heading,[data-workspace-theme=brand] .home-heading p,[data-workspace-theme=brand] .tool-count,
[data-workspace-theme=brand] .group-description,[data-workspace-theme=brand] .project-shortcuts,[data-workspace-theme=brand] .home-footer { color:#fff; }
[data-workspace-theme=brand] .project-shortcuts a svg { color:#fff; }
[data-workspace-theme=brand] .project-shortcuts a:hover,[data-workspace-theme=brand] .project-shortcuts a:hover svg { color:#aaff00; }
[data-workspace-theme=brand] .project-library .gf-tint { background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.7) 40%,#fff 100%); }
[data-workspace-theme=brand] .project-library .gf-root { --gf-ink:#141414; --gf-ink-soft:#52647a; }
[data-workspace-theme=brand] .continue-link { color:#141414; background:#fff; }
[data-workspace-theme=brand] .continue-link:hover { background:#edf4ff; }
[data-workspace-theme=brand] .continue-link>span { color:#52647a; }
[data-workspace-theme=brand] .frames iframe { background:#0064ff; }
[data-workspace-theme=custom] .frames iframe { background:#edf3fa; }
@media(max-width:1200px) { .workspace-header { flex-wrap:wrap; } .tool-nav { flex-basis:100%; display:flex; justify-content:flex-end; } .workspace-context { align-items:flex-start; } .context-actions { flex-wrap:wrap; justify-content:flex-end; } .context-heading p { max-width:48ch; } }
@media(max-width:707px) {
  .workspace-header { padding:16px; gap:16px; min-height:126px; }
  .theme-switch { margin-left:auto; }
  .theme-switch span { padding:7px 12px; min-height:34px; font-size:11px; }
  .tool-nav { justify-content:initial; }
  .workspace-context { padding:6px 16px 20px; flex-wrap:wrap; gap:14px; }
  .context-heading h1 { font-size:22px; margin-bottom:7px; }
  .context-heading p { font-size:12px; }
  .context-actions { width:100%; justify-content:space-between; }
  .shell-button { min-height:38px; font-size:11px; padding:9px 11px; }
  #letter-actions { gap:6px; }
}
@media(prefers-reduced-transparency:reduce) { .theme-switch { background:#e2ebf7; } [data-workspace-theme=brand] .theme-switch { background:#0048bc; } }
@media(forced-colors:active) { .theme-switch input:checked+span { outline:2px solid Highlight; } }
@media(max-width:707px) { .context-heading p { display:none; } }
[data-workspace-theme=custom] body[data-view=tool] .workspace-chrome { background:linear-gradient(180deg,rgba(237,243,250,0),#edf3fa); }
/* Canonical palette roles shared with embedded app controls through the theme bridge. */
:root { --ws-panel:rgba(255,255,255,.72); --ws-soft:#e4effc; --ws-line:#dce6f2; --ws-panel-shadow:0 12px 36px rgba(36,62,91,.06); }
:root[data-workspace-theme=brand] { --ws-panel:#fff; --ws-soft:#e8f0ff; --ws-line:#e0e8f2; --ws-panel-shadow:none; }