@font-face { font-family: 'ADLaM Display'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/adlam-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Aboreto'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/aboreto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

* { box-sizing: border-box; }
:root { --page: #151414; --surface: #1c1b1b; --text: #f7f5f2; --muted: #a29f9c; --line: #49464580; --grid: #ffffff42; --ambient: #18be7524; --accent: #5578f6; --accent-bright: #718fff; --ai: #23b87b; --ai-deep: #08784f; --delete: #ff5d70; --done: #49d88a; --dialog: #242222; --theme-center: #f7f5f2; --theme-icon: #1c1b1b; --theme-outline: #fff; color: var(--text); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-synthesis: none; transition: color .35s ease, background-color .35s ease; }
:root[data-theme="light"] { --page: #f4f1ed; --surface: #fffdf9; --text: #1d1b1b; --muted: #716c69; --line: #d4cec880; --grid: #00000030; --ambient: #e3bb3c36; --accent: #4264df; --accent-bright: #5578f6; --delete: #e6374f; --done: #159c61; --dialog: #fffdf9; --theme-center: #1d1b1b; --theme-icon: #fff; --theme-outline: #111; }
body { min-height: 100vh; margin: 0; padding: max(6.5rem, min(14vh, 7.5rem)) 16px 11rem; overflow-x: hidden; background: radial-gradient(ellipse 55% 50% at 12% 18%, var(--ambient), transparent 72%), radial-gradient(ellipse 50% 55% at 88% 82%, var(--ambient), transparent 72%), radial-gradient(circle, var(--grid) 1.25px, transparent 1.5px); background-position: 0% 0%, 100% 100%, 0 0; background-size: 150% 150%, 150% 150%, 40px 40px; background-color: var(--page); animation: ambient-drift 16s ease-in-out infinite alternate; transition: background-color .35s ease; }
.container { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.daily-quote { position: fixed; z-index: 5; top: 1.8rem; left: 1.8rem; max-width: min(19rem, calc(100vw - 8rem)); margin: 0; color: var(--text); font-family: 'ADLaM Display', sans-serif; font-size: clamp(.78rem, 2.2vw, 1rem); line-height: 1.35; letter-spacing: .015em; opacity: .68; text-align: left; transition: color .35s ease, opacity .2s ease, transform .2s ease; }
.daily-quote.is-obscured, .theme-toggle.is-obscured { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.app-title { margin: 0 0 1rem; color: var(--text); font-family: Aboreto, serif; font-size: clamp(2.1rem, 8vw, 3.4rem); font-weight: 400; line-height: 1; letter-spacing: .025em; text-align: center; user-select: none; transform: translateY(-.7rem); transition: color .35s ease; }
.title-text { position: relative; display: inline-block; }
.ai-header-label { position: absolute; top: -.62rem; left: calc(100% + .55rem); padding: .24rem .46rem; border: 1px solid #8fd7ff99; border-radius: .4rem; color: #eaf8ff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap; user-select: none; background: #2174a955; box-shadow: inset 0 1px 0 #ffffff55, 0 3px 10px #001c3070; backdrop-filter: blur(8px); }
:root[data-theme="light"] .ai-header-label { border-color: #111; color: #111; background: #ffffff66; box-shadow: inset 0 1px 0 #fff, 0 3px 10px #1c273830; }
.filters { display: grid; grid-template-columns: 136px 136px 149px; justify-content: center; gap: .5rem; margin: 0 0 1rem; }
.filter-tab { display: inline-flex; width: 136px; min-width: 0; align-items: center; justify-content: center; gap: .48rem; padding: .58rem .35rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--muted); cursor: pointer; font: inherit; font-size: .91rem; background: var(--surface); transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.filter-tab[data-filter="completed"] { width: 149px; }
.ai-tab { width: 92px; color: var(--muted); border-color: var(--line); background: var(--surface); }
.ai-tab.active { color: #fff; border-color: var(--ai); background: var(--ai-deep); box-shadow: 0 4px 14px color-mix(in srgb, var(--ai) 45%, transparent); }
.filter-tab svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-tab:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); }
.filter-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-tab.active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.filter-tab[data-filter="all"].active { color: #08283d; border-color: #4db8ff; background: #4db8ff; box-shadow: 0 4px 12px #4db8ff66; }
.filter-tab[data-filter="pending"].active { color: #3c2f00; border-color: #f4c84f; background: #f4c84f; box-shadow: 0 4px 12px #f4c84f55; }
.filter-tab[data-filter="completed"].active { color: #073d27; border-color: var(--done); background: var(--done); box-shadow: 0 4px 12px color-mix(in srgb, var(--done) 35%, transparent); }
.filter-count { display: inline-grid; width: 1.45rem; height: 1.45rem; flex: 0 0 auto; place-items: center; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: .73rem; font-weight: 600; line-height: 1; background: #111; }
.filter-tab.active .filter-count { border-color: #111; color: #111; background: #fff; }
.filter-tab.active svg { animation: filter-icon-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
.card { position: relative; overflow: hidden; border: 4px solid var(--line); border-radius: .375rem; background-color: var(--surface); transition: background-color .35s ease, border-color .35s ease; }
.entry { display: flex; align-items: center; }
.entry[hidden] { display: none; }
.task-entry { padding-left: 1rem; }
.bottom-composer { position: fixed; z-index: 8; right: 50%; bottom: 1.35rem; display: flex; align-items: center; width: min(27rem, calc(100vw - 2rem)); min-height: 3.45rem; padding: .35rem .45rem; border: 1px solid #000000aa; border-radius: 999px; box-shadow: 0 14px 34px #0006, inset 0 1px 0 #ffffff33, inset 0 -1px 0 #0008; transform: translateX(50%); background: linear-gradient(112deg, #ffffff14, #aebcc516 48%, #ffffff0b); backdrop-filter: blur(6px) saturate(110%); }
.bottom-composer[hidden] { display: none; }
.terminal-toggle { position: fixed; z-index: 8; right: 50%; bottom: 1.35rem; display: grid; width: 3.2rem; height: 3.2rem; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--ai) 62%, #fff); border-radius: 50%; color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 #ffffff66, 0 10px 25px #0007, 0 0 0 4px color-mix(in srgb, var(--ai) 11%, transparent); transform: translateX(50%); background: linear-gradient(145deg, var(--ai), var(--ai-deep)); transition: transform .18s ease, filter .18s ease; }.terminal-toggle:hover { filter: brightness(1.15); transform: translateX(50%) translateY(-2px) scale(1.05); }.terminal-toggle:active { transform: translateX(50%) translateY(2px) scale(.94); }.terminal-toggle svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.terminal-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 0; color: #d8ffe9; background: #101814; box-shadow: none; }.terminal-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }.terminal-output { width: min(72rem, 100%); height: calc(100% - 7.2rem); margin: 0 auto; padding: 1rem; overflow: auto; font-size: .72rem; line-height: 1.6; }.terminal-line { margin: 0 0 .3rem; white-space: pre-wrap; overflow-wrap: anywhere; }.terminal-welcome, .terminal-label { color: #63e39a; }.terminal-command { color: #e5ffed; }.terminal-help { color: #a8ceb7; }.terminal-success { color: #7cf7ae; }.terminal-error { color: #ff8891; }.terminal-done { color: #6d927b; text-decoration: line-through; }.terminal-prompt { display: flex; align-items: center; gap: .55rem; padding: .75rem max(.85rem, calc((100vw - 72rem) / 2)); border-top: 1px solid #3ad18a44; background: #17251e; }.terminal-prompt span { flex: 0 0 auto; color: #59ed98; font-size: .72rem; white-space: nowrap; }.terminal-command-input { width: 100%; min-width: 0; min-height: 1.4rem; outline: 0; color: #e6ffed; font: inherit; font-size: .76rem; line-height: 1.4rem; white-space: pre; caret-color: #6cff9f; }.terminal-editor { display: grid; gap: .5rem; margin: .65rem 0; padding: .65rem; border: 1px solid #45d98566; border-radius: .55rem; background: #182b20; }.terminal-editor span { color: #79e8a8; font-size: .64rem; }.terminal-editor small { color: #87ad95; font-size: .58rem; }.terminal-editor-field { min-width: 0; min-height: 2rem; padding: .45rem .5rem; border: 1px solid #54dc8a99; border-radius: .35rem; outline: 0; color: #effff4; font: inherit; font-size: .7rem; background: #0d1711; caret-color: #6cff9f; }
.terminal-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0; }.terminal-actions button { padding: .38rem .58rem; border: 1px solid #56d99188; border-radius: .4rem; color: #9dfcc0; cursor: pointer; font: inherit; font-size: .63rem; background: #173222; transition: transform .15s ease, background .15s ease; }.terminal-actions button:hover { color: #fff; background: #21884f; transform: translateY(-2px); }.terminal-neofetch { margin: .9rem 0; color: #7df6ac; font: inherit; line-height: 1.45; text-shadow: 0 0 8px #39df7a77; }.terminal-matrix { margin: .7rem 0; overflow: hidden; color: #62ee91; font: inherit; font-size: clamp(.54rem, 1.8vw, .75rem); line-height: 1.12; letter-spacing: .08em; text-shadow: 0 0 7px #39df7ab0; }
.terminal-dialog .terminal-output { height: calc(100% - 3.55rem); }
:root[data-theme="light"] .terminal-dialog { color: #17231b; background: #fbfcf8; }:root[data-theme="light"] .terminal-dialog::backdrop { background: #ffffffb0; }:root[data-theme="light"] .terminal-prompt { border-color: #16794555; color: #116237; background: #e6f4ea; }:root[data-theme="light"] .terminal-command { color: #17231b; }:root[data-theme="light"] .terminal-help { color: #436353; }:root[data-theme="light"] .terminal-success, :root[data-theme="light"] .terminal-welcome, :root[data-theme="light"] .terminal-label { color: #087237; }:root[data-theme="light"] .terminal-error { color: #bd263d; }:root[data-theme="light"] .terminal-done { color: #72877b; }:root[data-theme="light"] .terminal-command-input { color: #15251b; caret-color: #087237; }:root[data-theme="light"] .terminal-command-input:empty::before { color: #7a9786; }:root[data-theme="light"] .terminal-editor { border-color: #25895566; background: #e7f7ec; }:root[data-theme="light"] .terminal-editor-field { border-color: #25895599; color: #15251b; background: #fff; }:root[data-theme="light"] .terminal-neofetch, :root[data-theme="light"] .terminal-matrix { color: #087237; text-shadow: 0 0 6px #159a4a55; }
.terminal-dialog, :root[data-theme="light"] .terminal-dialog { color: #e3e3e3; background: #0b0b0b; font-family: 'IBM Plex Mono', ui-monospace, monospace; }.terminal-dialog::backdrop, :root[data-theme="light"] .terminal-dialog::backdrop { background: #000b; }.terminal-shell { height: 100%; overflow: auto; padding: .45rem 0 1rem; }.terminal-dialog .terminal-output { width: min(72rem, 100%); height: auto; min-height: 0; margin: 0 auto; padding: 0 max(.7rem, calc((100vw - 72rem) / 2)); overflow: visible; font-size: .82rem; line-height: 1.42; }.terminal-prompt, :root[data-theme="light"] .terminal-prompt { width: min(72rem, 100%); margin: 0 auto; padding: 0 max(.7rem, calc((100vw - 72rem) / 2)); border: 0; color: #d6d6d6; background: transparent; }.terminal-prompt span { color: #2bd343; font-size: .82rem; }.terminal-command, :root[data-theme="light"] .terminal-command { color: #f1f1f1; }.terminal-help, :root[data-theme="light"] .terminal-help { color: #d1d1d1; }.terminal-success, :root[data-theme="light"] .terminal-success, .terminal-welcome, :root[data-theme="light"] .terminal-welcome, .terminal-label, :root[data-theme="light"] .terminal-label { color: #6eea81; }.terminal-error, :root[data-theme="light"] .terminal-error { color: #ff717d; }.terminal-done, :root[data-theme="light"] .terminal-done { color: #8a8a8a; }.terminal-command-input, :root[data-theme="light"] .terminal-command-input { color: #f4f4f4; caret-color: #f4f4f4; }.terminal-editor, :root[data-theme="light"] .terminal-editor { border-color: #2bd34388; background: #101010; }.terminal-editor-field, :root[data-theme="light"] .terminal-editor-field { border-color: #2bd34399; color: #f1f1f1; background: #080808; }.terminal-editor small { color: #a8a8a8; }.terminal-neofetch, :root[data-theme="light"] .terminal-neofetch, .terminal-matrix, :root[data-theme="light"] .terminal-matrix { color: #43df5b; text-shadow: 0 0 7px #35dc4c88; }
:root[data-theme="light"] .bottom-composer { border-color: #1c273844; box-shadow: 0 12px 28px #20364918, inset 0 1px 0 #ffffffbb, inset 0 -1px 0 #1c27381a; background: linear-gradient(112deg, #ffffff5c, #b7c3cc36 48%, #ffffff3e); }
#input { width: 100%; min-width: 0; border: 0; outline: 0; padding: .5rem 0; color: var(--text); font: inherit; font-size: 1rem; line-height: 2em; background: transparent; }
.bottom-composer #ai-input { width: 100%; min-width: 0; border: 0; outline: 0; padding: .5rem .4rem; color: #fff; font: inherit; font-size: 1rem; line-height: 2em; background: transparent; }
:root[data-theme="light"] .bottom-composer #ai-input { color: #0c2e43; }
.bottom-composer #ai-input::placeholder { color: #effaff; opacity: .88; text-shadow: 0 1px 2px #001520aa; }
:root[data-theme="light"] .bottom-composer #ai-input::placeholder { color: #103b54; opacity: .82; text-shadow: 0 1px 1px #ffffffbb; }
.ai-keyboard { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; margin-left: .15rem; color: #eaf8ff; opacity: .7; transition: width .18s ease, margin .18s ease, opacity .18s ease, transform .18s ease; }
.ai-keyboard svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.bottom-composer.has-text .ai-keyboard { width: 0; margin: 0; opacity: 0; transform: scale(.7); overflow: hidden; }
:root[data-theme="light"] .ai-keyboard { color: #103b54; }
#input::placeholder { color: var(--muted); opacity: .8; }
.add-button { min-width: 4.25rem; height: 1.5rem; flex: 0 0 auto; margin: .35rem .5rem .35rem .25rem; padding: 0 .85rem; border: 0; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .18s ease, background .18s ease; }
.add-button:hover { background: var(--accent-bright); transform: translateY(-1px); }
.add-button:active { transform: scale(.94); }
.add-button.is-adding { animation: add-pulse .42s ease-in-out; }
.send-button { display: inline-flex; align-items: center; gap: .45rem; height: 2.65rem; margin-left: .2rem; padding: 0 .85rem 0 1rem; border: 2px solid #4a130c; border-radius: 999px; color: #fff8e9; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .02em; background: radial-gradient(circle at 30% 20%, #ffbb76, transparent 28%), linear-gradient(100deg, #722014, #d44a28 48%, #6b180e); box-shadow: inset 0 2px 1px #ffd3a077, inset 0 -3px 4px #3b0805, 0 4px 0 #190504, 0 7px 13px #0008; transition: transform .12s ease, box-shadow .12s ease, filter .18s ease; }
.send-button svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.send-button:hover { filter: brightness(1.16); }
.send-button:active, .send-button.is-adding { transform: translateY(4px); box-shadow: inset 0 2px 3px #3b0805, 0 1px 0 #190504, 0 3px 7px #0007; }
.send-button[hidden] { display: none; }
.send-button:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.72); opacity: .55; }
.send-button:disabled:active { transform: none; box-shadow: inset 0 2px 1px #ffd3a077, inset 0 -3px 4px #3b0805, 0 4px 0 #190504, 0 7px 13px #0008; }
.bottom-composer.continuing .send-button { min-width: 6.8rem; }
.todo { display: flex; align-items: center; min-width: 0; max-height: 4.5rem; padding: .5rem 1rem; border-top: 4px solid var(--line); transition: max-height .28s ease, opacity .18s ease, transform .22s ease, padding .22s ease, border-width .22s ease; }
#todos.no-entry { border-top: 4px solid var(--line); }
#todos.no-entry .todo:first-child { border-top-width: 0; }
.todo.expanded { align-items: flex-start; max-height: 18rem; }
.text { width: 100%; min-width: 0; max-height: 2em; margin: 0; padding-right: .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 1rem; line-height: 2em; transition: max-height .28s ease; }
.text.expanded { max-height: 15em; white-space: normal; overflow-wrap: anywhere; }
.text.done { color: var(--muted); text-decoration: line-through; }
.action { width: 2em; height: 2em; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; color: var(--text); cursor: pointer; background: transparent; opacity: .45; transform: scale(.75); transition: color .2s ease, background .2s ease, opacity .15s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.action svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.toggle { margin-left: -.5em; margin-right: .5em; }
.edit { margin-left: auto; }
.remove { margin-left: 1.05rem; }
.action:hover, .action:focus-visible { opacity: 1; outline: none; }
.action:focus-visible { border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); }
.toggle:hover { transform: scale(.95) rotate(12deg); }
.toggle .tick { opacity: 0; }
.toggle.active { color: var(--done); background: transparent; opacity: 1; transform: scale(.92); }
.toggle.active svg { stroke-width: 2.5; }
.toggle.active .tick { opacity: 1; }
.toggle.just-completed { animation: complete-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.toggle.just-completed .tick { stroke-dasharray: 18; animation: tick-draw .32s ease-out both; }
.remove:hover { color: var(--delete); background: color-mix(in srgb, var(--delete) 15%, transparent); transform: scale(.95) rotate(-10deg); }
.remove:active { transform: scale(.7) rotate(-18deg); }
.edit:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); transform: scale(.95) rotate(8deg); }
.edit-input { width: 100%; min-width: 0; height: 2em; margin: 0; padding: 0 .35rem; border: 1px solid var(--accent); border-radius: .3rem; outline: 0; color: var(--text); font: inherit; font-size: 1rem; line-height: 2em; background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.leaving { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; transform: translateX(24px) scale(.96); overflow: hidden; }
.todo.deleting-last .text { color: var(--text); font-weight: 600; letter-spacing: .22em; text-decoration: none; animation: deleting-dots .85s ease-in-out infinite; }
.todo.deleting-last .action { opacity: 0; pointer-events: none; }
.empty-state { margin: 0; padding: 1.3rem 1rem; color: var(--muted); font-size: .78rem; text-align: center; }
.quick-guide { padding: 1.3rem 1rem 1.2rem; border-top: 4px solid var(--line); text-align: center; animation: guide-in .3s ease-out; }
.quick-guide[hidden] { display: none; }
.ai-history { padding: 1rem; }
.ai-history[hidden] { display: none; }
.ai-history-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; color: var(--text); font-size: .85rem; font-weight: 600; }
.ai-history-head b { display: inline-block; margin-left: .18rem; color: var(--ai); font-size: .72rem; font-weight: 600; transition: transform .2s ease, color .2s ease; }
.ai-history-head div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.ai-history-head button { padding: .42rem .65rem; border: 1px solid var(--ai); border-radius: .55rem; color: #fff; cursor: pointer; font: inherit; font-size: .66rem; background: var(--ai-deep); transition: transform .18s ease, filter .18s ease; }
.ai-history-head button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.ai-history-head #select-all-chats { border-color: var(--theme-outline); color: var(--text); background: var(--surface); }
.ai-history-head #delete-chats { border-color: var(--delete); background: var(--delete); }
.ai-history-head #new-chat { border-color: #4db8ff; color: #072b42; background: #4db8ff; }
.ai-history-head button:disabled { cursor: not-allowed; opacity: .4; }
.chat-item { display: flex; align-items: center; gap: .55rem; width: 100%; margin-top: .45rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: .45rem; background: transparent; }
.chat-item:has(input:checked) { border-color: var(--ai); background: color-mix(in srgb, var(--ai) 12%, transparent); }
.chat-item input { accent-color: var(--ai); }
.chat-open { min-width: 0; flex: 1; padding: .2rem; overflow: hidden; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: .72rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: transparent; }
.chat-rename-input { min-width: 0; flex: 1; padding: .35rem .45rem; border: 1px solid var(--ai); border-radius: .35rem; outline: 0; color: var(--text); font: inherit; font-size: .72rem; background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai) 16%, transparent); }
.chat-icon { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: .35rem; color: var(--muted); cursor: pointer; background: transparent; }
.chat-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-icon:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.delete-chat:hover { color: #fff; background: var(--delete); }
.guide-quote { margin: 0; color: var(--text); font-family: 'ADLaM Display', sans-serif; font-size: clamp(.82rem, 2.8vw, 1rem); line-height: 1.35; letter-spacing: .015em; text-shadow: 1px 1px 0 #000, -1px -1px 0 #ffffff22, 0 0 8px #ffffff20; animation: metal-shimmer 4.5s ease-in-out infinite; }
.guide-quote-source { margin: .25rem 0 .9rem; color: var(--muted); font-size: .58rem; }
:root[data-theme="light"] .guide-quote { text-shadow: 1px 1px 0 #fff, -1px -1px 0 #0000001c, 0 0 5px #00000012; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .85rem; }
.guide-actions span { display: inline-flex; align-items: center; gap: .38rem; color: var(--muted); font-size: .75rem; }
.guide-actions svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.toast-stack { position: fixed; z-index: 12; top: 1.25rem; left: 50%; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
.toast { max-width: min(22rem, calc(100vw - 2.5rem)); padding: .8rem 1rem; border: 1px solid var(--theme-outline); border-radius: .6rem; color: var(--text); font-size: .75rem; line-height: 1.45; background: var(--dialog); box-shadow: 0 10px 25px #0005; animation: toast-in .2s ease-out; }
.toast.toast-leaving { animation: toast-out .18s ease-in forwards; }
.undo-stack { position: fixed; z-index: 12; right: 1.25rem; bottom: 6rem; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.undo-toast { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 18.5rem; overflow: hidden; padding: .8rem .8rem .95rem; border: 1px solid color-mix(in srgb, var(--delete) 42%, var(--line)); border-radius: .8rem; color: var(--text); font-size: .75rem; background: color-mix(in srgb, var(--dialog) 88%, var(--delete)); box-shadow: 0 14px 32px #0007; backdrop-filter: blur(12px); animation: undo-in .24s ease-out; pointer-events: auto; }
.undo-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; font-size: 1.25rem; line-height: 1; background: var(--delete); box-shadow: 0 4px 12px color-mix(in srgb, var(--delete) 40%, transparent); }
.undo-copy { display: flex; min-width: 0; flex-direction: column; gap: .16rem; }
.undo-copy strong { font-size: .74rem; font-weight: 600; }
.undo-copy small { color: var(--muted); font-size: .63rem; }
.undo-toast button { margin-left: auto; padding: .45rem .75rem; border: 1px solid #fff; border-radius: .42rem; color: #fff; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 600; background: #111; box-shadow: inset 0 1px 0 #ffffff33; transition: transform .18s ease, background .18s ease, color .18s ease; }
.undo-toast button:hover { color: #111; background: #fff; transform: translateY(-1px); }
.undo-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--delete); transform-origin: left; animation: undo-countdown 5s linear forwards; }
.undo-toast.undo-leaving { animation: toast-out .18s ease-in forwards; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.complete-dialog { width: min(21.5rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 1rem; color: var(--text); background: var(--dialog); box-shadow: 0 20px 60px #000a; transition: color .35s ease, background-color .35s ease; }
.complete-dialog::backdrop { background: #000a; backdrop-filter: blur(3px); animation: backdrop-in .2s ease-out; }
.ai-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 1.1rem; color: var(--text); background: radial-gradient(ellipse 68% 43% at 52% -8%, color-mix(in srgb, var(--ai) 25%, transparent), transparent 70%), radial-gradient(ellipse 45% 34% at 8% 84%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%), radial-gradient(circle, var(--grid) 1px, transparent 1.25px), var(--dialog); background-size: auto, auto, 32px 32px, auto; box-shadow: none; }
.ai-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
.ai-dialog header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .8rem max(1rem, calc((100vw - 56rem) / 2)); border-bottom: 1px solid color-mix(in srgb, var(--ai) 34%, var(--line)); background: color-mix(in srgb, var(--dialog) 79%, var(--ai-deep)); box-shadow: 0 10px 30px #00000028; backdrop-filter: blur(18px) saturate(130%); }
.ai-dialog-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ai-dialog-brand > span:last-child { display: grid; gap: .08rem; min-width: 0; }
.ai-dialog-brand strong { overflow: hidden; color: var(--text); font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ai-dialog-brand small { color: color-mix(in srgb, var(--ai) 70%, var(--muted)); font-size: .59rem; letter-spacing: .035em; }
.ai-orb { position: relative; display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ai) 72%, #fff); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffffffb8, transparent 16%), linear-gradient(145deg, var(--ai), var(--ai-deep)); box-shadow: inset 0 1px 2px #ffffff88, 0 0 0 3px color-mix(in srgb, var(--ai) 12%, transparent), 0 5px 14px color-mix(in srgb, var(--ai) 32%, transparent); }
.ai-orb::before { content: ''; position: absolute; width: 150%; height: 40%; border-radius: 50%; background: #ffffff38; transform: rotate(-35deg) translateY(-.6rem); }
.ai-orb i { position: absolute; width: .21rem; height: .21rem; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #fff; animation: ai-orb-dot 1.8s ease-in-out infinite; }
.ai-orb i:nth-child(1) { transform: translateX(-.42rem); animation-delay: 0s; }.ai-orb i:nth-child(2) { animation-delay: .18s; }.ai-orb i:nth-child(3) { transform: translateX(.42rem); animation-delay: .36s; }
.ai-dialog-controls { display: flex; gap: .4rem; }
.ai-dialog header button { width: 2rem; height: 2rem; padding: 0; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ai)); border-radius: 50%; color: var(--text); cursor: pointer; font: inherit; background: color-mix(in srgb, var(--surface) 60%, transparent); transition: transform .18s ease, color .18s ease, background .18s ease; }
.ai-dialog header button:hover { transform: translateY(-2px); color: var(--ai); border-color: var(--ai); }.ai-dialog header button:last-child:hover { color: #fff; border-color: var(--delete); background: var(--delete); }
.ai-messages { display: flex; min-height: 0; height: calc(100dvh - 9.15rem); max-width: 56rem; margin: 0 auto; flex-direction: column; gap: .85rem; padding: 1.8rem 1rem 6.3rem; overflow-y: auto; scroll-behavior: smooth; }
.ai-message { position: relative; max-width: min(82%, 39rem); margin: 0; padding: 1.05rem 1rem .85rem; border-radius: 1.1rem; font-size: .77rem; line-height: 1.65; box-shadow: 0 10px 25px #0000001c; animation: ai-message-in .32s cubic-bezier(.22, 1, .36, 1) both; }
.ai-message::before { position: absolute; top: .42rem; color: inherit; opacity: .62; font-size: .53rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.ai-message.user { align-self: flex-end; padding-right: 1.1rem; color: #fff; border: 1px solid #ffffff2e; border-bottom-right-radius: .32rem; background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 82%, #fff), var(--ai-deep)); box-shadow: inset 0 1px 0 #ffffff4a, 0 10px 24px color-mix(in srgb, var(--ai) 18%, transparent); }.ai-message.user::before { right: .85rem; content: 'You'; }
.ai-message.assistant { align-self: flex-start; border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--line)); border-bottom-left-radius: .32rem; background: color-mix(in srgb, var(--surface) 84%, var(--ai)); box-shadow: inset 0 1px 0 #ffffff22, 0 10px 24px #00000018; }.ai-message.assistant::before { left: .85rem; content: 'Today AI'; color: var(--ai); }
.ai-message.markdown { width: min(92%, 32rem); max-width: none; padding-top: 1.15rem; }.ai-message.markdown h2 { margin: .48rem 0 .35rem; color: var(--ai); font-size: .72rem; }.ai-message.markdown h2:first-child { margin-top: .1rem; }.ai-message.markdown ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; padding: 0; list-style: none; }.ai-message.markdown li { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }.help-command { padding: .45rem .58rem; border: 1px solid color-mix(in srgb, var(--ai) 50%, var(--line)); border-radius: .55rem; color: var(--text); cursor: pointer; font: inherit; font-size: .63rem; line-height: 1.25; background: color-mix(in srgb, var(--surface) 82%, var(--ai)); box-shadow: inset 0 1px 0 #ffffff24; transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; }.help-command:hover:not(:disabled) { border-color: var(--ai); color: #fff; background: var(--ai-deep); transform: translateY(-2px); }.help-command:active:not(:disabled) { transform: scale(.95); }.help-command:disabled { cursor: default; opacity: .62; }.ai-message.markdown small { color: var(--muted); font-size: .58rem; }
.bulk-confirm { min-width: min(19rem, 100%); border-color: color-mix(in srgb, var(--delete) 45%, var(--line)) !important; }.bulk-confirm::before { content: 'Confirm delete' !important; color: var(--delete) !important; }.bulk-confirm-actions { display: flex; gap: .55rem; margin-top: .8rem; }.bulk-confirm-actions button { flex: 1; padding: .55rem .6rem; border: 1px solid transparent; border-radius: .65rem; color: #fff; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 600; transition: transform .16s ease, filter .16s ease; }.bulk-confirm-actions button:hover { filter: brightness(1.12); transform: translateY(-1px); }.confirm-yes { border-color: color-mix(in srgb, var(--delete) 70%, #fff) !important; background: var(--delete); }.confirm-no { border-color: #75a7ff !important; background: #316ce4; }
.ai-message.system { align-self: center; max-width: min(92%, 38rem); padding: .75rem 1rem; border: 1px dashed color-mix(in srgb, var(--ai) 55%, var(--line)); border-radius: .75rem; color: var(--text); font-size: .68rem; white-space: pre-line; text-align: center; background: color-mix(in srgb, var(--ai) 10%, transparent); box-shadow: none; }.ai-message.system::before { position: static; display: block; margin-bottom: .32rem; content: 'System task changes'; color: var(--ai); font-size: .55rem; }
.ai-thinking { display: flex; align-items: center; gap: .35rem; min-width: 4.1rem; min-height: 2.65rem; padding: .7rem .9rem; }.ai-thinking::before { content: 'Thinking'; }.ai-thinking i { display: block; width: .32rem; height: .32rem; margin-top: .35rem; border-radius: 50%; background: var(--ai); animation: typing-dot .9s ease-in-out infinite; }.ai-thinking i:nth-child(2) { animation-delay: .12s; }.ai-thinking i:nth-child(3) { animation-delay: .24s; }
.ai-welcome { display: flex; width: min(31rem, 100%); margin: auto; flex-direction: column; gap: .55rem; padding: 2rem 1.5rem; border: 1px solid color-mix(in srgb, var(--ai) 52%, transparent); border-radius: 1.4rem; color: var(--muted); text-align: center; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 76%, var(--ai)), color-mix(in srgb, var(--dialog) 88%, transparent)); box-shadow: inset 0 1px 0 #ffffff2c, 0 18px 46px #0000002a; animation: ai-welcome-in .45s cubic-bezier(.22, 1, .36, 1) both; }.ai-welcome::before { content: '\2726'; display: grid; width: 3.1rem; height: 3.1rem; place-items: center; margin: 0 auto .2rem; border: 1px solid color-mix(in srgb, var(--ai) 55%, #fff); border-radius: 50%; color: #fff; font-size: 1.25rem; background: linear-gradient(145deg, var(--ai), var(--ai-deep)); box-shadow: inset 0 1px 1px #ffffff88, 0 8px 22px color-mix(in srgb, var(--ai) 28%, transparent); }.ai-welcome strong { color: var(--text); font-size: 1rem; }
.ai-dialog-composer { position: absolute; z-index: 3; right: 50%; bottom: 1.25rem; display: flex; align-items: center; width: min(42rem, calc(100% - 2rem)); min-height: 3.8rem; padding: .35rem .4rem .35rem 1rem; border: 1px solid color-mix(in srgb, var(--ai) 48%, #ffffff55); border-radius: 1.2rem; box-shadow: 0 16px 38px #0008, inset 0 1px 0 #ffffff45, inset 0 -1px 0 #00000032; transform: translateX(50%); background: linear-gradient(110deg, color-mix(in srgb, var(--dialog) 88%, var(--ai-deep)), color-mix(in srgb, var(--surface) 72%, var(--ai-deep))); backdrop-filter: blur(18px) saturate(130%); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.ai-dialog-composer:focus-within { border-color: var(--ai); box-shadow: 0 17px 42px #0009, 0 0 0 3px color-mix(in srgb, var(--ai) 14%, transparent), inset 0 1px 0 #ffffff45; }
.ai-dialog-composer input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); font: inherit; font-size: .8rem; background: transparent; }.ai-dialog-composer input::placeholder { color: var(--muted); }
.ai-dialog-composer button { min-width: 5.7rem; padding: .69rem .9rem; border: 1px solid color-mix(in srgb, var(--ai) 60%, #fff); border-radius: .82rem; color: #fff; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 600; background: linear-gradient(145deg, var(--ai), var(--ai-deep)); box-shadow: inset 0 1px 0 #ffffff55, 0 4px 0 color-mix(in srgb, var(--ai-deep) 82%, #000); transition: transform .14s ease, filter .18s ease, box-shadow .14s ease; }.ai-dialog-composer button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }.ai-dialog-composer button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 3px #0004, 0 1px 0 color-mix(in srgb, var(--ai-deep) 82%, #000); }
.ai-dialog-composer button:disabled { cursor: not-allowed; opacity: .45; }
.ai-dialog.read-only .ai-dialog-composer { display: none; }
.ai-dialog.read-only .ai-messages { height: calc(100dvh - 4.8rem); padding-bottom: 2rem; }
.ai-open .bottom-composer { opacity: 0; pointer-events: none; transform: translate(50%, 18px); }
.complete-card { position: relative; padding: 2.25rem 2rem 2rem; text-align: center; animation: modal-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.confetti { position: fixed; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: 50%; left: 50%; width: .48rem; height: .8rem; border-radius: 1px; opacity: 0; animation: confetti-toss 1.25s cubic-bezier(.16, .65, .25, 1) var(--delay) forwards; }
.complete-icon { width: 5.75rem; height: 5.75rem; margin: 0 auto 1.25rem; padding: .65rem; border-radius: 50%; color: var(--done); background: color-mix(in srgb, var(--done) 10%, transparent); box-shadow: 0 12px 24px color-mix(in srgb, var(--done) 22%, transparent); animation: complete-icon-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.complete-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.complete-card h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.complete-card p { margin: .55rem 0 1.6rem; color: var(--muted); }
.complete-card button { min-width: 7rem; padding: .7rem 1.2rem; border: 1px solid color-mix(in srgb, #fff 45%, transparent); border-radius: .55rem; color: #fff; font: inherit; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--accent) 68%, transparent); box-shadow: inset 0 1px 0 #ffffff55, 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent); backdrop-filter: blur(12px); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.complete-card button:hover { background: color-mix(in srgb, var(--accent-bright) 78%, transparent); box-shadow: inset 0 1px 0 #ffffff88, 0 11px 22px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.complete-card button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes add-pulse { 50% { transform: scale(.88); letter-spacing: .12em; } 100% { transform: scale(1); letter-spacing: .025em; } }
@keyframes complete-pop { 0% { transform: scale(.55); } 65% { transform: scale(1.08); } 100% { transform: scale(.92); } }
@keyframes tick-draw { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes complete-icon-pop { 0% { transform: translateY(12px) scale(.45) rotate(-12deg); } 62% { transform: translateY(-4px) scale(1.13) rotate(4deg); } 80% { transform: translateY(1px) scale(.97) rotate(-2deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confetti-toss { 0% { opacity: 0; transform: translate(-50%, 0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--turn)); } }
@keyframes filter-icon-pop { 0% { transform: scale(.55) rotate(-12deg); } 70% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes undo-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes undo-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes deleting-dots { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
@keyframes guide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes metal-shimmer { 0%, 100% { opacity: .76; filter: brightness(.9); transform: translateY(0); } 50% { opacity: 1; filter: brightness(1.22); transform: translateY(-1px); } }
@keyframes ambient-drift { 0% { background-position: 0% 0%, 100% 100%, 0 0; } 50% { background-position: 55% 35%, 45% 65%, 0 0; } 100% { background-position: 100% 100%, 0% 0%, 0 0; } }
@keyframes ai-orb-dot { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.22rem); } }
@keyframes ai-message-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ai-welcome-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes typing-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.22rem); } }
.theme-toggle { position: fixed; z-index: 5; top: .8rem; right: .8rem; width: 2.7rem; height: 2.7rem; padding: .22rem; border: 0; border-radius: 50%; cursor: pointer; background: transparent; transition: transform .25s ease, opacity .2s ease; }
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.theme-ring { position: relative; display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; outline: 2px solid var(--theme-outline); outline-offset: 2px; background: conic-gradient(from 10deg, #48c8ff, #7d65ff, #5578f6, #ff8b3d, #f4dd58, #4ee5c1, #48c8ff); box-shadow: 0 2px 16px #0005, inset 0 0 0 2px #ffffff66; transition: outline-color .35s ease; }
.theme-center { position: absolute; width: 1.98rem; height: 1.98rem; border: 2px solid var(--page); border-radius: 50%; background: var(--theme-center); box-shadow: inset 0 0 0 1px #0003, 0 1px 5px #0005; transition: background-color .35s ease, border-color .35s ease; }
.theme-ring svg { position: relative; z-index: 1; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--theme-icon); stroke-width: 1.8; stroke-linecap: round; transition: stroke .35s ease, transform .35s ease; }
:root[data-theme="light"] .theme-ring svg { transform: rotate(180deg); }
.theme-toggle.is-switching .theme-ring { animation: theme-spin .65s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes theme-spin { 50% { transform: rotate(180deg) scale(.82); } 100% { transform: rotate(360deg) scale(1); } }
@media (min-width: 768px) { :root { font-size: 17px; } .container { max-width: 680px; } .daily-quote { max-width: 23rem; } }
@media (max-width: 600px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .3rem; } .filter-tab, .filter-tab[data-filter="completed"] { width: 100%; font-size: .7rem; gap: .24rem; } .filter-count { width: 1.3rem; height: 1.3rem; font-size: .66rem; } }
@media (max-width: 600px) { .ai-header-label { top: -1.9rem; right: -2rem; left: auto; font-size: .58rem; } }
@media (max-width: 600px) { .terminal-output { padding: .8rem; font-size: .68rem; }.terminal-prompt { padding: .65rem; }.terminal-editor { grid-template-columns: 1fr; }.terminal-editor button { width: 100%; }.terminal-toggle { bottom: 1rem; } }
@media (max-width: 430px) { body { padding-top: 6.5rem; } }

/* A terminal always begins at the left, even on ultrawide screens. */
.terminal-dialog .terminal-output { width: 100%; margin: 0; padding-inline: .75rem; }
.terminal-prompt, :root[data-theme="light"] .terminal-prompt { width: 100%; margin: 0; padding-inline: .75rem; }

.restore-dialog { width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: 1rem; color: var(--text); background: var(--surface); box-shadow: 0 1.4rem 5rem #0008; }
.restore-dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.restore-dialog form { position: relative; padding: 1.35rem; }
.restore-dialog h2 { margin: 0 2rem .45rem 0; font: 400 1.25rem 'Aboreto', serif; }
.restore-dialog p { margin: 0 0 1rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.restore-close { position: absolute; top: .75rem; right: .75rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); cursor: pointer; font: inherit; background: transparent; }
.restore-drop { display: grid; min-height: 9rem; place-items: center; align-content: center; gap: .45rem; border: 1px dashed var(--accent); border-radius: .75rem; color: var(--text); cursor: pointer; text-align: center; font-size: .78rem; background: color-mix(in srgb, var(--accent) 7%, transparent); transition: transform .18s ease, background .18s ease; }
.restore-drop span { color: var(--accent-bright); }
.restore-drop:hover, .restore-drop.is-dragging { transform: scale(1.015); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.restore-status { min-height: 1.2rem; margin: .75rem 0 0 !important; color: var(--delete) !important; }