:root {
  --bg: #070a11;
  --surface: #0b1019;
  --surface-2: #0e1420;
  --surface-3: #111925;
  --line: rgba(156, 177, 205, .13);
  --line-strong: rgba(156, 177, 205, .22);
  --text: #edf3fb;
  --muted: #8591a3;
  --muted-2: #5e6a7c;
  --blue: #6ca8ff;
  --blue-2: #3a7fe5;
  --cyan: #69d7dc;
  --warm: #e6ab6a;
  --sidebar: 254px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-width: 320px; color: var(--text); }
button, textarea { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; }
button:focus-visible, textarea:focus-visible { outline: 2px solid rgba(108,168,255,.8); outline-offset: 3px; }
svg { display: block; width: 20px; height: 20px; }
.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 72% -10%, rgba(23, 45, 88, .18), transparent 33rem), var(--bg); }
.sidebar { width: var(--sidebar); height: 100vh; position: sticky; top: 0; flex: 0 0 var(--sidebar); display: flex; flex-direction: column; padding: 26px 15px 17px; border-right: 1px solid var(--line); background: rgba(7, 10, 17, .8); }
.brand-row { display: flex; gap: 11px; align-items: center; padding: 0 12px 28px; }
.brand-mark { width: 27px; height: 27px; position: relative; display: grid; place-items: center; transform: rotate(-15deg); }
.brand-mark-core { width: 11px; height: 11px; position: relative; z-index: 2; border-radius: 50%; background: linear-gradient(140deg, #c3e3ff, #5c9bf5 70%); box-shadow: 0 0 18px rgba(100,171,255,.75); }
.brand-mark-orbit { position: absolute; inset: 3px -2px; border: 1px solid rgba(110, 175, 255, .8); border-radius: 50%; transform: rotate(57deg); }
.brand-mark-orbit.orbit-two { inset: 0 5px; transform: rotate(-57deg); border-color: rgba(107, 215, 220, .58); }
.brand-lockup { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: -.035em; }
.brand-name em { font-style: normal; color: #81b7ff; }
.brand-label { color: var(--muted-2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.workspace-switcher { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; margin-bottom: 29px; border: 1px solid var(--line); border-radius: 9px; background: rgba(16, 23, 35, .6); text-align: left; transition: .2s ease; }
.workspace-switcher:hover { border-color: var(--line-strong); background: rgba(19, 29, 45, .76); }
.workspace-avatar { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #bfe0ff; background: linear-gradient(145deg, #1e3e70, #132342); font-size: 11px; font-weight: 650; }
.workspace-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.workspace-copy strong { font-size: 11px; font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-copy small { color: var(--muted-2); font-size: 10px; }
.workspace-switcher > svg { width: 15px; height: 15px; color: var(--muted-2); }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-title { margin: 0 12px 7px; color: #596578; font-size: 9px; letter-spacing: .105em; text-transform: uppercase; font-weight: 650; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 7px; background: transparent; color: #7f8a9c; font-size: 12px; text-align: left; transition: .18s ease; }
.nav-item svg { width: 16px; height: 16px; color: #667487; }
.nav-item:hover { color: #c5d1e0; background: rgba(24, 36, 54, .56); }
.nav-item.active { color: #e7f1ff; background: linear-gradient(90deg, rgba(38, 80, 140, .46), rgba(25, 44, 74, .22)); }
.nav-item.active:before { content: ""; position: absolute; left: -15px; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: #77b2ff; box-shadow: 0 0 13px rgba(119,178,255,.75); }
.nav-item.active svg { color: #8abbff; }
.nav-item kbd { margin-left: auto; color: #637188; font-size: 9px; font-family: inherit; }
.nav-count { margin-left: auto; color: #657286; font-size: 9px; letter-spacing: .08em; }
.new-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(105,215,220,.7); }
.secondary-nav { margin-top: 28px; }
.sidebar-spacer { flex: 1; min-height: 35px; }
.usage-card { padding: 13px 12px 12px; border: 1px solid rgba(111, 149, 205, .18); border-radius: 9px; background: linear-gradient(135deg, rgba(17, 37, 68, .72), rgba(11, 20, 34, .5)); }
.usage-heading { display: flex; justify-content: space-between; margin-bottom: 9px; color: #99a9c0; font-size: 10px; }
.usage-heading strong { color: #bad4f4; font-size: 10px; font-weight: 600; }
.usage-track { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(124, 152, 189, .16); }
.usage-track span { display: block; height: 100%; width: 42%; border-radius: 4px; background: linear-gradient(90deg, #4b89ef, #68cddc); }
.usage-card p { margin: 8px 0 10px; color: #6e7f97; font-size: 9px; }
.usage-card button { padding: 0; color: #9dc4f5; background: transparent; font-size: 10px; }
.usage-card button span { margin-left: 3px; color: #c1dcfa; }
.user-row { display: flex; align-items: center; gap: 9px; padding: 15px 5px 0; }
.user-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #cde6ff; background: linear-gradient(145deg, #285785, #172c4e); font-size: 9px; font-weight: 650; }
.user-row > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.user-row strong { font-size: 10px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row small { color: #637084; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { width: 31px; height: 31px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(17, 24, 36, .72); color: #8e9aab; transition: .18s ease; }
.icon-button:hover { color: #d1e2f7; border-color: rgba(137, 175, 221, .35); background: #152238; }
.icon-button svg { width: 16px; height: 16px; }
.icon-button.subtle { width: 26px; height: 26px; border-color: transparent; background: transparent; }
.icon-button.subtle:hover { border-color: var(--line); background: rgba(26, 37, 54, .7); }
.main-content { flex: 1; min-width: 0; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: #718096; font-size: 11px; }
.breadcrumbs svg { width: 13px; height: 13px; color: #475366; }
.breadcrumbs strong { color: #c5d1df; font-weight: 550; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.system-status { display: flex; align-items: center; gap: 7px; margin-right: 9px; color: #718398; font-size: 10px; }
.system-status i, .preview-footer i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #57c6a7; box-shadow: 0 0 0 3px rgba(87,198,167,.1), 0 0 9px rgba(87,198,167,.45); }
.top-avatar { border: 1px solid rgba(135, 185, 247, .35); }
.page-content { max-width: 1500px; padding: 46px 40px 35px; margin: 0 auto; }
.hero-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 3px 30px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #7897c1; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 650; }
.eyebrow-line { display: inline-block; width: 17px; height: 1px; background: #4c94ef; box-shadow: 0 0 9px rgba(76,148,239,.6); }
h1 { max-width: 650px; margin: 12px 0 9px; font-size: clamp(31px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.055em; font-weight: 460; }
h1 span { color: #75aeff; font-weight: 570; }
.hero-copy { max-width: 545px; margin: 0; color: #8290a4; font-size: 13px; line-height: 1.6; }
.hero-actions { display: flex; gap: 8px; padding-bottom: 3px; }
.button { height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 7px; font-size: 11px; font-weight: 570; transition: .18s ease; }
.button svg { width: 15px; height: 15px; }
.primary-button { border: 1px solid rgba(106, 170, 255, .45); color: #ecf5ff; background: linear-gradient(135deg, #2d70c7, #24529d); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 5px 18px rgba(20, 72, 145, .2); }
.primary-button:hover { background: linear-gradient(135deg, #3883de, #2a60b5); transform: translateY(-1px); }
.secondary-button { color: #a0aec0; border: 1px solid var(--line); background: rgba(15, 22, 33, .86); }
.secondary-button:hover { color: #e0eaf7; border-color: var(--line-strong); background: #111c2c; }
.studio-grid { display: grid; grid-template-columns: minmax(360px, .91fr) minmax(560px, 1.31fr); gap: 15px; min-height: 656px; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(11, 16, 25, .82); box-shadow: 0 14px 50px rgba(0,0,0,.12); }
.panel-header { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.panel-title, .preview-heading { display: flex; align-items: center; gap: 10px; }
.panel-title strong, .preview-heading strong { display: block; color: #dce8f7; font-size: 12px; font-weight: 600; }
.panel-title small, .preview-heading small { display: block; margin-top: 3px; color: #6f7e92; font-size: 10px; }
.panel-title small i { width: 5px; height: 5px; display: inline-block; margin: 0 4px 1px 5px; border-radius: 50%; background: #5fc6a2; }
.ai-avatar, .mini-ai-avatar { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(105, 186, 255, .42); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #98d8ff, #3679cc 45%, #142b57 100%); box-shadow: 0 0 15px rgba(50, 132, 231, .2); }
.ai-avatar { width: 29px; height: 29px; }
.ai-avatar span, .mini-ai-avatar span { width: 11px; height: 11px; border: 1px solid rgba(227, 246, 255, .85); border-radius: 50%; box-shadow: 0 0 5px rgba(207, 240, 255, .75); }
.ai-avatar:after, .mini-ai-avatar:after { content: ""; position: absolute; width: 25px; height: 10px; border: 1px solid rgba(180, 228, 255, .6); border-radius: 50%; transform: rotate(35deg); }
.mini-ai-avatar { width: 19px; height: 19px; }
.mini-ai-avatar span { width: 7px; height: 7px; }
.mini-ai-avatar:after { width: 17px; height: 7px; }
.conversation-panel { display: flex; flex-direction: column; }
.conversation { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 8px; scrollbar-width: thin; scrollbar-color: #233149 transparent; }
.conversation::-webkit-scrollbar { width: 5px; }.conversation::-webkit-scrollbar-thumb { border-radius: 5px; background: #233149; }
.date-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: #57657a; font-size: 9px; letter-spacing: .03em; }
.date-divider:before, .date-divider:after { content: ""; height: 1px; flex: 1; background: var(--line); }
.date-divider span { white-space: nowrap; }
.message { margin-bottom: 21px; }
.message-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #8996a8; font-size: 10px; }
.message-meta time { color: #526073; font-size: 9px; }
.user-message { padding-left: 14%; }
.user-message .message-meta { justify-content: end; }
.message-bubble { padding: 12px 14px; border: 1px solid rgba(103, 157, 224, .19); border-radius: 9px 2px 9px 9px; color: #becbdd; background: rgba(23, 43, 69, .58); font-size: 11px; line-height: 1.55; }
.assistant-message { padding-right: 2%; }
.assistant-message .message-meta { color: #b0c2d9; }
.message-copy { padding-right: 7px; color: #a1adbd; font-size: 11px; line-height: 1.62; }
.artifact-card { display: flex; gap: 11px; margin-top: 13px; padding: 9px; border: 1px solid rgba(114, 158, 213, .2); border-radius: 8px; background: linear-gradient(125deg, rgba(19, 30, 47, .95), rgba(12, 19, 30, .9)); transition: .2s ease; }
.artifact-card:hover { border-color: rgba(124, 182, 247, .4); transform: translateY(-1px); }
.artifact-thumb { width: 88px; height: 74px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(110, 160, 226, .22); border-radius: 5px; background: #101a28; }
.thumb-top { height: 14px; display: flex; align-items: center; gap: 3px; padding: 0 5px; border-bottom: 1px solid rgba(255,255,255,.09); background: #182435; }
.thumb-top i { width: 3px; height: 3px; border-radius: 50%; background: #6780a1; }.thumb-top span { margin-left: 4px; color: #7f97b7; font-size: 4px; }
.thumb-body { position: relative; height: 60px; padding: 11px 8px; background: radial-gradient(circle at 75% 75%, rgba(67, 148, 210, .34), transparent 55%), #131f2f; }
.thumb-kicker { width: 25px; height: 2px; margin-bottom: 5px; background: #85bed8; }.thumb-title { width: 47px; height: 4px; margin-bottom: 3px; border-radius: 3px; background: #d1dbdf; }.thumb-title.short { width: 33px; }.thumb-button { width: 20px; height: 5px; margin-top: 7px; border-radius: 2px; background: #5c9de8; }.thumb-orb { position: absolute; right: 10px; bottom: 4px; width: 23px; height: 23px; border: 1px solid rgba(130, 220, 225, .55); border-radius: 50%; box-shadow: 0 0 12px rgba(65, 176, 220, .5); }
.artifact-info { min-width: 0; padding: 2px 2px 0; }.artifact-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #6f9bd0; font-size: 9px; }.artifact-label em { padding: 2px 4px; color: #7e91aa; border: 1px solid var(--line); border-radius: 3px; font-size: 8px; font-style: normal; }.sparkle { color: #75c8e4; font-size: 11px; }.artifact-info strong { display: block; overflow: hidden; color: #cbd8e7; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.artifact-info p { margin: 5px 0 7px; color: #65758a; font-size: 9px; }.text-button { padding: 0; color: #87b8ef; background: transparent; font-size: 10px; transition: .18s ease; }.text-button:hover { color: #c2e1ff; }.text-button span { margin-left: 3px; }
.quick-prompts { padding: 3px 0 10px; }.quick-prompts p { margin: 0 0 8px; color: #5f6c7d; font-size: 9px; }.quick-prompts > div { display: flex; flex-wrap: wrap; gap: 5px; }.quick-prompts button { padding: 6px 8px; border: 1px solid rgba(112, 146, 190, .18); border-radius: 5px; color: #8291a5; background: rgba(17, 26, 40, .72); font-size: 9px; text-align: left; transition: .18s ease; }.quick-prompts button:hover { color: #c0d4ed; border-color: rgba(118, 175, 236, .35); background: #142237; }
.composer { padding: 11px 18px 17px; border-top: 1px solid var(--line); background: rgba(8, 12, 19, .62); }.composer-box { border: 1px solid rgba(105, 152, 211, .27); border-radius: 8px; background: #0e1724; transition: .2s ease; }.composer-box:focus-within { border-color: rgba(102, 168, 245, .65); box-shadow: 0 0 0 3px rgba(50, 117, 204, .1); }.composer textarea { width: 100%; min-height: 39px; max-height: 100px; display: block; resize: none; padding: 11px 12px 6px; border: 0; outline: 0; color: #d4e1ef; background: transparent; font-size: 11px; line-height: 1.45; }.composer textarea::placeholder { color: #5d6b7e; }.composer-bottom { min-height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px 6px 10px; }.composer-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }.composer-tool { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: #738198; background: transparent; }.composer-tool:hover { color: #b8cee8; background: rgba(66, 96, 133, .2); }.composer-tool svg { width: 14px; height: 14px; }.composer-hint { overflow: hidden; color: #4d5b6c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.send-button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(102, 170, 248, .4); border-radius: 6px; color: #e6f3ff; background: #245da8; transition: .18s ease; }.send-button:hover { background: #367bd1; transform: translateX(1px); }.send-button svg { width: 15px; height: 15px; }
.preview-panel { min-width: 0; display: flex; flex-direction: column; }.preview-header { padding-left: 21px; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #63d2c3; box-shadow: 0 0 0 4px rgba(99,210,195,.08), 0 0 12px rgba(99,210,195,.48); }.preview-actions { display: flex; align-items: center; gap: 8px; }.device-toggle { display: flex; align-items: center; height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #0b111b; }.device-toggle button { height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 4px; color: #607086; background: transparent; font-size: 9px; }.device-toggle button:hover { color: #a6bad3; }.device-toggle button.active { color: #c6dbf3; background: #1a2d47; box-shadow: inset 0 0 0 1px rgba(115,170,236,.16); }.device-toggle svg { width: 13px; height: 13px; }.preview-stage { flex: 1; display: flex; min-height: 0; flex-direction: column; padding: 18px 19px 14px; background: radial-gradient(circle at 50% 30%, rgba(23, 45, 78, .22), transparent 55%), #0a1019; }.browser-frame { min-height: 0; flex: 1; overflow: hidden; border: 1px solid rgba(124, 161, 205, .26); border-radius: 8px; background: #101821; box-shadow: 0 22px 36px rgba(0,0,0,.25); transition: width .3s ease; }.browser-bar { height: 31px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid rgba(130, 158, 192, .16); background: #151f2c; }.browser-dots { display: flex; gap: 4px; }.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #46566c; }.browser-dots i:first-child { background: #a67670; }.browser-dots i:nth-child(2) { background: #a8986d; }.browser-dots i:nth-child(3) { background: #638b79; }.address-bar { width: 42%; height: 17px; display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: 25%; border: 1px solid rgba(153, 178, 212, .11); border-radius: 4px; color: #73849c; background: #101821; font-size: 8px; }.lock-icon { color: #68b8bb; font-size: 10px; transform: rotate(-45deg); }.browser-spacer { flex: 1; }
.site-preview { min-height: 100%; overflow: hidden; color: #e9e7df; background: #142029; font-family: Georgia, "Times New Roman", serif; }.site-nav { height: 65px; display: flex; align-items: center; gap: 20px; padding: 0 34px; border-bottom: 1px solid rgba(235,239,231,.11); }.site-logo { display: flex; align-items: center; gap: 7px; color: #f1f2e9; font-family: Inter, sans-serif; font-size: 12px; letter-spacing: -.02em; }.site-logo span { width: 11px; height: 11px; display: inline-block; border: 1px solid #9ac4be; border-radius: 50%; box-shadow: inset 0 0 0 2px #142029, 0 0 0 1px #9ac4be; }.site-nav-links { display: flex; gap: 22px; margin-left: auto; color: #9baaa8; font-family: Inter, sans-serif; font-size: 9px; }.site-nav-links a { cursor: pointer; }.site-nav-links a:hover { color: #e6ede4; }.site-nav-button { display: flex; align-items: center; gap: 7px; margin-left: 11px; padding: 8px 11px; border: 1px solid rgba(184,214,203,.28); border-radius: 3px; color: #dcebe1; background: rgba(139, 183, 173, .06); font-family: Inter, sans-serif; font-size: 8px; }.site-nav-button span { color: #9bc8be; font-size: 11px; }.mobile-menu { display: none; margin-left: auto; color: #d3e4dc; background: transparent; }
.site-hero { position: relative; min-height: 344px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 54px 8% 42px 9%; overflow: hidden; background: radial-gradient(circle at 83% 50%, rgba(58, 111, 112, .28), transparent 33%), #142b30; }.site-hero:before { content: ""; position: absolute; top: -50%; right: -11%; width: 65%; height: 170%; border: 1px solid rgba(183, 220, 207, .1); border-radius: 50%; transform: rotate(-21deg); }.site-overline { display: flex; align-items: center; gap: 7px; color: #a6c9bc; font-family: Inter, sans-serif; font-size: 9px; letter-spacing: .075em; text-transform: uppercase; }.site-overline span { width: 21px; height: 1px; background: #a5c9bb; }.site-hero-copy { position: relative; z-index: 1; max-width: 345px; }.site-hero h2 { margin: 15px 0 13px; color: #f1f2e8; font-size: clamp(36px, 4.1vw, 57px); line-height: .92; letter-spacing: -.075em; font-weight: 400; }.site-hero h2 i { color: #b5d6c7; font-style: italic; }.site-hero p { max-width: 310px; margin: 0; color: #a8bcba; font-family: Inter, sans-serif; font-size: 10px; line-height: 1.6; }.site-hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-family: Inter, sans-serif; }.site-hero-actions button { display: flex; gap: 8px; align-items: center; padding: 10px 13px; border-radius: 3px; color: #1b3030; background: #c1dfd0; font-size: 9px; font-weight: 650; }.site-hero-actions button span { font-size: 14px; }.site-hero-actions a { color: #c2d9d1; font-size: 9px; }.site-hero-actions a span { color: #94c5bb; margin-left: 3px; }.site-note { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: #7e9b99; font-family: Inter, sans-serif; font-size: 8px; line-height: 1.4; }.note-avatars { display: flex; }.note-avatars i { width: 17px; height: 17px; display: grid; place-items: center; margin-left: -4px; border: 1px solid #25484b; border-radius: 50%; color: #b4d9cb; background: #316061; font-size: 5px; font-style: normal; }.note-avatars i:first-child { margin-left: 0; background: #8b7165; }.note-avatars i:nth-child(2) { background: #5e7780; }.note-avatars i:last-child { color: #a4c1b8; background: #284548; }.site-art { position: relative; height: 270px; }.art-glow { position: absolute; top: 25%; left: 17%; width: 59%; height: 52%; border-radius: 50%; background: rgba(69, 157, 162, .28); filter: blur(32px); }.art-ring { position: absolute; top: 15%; left: 12%; width: 73%; height: 71%; border: 1px solid rgba(146, 209, 200, .24); border-radius: 50%; transform: rotate(-25deg); }.ring-b { top: 8%; left: 27%; width: 44%; height: 88%; transform: rotate(37deg); border-color: rgba(155, 211, 196, .16); }.art-card { position: absolute; border: 1px solid rgba(199, 230, 218, .28); border-radius: 5px; color: #d2e5d9; background: rgba(42, 72, 72, .78); box-shadow: 0 16px 30px rgba(0,0,0,.2); font-family: Inter, sans-serif; }.card-back { top: 20%; right: 6%; width: 130px; padding: 13px; transform: rotate(8deg); color: #b4cdc5; background: rgba(53, 85, 83, .45); }.card-back small { display: block; margin-bottom: 12px; color: #8bb0a8; font-size: 7px; letter-spacing: .11em; }.card-back strong { display: block; font-size: 20px; font-weight: 450; letter-spacing: -.06em; }.card-back span { display: block; margin-top: 5px; color: #a1d0be; font-size: 7px; }.card-front { top: 33%; left: 18%; width: 174px; padding: 14px 14px 11px; transform: rotate(-7deg); background: rgba(38, 68, 70, .94); }.card-header { display: flex; justify-content: space-between; color: #a6c6bb; font-size: 7px; letter-spacing: .08em; }.card-number { margin: 14px 0 17px; color: #e5eee6; font-size: 23px; letter-spacing: -.06em; }.card-number span { color: #abcfc1; font-size: 11px; }.chart { height: 39px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid rgba(203, 229, 218, .2); }.chart i { width: 9px; border-radius: 2px 2px 0 0; background: linear-gradient(to top, #76b8ab, #c1e3ce); opacity: .8; }.chart i:nth-child(even) { opacity: .43; }.chart-labels { display: flex; justify-content: space-between; margin-top: 4px; color: #72928c; font-size: 6px; }.art-star { position: absolute; color: #b6dad0; font-size: 17px; }.star-one { top: 11%; right: 20%; }.star-two { bottom: 10%; left: 9%; color: #77aaa3; font-size: 26px; }.site-proof { display: grid; grid-template-columns: repeat(3,1fr); padding: 25px 8% 24px; background: #f0eee7; color: #253936; }.site-proof > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 7px; padding: 0 15px; border-right: 1px solid rgba(35, 71, 63, .14); }.site-proof > div:first-child { padding-left: 0; }.site-proof > div:last-child { border-right: 0; }.site-proof span { grid-row: span 2; color: #82a99b; font-family: Inter, sans-serif; font-size: 8px; }.site-proof strong { font-size: 12px; font-weight: 500; letter-spacing: -.03em; }.site-proof small { margin-top: 5px; color: #718580; font-family: Inter, sans-serif; font-size: 8px; line-height: 1.35; }
.preview-footer { display: flex; justify-content: space-between; align-items: center; padding: 13px 1px 0; color: #607084; font-size: 9px; }.preview-footer span { display: flex; align-items: center; gap: 7px; }.preview-footer > div { display: flex; gap: 17px; }.preview-footer .text-button { font-size: 9px; }
.bottom-strip { display: grid; grid-template-columns: 1.35fr .95fr; gap: 15px; margin-top: 15px; }.insight-card, .shortcut-card { min-height: 96px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(11,16,25,.65); }.insight-card { gap: 14px; padding: 18px 20px; }.insight-icon { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(110,178,232,.23); border-radius: 8px; color: #83c6dc; background: #13273a; font-size: 16px; }.insight-card span { display: block; margin-bottom: 5px; color: #6585a8; font-size: 8px; letter-spacing: .12em; font-weight: 650; }.insight-card strong { display: block; color: #c6d5e6; font-size: 11px; font-weight: 570; }.insight-card p { margin: 5px 0 0; color: #718094; font-size: 10px; }.shortcut-card { display: block; padding: 16px 18px; }.shortcut-title { display: flex; justify-content: space-between; margin-bottom: 15px; color: #91a0b2; font-size: 10px; }.shortcut-title .text-button { font-size: 9px; }.shortcut-list { display: flex; gap: 18px; color: #6e7d91; font-size: 9px; }.shortcut-list span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }.shortcut-list kbd { min-width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 3px; color: #98a8bb; background: #111a27; font-family: inherit; font-size: 9px; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 10px 13px 10px 10px; border: 1px solid rgba(104, 181, 224, .3); border-radius: 7px; color: #cee4f5; background: #132438; box-shadow: 0 14px 30px rgba(0,0,0,.32); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast-icon { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #082522; background: #6ed3b9; font-size: 10px; font-weight: 800; }
.modal-backdrop { position: fixed; z-index: 15; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2,5,9,.72); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }.modal-backdrop.open { opacity: 1; pointer-events: auto; }.modal { position: relative; width: min(830px, 100%); overflow: hidden; border: 1px solid rgba(129, 172, 225, .25); border-radius: 13px; background: #0b111b; box-shadow: 0 30px 100px rgba(0,0,0,.5); transform: translateY(10px) scale(.98); transition: .22s ease; }.modal-backdrop.open .modal { transform: translateY(0) scale(1); }.modal-header { display: flex; justify-content: space-between; padding: 28px 30px 24px; border-bottom: 1px solid var(--line); }.modal-eyebrow { margin-bottom: 8px; color: #6c98cc; font-size: 9px; letter-spacing: .14em; font-weight: 650; }.modal-header h2 { margin: 0 0 8px; color: #e8f0f8; font-size: 23px; font-weight: 470; letter-spacing: -.04em; }.modal-header p { margin: 0; color: #8391a5; font-size: 11px; }.modal-close { width: 28px; height: 28px; display: grid; place-items: center; color: #738197; background: transparent; font-size: 23px; font-weight: 250; }.modal-close:hover { color: #d7e5f4; }.api-content { display: flex; min-height: 340px; }.api-rail { width: 150px; flex: 0 0 150px; padding: 18px 11px; border-right: 1px solid var(--line); }.api-tab { width: 100%; padding: 9px 10px; border-radius: 6px; color: #738196; background: transparent; font-size: 10px; text-align: left; }.api-tab:hover { color: #b7cae1; }.api-tab.active { color: #cce3ff; background: #14273e; }.api-rail-note { display: flex; gap: 8px; align-items: center; margin: 28px 7px 0; padding-top: 17px; border-top: 1px solid var(--line); }.status-pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #61cda9; box-shadow: 0 0 9px rgba(97,205,169,.7); }.api-rail-note strong, .api-rail-note small { display: block; }.api-rail-note strong { color: #acbdcf; font-size: 9px; font-weight: 600; }.api-rail-note small { margin-top: 3px; color: #637187; font-size: 8px; }.api-main { flex: 1; min-width: 0; padding: 25px 28px; }.api-view { display: none; }.api-view.active { display: block; }.endpoint-pill { display: flex; align-items: center; width: max-content; max-width: 100%; margin-bottom: 23px; border: 1px solid rgba(112, 157, 218, .22); border-radius: 5px; overflow: hidden; background: #0f1a29; }.endpoint-pill .method { padding: 7px 8px; color: #74caae; background: rgba(65, 156, 125, .12); font-size: 9px; font-weight: 700; }.endpoint-pill code { padding: 0 12px; color: #b9cee9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }.copy-button { padding: 6px 8px; border-left: 1px solid var(--line); color: #769bd0; background: transparent; font-size: 9px; }.copy-button:hover { color: #c7e0ff; background: rgba(50,96,151,.2); }.api-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 22px; }.api-stats > div { padding: 11px 10px; border: 1px solid var(--line); border-radius: 6px; }.api-stats strong, .api-stats span { display: block; }.api-stats strong { color: #bacade; font-size: 9px; font-weight: 580; }.api-stats span { margin-top: 5px; color: #647286; font-size: 8px; }.code-window { overflow: hidden; border: 1px solid rgba(106, 146, 201, .2); border-radius: 7px; background: #080e16; }.code-window-top { height: 31px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--line); }.code-window-top > span { display: flex; gap: 4px; }.code-window-top i { width: 5px; height: 5px; border-radius: 50%; background: #52677f; }.code-window-top small { color: #65748a; font-size: 8px; }.code-window-top .copy-button { margin-left: auto; border: 0; }.code-window pre { overflow-x: auto; margin: 0; padding: 15px 14px 17px; color: #abc2d6; font: 9px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }.code-muted { color: #71a4df; }.code-string { color: #a3cba9; }.quickstart-copy { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }.quickstart-copy:first-child { padding-top: 0; }.quickstart-copy:last-child { border-bottom: 0; }.step-number { color: #5d8fc7; font: 10px ui-monospace, monospace; }.quickstart-copy h3 { margin: 0 0 5px; color: #cddbea; font-size: 11px; font-weight: 600; }.quickstart-copy p { margin: 0 0 9px; color: #7e8da1; font-size: 10px; line-height: 1.5; }.quickstart-copy code, .reference-row code, .modal-footer code { color: #91c8db; font-family: ui-monospace, monospace; font-size: 9px; }.inline-code { width: max-content; max-width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; color: #7999bd; background: #0d1723; font: 8px ui-monospace, monospace; }.reference-row { display: grid; grid-template-columns: 105px 1fr; gap: 5px 15px; padding: 13px 0; border-bottom: 1px solid var(--line); }.reference-row code { color: #c2d8ef; }.reference-row span { color: #6487ac; font-size: 9px; }.reference-row p { grid-column: 2; margin: 1px 0 0; color: #7c8b9f; font-size: 10px; }.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; border-top: 1px solid var(--line); color: #6f7e91; font-size: 9px; }.modal-footer .button { height: 31px; }.small-modal { width: min(360px, 100%); padding: 31px; text-align: center; }.small-modal .modal-close { position: absolute; top: 12px; right: 12px; }.generic-icon { width: 43px; height: 43px; display: grid; place-items: center; margin: 0 auto 15px; border: 1px solid rgba(110,181,232,.3); border-radius: 12px; color: #8bd3e3; background: #122a40; }.small-modal h2 { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }.small-modal p { margin: 0 auto 22px; color: #7d8ca1; font-size: 11px; line-height: 1.55; }.small-modal .button { width: 100%; }
.mobile-menu { font-size: 15px; }
@media (max-width: 1200px) { .sidebar { width: 220px; flex-basis: 220px; }.topbar, .page-content { padding-left: 28px; padding-right: 28px; }.studio-grid { grid-template-columns: minmax(320px, .82fr) minmax(490px, 1.18fr); }.site-nav { padding: 0 24px; }.site-nav-links { gap: 12px; }.site-hero { padding-left: 6%; padding-right: 5%; }.card-front { left: 9%; } }
@media (max-width: 980px) { .sidebar { width: 68px; flex-basis: 68px; padding-left: 10px; padding-right: 10px; }.brand-row { padding: 0 10px 28px; }.brand-lockup, .workspace-copy, .workspace-switcher > svg, .nav-title, .nav-item span:not(.new-dot), .nav-item kbd, .usage-card, .user-row > div:nth-child(2), .user-row .icon-button { display: none; }.workspace-switcher { justify-content: center; padding: 8px; }.nav-item { justify-content: center; padding: 11px 0; }.nav-item.active:before { left: -10px; }.secondary-nav { margin-top: 20px; }.user-row { justify-content: center; padding-left: 0; padding-right: 0; }.topbar { padding-left: 24px; padding-right: 24px; }.page-content { padding-left: 24px; padding-right: 24px; }.studio-grid { grid-template-columns: 1fr; }.conversation-panel { min-height: 600px; }.preview-panel { min-height: 650px; }.bottom-strip { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .topbar { height: 60px; padding: 0 16px; }.system-status { display: none; }.page-content { padding: 32px 14px 26px; }.hero-row { display: block; padding-bottom: 24px; }.hero-actions { margin-top: 18px; }.hero-copy { font-size: 12px; }.studio-grid { gap: 12px; }.panel-header { padding: 0 15px; }.conversation { padding-left: 15px; padding-right: 15px; }.user-message { padding-left: 3%; }.composer { padding-left: 12px; padding-right: 12px; }.composer-hint { display: none; }.preview-stage { padding: 12px; }.browser-frame { min-height: 570px; }.site-nav { height: 53px; padding: 0 17px; }.site-nav-links, .site-nav-button { display: none; }.mobile-menu { display: block; }.site-hero { min-height: 402px; display: block; padding: 45px 28px 25px; }.site-hero h2 { font-size: 43px; }.site-art { height: 164px; margin-top: 13px; }.art-card.card-front { top: 14%; left: 24%; transform: scale(.76) rotate(-7deg); transform-origin: top left; }.art-card.card-back { top: 2%; right: 2%; transform: scale(.7) rotate(8deg); transform-origin: top right; }.art-ring { top: -5%; left: 28%; width: 61%; height: 100%; }.site-proof { padding: 20px 16px; display: block; }.site-proof > div, .site-proof > div:first-child { padding: 9px 0; border-right: 0; border-bottom: 1px solid rgba(35,71,63,.14); }.site-proof > div:last-child { border-bottom: 0; }.preview-footer { align-items: flex-start; gap: 10px; flex-direction: column; }.preview-footer > div { gap: 13px; }.bottom-strip { margin-top: 12px; }.insight-card { align-items: flex-start; padding: 15px; }.shortcut-card { min-height: 90px; }.modal-backdrop { padding: 12px; }.modal-header { padding: 22px 20px 20px; }.modal-header h2 { font-size: 20px; }.api-content { min-height: 380px; }.api-rail { width: 108px; flex-basis: 108px; padding-left: 8px; padding-right: 8px; }.api-main { padding: 20px 15px; }.api-stats { grid-template-columns: 1fr; gap: 6px; }.api-stats > div { padding: 8px 9px; }.api-stats span { display: inline; margin-left: 4px; }.modal-footer { align-items: flex-start; flex-direction: column; gap: 11px; padding: 13px 20px; }.modal-footer .button { width: 100%; }.reference-row { grid-template-columns: 77px 1fr; }.reference-row p { grid-column: 1 / -1; }.code-window pre { font-size: 8px; } }
@media (max-width: 430px) { .sidebar { display: none; }.breadcrumbs span { color: #a6b7ca; }.breadcrumbs strong { display: none; }.breadcrumbs svg { display: none; }.topbar-actions { gap: 5px; }.hero-actions .button { flex: 1; }.hero-actions { display: flex; }.conversation-panel { min-height: 620px; }.artifact-card { gap: 8px; }.artifact-thumb { width: 78px; }.quick-prompts > div { flex-direction: column; }.quick-prompts button { width: 100%; }.device-toggle button:first-child { padding-left: 5px; padding-right: 5px; }.device-toggle button:first-child { font-size: 0; }.device-toggle button:first-child svg { margin: 0; }.site-hero { padding-left: 23px; padding-right: 23px; }.site-hero h2 { font-size: 39px; }.api-content { flex-direction: column; }.api-rail { width: 100%; flex-basis: auto; display: flex; gap: 3px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }.api-tab { width: auto; flex: 1; text-align: center; }.api-rail-note { display: none; }.api-main { padding-top: 17px; }.endpoint-pill code { padding-left: 8px; padding-right: 8px; } }

/* Creation modes, files, authentication, and capability surfaces */
.auth-actions { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.auth-link { padding: 7px 4px; color: #9aa9bb; background: transparent; font-size: 10px; }
.auth-link:hover { color: #e1edf9; }
.auth-cta { height: 30px; padding: 0 10px; font-size: 10px; }
.creation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 9px 8px 10px; margin: 0 0 15px; border: 1px solid rgba(119, 154, 204, .16); border-radius: 10px; background: rgba(10, 16, 26, .74); }
.creator-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.creator-tab { height: 31px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; color: #718095; background: transparent; font-size: 10px; white-space: nowrap; transition: .18s ease; }
.creator-tab:hover { color: #c1d2e6; background: rgba(28, 42, 63, .52); }
.creator-tab.active { color: #d8eaff; border-color: rgba(102, 164, 235, .25); background: linear-gradient(135deg, rgba(34, 76, 130, .68), rgba(23, 44, 76, .52)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.creator-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; color: #87baff; font-size: 14px; line-height: 1; }
.creator-tab:not(.active) .creator-icon { color: #667b98; }
.creator-meta { display: flex; align-items: center; gap: 8px; min-width: 0; color: #687a92; font-size: 9px; white-space: nowrap; }
.mode-badge { padding: 4px 6px; border: 1px solid rgba(105, 182, 204, .22); border-radius: 4px; color: #82bbc6; background: rgba(42, 119, 125, .12); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.upload-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(128, 157, 193, .18); border-radius: 5px; color: #8fa5c0; background: rgba(21, 31, 45, .7); font-size: 9px; transition: .18s ease; }
.upload-action:hover { color: #d0e6ff; border-color: rgba(125, 182, 236, .34); background: #16263b; }
.upload-action svg { width: 13px; height: 13px; }
.drop-zone { max-height: 0; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; margin: 0; border: 1px dashed transparent; border-radius: 6px; color: #7990aa; background: rgba(16, 31, 48, .48); font-size: 9px; opacity: 0; transition: .22s ease; }
.composer.drag-active .drop-zone, .drop-zone.visible { max-height: 72px; padding: 12px; margin-bottom: 8px; border-color: rgba(104, 174, 235, .48); color: #b6cbe2; opacity: 1; }
.drop-zone-icon { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(113, 180, 224, .25); border-radius: 5px; color: #8bcce2; background: #132940; font-size: 14px; }
.drop-zone button { padding: 0; color: #94c3f3; background: transparent; font-size: 9px; }.drop-zone button:hover { color: #d9edff; }
.file-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }.file-attachments:not(:empty) { margin-bottom: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 5px 7px; border: 1px solid rgba(104, 166, 224, .24); border-radius: 5px; color: #a9c5e0; background: rgba(19, 44, 72, .6); font-size: 9px; }.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-chip small { color: #6b88a6; font-size: 8px; }.file-chip button { padding: 0; color: #6d829a; background: transparent; font-size: 13px; line-height: 1; }.file-chip button:hover { color: #d0e5fa; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }.capability-card { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; color: #8d9db1; background: rgba(11, 16, 25, .62); text-align: left; transition: .2s ease; }.capability-card:hover { border-color: rgba(115, 171, 231, .32); background: rgba(19, 32, 51, .72); transform: translateY(-1px); }.capability-symbol { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(117, 180, 231, .18); border-radius: 7px; color: #86bee9; background: #12283e; font-size: 15px; }.discord-symbol { color: #9c99f2; background: #1b1d47; }.capability-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.capability-card strong { overflow: hidden; color: #b8c9db; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.capability-card small { overflow: hidden; color: #64758a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.capability-card b { margin-left: auto; color: #709fd4; font-size: 14px; font-weight: 400; }.loading-spinner { width: 12px; height: 12px; display: block; border: 2px solid rgba(230,244,255,.35); border-top-color: #f2fbff; border-radius: 50%; animation: spin .75s linear infinite; } .send-button.is-loading { cursor: wait; }.thinking-message .message-copy { color: #7997b7; animation: softPulse 1.3s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes softPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.auth-modal { width: min(410px, 100%); padding: 28px 30px 22px; }.auth-modal > .modal-close { position: absolute; top: 14px; right: 14px; }.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #e4eefb; font-size: 13px; font-weight: 600; }.auth-brand em { color: #80b7ff; font-style: normal; }.auth-brand .brand-mark { width: 24px; height: 24px; transform: scale(.85) rotate(-15deg); }.auth-heading h2 { margin: 0 0 6px; color: #e8f2fb; font-size: 25px; font-weight: 480; letter-spacing: -.05em; }.auth-heading p { margin: 0 0 21px; color: #7c8da3; font-size: 11px; line-height: 1.55; }.auth-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 7px; background: #0a111b; }.auth-switcher button { padding: 8px; border-radius: 5px; color: #738298; background: transparent; font-size: 10px; }.auth-switcher button.active { color: #cee5ff; background: #1a2e4b; }.auth-field { display: block; margin-bottom: 12px; }.auth-field span { display: block; margin-bottom: 6px; color: #8998ab; font-size: 10px; }.auth-field input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid rgba(122, 159, 204, .2); border-radius: 6px; outline: 0; color: #dce9f8; background: #0d1723; font-size: 11px; transition: .18s ease; }.auth-field input::placeholder { color: #53657a; }.auth-field input:focus { border-color: rgba(106, 170, 247, .65); box-shadow: 0 0 0 3px rgba(51, 123, 205, .1); }.auth-error { min-height: 16px; margin: 2px 0 8px; color: #e98e8e; font-size: 9px; }.auth-submit { width: 100%; height: 39px; justify-content: space-between; padding: 0 13px; }.auth-footnote { margin-top: 16px; color: #56677c; font-size: 8px; line-height: 1.5; text-align: center; }
@media (max-width: 980px) { .auth-actions { display: none; } .creation-toolbar { align-items: flex-start; flex-direction: column; }.creator-tabs { width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }.creator-tabs::-webkit-scrollbar { display: none; }.creator-meta { width: 100%; justify-content: space-between; }.capability-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .creation-toolbar { margin-bottom: 12px; }.creator-tab { padding-left: 8px; padding-right: 8px; }.creator-meta > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }.upload-action { margin-left: auto; }.drop-zone { flex-wrap: wrap; }.capability-grid { gap: 7px; }.auth-modal { padding-left: 22px; padding-right: 22px; } }
.code-artifact { overflow: hidden; margin-top: 12px; border: 1px solid rgba(109, 156, 217, .22); border-radius: 7px; background: #080e15; }.code-artifact-top { height: 28px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-bottom: 1px solid rgba(144, 173, 214, .12); }.code-artifact-top > span { display: flex; gap: 3px; }.code-artifact-top i { width: 4px; height: 4px; border-radius: 50%; background: #536781; }.code-artifact-top small { color: #6e8099; font-size: 8px; }.code-artifact-top .copy-button { margin-left: auto; border: 0; }.code-artifact pre { max-height: 145px; overflow: auto; margin: 0; padding: 11px; color: #a9c7de; font: 8px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; scrollbar-width: thin; scrollbar-color: #21334d transparent; }