@font-face { font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("./vendor/fonts/dm-mono-400.ttf") format("truetype"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("./vendor/fonts/dm-mono-500.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("./vendor/fonts/dm-sans-400.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("./vendor/fonts/dm-sans-500.ttf") format("truetype"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("./vendor/fonts/dm-sans-600.ttf") format("truetype"); }
:root { color-scheme:dark; --background:#05060a; --render-background:#06070d; --surface:#0b0d17; --surface-raised:#151829; --viewport-background:#151a2b; --viewport-vignette:#070916; --border:#30354e; --ink:#f3f5ff; --muted:#aeb5cf; --disabled:#626a84; --primary:#a58aff; --secondary:#31e6f6; --hover:#9af6ff; --selection:#ffc34f; --focus:#7d8cff; --model:#9273e6; --model-highlight:#ddd6ff; --danger:#ff547c; --success:#4de0a1; --warning:#ff9f43; --field-inset:18px; --field-control-size:38px; --field-control-gap:8px; --sidebar-width:min(310px,calc(100vw - 36px)); }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; background:var(--render-background); color:var(--ink); font-family:"DM Sans", sans-serif; }
#board { display:block; width:100vw; height:100vh; cursor:default; }
.field-header { position:fixed; z-index:7; top:var(--field-inset); left:var(--field-inset); display:flex; max-width:calc(100vw - var(--field-inset) * 2); align-items:center; gap:16px; }
.sidebar-rail-top,.field-actions { display:flex; gap:var(--field-control-gap); }
.field-actions { position:fixed; z-index:7; bottom:var(--field-inset); left:var(--field-inset); align-items:flex-end; }
.sidebar-toggle { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid #494064; border-radius:9px; background:#101222e8; color:#ddd6ff; cursor:pointer; }
.sidebar-toggle[hidden] { display:none; }
[data-electron-only][hidden] { display:none; }
.sidebar-toggle img,.sidebar-toggle svg { width:22px; height:22px; }
.sidebar-toggle svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.settings-toggle svg { fill:currentColor; stroke:none; }
.sidebar-toggle:hover,.sidebar-toggle:focus-visible,.sidebar-toggle.active { border-color:var(--hover); color:var(--hover); outline:none; }
.sidebar-toggle.running { border-color:var(--selection); color:var(--selection); }
.workspace-sidebar { position:fixed; z-index:6; top:64px; bottom:64px; left:var(--field-inset); display:flex; flex-direction:column; width:var(--sidebar-width); padding:18px 12px 14px; border:1px solid #322a4b; border-radius:12px; background:#0a0c17f2; box-shadow:12px 0 38px #00000066; transform:translateX(calc(-100% - var(--field-inset) - 2px)); transition:transform .22s cubic-bezier(.22,.9,.3,1); }
.workspace-sidebar.open { transform:translateX(0); }
body.initial { visibility:hidden; }
body.initial .workspace-sidebar { transition:none; }
.workspace-sidebar > :not([hidden]) { min-height:0; flex:1; overflow-y:auto; }
#workspace-content:not([hidden]) { display:flex; flex-direction:column; }
.workspace-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:0 5px 15px; color:#d9c8ff; font:500 12px "DM Mono",monospace; letter-spacing:.2em; }
.workspace-sidebar-header button { width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:#aeb5cf; font:400 26px/1 "DM Sans",sans-serif; cursor:pointer; }
.workspace-sidebar-header button:hover { background:#1b1730; color:#f3f5ff; }
.workspace-tab-title { margin:0; padding:3px 5px 15px; color:#d9c8ff; font:500 12px "DM Mono",monospace; letter-spacing:.2em; }
.workspace-transfer { display:flex; align-items:center; gap:3px; }
.workspace-transfer button { width:auto; height:25px; padding:0 5px; border-radius:5px; font:500 10px "DM Mono",monospace; letter-spacing:0; }
.workspace-transfer button:hover,.workspace-transfer button:focus-visible { background:#1b1730; color:#f3f5ff; outline:none; }
.workspace-dialog { width:min(360px,calc(100vw - 32px)); padding:0; border:1px solid #55477d; border-radius:10px; background:#101222; color:var(--ink); box-shadow:0 18px 48px #000; }
.workspace-dialog::backdrop { background:#030409aa; }
.workspace-dialog > div { display:grid; gap:14px; padding:20px; }
.workspace-dialog p { margin:0; font:500 14px/1.4 "DM Sans",sans-serif; }
.workspace-dialog label { display:grid; gap:6px; color:var(--muted); font:500 11px "DM Mono",monospace; }
.workspace-dialog [hidden] { display:none; }
.workspace-dialog input { width:100%; padding:9px 10px; border:1px solid #55477d; border-radius:6px; background:#06070d; color:var(--ink); font:500 14px "DM Sans",sans-serif; }
.workspace-dialog input:focus { border-color:var(--hover); outline:none; }
.workspace-dialog menu { display:flex; justify-content:flex-end; gap:8px; margin:0; padding:0; }
.workspace-dialog button { padding:7px 10px; border:1px solid #55477d; border-radius:6px; background:#1b1730; color:#ddd6ff; cursor:pointer; font:500 12px "DM Sans",sans-serif; }
.workspace-dialog button:hover,.workspace-dialog button:focus-visible { border-color:var(--hover); color:var(--hover); outline:none; }
.workspace-add-project { width:100%; margin-bottom:13px; padding:9px 11px; border:1px solid #55477d; border-radius:8px; background:#1b1730; color:#ddd6ff; font:500 12px "DM Sans",sans-serif; text-align:left; cursor:pointer; }
.workspace-add-project:hover,.workspace-add-project:focus-visible { border-color:#a58aff; background:#241d3d; outline:none; }
.workspace-add-project:disabled { cursor:wait; opacity:.65; }
.selection-list { display:grid; gap:6px; margin:0; padding:0 5px; list-style:none; }
.selection-list + .workspace-add-project { margin-top:15px; }
.selection-list li { padding:8px 10px; border:1px solid #494064; border-radius:7px; background:#101222; color:#ddd6ff; font:500 12px "DM Mono",monospace; overflow-wrap:anywhere; }
.selection-list button { width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.selection-list button:hover,.selection-list button:focus-visible { color:var(--hover); outline:none; }
.selection-list button:disabled { color:var(--disabled); cursor:default; }
.plugin-list { display:grid; gap:8px; margin:0; padding:0 5px; list-style:none; }
.plugin-list li { border:1px solid #494064; border-radius:8px; background:#101222; }
.plugin-list-button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:0; background:transparent; text-align:left; cursor:pointer; }
.plugin-list-button:hover,.plugin-list-button:focus-visible { background:#19182d; outline:none; }
.plugin-list strong { color:#e5e7f4; font:600 13px "DM Sans",sans-serif; }
.plugin-list span { color:var(--success); font:500 10px "DM Mono",monospace; text-transform:uppercase; }
.plugin-setting { display:flex; align-items:center; gap:9px; margin:0 5px; padding:11px 12px; border:1px solid #494064; border-radius:8px; background:#101222; color:#e5e7f4; font:600 13px "DM Sans",sans-serif; cursor:pointer; }
.plugin-setting input { accent-color:#a58aff; }
.plugin-setting select { max-width:55%; padding:5px 7px; border:1px solid #55477d; border-radius:6px; background:#17142a; color:#ddd6ff; font:500 11px "DM Sans",sans-serif; }
.plugin-setting select:focus-visible { border-color:var(--hover); outline:none; }
.plugin-select-setting { justify-content:space-between; cursor:default; }
.plugin-setting:has(:disabled) { color:var(--disabled); cursor:not-allowed; }
.plugin-description { margin:0 7px 14px; color:var(--muted); font:400 12px/1.5 "DM Sans",sans-serif; }
.plugin-resources { display:grid; grid-template-columns:auto 1fr; gap:7px 10px; margin:0 5px 14px; padding:11px 12px; border:1px solid #494064; border-radius:8px; background:#101222; }
.plugin-resources dt { color:#d9c8ff; font:600 10px/1.4 "DM Mono",monospace; }
.plugin-resources dd { margin:0; color:var(--muted); font:400 11px/1.4 "DM Sans",sans-serif; overflow-wrap:anywhere; }
.selection-section { margin:0; padding:3px 5px 9px; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.14em; }
.selected-selection { min-height:30px; margin-bottom:15px; }
.selected-selection li { position:relative; padding-right:34px; padding-left:29px; cursor:grab; transition:border-color .12s ease,background .12s ease,opacity .12s ease,transform .12s ease; }
.selected-selection li::before { content:'⠿'; position:absolute; left:9px; top:50%; color:var(--muted); font:16px/1 "DM Sans",sans-serif; transform:translateY(-52%); }
.selected-selection li:hover::before { color:var(--hover); }
.selected-selection.drag-active li:not(.dragging) { border-color:#68538b; }
.selected-selection li.dragging { cursor:grabbing; opacity:.38; transform:scale(.98); }
.selected-selection li.drop-before::after,.selected-selection li.drop-after::after { content:''; position:absolute; left:-1px; right:-1px; height:3px; border-radius:99px; background:var(--hover); box-shadow:0 0 9px #9af6ff99; }
.selected-selection li.drop-before::after { top:-5px; }
.selected-selection li.drop-after::after { bottom:-5px; }
.selected-selection .selection-remove { position:absolute; top:50%; right:5px; width:22px; padding:0; color:var(--muted); font:400 20px/1 "DM Sans",sans-serif; text-align:center; opacity:0; pointer-events:none; transform:translateY(-52%); }
.selected-selection li:hover .selection-remove,.selected-selection li:focus-within .selection-remove { color:var(--danger); opacity:1; pointer-events:auto; }
.selected-selection .selection-remove:hover,.selected-selection .selection-remove:focus-visible { color:#ff7696; outline:none; }
.selected-selection li:focus-visible { border-color:var(--hover); outline:none; }
.workspace-tree { overflow-y:auto; padding:0 2px 14px; scrollbar-width:thin; }
.workspace-empty { margin:18px 7px; color:#7e85a2; font:400 12px/1.45 "DM Sans",sans-serif; }
.workspace-section-title { margin:4px 6px 7px; color:var(--secondary); font:500 10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.workspace-private-title { margin-top:18px; color:var(--selection); text-shadow:0 0 12px #ffc34f99; }
.workspace-row { display:flex; align-items:center; gap:5px; min-width:0; padding:3px 0; }
.workspace-row button { border:0; background:transparent; color:#aeb5cf; cursor:pointer; }
.workspace-disclosure { flex:0 0 25px; height:25px; border-radius:5px!important; color:#aeb5cf!important; font:500 14px/1 "DM Sans",sans-serif; }
.workspace-disclosure:hover { background:#201b32!important; color:#ddd6ff!important; }
.workspace-name { min-width:0; flex:1; overflow:hidden; padding:6px 7px!important; border-radius:6px!important; color:#e5e7f4!important; font:500 13px "DM Sans",sans-serif; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.workspace-name:hover { background:#181b2c!important; }
.workspace-row.project .workspace-name { font-weight:600; }
.workspace-row.ripple .workspace-name { color:#c4cae4!important; }
.workspace-row.ripple.active .workspace-name { background:#292046!important; color:#f0e9ff!important; box-shadow:inset 2px 0 #c58cff; }
.workspace-action { flex:0 0 25px; width:25px; height:25px; border-radius:5px!important; color:#9299b6!important; font:500 17px/1 "DM Sans",sans-serif; opacity:0; }
.workspace-row:hover .workspace-action,.workspace-action:focus-visible { opacity:1; }
.workspace-action:hover { background:#25203a!important; color:#9af6ff!important; }
.workspace-action.delete:hover { background:#3a1928!important; color:#ff7696!important; }
.workspace-children { margin-left:13px; padding-left:8px; border-left:1px solid #28233d; }
.workspace-folder .workspace-children { margin-left:12px; }
@media (max-width:680px) { :root { --field-inset:12px; --sidebar-width:calc(100vw - 24px); } .workspace-sidebar { top:58px; bottom:58px; } }
/* Inline SVG keeps the mode tools sharp without adding image assets. The hotspot is the
   top-left tip, so the cursor points precisely at a task or group. */
#board[data-cursor-mode="group"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4v9a8 8 0 0 0 16 0V4h-5v9a3 3 0 0 1-6 0V4z' fill='%23626a84' stroke='%2306070d' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 5h5v6H8zM19 5h5v6h-5z' fill='%23aeb5cf'/%3E%3C/svg%3E") 4 4, default; }
#board[data-cursor-mode="group"][data-cursor-target="true"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4v9a8 8 0 0 0 16 0V4h-5v9a3 3 0 0 1-6 0V4z' fill='%23a58aff' stroke='%2306070d' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 5h5v6H8zM19 5h5v6h-5z' fill='%23ddd6ff'/%3E%3C/svg%3E") 4 4, pointer; }
#board[data-cursor-mode="add"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 5v22M5 16h22' fill='none' stroke='%23aeb5cf' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 4 4, default; }
#board[data-cursor-mode="add"][data-cursor-target="true"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%2331e6f6' opacity='.2'/%3E%3Cpath d='M16 5v22M5 16h22' fill='none' stroke='%2331e6f6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 4 4, pointer; }
#board[data-cursor-mode="warp"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M24.9 7.4A12.5 12.5 0 1 0 30.5 18' fill='none' stroke='%23bca7d9' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='18' r='7.25' fill='%23151829' fill-opacity='.9' stroke='%237e6998' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='3.25' fill='%23c8b6e5' fill-opacity='.28'/%3E%3Ccircle cx='28.5' cy='8.5' r='1.5' fill='%23d9b8ff'/%3E%3C/svg%3E") 18 18, default; }
#board[data-cursor-mode="warp"][data-cursor-target="true"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M24.9 7.4A12.5 12.5 0 1 0 30.5 18' fill='none' stroke='%23e3c4ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='18' r='7.25' fill='%23201838' fill-opacity='.94' stroke='%23c58cff' stroke-width='1.25'/%3E%3Ccircle cx='18' cy='18' r='3.25' fill='%23e7cbff' fill-opacity='.55'/%3E%3Ccircle cx='28.5' cy='8.5' r='1.5' fill='%23fff3ff'/%3E%3C/svg%3E") 18 18, pointer; }
#board[data-cursor-mode="complete"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 17.5 12.5 25 28 6' fill='none' stroke='%2306070d' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3Cpath d='M5 17.5 12.5 25 28 6' fill='none' stroke='%23aeb5cf' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, default; }
#board[data-cursor-mode="complete"][data-cursor-target="true"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 17.5 12.5 25 28 6' fill='none' stroke='%2306070d' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3Cpath d='M5 17.5 12.5 25 28 6' fill='none' stroke='%234de0a1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, pointer; }
#board[data-cursor-mode="delete"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 10h16l-1 17H9zM6 7h20M12 7l1-3h6l1 3M13 14v8M19 14v8' fill='none' stroke='%23aeb5cf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10h16l-1 17H9z' fill='%23aeb5cf' opacity='.16'/%3E%3C/svg%3E") 4 4, default; }
#board[data-cursor-mode="delete"][data-cursor-target="true"] { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 10h16l-1 17H9zM6 7h20M12 7l1-3h6l1 3M13 14v8M19 14v8' fill='none' stroke='%23ff547c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10h16l-1 17H9z' fill='%23ff547c' opacity='.28'/%3E%3C/svg%3E") 4 4, pointer; }
.link-indicator { position:fixed; left:calc(var(--field-inset) + 102px); bottom:27px; color:var(--primary); font:500 11px "DM Mono", monospace; letter-spacing:.28em; opacity:0; pointer-events:none; transform:translate(-10px,8px) rotate(-5deg) scale(.82); transform-origin:left bottom; transition:left .22s cubic-bezier(.22,.9,.3,1),color .22s ease, text-shadow .22s ease, opacity .18s ease, transform .34s cubic-bezier(.22,1.4,.42,1); }
.workspace-sidebar.open ~ .link-indicator { left:calc(var(--field-inset) + var(--sidebar-width) + 24px); }
.link-indicator.visible { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
.link-indicator.complete { color:#4dff72; text-shadow:0 0 12px #4dff7299; }
.link-indicator.add { color:var(--secondary); text-shadow:0 0 12px #31e6f699; }
.link-indicator.delete { color:var(--danger); text-shadow:0 0 12px #ff547c99; }
.link-indicator.warp { color:#c58cff; text-shadow:0 0 12px #c58cff99; }
.field-title { display:none; min-width:0; overflow:hidden; margin:0; color:#ddd6ff; font:600 18px/1.2 "DM Sans", sans-serif; letter-spacing:-.02em; pointer-events:none; text-overflow:ellipsis; text-shadow:0 0 18px #a58aff88; white-space:nowrap; }
.field-title.visible { display:block; }
.escape-hold-indicator { position:fixed; z-index:7; left:var(--field-inset); top:66px; width:178px; opacity:0; pointer-events:none; transform:translateY(-5px); transition:left .22s cubic-bezier(.22,.9,.3,1),opacity .16s ease,transform .16s ease; }
.workspace-sidebar.open ~ .escape-hold-indicator { left:calc(var(--field-inset) + var(--sidebar-width) + 16px); }
.escape-hold-indicator.visible { opacity:1; transform:translateY(0); }
.escape-hold-indicator span { display:block; margin-bottom:6px; color:#d9c8ff; font:500 9px "DM Mono", monospace; letter-spacing:.12em; }
.escape-hold-indicator i { display:block; height:3px; overflow:hidden; border-radius:99px; background:#342657; }
.escape-hold-indicator i::after { content:''; display:block; width:var(--hold-progress, 0%); height:100%; border-radius:inherit; background:#c58cff; box-shadow:0 0 10px #c58cffee; transition:width .05s linear; }
.link-indicator.celebrate { animation:indicator-celebrate .42s cubic-bezier(.22,1.45,.42,1); }
@keyframes indicator-celebrate { 0% { transform:translate(-8px,5px) rotate(-4deg) scale(.84); } 58% { transform:translate(1px,-2px) rotate(1deg) scale(1.14); } 100% { transform:translate(0,0) rotate(0) scale(1); } }
.hud { position:fixed; left:28px; top:26px; pointer-events:none; user-select:none; }
.brand { font:500 14px "DM Mono", monospace; letter-spacing:.16em; color:var(--primary); margin-bottom:19px; }
.brand-mark { font-size:17px; vertical-align:-1px; margin-right:7px; letter-spacing:0; }
.hud p { margin:5px 0; color:var(--muted); font-size:12px; letter-spacing:.005em; }
kbd { font:500 10px "DM Mono", monospace; color:var(--model-highlight); border:1px solid var(--border); border-radius:3px; padding:2px 4px; margin-right:2px; }
#focus { position:fixed; bottom:21px; right:26px; border:1px solid var(--border); background:var(--surface-raised); color:var(--primary); border-radius:5px; padding:8px 10px; font:500 11px "DM Mono", monospace; cursor:pointer; transition:background .15s; }
#focus:hover { background:var(--viewport-background); } #focus span { color:var(--muted); margin-left:5px; }
.task-editor { display:none; position:fixed; z-index:2; transform:translate(-50%,-50%); overflow-y:auto; overflow-wrap:anywhere; resize:none; outline:none; border:var(--editor-border, 2px) solid var(--primary); border-radius:var(--editor-radius, 12px); background:var(--surface-raised); color:var(--ink); padding:0 var(--editor-horizontal-padding, 18px); font:600 var(--editor-font-size, 12px) "DM Sans", sans-serif; line-height:var(--editor-line-height, 15px); letter-spacing:-.015em; text-align:center; box-shadow:0 0 var(--editor-glow, 18px) #a58aff88; caret-color:var(--hover); transition:box-shadow .16s ease, border-color .16s ease; }
.task-editor.visible { display:block; }
.task-editor:focus { border-color:var(--hover); box-shadow:0 0 calc(var(--editor-glow, 18px) * 1.25) #a58affaa; }
.task-editor::placeholder { color:var(--muted); opacity:.86; }
.description-editor { transform:translate(-50%,0); overflow-y:auto; text-align:left; padding:10px 13px; font:500 var(--editor-font-size, 12px) "DM Sans", sans-serif; line-height:var(--editor-line-height, 15px); letter-spacing:normal; background:#101425; border-color:#626a84; box-shadow:none; }
.description-editor:focus { border-color:var(--hover); box-shadow:none; }
.task-description { display:none; position:fixed; z-index:1; transform:translateX(-50%); overflow-y:auto; scrollbar-width:thin; padding:10px 13px; border:1px solid #626a84; border-radius:12px; background:#101425; box-shadow:0 8px 20px #00000066; color:#d7dcf0; font:500 12px/1.35 "DM Sans", sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.task-description.visible { display:block; }
.task-images { display:none; position:fixed; z-index:1; width:132px; overflow:visible; scrollbar-width:thin; }
.task-images.visible { display:grid; gap:8px; }
.task-images.scrollable { max-height:min(74vh,520px); padding-right:4px; overflow-y:auto; }
.task-image-bubble { padding:6px; border:1px solid #626a84; border-radius:12px; background:#101425; box-shadow:0 8px 20px #00000066; }
.task-image-bubble img { display:block; width:100%; height:96px; object-fit:cover; border-radius:7px; background:#06070d; cursor:zoom-in; }
.task-images.delete-mode .task-image-bubble img, .task-content.delete-mode .task-content-bubble { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 10h16l-1 17H9zM6 7h20M12 7l1-3h6l1 3M13 14v8M19 14v8' fill='none' stroke='%23ff547c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10h16l-1 17H9z' fill='%23ff547c' opacity='.28'/%3E%3C/svg%3E") 16 16, pointer; }
.task-content { display:none; position:fixed; z-index:1; width:172px; overflow:visible; scrollbar-width:thin; }
.task-content.visible { display:grid; gap:8px; }
.task-content.scrollable { max-height:min(74vh,520px); padding-right:4px; overflow-y:auto; }
.task-content-bubble { display:block; overflow:hidden; padding:10px 12px 10px 31px; border:1px solid #626a84; border-radius:12px; background:#101425; box-shadow:0 8px 20px #00000066; color:#d7dcf0; font:500 12px/1.25 "DM Sans", sans-serif; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; position:relative; }
.task-content-bubble::before { content:'↗'; position:absolute; left:11px; top:50%; color:var(--secondary); font:600 16px/1 "DM Sans", sans-serif; transform:translateY(-54%); }
.task-content-bubble:hover, .task-content-bubble:focus-visible { border-color:var(--hover); color:var(--ink); outline:none; box-shadow:0 0 16px #31e6f655,0 8px 20px #00000066; }
.image-viewer { display:none; position:fixed; z-index:4; inset:0; place-items:center; padding:20px; background:#05060af2; }
.image-viewer.visible { display:grid; }
.image-viewer img { display:block; width:calc(100vw - 40px); height:calc(100vh - 40px); object-fit:contain; border:1px solid #626a84; border-radius:14px; box-shadow:0 14px 44px #00000099; }
#image-viewer-close { position:absolute; top:21px; right:25px; width:38px; height:38px; border:1px solid #626a84; border-radius:50%; background:#151829; color:#f3f5ff; font:400 30px/32px "DM Sans", sans-serif; cursor:pointer; }
#image-viewer-close:hover { border-color:#9af6ff; color:#9af6ff; }
.image-viewer-position { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#d7dcf0; font:500 11px "DM Mono", monospace; letter-spacing:.08em; }
.toast { opacity:0; position:fixed; left:50%; top:35px; transform:translate(-50%,-12px); padding:9px 13px; border:1px solid var(--focus); border-radius:4px; background:var(--surface-raised); color:var(--model-highlight); font:11px "DM Mono", monospace; transition:opacity .25s, transform .25s; pointer-events:none; }
.toast.icon { left:28px; top:26px; min-width:34px; padding:6px 9px; border-radius:999px; color:var(--primary); font:600 20px/1 "DM Sans", sans-serif; text-align:center; text-shadow:0 0 10px #a58aff88; transform:translate(-10px,-12px); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.icon.show { transform:translate(-10px,0); }
@media (max-width:680px) { .hud p { display:none; } .hud { left:18px; top:18px; } .field-header { gap:12px; } .field-title { font-size:16px; } .escape-hold-indicator { top:60px; } .workspace-sidebar.open ~ .escape-hold-indicator { left:var(--field-inset); } .link-indicator { left:calc(var(--field-inset) + 96px); bottom:18px; } .workspace-sidebar.open ~ .link-indicator { left:calc(var(--field-inset) + 96px); } #focus { right:18px; bottom:13px; } }