:root {
  --bg: #090b10;
  --panel: rgba(18, 20, 28, .94);
  --panel-2: #151820;
  --panel-3: #1b1f29;
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f4f4f1;
  --muted: #999da8;
  --subtle: #6f7480;
  --accent: #78bfff;
  --accent-2: #f0dfa0;
  --violet: #a78bfa;
  --cyan: #6ed7d3;
  --green: #6fd39a;
  --danger: #ff6b78;
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
  --radius: 16px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }
.ambient { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .11; z-index: -1; }
.ambient-one { width: 460px; height: 460px; background: #4d9cff; top: -240px; left: 31%; }
.ambient-two { width: 520px; height: 520px; background: #c9b978; bottom: -330px; right: -100px; }

.topbar { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(10, 12, 17, .9); backdrop-filter: blur(22px); position: relative; z-index: 50; }
.brand-row, .brand, .top-actions, .mode-switcher, .canvas-actions, .breadcrumb, .composer-footer, .composer-meta { display: flex; align-items: center; }
.brand { width: max-content; color: var(--text); text-decoration: none; gap: 9px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; padding: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #11141b; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.brand-mark img { width: 24px; height: 24px; display: block; object-fit: contain; border-radius: 6px; }
.nav-item { text-decoration: none; }
.nav-glyph.osinta { width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #171b22; }
.nav-glyph.osinta img { width: 17px; height: 17px; object-fit: contain; }
.brand-name { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.brand-name strong { color: var(--accent-2); }
.brand-product { color: var(--muted); font-size: 12px; border-left: 1px solid var(--line-strong); padding-left: 10px; }
.mode-switcher { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.mode-button { border: 0; background: transparent; color: var(--muted); padding: 8px 13px; border-radius: 9px; font-size: 13px; cursor: pointer; transition: .2s ease; }
.mode-button span { margin-right: 5px; }
.mode-button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.mode-button.active { color: var(--text); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.top-actions { justify-content: flex-end; gap: 8px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; color: var(--muted); transition: .2s ease; }
.icon-button:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-3); }
.button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 600; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #07121f; background: linear-gradient(135deg, #75c3ff, #eddc9a); box-shadow: 0 7px 24px rgba(120,191,255,.17); }
.button.quiet { color: var(--muted); border-color: var(--line); background: rgba(255,255,255,.025); }
.button.dark { color: var(--text); border-color: var(--line); background: #252a35; }
.button.full { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .4; transform: none; }
.avatar-button { width: 36px; height: 36px; border: 1px solid rgba(240,223,160,.35); border-radius: 50%; background: linear-gradient(135deg, #152b43, #272a3b); color: #f0dfa0; font-size: 11px; font-weight: 700; cursor: pointer; }
.status-pill { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 11px; }
.status-pill i, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(111,211,154,.1); }
.status-pill.busy i { background: var(--accent-2); animation: pulse 1.1s infinite; }
.status-pill.error i { background: var(--danger); }

.app-shell { height: calc(100vh - 64px); display: flex; }
.sidebar { width: 232px; flex: 0 0 232px; border-right: 1px solid var(--line); background: rgba(12,14,19,.86); padding: 16px 12px 12px; display: flex; flex-direction: column; position: relative; z-index: 40; }
.sidebar-top { display: flex; align-items: center; gap: 8px; }
.new-project { width: 100%; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); cursor: pointer; text-align: left; padding: 0 13px; font-size: 13px; font-weight: 600; }
.new-project span { margin-right: 8px; color: var(--accent-2); }
.sidebar-section { margin-top: 21px; }
.section-label { min-height: 26px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; color: var(--subtle); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.section-label button { border: 0; background: none; color: var(--subtle); cursor: pointer; }
.nav-item { width: 100%; min-height: 41px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; border: 0; border-radius: 10px; padding: 0 9px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(120,191,255,.12), rgba(255,255,255,.03)); color: var(--text); box-shadow: inset 2px 0 var(--accent); }
.nav-glyph { font-size: 13px; }.nav-glyph.coral { color: var(--accent); }.nav-glyph.violet { color: var(--violet); }.nav-glyph.cyan { color: var(--cyan); }
kbd { font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--subtle); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.projects-section { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.project-list { overflow: auto; padding-right: 3px; }
.project-row { width: 100%; min-height: 43px; display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 4px 6px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.project-row:hover, .project-row.active { color: var(--text); background: rgba(255,255,255,.04); }
.project-thumb { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, #27242b, #171b24); color: var(--accent-2); font-size: 11px; font-weight: 700; }
.project-copy { min-width: 0; }.project-copy strong, .project-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.project-copy strong { font-size: 12px; font-weight: 500; }.project-copy small { margin-top: 2px; color: var(--subtle); font-size: 9px; }
.project-delete { opacity: 0; border: 0; background: none; color: var(--subtle); cursor: pointer; }.project-row:hover .project-delete { opacity: 1; }.project-delete:hover { color: var(--danger); }
.sidebar-bottom { margin-top: auto; }
.usage-card { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.usage-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.usage-heading strong { color: var(--text); font-weight: 500; }
.usage-track { height: 4px; margin: 10px 0 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }.usage-track i { display: block; width: 18%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; }
.usage-card p { margin: 0; color: var(--subtle); font-size: 9px; line-height: 1.4; }
.sidebar-links { display: grid; gap: 2px; margin-top: 8px; }.sidebar-links button, .sidebar-links a { min-height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 9px; color: var(--subtle); border: 0; border-radius: 8px; background: none; text-decoration: none; font-size: 11px; cursor: pointer; }.sidebar-links button:hover, .sidebar-links a:hover { color: var(--text); background: rgba(255,255,255,.03); }
.sidebar-scrim { display: none; }

.workspace { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.studio-view { display: none; height: 100%; padding: 12px; }.studio-view.active { display: block; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.builder-layout { height: 100%; display: grid; grid-template-columns: minmax(300px, 31%) 1fr; gap: 12px; }
.prompt-panel { display: flex; flex-direction: column; min-height: 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 22px 15px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent-2); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }.panel-heading h1 { margin-bottom: 0; font-size: 25px; letter-spacing: -.04em; line-height: 1.05; }
.conversation { flex: 1; overflow: auto; padding: 0 22px; }
.assistant-intro { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 13px 0 17px; border-bottom: 1px solid var(--line); }
.assistant-intro strong { font-size: 12px; }.assistant-intro p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.guru-orb { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(120,191,255,.25); border-radius: 11px; color: #f0dfa0; background: radial-gradient(circle at 35% 25%, #244e78, #182638 58%, #171923); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 20px rgba(0,0,0,.25); }.guru-orb.small { width: 32px; height: 32px; }.guru-orb.large { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 17px; font-size: 19px; }
.chat-turn { margin: 14px 0; }.chat-turn.user { margin-left: 26px; padding: 11px 13px; border-radius: 12px 12px 3px 12px; color: #e9e9e5; background: #252a34; font-size: 11px; line-height: 1.5; }.chat-turn.ai { display: grid; grid-template-columns: 25px 1fr; gap: 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }.chat-turn.ai .mini-orb { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: rgba(120,191,255,.12); color: var(--accent-2); }.chat-turn.ai strong { color: var(--text); }.chat-turn.loading .mini-orb { animation: pulse 1s infinite; }
.starter-block { display: grid; gap: 7px; padding: 12px 22px 9px; }.micro-label { color: var(--subtle); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }.idea-chip { min-height: 34px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; background: rgba(255,255,255,.02); color: var(--muted); font-size: 10px; cursor: pointer; text-align: left; }.idea-chip:hover { border-color: rgba(120,191,255,.28); color: var(--text); background: rgba(120,191,255,.05); }.idea-chip span { color: var(--accent); }
.composer { margin: 6px 14px 14px; border: 1px solid var(--line-strong); border-radius: 13px; background: #10131a; transition: .2s; }.composer:focus-within { border-color: rgba(120,191,255,.55); box-shadow: 0 0 0 3px rgba(120,191,255,.07); }.composer textarea, .coder-composer textarea, .lab-composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 13px 14px 6px; font-size: 11px; line-height: 1.5; }.composer textarea::placeholder, textarea::placeholder, input::placeholder { color: #5f6470; }
.composer-footer { justify-content: space-between; padding: 5px 8px 8px; }.composer-tool { width: 27px; height: 27px; border: 0; border-radius: 7px; background: transparent; color: var(--subtle); cursor: pointer; }.composer-tool:hover { background: rgba(255,255,255,.05); color: var(--text); }.composer-meta { gap: 9px; color: var(--subtle); font-size: 8px; }
.send-button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: #07121f; background: linear-gradient(135deg, #75c3ff, #eddc9a); font-weight: 800; cursor: pointer; }.send-button:disabled { opacity: .35; cursor: not-allowed; }

.canvas-panel { display: flex; flex-direction: column; min-width: 0; }
.canvas-toolbar { min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 13px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.breadcrumb { gap: 8px; min-width: 0; }.project-dot { width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--violet)); }.breadcrumb button { max-width: 190px; border: 0; background: none; color: var(--text); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }.breadcrumb span:last-child { color: var(--subtle); font-size: 8px; }
.preview-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }.preview-tabs button { min-width: 57px; border: 0; border-radius: 6px; padding: 5px 8px; background: none; color: var(--subtle); font-size: 9px; cursor: pointer; }.preview-tabs button.active { color: var(--text); background: #292e39; }
.canvas-actions { justify-content: flex-end; gap: 6px; }.canvas-actions .button { min-height: 30px; padding: 0 10px; font-size: 9px; }.viewport-toggle { display: flex; gap: 2px; margin-right: 2px; }.viewport-toggle button { width: 27px; height: 28px; border: 0; border-radius: 6px; color: var(--subtle); background: none; cursor: pointer; }.viewport-toggle button.active { color: var(--text); background: rgba(255,255,255,.07); }
.canvas-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto; background-color: #0d1016; background-image: radial-gradient(rgba(255,255,255,.065) .6px, transparent .6px); background-size: 15px 15px; }
.preview-frame { height: 100%; max-height: 850px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: white; box-shadow: 0 20px 55px rgba(0,0,0,.28); transition: width .3s ease; }.preview-frame.desktop { width: 100%; }.preview-frame.tablet { width: min(768px, 100%); }.preview-frame.mobile { width: min(390px, 100%); }.browser-chrome { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #ecebea; color: #888; font: 7px var(--mono); }.browser-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #c7c6c4; }.browser-chrome span { margin: auto; transform: translateX(-14px); }.preview-frame iframe { display: block; width: 100%; height: calc(100% - 28px); border: 0; background: white; }
.source-editor { width: 100%; height: 100%; display: grid; grid-template-columns: 44px 1fr; border: 1px solid var(--line); border-radius: 10px; background: #0b0e14; overflow: hidden; }.editor-gutter { padding: 13px 9px; color: #525866; background: #0a0c11; border-right: 1px solid var(--line); text-align: right; white-space: pre; font: 10px/1.65 var(--mono); user-select: none; }.source-editor textarea, .code-editor-shell textarea { width: 100%; height: 100%; resize: none; border: 0; outline: 0; padding: 13px 16px; background: #0c0f15; color: #d9d8d2; tab-size: 2; font: 10px/1.65 var(--mono); white-space: pre; overflow: auto; }
.canvas-footer { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 8px; }.canvas-footer > div { display: flex; align-items: center; gap: 8px; }.canvas-footer button { border: 0; background: none; color: var(--subtle); font-size: 8px; cursor: pointer; }.canvas-footer button:hover { color: var(--text); }

.code-layout { height: 100%; display: grid; grid-template-columns: 190px minmax(460px, 1fr) minmax(270px, 25%); gap: 10px; }.file-panel, .editor-panel, .coder-panel { min-width: 0; }
.code-project-head { min-height: 62px; display: grid; grid-template-columns: 34px 1fr 24px; gap: 9px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); }.project-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #65b9ff, #cdbb78); color: white; font-weight: 800; }.code-project-head strong, .code-project-head span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.code-project-head strong { font-size: 10px; }.code-project-head span { color: var(--subtle); font-size: 8px; margin-top: 2px; }.code-project-head button, .file-heading button { border: 0; background: none; color: var(--subtle); cursor: pointer; }
.file-heading { display: flex; justify-content: space-between; padding: 14px 12px 7px; color: var(--subtle); font-size: 8px; letter-spacing: .08em; }.file-tree { display: grid; }.file-tree button { min-height: 30px; border: 0; background: none; color: var(--muted); text-align: left; padding: 0 9px; font-size: 9px; cursor: pointer; }.tree-file { padding-left: 27px !important; }.tree-file span { display: inline-block; width: 19px; color: var(--accent-2); font: 8px var(--mono); }.tree-file em { float: right; color: var(--subtle); font-size: 7px; font-style: normal; }.tree-file.active { color: var(--text); background: rgba(255,255,255,.045); }.tree-file.muted { opacity: .6; }
.outline-card { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }.file-panel { position: relative; }.outline-card span, .outline-card strong { display: block; }.outline-card span { color: var(--subtle); font-size: 8px; text-transform: uppercase; }.outline-card strong { margin-top: 5px; font-size: 10px; }.outline-card p { margin: 5px 0 0; color: var(--subtle); font-size: 8px; line-height: 1.45; }
.editor-panel { display: flex; flex-direction: column; }.editor-tabs { height: 43px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.editor-tabs > button { min-width: 140px; height: 43px; border: 0; border-right: 1px solid var(--line); background: #11141b; color: var(--muted); font-size: 9px; }.editor-tabs > button.active { color: var(--text); border-top: 2px solid var(--accent); }.editor-tabs > button span { color: var(--accent-2); margin-right: 6px; }.editor-tabs > button i { margin-left: 17px; color: var(--subtle); font-style: normal; }.editor-actions { display: flex; align-items: center; gap: 5px; padding-right: 7px; }.editor-actions > button:not(.button) { height: 29px; border: 0; background: none; color: var(--subtle); font-size: 8px; cursor: pointer; }.editor-actions .button { min-height: 29px; padding: 0 9px; font-size: 8px; }
.editor-workspace { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(220px, 58%) minmax(150px, 42%); }.code-editor-shell { min-height: 0; display: grid; grid-template-columns: 46px 1fr; overflow: hidden; }.code-preview-panel { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: #fff; }.mini-toolbar { min-height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 11px; background: #171a21; color: var(--muted); font-size: 8px; }.mini-toolbar button { border: 0; background: none; color: var(--muted); cursor: pointer; }.code-preview-panel iframe { width: 100%; flex: 1; border: 0; }
.coder-panel { display: flex; flex-direction: column; }.coder-heading { min-height: 68px; display: flex; align-items: center; gap: 10px; padding: 13px; border-bottom: 1px solid var(--line); }.coder-heading .eyebrow { margin-bottom: 3px; }.coder-heading h2 { margin: 0; font-size: 14px; }.coder-messages { flex: 1; overflow: auto; padding: 13px; }.assistant-message { padding: 11px; border: 1px solid var(--line); border-radius: 11px 11px 11px 3px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 10px; line-height: 1.55; }.assistant-message.user { margin: 10px 0 10px 25px; border: 0; border-radius: 11px 11px 3px 11px; color: var(--text); background: #262b36; }.assistant-message.loading { animation: pulse 1.2s infinite; }.quick-fixes { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 13px 8px; }.quick-fixes button { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: transparent; color: var(--subtle); font-size: 8px; cursor: pointer; }.quick-fixes button:hover { color: var(--text); border-color: var(--line-strong); }.coder-composer { margin: 0 10px 10px; border: 1px solid var(--line-strong); border-radius: 11px; background: #10131a; }.coder-composer textarea { font-size: 10px; }.coder-composer > div { display: flex; align-items: center; justify-content: space-between; padding: 4px 7px 7px 11px; }.coder-composer span { color: var(--subtle); font-size: 7px; }

.prompt-lab-layout { height: 100%; display: grid; grid-template-columns: minmax(520px, 1fr) minmax(280px, 340px); gap: 12px; max-width: 1180px; margin: auto; }.prompt-chat { display: flex; flex-direction: column; }.lab-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 27px 28px 17px; border-bottom: 1px solid var(--line); }.lab-header h1 { max-width: 650px; margin-bottom: 9px; font-size: clamp(24px, 3vw, 35px); line-height: 1.05; letter-spacing: -.045em; }.lab-header p { max-width: 540px; margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.prompt-messages { flex: 1; overflow: auto; padding: 20px 28px; }.lab-welcome { max-width: 480px; margin: 6vh auto 0; text-align: center; }.lab-welcome h2 { margin-bottom: 8px; font-size: 17px; }.lab-welcome p { color: var(--muted); font-size: 11px; line-height: 1.6; }.prompt-bubble { max-width: 78%; margin: 12px 0; padding: 12px 14px; border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 11px; line-height: 1.6; }.prompt-bubble.user { margin-left: auto; color: var(--text); background: #282d38; border-radius: 13px 13px 3px 13px; }.prompt-bubble.ai { border: 1px solid var(--line); border-radius: 13px 13px 13px 3px; }.prompt-bubble.ai strong { color: var(--text); }.prompt-bubble.loading { animation: pulse 1.2s infinite; }
.lab-composer { margin: 0 20px 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: #10131a; }.lab-composer textarea { min-height: 80px; font-size: 11px; }.lab-composer > div, .lab-composer > div > div { display: flex; align-items: center; }.lab-composer > div { justify-content: space-between; padding: 6px 8px 8px; }.lab-composer > div > div span { color: var(--subtle); font-size: 8px; }.lab-composer .button span { margin-left: 7px; }
.prompt-inspector { padding: 20px; overflow: auto; }.inspector-heading { display: flex; justify-content: space-between; align-items: flex-start; }.inspector-heading strong { color: var(--accent-2); font: 12px var(--mono); }.score-ring { --score: 0deg; width: 94px; height: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 14px auto 19px; border-radius: 50%; background: radial-gradient(circle at center, #14171f 58%, transparent 59%), conic-gradient(var(--accent) var(--score), rgba(255,255,255,.07) 0); }.score-ring span { font-size: 23px; font-weight: 700; }.score-ring small { color: var(--subtle); font-size: 8px; }.blueprint-list { display: grid; gap: 5px; }.blueprint-list > div { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 9px; }.blueprint-list > div.active { border-color: rgba(111,211,154,.13); background: rgba(111,211,154,.045); }.blueprint-list i { width: 7px; height: 7px; border: 1px solid var(--subtle); border-radius: 50%; }.blueprint-list .active i { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 3px rgba(111,211,154,.09); }.blueprint-list strong, .blueprint-list small { display: block; }.blueprint-list strong { font-size: 9px; }.blueprint-list small { color: var(--subtle); font-size: 8px; margin-top: 2px; }.final-prompt-card { margin-top: 17px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.024); }.final-prompt-card > div { display: flex; justify-content: space-between; color: var(--subtle); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.final-prompt-card > div button { border: 0; background: none; color: var(--accent-2); cursor: pointer; font-size: 8px; }.final-prompt-card p { max-height: 180px; overflow: auto; margin: 11px 0 13px; color: var(--muted); font-size: 9px; line-height: 1.55; white-space: pre-wrap; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); }.modal-backdrop.open { display: flex; }.modal { width: min(580px, 100%); border: 1px solid var(--line-strong); border-radius: 18px; padding: 21px; background: #14171e; box-shadow: 0 30px 100px rgba(0,0,0,.6); }.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }.modal-head h2 { margin: 0; font-size: 22px; }.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; }.settings-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }.settings-grid input, .settings-grid select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; background: #0d1015; color: var(--text); font-size: 11px; }.span-2 { grid-column: span 2; }.toggle-row { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { color: var(--text); font-size: 10px; }.toggle-row small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.toggle-row input { width: 34px; height: 18px; accent-color: var(--accent); }.modal-note { margin-top: 13px; padding: 10px; border-radius: 9px; color: var(--subtle); background: rgba(255,255,255,.025); font-size: 8px; line-height: 1.5; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.command-palette { width: min(540px, 100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: #14171e; box-shadow: 0 30px 100px rgba(0,0,0,.65); }.command-search { height: 54px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); }.command-search span { color: var(--subtle); }.command-search input { height: 100%; border: 0; outline: 0; background: none; color: var(--text); }.command-list { display: grid; padding: 7px; }.command-list button { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; min-height: 52px; border: 0; border-radius: 9px; padding: 7px 10px; background: none; color: var(--muted); text-align: left; cursor: pointer; }.command-list button:hover { color: var(--text); background: rgba(255,255,255,.045); }.command-list strong, .command-list small { display: block; }.command-list strong { font-size: 11px; }.command-list small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.shortcuts-modal { max-width: 430px; }.shortcut-list { display: grid; gap: 3px; margin-top: 18px; }.shortcut-list div { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; }.toast { min-width: 240px; max-width: 360px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); background: #1a1e27; box-shadow: 0 16px 45px rgba(0,0,0,.35); font-size: 10px; animation: toastIn .25s ease; }.toast strong { color: var(--accent-2); margin-right: 6px; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.96); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

@media (max-width: 1120px) {
  .status-pill, .desktop-only { display: none !important; }
  .builder-layout { grid-template-columns: minmax(290px, 36%) 1fr; }
  .code-layout { grid-template-columns: minmax(440px, 1fr) 280px; }.file-panel { display: none; }
  .prompt-lab-layout { grid-template-columns: 1fr 290px; }
}
@media (max-width: 850px) {
  body { overflow: auto; }.mobile-only { display: grid !important; }.desktop-only { display: none !important; }
  .topbar { grid-template-columns: 1fr auto; height: 58px; padding: 0 10px; }.brand-row { gap: 6px; }.brand-product { display: none; }.mode-switcher { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 80; background: rgba(18,20,28,.96); box-shadow: 0 15px 45px rgba(0,0,0,.45); }.mode-button { padding: 8px 10px; font-size: 11px; }.top-actions { gap: 5px; }.top-actions .button.quiet, #commandBtn { display: none; }
  .app-shell { height: calc(100vh - 58px); }.sidebar { position: fixed; inset: 58px auto 0 0; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.45); }.sidebar.open { transform: translateX(0); }.sidebar-scrim { display: block; position: fixed; inset: 58px 0 0; z-index: 35; pointer-events: none; opacity: 0; background: rgba(0,0,0,.55); transition: .25s; }.sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .studio-view { padding: 7px 7px 72px; }.builder-layout, .code-layout, .prompt-lab-layout { grid-template-columns: 1fr; }.prompt-panel { display: none; }.canvas-toolbar { grid-template-columns: 1fr auto; }.preview-tabs { display: none; }.canvas-actions .viewport-toggle, .canvas-actions .button.quiet { display: none; }.canvas-stage { padding: 8px; }.preview-frame { min-height: 500px; }.canvas-footer { padding: 0 8px; }
  .code-layout { display: block; }.editor-panel { height: 60%; }.coder-panel { height: calc(40% - 8px); margin-top: 8px; }.editor-workspace { grid-template-rows: 1fr; }.code-preview-panel { display: none; }
  .prompt-lab-layout { display: flex; flex-direction: column; overflow: auto; }.prompt-chat { min-height: 70vh; }.prompt-inspector { overflow: visible; }.lab-header { padding: 21px 20px 14px; }.prompt-messages { padding: 16px 20px; }.lab-composer { margin: 0 12px 12px; }
}
@media (max-width: 520px) {
  .brand-name { display: none; }.top-actions .button.primary { min-width: 54px; padding: 0 10px; }.avatar-button { width: 33px; height: 33px; }.mode-button span { display: none; }
  .studio-view { padding-left: 0; padding-right: 0; }.panel { border-radius: 0; border-left: 0; border-right: 0; }.canvas-panel { height: 100%; }.breadcrumb span:last-child { display: none; }.canvas-actions .button.dark { font-size: 0; }.canvas-actions .button.dark::after { content: "↗"; font-size: 14px; }.preview-frame { border-radius: 6px; }.browser-chrome { display: none; }.preview-frame iframe { height: 100%; }
  .settings-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.modal { padding: 16px; }.lab-header .button { display: none; }.prompt-inspector { padding: 16px; }
}
.nav-glyph.green { color: var(--green); }.nav-glyph.amber { color: var(--accent-2); }.nav-glyph.gold { color: #eadb9c; }
.google-login { display:flex; align-items:center; gap:7px; color:var(--text); border-color:var(--line); background:rgba(255,255,255,.035); white-space:nowrap; }.google-g { width:18px; height:18px; display:inline-grid; place-items:center; border-radius:50%; background:#fff; color:#4285f4; font-weight:800; font-family:Arial,sans-serif; }
.cms-layout { height:100%; display:grid; grid-template-columns:minmax(520px,1fr) minmax(300px,360px); gap:12px; }.cms-main,.cms-editor { min-width:0; }.cms-header,.provider-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px; border-bottom:1px solid var(--line); }.cms-header h1,.provider-header h1,.pricing-header h1 { margin:0 0 8px; font-size:30px; letter-spacing:-.045em; }.cms-header p,.provider-header p,.pricing-header p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }.cms-header>div:last-child { display:flex; align-items:center; gap:9px; }.sync-badge { display:flex; align-items:center; gap:7px; color:var(--subtle); font-size:9px; }.sync-badge i,.connected-state i { width:7px; height:7px; border-radius:50%; background:var(--accent-2); }.sync-badge.synced i { background:var(--green); box-shadow:0 0 0 4px rgba(111,211,154,.08); }
.cms-table-head,.cms-page-row { display:grid; grid-template-columns:1fr 100px 110px 30px; align-items:center; gap:10px; padding:0 22px; }.cms-table-head { min-height:36px; color:var(--subtle); border-bottom:1px solid var(--line); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.cms-page-list { overflow:auto; }.cms-page-row { min-height:60px; border-bottom:1px solid var(--line); cursor:pointer; }.cms-page-row:hover,.cms-page-row.active { background:rgba(255,255,255,.025); }.cms-page-row strong,.cms-page-row small { display:block; }.cms-page-row strong { font-size:11px; }.cms-page-row small { margin-top:4px; color:var(--subtle); font-size:8px; }.page-status { width:max-content; padding:4px 8px; border-radius:999px; color:var(--subtle); background:rgba(255,255,255,.05); font-size:8px; }.page-status.published { color:var(--green); background:rgba(111,211,154,.08); }.cms-row-open { border:0; background:none; color:var(--subtle); cursor:pointer; }
.cms-editor { display:flex; flex-direction:column; }.cms-editor-head { display:flex; align-items:flex-start; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line); }.cms-editor-head h2 { margin:0; font-size:19px; }.cms-form { flex:1; overflow:auto; display:grid; align-content:start; gap:13px; padding:18px; }.cms-form label,.provider-fields label { display:grid; gap:7px; color:var(--muted); font-size:9px; }.cms-form input,.cms-form textarea,.provider-fields input { width:100%; border:1px solid var(--line); border-radius:9px; padding:10px; background:#0e1117; color:var(--text); outline:0; font-size:10px; }.cms-form input:focus,.cms-form textarea:focus,.provider-fields input:focus { border-color:rgba(120,191,255,.5); }.slug-field { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; background:#0e1117; overflow:hidden; }.slug-field span { padding-left:10px; color:var(--subtle); }.slug-field input { border:0; }.cms-editor-actions { display:flex; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line); }
.provider-layout { height:100%; max-width:1180px; margin:auto; display:grid; grid-template-columns:minmax(600px,1fr) 310px; gap:12px; }.provider-main { overflow:auto; }.provider-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:20px; }.provider-card { min-height:84px; display:grid; grid-template-columns:38px 1fr; gap:10px; position:relative; align-items:center; border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(255,255,255,.018); color:var(--muted); text-align:left; cursor:pointer; }.provider-card:hover,.provider-card.selected { color:var(--text); border-color:rgba(120,191,255,.35); background:rgba(120,191,255,.045); }.provider-card>span:nth-child(2) strong,.provider-card>span:nth-child(2) small { display:block; }.provider-card strong { font-size:10px; }.provider-card small { margin-top:4px; color:var(--subtle); font-size:8px; }.provider-card>i { position:absolute; right:8px; top:7px; color:var(--accent-2); font-size:7px; font-style:normal; }.provider-logo { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:#fff; background:#242936; font-weight:800; }.provider-logo.qwen{background:linear-gradient(135deg,#6c5ce7,#a38bff)}.provider-logo.openai{background:#163b32}.provider-logo.anthropic{background:#475b78}.provider-logo.google{background:linear-gradient(135deg,#4285f4,#34a853)}.provider-logo.openrouter{background:#473569}.provider-logo.custom{background:#303541}
.provider-config { margin:0 20px 20px; border:1px solid var(--line); border-radius:13px; padding:17px; background:rgba(255,255,255,.018); }.provider-config-head { display:flex; align-items:center; justify-content:space-between; }.provider-config-head strong,.provider-config-head small { display:block; }.provider-config-head strong { font-size:12px; }.provider-config-head small { margin-top:4px; color:var(--subtle); font-size:8px; }.connected-state { display:flex; align-items:center; gap:7px; color:var(--green); font-size:8px; }.provider-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.provider-side { padding:26px; overflow:auto; }.provider-side h2 { margin:0 0 11px; font-size:24px; line-height:1.08; letter-spacing:-.04em; }.provider-side>p { color:var(--muted); font-size:10px; line-height:1.6; }.provider-route { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:9px; }.provider-route strong { color:var(--text); }.security-note { margin-top:20px; padding:13px; border:1px solid rgba(111,211,154,.12); border-radius:11px; background:rgba(111,211,154,.04); }.security-note strong { color:var(--green); font-size:9px; }.security-note p { margin:5px 0 0; color:var(--subtle); font-size:8px; line-height:1.5; }
.pricing-shell { height:100%; overflow:auto; max-width:1280px; margin:auto; padding:5vh 18px; }.pricing-header { max-width:720px; margin:0 auto 36px; text-align:center; }.pricing-header h1 { font-size:clamp(32px,4vw,50px); }.pricing-header p { max-width:610px; margin:0 auto; font-size:12px; }.billing-note { width:max-content; margin:17px auto 0; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--subtle); font-size:8px; }.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }.price-card { position:relative; padding:23px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }.price-card.featured { border-color:rgba(120,191,255,.45); background:linear-gradient(180deg,rgba(120,191,255,.07),var(--panel)); transform:translateY(-8px); }.popular { position:absolute; right:13px; top:12px; color:var(--accent-2); font-size:8px; font-weight:700; text-transform:uppercase; }.plan-name { color:var(--muted); font-size:11px; font-weight:700; }.price-card h2 { margin:16px 0 9px; font-size:33px; letter-spacing:-.05em; }.price-card h2 small { margin-left:4px; color:var(--subtle); font-size:9px; font-weight:500; letter-spacing:0; }.price-card>p { min-height:40px; color:var(--muted); font-size:9px; line-height:1.5; }.price-card ul { min-height:140px; display:grid; align-content:start; gap:10px; margin:18px 0 22px; padding:16px 0 0; border-top:1px solid var(--line); list-style:none; }.price-card li { color:var(--muted); font-size:9px; }.price-card li::before { content:"✓"; margin-right:8px; color:var(--green); }
.login-modal { max-width:410px; position:relative; padding:34px; text-align:center; }.login-close { position:absolute; right:14px; top:14px; }.login-mark { margin:0 auto 18px; }.login-modal h2 { margin:0 0 10px; font-size:26px; letter-spacing:-.04em; }.login-modal>p { color:var(--muted); font-size:10px; line-height:1.55; }.google-button-host { min-height:42px; display:flex; justify-content:center; margin-top:22px; }.google-fallback { width:100%; min-height:42px; justify-content:center; margin-top:8px; color:#232323; background:#fff; }.login-modal>small { display:block; margin-top:18px; color:var(--subtle); font-size:7px; line-height:1.5; }.login-modal a { color:var(--muted); }
@media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,1fr)}.provider-layout{grid-template-columns:1fr 280px}.provider-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.google-login{font-size:0;padding:0;width:36px;justify-content:center}.cms-layout,.provider-layout{grid-template-columns:1fr;overflow:auto}.cms-main{min-height:55vh}.cms-editor{min-height:65vh}.provider-side{min-height:360px}.pricing-grid{grid-template-columns:1fr 1fr}.price-card.featured{transform:none}}
@media(max-width:560px){.cms-header,.provider-header{padding:19px;flex-direction:column}.cms-table-head,.cms-page-row{grid-template-columns:1fr 75px 28px}.cms-table-head span:nth-child(3),.cms-page-row>span:nth-child(3){display:none}.provider-grid{grid-template-columns:1fr}.provider-fields{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.pricing-shell{padding-left:8px;padding-right:8px}.price-card ul{min-height:0}}
.brand{border:0;background:none;padding:0;cursor:pointer}.brand-mark{position:relative;isolation:isolate}.brand-mark::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#f5e7b0;box-shadow:0 0 0 4px rgba(120,191,255,.12),0 0 16px #72bcff;transform:translate(-50%,-50%);animation:corePulse 2.1s ease-in-out infinite;pointer-events:none}
.osinta-portal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;background:radial-gradient(circle at center,rgba(21,41,65,.78),rgba(4,6,9,.93) 56%);backdrop-filter:blur(16px);transition:opacity .3s ease}.osinta-portal.open{opacity:1;pointer-events:auto}.portal-shell{width:min(760px,100%);min-height:560px;position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:24px;background:radial-gradient(circle at 50% 60%,rgba(120,191,255,.08),transparent 34%),#10131a;box-shadow:0 40px 130px rgba(0,0,0,.65)}.portal-close{position:absolute;right:17px;top:17px;z-index:5;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--muted);font-size:18px;cursor:pointer}.portal-copy{position:relative;z-index:3;padding:28px 30px 0;text-align:center}.portal-copy h2{margin:0;font-size:27px;letter-spacing:-.045em}.portal-copy p{margin:7px 0 0;color:var(--muted);font-size:10px}.portal-orbit{width:540px;height:340px;position:relative;margin:8px auto 0}.portal-core{position:absolute;left:50%;top:50%;z-index:6;width:116px;height:116px;border:1px solid rgba(240,223,160,.28);border-radius:50%;background:radial-gradient(circle at 40% 28%,#244e78,#182638 55%,#11141b);box-shadow:inset 0 1px rgba(255,255,255,.16),0 24px 60px rgba(0,0,0,.42),0 0 0 12px rgba(120,191,255,.035);transform:translate(-50%,-50%);cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}.portal-core:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:inset 0 1px rgba(255,255,255,.18),0 26px 70px rgba(0,0,0,.5),0 0 0 15px rgba(120,191,255,.05)}.portal-logo{position:absolute;inset:22px;z-index:3;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#10131a}.portal-logo img{width:58px;height:58px;object-fit:contain}.portal-vane{position:absolute;left:50%;top:50%;z-index:1;width:48px;height:112px;margin:-56px 0 0 -24px;border:1px solid rgba(240,223,160,.22);border-radius:90% 12% 90% 12%;background:linear-gradient(160deg,rgba(120,191,255,.32),rgba(240,223,160,.13));transform-origin:50% 50%;opacity:.1;transition:transform .65s cubic-bezier(.18,.88,.22,1.18),opacity .35s}.vane-one{transform:rotate(0deg) scale(.25)}.vane-two{transform:rotate(90deg) scale(.25)}.vane-three{transform:rotate(180deg) scale(.25)}.vane-four{transform:rotate(270deg) scale(.25)}.portal-orbit.expanded .vane-one{transform:translateY(-82px) rotate(0deg) scale(.72);opacity:.75}.portal-orbit.expanded .vane-two{transform:translateX(82px) rotate(90deg) scale(.72);opacity:.75}.portal-orbit.expanded .vane-three{transform:translateY(82px) rotate(180deg) scale(.72);opacity:.75}.portal-orbit.expanded .vane-four{transform:translateX(-82px) rotate(270deg) scale(.72);opacity:.75}
.portal-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:.55s ease}.ring-one{width:188px;height:188px}.ring-two{width:310px;height:310px;border-style:dashed}.portal-orbit.expanded .portal-ring{transform:translate(-50%,-50%) scale(1);opacity:1}.portal-orbit.expanded .ring-two{animation:orbitSpin 18s linear infinite}.portal-choice{width:176px;min-height:74px;position:absolute;top:50%;z-index:7;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(25,29,38,.96);color:var(--text);text-decoration:none;box-shadow:0 18px 48px rgba(0,0,0,.32);opacity:0;transform:translateY(-50%) scale(.45);pointer-events:none;transition:transform .62s cubic-bezier(.18,.88,.22,1.18),opacity .3s,border-color .2s}.portal-choice:hover{border-color:rgba(120,191,255,.45)}.portal-choice.cms{left:50%}.portal-choice.chat{right:50%}.portal-orbit.expanded .portal-choice{opacity:1;pointer-events:auto}.portal-orbit.expanded .portal-choice.cms{transform:translate(-250px,-50%) scale(1)}.portal-orbit.expanded .portal-choice.chat{transform:translate(250px,-50%) scale(1)}.choice-icon{width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);color:var(--accent-2);font-size:17px}.choice-icon img{width:29px;height:29px;object-fit:contain}.portal-choice strong,.portal-choice small{display:block}.portal-choice strong{font-size:11px}.portal-choice small{margin-top:4px;color:var(--subtle);font-size:8px;line-height:1.35}.portal-hint{display:block;margin:-6px 0 20px;color:var(--subtle);text-align:center;font:7px var(--mono);letter-spacing:.13em}
@keyframes corePulse{50%{box-shadow:0 0 0 7px rgba(120,191,255,.05),0 0 23px #72bcff}}@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:680px){.portal-shell{min-height:610px}.portal-orbit{width:100%;height:410px}.portal-core{top:48%}.portal-choice{width:164px;top:48%}.portal-orbit.expanded .portal-choice.cms{left:50%;transform:translate(-82px,-165px) scale(1)}.portal-orbit.expanded .portal-choice.chat{right:50%;transform:translate(82px,95px) scale(1)}.portal-copy{padding-left:18px;padding-right:18px}.portal-copy h2{font-size:23px}}