@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#f2f4f7; --muted:#8994a5; --muted-2:#617084; --bg:#0d1420; --panel:#131e2c; --panel-2:#182536; --line:#29384a; --orange:#ff6b35; --blue:#54a6ff; --purple:#aa8cff; --green:#68d7a2; --yellow:#ffd56b; --screen:#eef3f4; --screen-ink:#1c2a34; --screen-muted:#6d7f87; --screen-line:#cedadd; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Manrope, system-ui, sans-serif; }
button, input, textarea, select { font:inherit; }
button { border:0; cursor:pointer; color:inherit; }
.app-frame { min-height:100vh; background:radial-gradient(circle at 75% -10%,#1d3444 0,#0d1420 42%); }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #253243; background:rgba(10,16,26,.86); }
.brand-lockup,.topbar-actions,.document-title,.view-heading,.view-heading-actions,.screen-action,.device-controls,.keypad-status,.keypad-hint,.history-header,.answer-row,.sheet-toolbar,.sheet-footer,.notes-footer,.geometry-label,.sidebar-footer,.doc-row,.tree-row,.app-link,.settings-link,.menu-option,.modal-top { display:flex; align-items:center; }
.brand-lockup { gap:11px; min-width:240px; }.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--orange); color:#1d1210; font-weight:800; letter-spacing:-1.2px; font-size:13px; box-shadow:0 0 0 4px rgba(255,107,53,.12); }.product-name { font-weight:800; letter-spacing:.08em; font-size:14px; }.product-subtitle { color:var(--muted); font-size:11px; margin-top:2px; letter-spacing:.04em; }.document-title { gap:9px; font-size:13px; font-weight:600; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }.muted { color:var(--muted); }.topbar-actions { min-width:240px; justify-content:flex-end; gap:12px; }.mode-pill { font:500 11px 'DM Mono', monospace; border:1px solid #36475a; border-radius:5px; padding:6px 8px; color:var(--yellow); }.icon-button { width:28px; height:28px; background:transparent; color:var(--muted); border-radius:6px; font-size:18px; }.icon-button:hover { color:var(--ink); background:#1b2838; }
.workspace { display:flex; min-height:calc(100vh - 72px); }.sidebar { width:244px; flex:0 0 244px; padding:22px 15px 18px; border-right:1px solid #253243; background:#0f1926; display:flex; flex-direction:column; }.new-doc-button { width:100%; padding:11px 13px; display:flex; align-items:center; gap:9px; border:1px solid #37485b; background:#182636; border-radius:7px; color:#e9eef3; font-size:12px; font-weight:700; text-align:left; }.new-doc-button span { color:var(--orange); font-size:18px; line-height:10px; }.sidebar-label { margin:28px 9px 10px; color:#637288; font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }.apps-label { margin-top:26px; }.doc-row { gap:9px; padding:8px 9px; color:#cbd5df; font-size:12px; }.doc-icon { color:var(--orange); }.dots { margin-left:auto; letter-spacing:2px; font-size:11px; color:#5d6b7d; }.page-tree { margin:1px 0 0 13px; padding-left:10px; border-left:1px solid #324253; }.tree-row,.app-link,.settings-link { width:100%; gap:10px; padding:8px 9px; color:#8594a8; background:none; text-align:left; border-radius:6px; font-size:12px; }.tree-row:hover,.app-link:hover,.settings-link:hover { color:#e9eef3; background:#182636; }.tree-row.active { background:#1e2d3e; color:#f4f7f9; }.page-number { width:27px; font:500 10px 'DM Mono',monospace; color:#65758a; }.tree-row.active .page-number { color:var(--orange); }.app-link { padding:9px; }.app-glyph { width:21px; height:21px; display:grid; place-items:center; border-radius:5px; font-size:13px; }.app-glyph.blue { background:#203b58; color:var(--blue); }.app-glyph.purple { background:#332f53; color:var(--purple); }.app-glyph.orange { background:#493224; color:var(--orange); }.app-glyph.green { background:#1b4037; color:var(--green); }.app-glyph.yellow { background:#4b4025; color:var(--yellow); }.sidebar-footer { margin-top:auto; flex-direction:column; align-items:stretch; gap:7px; padding-top:16px; border-top:1px solid #253243; }.settings-link { color:#a3afbc; }.sync-status { color:#667688; font-size:10px; padding:0 9px; }.sync-status i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:5px; }
.device-area { flex:1; display:grid; place-items:center; padding:35px 32px 46px; overflow:auto; }.device-shell { width:min(1170px,100%); padding:17px 17px 0; border-radius:26px 26px 20px 20px; background:linear-gradient(135deg,#253342,#111b27 38%,#1a2633); box-shadow:0 25px 65px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09); }.device-bezel { border:1px solid #344454; border-radius:15px 15px 5px 5px; overflow:hidden; background:#111b26; }.screen-wrap { padding:12px; background:#202d39; }.screen-content { overflow:hidden; border-radius:3px; background:var(--screen); color:var(--screen-ink); min-height:655px; }.screen-status { height:24px; padding:0 11px; display:flex; justify-content:space-between; align-items:center; color:#73858a; background:#e3e9e9; font:500 9px 'DM Mono',monospace; }.view { display:none; min-height:631px; }.view.active { display:block; }.view-heading { justify-content:space-between; padding:20px 24px 18px; border-bottom:1px solid var(--screen-line); }.view-kicker { display:block; color:#809096; font:500 9px 'DM Mono',monospace; letter-spacing:.12em; }.view h1 { margin:4px 0 0; font-size:21px; letter-spacing:-.04em; }.view-heading-actions { gap:8px; }.screen-action { gap:6px; padding:8px 10px; border:1px solid #c9d4d6; border-radius:5px; background:#f7f9f9; color:#5d6d73; font-size:11px; font-weight:700; }.screen-action:hover { background:#e5ebec; }.screen-action.filled { border-color:var(--screen-ink); background:var(--screen-ink); color:#f4f6f6; }.device-controls { height:87px; justify-content:space-between; position:relative; padding:10px 52px 14px; }.speaker-slots { position:absolute; top:13px; left:60px; display:flex; gap:4px; }.speaker-slots i { width:4px; height:13px; border-radius:2px; background:#101923; box-shadow:inset 1px 1px 2px #364758; }.device-logo { position:absolute; left:50%; top:19px; transform:translateX(-50%); color:#687b8b; font-size:12px; letter-spacing:.18em; font-weight:800; }.touchpad { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:150px; height:39px; border-radius:5px 5px 18px 18px; background:#172430; border:1px solid #364754; }.touchpad-ring { position:absolute; inset:6px 16px 8px; border:1px solid #405461; border-radius:3px 3px 12px 12px; }.touchpad-center { position:absolute; inset:0; display:grid; place-items:center; color:#4b6574; font-size:7px; }.control-key { position:absolute; bottom:13px; color:#748796; font:500 9px 'DM Mono',monospace; }.ctrl-label { left:76px; }.shift-label { left:137px; }.home-label { right:76px; }
.calculator-layout { display:grid; grid-template-columns:1fr 402px; min-height:562px; }.calculation-column { padding:21px 24px 20px; border-right:1px solid var(--screen-line); display:flex; flex-direction:column; min-width:0; }.expression-card { padding:16px 17px 14px; border:1px solid #ced9db; background:#f9fbfb; border-radius:7px; box-shadow:0 2px 6px rgba(45,71,75,.04); }.expression-label,.history-header,.panel-label { color:#809096; font:500 9px 'DM Mono',monospace; letter-spacing:.12em; }.expression-label { display:flex; justify-content:space-between; }.expression-label span { color:#4e9f8a; }.expression-text { min-height:55px; padding-top:11px; color:#233640; font:500 20px 'DM Mono',monospace; word-break:break-all; }.placeholder { color:#a2b0b2; font-size:13px; }.answer-row { gap:12px; min-height:32px; border-top:1px solid #e2e8e8; padding-top:10px; font:500 20px 'DM Mono',monospace; }.answer-equals { color:#85969a; }.answer-row #answer-text { color:#1d765e; }.history-header { justify-content:space-between; margin:24px 0 9px; }.history-header span:last-child { color:#9caaad; letter-spacing:0; }.history-list { overflow:auto; flex:1; padding-right:3px; }.empty-history { height:100%; min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#87979b; font-size:11px; }.empty-history strong { color:#66797e; font-size:12px; }.empty-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#dce9e8; color:#32856f; font-size:19px; }.inline-example { color:#31866d; background:none; font-size:11px; text-decoration:underline; }.history-item { border-bottom:1px solid #dfe7e7; padding:10px 7px; cursor:pointer; }.history-item:hover { background:#e3eded; }.history-expression { color:#5d7076; font:500 12px 'DM Mono',monospace; }.history-answer { margin-top:4px; color:#147357; font:500 16px 'DM Mono',monospace; }.history-answer::before { content:'= '; color:#91a09f; }.keypad-column { padding:19px 19px 15px; background:#e6eded; }.keypad-status,.keypad-hint { justify-content:space-between; color:#7d8e93; font:500 9px 'DM Mono',monospace; }.keyboard-dot { width:6px; height:6px; display:inline-block; margin-right:4px; background:#39967c; border-radius:50%; }.keypad { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0; }.key { height:39px; border:1px solid #c4d0d2; border-radius:5px; background:#f7f9f9; box-shadow:0 2px 0 #c2cccd; color:#273a43; font:600 12px 'DM Mono',monospace; transition:transform .08s,box-shadow .08s,background .1s; }.key:hover { background:#fff; }.key:active,.key.pressed { transform:translateY(2px); box-shadow:0 0 0 #c2cccd; }.key-function { color:#617278; background:#edf2f2; font-size:10px; }.key-operator { background:#dce8e7; color:#267f69; font-size:18px; }.key-secondary { background:#e7ecec; color:#6f7f82; }.key-delete { color:#bc5a46; }.key-enter { background:#2c866e; border-color:#226c59; color:white; box-shadow:0 2px 0 #1a5b4b; }.key.wide { grid-column:span 2; }.keypad-hint { border-top:1px solid #d0dada; padding-top:13px; }.hint-keys { display:flex; gap:4px; align-items:center; }.hint-keys kbd { background:#d4dfe0; border-radius:3px; padding:2px 4px; font:500 8px 'DM Mono',monospace; }
.cursor { display:inline-block; width:2px; height:1em; margin-left:3px; vertical-align:-.13em; background:#31866d; animation:cursor-blink 1s steps(2,end) infinite; } @keyframes cursor-blink { 50% { opacity:0; } }
.graph-layout,.geometry-layout { display:grid; grid-template-columns:230px 1fr; min-height:562px; }.graph-sidebar,.geometry-toolbox { padding:20px 15px; border-right:1px solid var(--screen-line); background:#e7eded; }.function-entry { display:flex; align-items:center; gap:6px; margin-top:12px; padding:7px; background:#f8fbfb; border:1px solid #b9cbca; border-radius:5px; }.function-color { width:6px; height:22px; border-radius:3px; background:#278d74; }.function-entry input { width:100%; border:0; background:transparent; outline:0; color:#25383f; font:500 12px 'DM Mono',monospace; }.function-entry button { width:22px; height:22px; color:#2c866e; background:#e6f1ed; border-radius:3px; }.add-function { width:100%; margin-top:8px; padding:8px; background:transparent; border:1px dashed #b8c6c6; color:#458a7a; border-radius:5px; font-size:10px; }.graph-options { margin-top:28px; padding-top:15px; border-top:1px solid #ced9d9; }.graph-options label { display:block; margin-bottom:13px; color:#6d7d82; font-size:10px; }.graph-options select { display:block; width:100%; margin-top:6px; padding:7px 5px; border:1px solid #c5d2d2; border-radius:4px; background:#f8fbfb; color:#53666b; font-size:10px; }.check-row { display:flex!important; gap:6px; align-items:center; }.graph-readout { margin-top:34px; padding-top:13px; border-top:1px solid #ced9d9; color:#7b8d91; font:500 9px 'DM Mono',monospace; }.graph-readout strong { display:block; margin-top:7px; color:#328670; font-size:10px; }.trace-buttons { display:flex; gap:5px; margin-top:10px; }.trace-buttons button { width:29px; height:25px; border:1px solid #c4d2d2; background:#f7fafa; border-radius:4px; color:#558074; }.graph-canvas-wrap,.geometry-canvas-wrap { position:relative; overflow:hidden; background:#f8fbfb; }.graph-canvas-wrap canvas,.geometry-canvas-wrap canvas { display:block; width:100%; height:100%; }.graph-legend,.geometry-label { position:absolute; left:16px; right:16px; bottom:12px; justify-content:space-between; padding:8px 10px; border:1px solid #d3dede; border-radius:4px; background:rgba(248,251,251,.9); color:#73858a; font:500 10px 'DM Mono',monospace; }.legend-line { display:inline-block; width:15px; height:2px; margin-right:5px; vertical-align:middle; background:#278d74; }.graph-legend b { color:#347e6d; }.geometry-toolbox .panel-label { margin-bottom:10px; }.geo-tool { display:flex; align-items:center; gap:9px; width:100%; padding:10px 8px; border-radius:5px; background:transparent; color:#6a7b80; text-align:left; font-size:11px; }.geo-tool span { width:18px; text-align:center; color:#397d6e; font-size:15px; }.geo-tool.active { background:#d5e7e3; color:#236f5c; font-weight:700; }.geometry-help { margin-top:27px; padding-top:15px; border-top:1px solid #ced9d9; color:#809195; font-size:10px; line-height:1.6; }.geometry-label { color:#71848a; }
.sheet-toolbar { gap:8px; padding:13px 20px; border-bottom:1px solid var(--screen-line); background:#e8eeee; }.cell-name { width:40px; font:500 12px 'DM Mono',monospace; color:#347e6d; }.formula-equals { color:#8b999c; }.sheet-toolbar input { flex:1; padding:8px 9px; border:1px solid #c5d2d2; border-radius:4px; outline:none; background:#fafdfe; color:#2a3e45; font:500 11px 'DM Mono',monospace; }.sheet-toolbar button { padding:8px 10px; border-radius:4px; background:#2c866e; color:#fff; font-size:10px; font-weight:700; }.sheet-toolbar button:last-child { background:#d7e4e2; color:#357b6b; }.spreadsheet-wrap { padding:22px; overflow:auto; }.spreadsheet { width:100%; border-collapse:collapse; table-layout:fixed; background:#fbfdfd; font:500 11px 'DM Mono',monospace; }.spreadsheet th,.spreadsheet td { height:42px; border:1px solid #d5dfdf; padding:0 11px; text-align:left; color:#3b4f56; }.spreadsheet th { height:36px; background:#e5eded; color:#6b7d81; font-size:10px; }.spreadsheet th small { display:block; color:#9aa8aa; font-size:8px; font-family:Manrope,sans-serif; font-weight:400; }.spreadsheet .corner { width:46px; }.spreadsheet td:first-child { width:46px; padding:0; text-align:center; background:#edf3f3; color:#8a999b; }.spreadsheet td.selected { outline:2px solid #3a9279; outline-offset:-2px; background:#e5f1ee; }.spreadsheet td[contenteditable="true"]:focus { outline:2px solid #3a9279; outline-offset:-2px; background:#fff; }.sheet-footer { justify-content:space-between; padding:0 22px; color:#859497; font-size:10px; }.notes-layout { min-height:562px; display:flex; flex-direction:column; padding:20px 28px; }.notes-toolbar { display:flex; gap:5px; align-items:center; padding-bottom:12px; border-bottom:1px solid #d7e1e1; }.notes-toolbar span { flex:1; }.notes-toolbar button { min-width:29px; height:27px; border:1px solid #ccd8d8; border-radius:4px; background:#f8fbfb; color:#5e7075; font-size:10px; }.notes-toolbar button:last-child { padding:0 10px; color:#c26654; }.notes-toolbar button:hover { background:#e2edeb; }.notes-layout textarea { flex:1; width:100%; resize:none; padding:22px 3px; border:0; outline:0; background:transparent; color:#30444b; font:14px/1.8 Manrope,sans-serif; }.notes-layout textarea::placeholder { color:#9aabad; }.notes-footer { justify-content:space-between; padding-top:10px; border-top:1px solid #d7e1e1; color:#899a9d; font:500 10px 'DM Mono',monospace; }.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:24px; }.settings-card { display:flex; gap:14px; padding:17px; border:1px solid var(--screen-line); border-radius:7px; background:#fbfdfd; }.settings-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:7px; background:#e1eeeb; color:#2e836d; font-size:17px; }.settings-card h3 { margin:0; font-size:13px; }.settings-card p { margin:5px 0 14px; color:#849397; font-size:10px; line-height:1.5; }.segmented { display:flex; gap:3px; padding:3px; border-radius:5px; background:#e7eeee; }.segmented button { flex:1; padding:7px 8px; border-radius:3px; background:transparent; color:#738387; font-size:9px; }.segmented button.active { background:#2d866e; color:white; }.setting-toggle { display:flex; align-items:center; gap:8px; margin:9px 0; color:#5d7075; font-size:10px; }.setting-toggle input { display:none; }.toggle { width:26px; height:15px; position:relative; border-radius:10px; background:#cbd7d7; }.toggle::after { content:''; position:absolute; top:3px; left:3px; width:9px; height:9px; border-radius:50%; background:#fff; transition:.15s; }.setting-toggle input:checked + .toggle { background:#3c987e; }.setting-toggle input:checked + .toggle::after { left:14px; }.danger-button { padding:8px 10px; border:1px solid #e6c3ba; border-radius:4px; background:#fff7f5; color:#b55f4d; font-size:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(5,10,17,.68); backdrop-filter:blur(5px); }.hidden { display:none!important; }.menu-modal { width:min(410px,calc(100vw - 32px)); padding:22px; border:1px solid #34475a; border-radius:11px; background:#142131; box-shadow:0 25px 80px rgba(0,0,0,.5); }.modal-top { justify-content:space-between; margin-bottom:14px; }.menu-modal h2 { margin:4px 0 0; font-size:21px; }.close-modal { width:25px; height:25px; border-radius:5px; background:#203144; color:#8fa1b0; font-size:19px; }.menu-option { width:100%; gap:11px; padding:12px 7px; border-top:1px solid #283a4c; background:none; text-align:left; }.menu-option > span { width:27px; height:27px; display:grid; place-items:center; border-radius:6px; background:#203648; color:#64c4a8; font-size:15px; }.menu-option div { flex:1; }.menu-option strong,.menu-option small { display:block; }.menu-option strong { color:#edf2f4; font-size:11px; }.menu-option small { margin-top:3px; color:#8292a2; font-size:9px; }.menu-option kbd { color:#738597; font:500 9px 'DM Mono',monospace; }.modal-note { padding-top:14px; color:#6c7e90; font:500 9px 'DM Mono',monospace; }.toast { position:fixed; left:50%; bottom:24px; z-index:30; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:10px 14px; border:1px solid #3f6d60; border-radius:6px; background:#1e4038; color:#d5f2e9; font-size:11px; transition:.2s; }.toast.show { transform:translate(-50%,0); opacity:1; }
body.compact .key { height:32px; } body.high-contrast .screen-content { filter:contrast(1.12); } @media (max-width:1000px) { .sidebar { width:205px; flex-basis:205px; }.calculator-layout { grid-template-columns:1fr 350px; }.device-area { padding:20px 14px 30px; }.topbar { padding:0 18px; } }
@media (max-width:760px) { .topbar { height:60px; }.document-title { display:none; }.workspace { min-height:calc(100vh - 60px); }.sidebar { width:56px; flex-basis:56px; padding:15px 7px; }.sidebar > * { display:none; }.sidebar .apps-label,.sidebar .app-link,.sidebar .sidebar-footer,.sidebar .settings-link { display:flex; }.sidebar .apps-label { font-size:0; margin:18px 0 5px; }.sidebar .apps-label::after { content:'APPS'; font:500 8px 'DM Mono',monospace; }.sidebar .app-link { justify-content:center; padding:7px; }.sidebar .app-link span:last-child { display:none; }.sidebar-footer { padding-top:10px; }.sidebar .settings-link { justify-content:center; }.sidebar .settings-link span:last-child { display:none; }.sync-status { display:none; }.device-area { padding:8px 0 20px; }.device-shell { padding:7px 7px 0; border-radius:14px 14px 7px 7px; }.screen-wrap { padding:5px; }.screen-content { min-height:calc(100vh - 116px); }.view { min-height:calc(100vh - 140px); }.view-heading { padding:15px; }.view-heading-actions .screen-action:not(.filled) { display:none; }.calculator-layout,.graph-layout,.geometry-layout { display:block; }.calculation-column { min-height:350px; border-right:0; padding:15px; }.keypad-column { padding:14px; }.graph-sidebar,.geometry-toolbox { border-right:0; }.graph-canvas-wrap,.geometry-canvas-wrap { height:370px; }.settings-grid { grid-template-columns:1fr; padding:15px; }.device-controls { display:none; }.spreadsheet-wrap { padding:15px; }.notes-layout { min-height:500px; padding:15px; } }