/* Early-Macintosh 1-bit skin (System 1–6). Hand-rolled from the theme addendum tokens, using self-hosted ChicagoFLF + Monaco. Strict 1-bit: pure black, pure white, grays are dither. No anti-aliasing, no blur, no gradients except pinstripe + dither, no radius except the button. */ @font-face { font-family: 'Chicago'; src: url('/vendor/fonts/ChicagoFLF.woff2') format('woff2'), url('/vendor/fonts/ChicagoFLF.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Monaco'; src: url('/vendor/fonts/monaco.woff2') format('woff2'), url('/vendor/fonts/monaco.woff') format('woff'); font-display: swap; } :root { --ink: #000000; --paper: #ffffff; --border-width: 1px; --shadow-offset: 2px; --titlebar-height: 20px; --menubar-height: 20px; --button-radius: 6px; } * { box-sizing: border-box; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; text-rendering: optimizeSpeed; } html, body { margin: 0; height: 100%; font-family: 'Chicago', 'ChicagoFLF', Geneva, Tahoma, sans-serif; font-size: 15px; color: var(--ink); background: var(--paper); overflow: hidden; cursor: default; user-select: none; } /* 50% gray DITHER — the classic Finder desktop (2px checkerboard). */ .dither-50 { background-color: var(--paper); background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--paper) 0% 50%); background-size: 2px 2px; image-rendering: pixelated; } /* Active title-bar PINSTRIPES: alternating 1px horizontal lines. */ .titlebar-active { background-image: repeating-linear-gradient( to bottom, var(--ink) 0, var(--ink) 1px, var(--paper) 1px, var(--paper) 2px ); } /* ===================== System 7 theme (toggleable, additive) ===================== Default remains the strict 1-bit screen above. Adding class `sys7` to shifts to the 1991 System 7 era: color icons + rainbow Apple (swapped in JS), a lighter platinum desktop, and faintly raised buttons. Windows + pinstripe title bars carry over unchanged. (Platinum tokens are from the theme addendum's Section 7.) */ :root { --plat-light: #dddddd; --plat-mid: #aaaaaa; --plat-dark: #808080; } body.sys7 #desktop.dither-50 { /* lighter gray dither, the softer System 7 desktop */ background-image: repeating-conic-gradient(var(--plat-mid) 0% 25%, var(--paper) 0% 50%); } body.sys7 button, body.sys7 .btn { background: var(--plat-light); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--plat-mid); /* faint raised bevel */ } body.sys7 button:active, body.sys7 .btn:active { background: var(--ink); color: var(--paper); box-shadow: none; } body.sys7 button.default { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--plat-mid), 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); } /* ---------------- menu bar ---------------- */ #menubar { position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-height); background: var(--paper); border-bottom: var(--border-width) solid var(--ink); display: flex; align-items: center; gap: 18px; padding: 0 10px; z-index: 10000; font-size: 13px; } #menubar .apple { font-size: 15px; } #menubar .spacer { flex: 1; } #menubar .clock { font-variant-numeric: tabular-nums; } /* Menu-bar weather readout: tidy right-side status item next to the clock. Glyph + temp + city, sized to the 20px bar; muted so it never competes with the rainbow mushroom. */ #menubar .mb-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; white-space: nowrap; margin-right: 8px; } #menubar .mb-status .wx-glyph { display: inline-flex; align-items: center; image-rendering: pixelated; } #menubar .mb-status .wx-glyph svg { display: block; } #menubar .mb-status .wx-temp { font-variant-numeric: tabular-nums; } #menubar .mb-status .wx-city { opacity: 0.85; } /* Sad Toadie in the Trash/Wishing Well feedback window (gently playful, not distressed). */ .trash-toadie { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .trash-toadie img { width: 44px; height: 44px; image-rendering: pixelated; flex: none; } .trash-toadie .tt-intro { font-size: 12px; color: #333; line-height: 1.4; } #menubar .mb-item { padding: 0 4px; } #menubar .mb-item:hover { background: var(--ink); color: var(--paper); } /* ---------------- desktop + icons ---------------- */ #desktop { position: fixed; top: var(--menubar-height); left: 0; right: 0; bottom: 0; } .desktop-icon { position: absolute; width: 72px; text-align: center; cursor: default; } .desktop-icon .glyph { width: 32px; height: 32px; margin: 0 auto; image-rendering: pixelated; } .desktop-icon .label { display: inline-block; margin-top: 3px; padding: 0 3px; font-size: 12px; background: transparent; color: var(--ink); } .desktop-icon.selected .glyph { filter: invert(1); } body.sys7 .desktop-icon.selected .glyph { filter: brightness(0.55); } .desktop-icon.selected .label { background: var(--ink); color: var(--paper); } /* ---------------- windows ---------------- */ .win { position: absolute; background: var(--paper); border: var(--border-width) solid var(--ink); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink); min-width: 240px; display: flex; flex-direction: column; } .win .titlebar { height: var(--titlebar-height); border-bottom: var(--border-width) solid var(--ink); display: flex; align-items: center; position: relative; background: var(--paper); cursor: move; } .win.active .titlebar { /* pinstripes applied via .titlebar-active too */ } .win .titlebar .close-box { width: 11px; height: 11px; border: 1px solid var(--ink); margin-left: 6px; background: var(--paper); cursor: pointer; flex: none; } .win .titlebar .close-box:active { background: var(--ink); } .win .titlebar .title { position: absolute; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 8px; font-size: 13px; white-space: nowrap; } .win .body { flex: 1; overflow: auto; padding: 10px; background: var(--paper); } /* System 7 size box: drag the bottom-right corner to resize */ .win .grow-box { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 3; background-color: var(--paper); background-image: repeating-linear-gradient(135deg, var(--ink) 0 1px, var(--paper) 1px 3px); border-left: var(--border-width) solid var(--ink); border-top: var(--border-width) solid var(--ink); cursor: nwse-resize; } /* ---------------- buttons (the only radius) ---------------- */ button, .btn { font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--button-radius); padding: 2px 12px; cursor: pointer; } button:active, .btn:active { background: var(--ink); color: var(--paper); } /* invert, no transition */ button.default { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); /* heavy default ring */ } input[type=text], input[type=email], textarea { font-family: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 3px 5px; outline: none; } /* ---------------- list rows ---------------- */ .row { border-bottom: 1px solid var(--ink); padding: 6px 2px; } .row:last-child { border-bottom: none; } .meta { font-size: 12px; } .row .meta { font-size: 12px; } .tag { border: 1px solid var(--ink); padding: 0 4px; font-size: 11px; } /* ---------------- Assistant terminal ---------------- */ .terminal { font-family: 'Monaco', monospace; font-size: 20px; color: var(--ink); background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .terminal .line { margin: 0; } .term-input-row { position: relative; font-family: 'Monaco', monospace; font-size: 20px; } .term-input-row .prompt { margin-right: 6px; } .term-echo { white-space: pre-wrap; overflow-wrap: anywhere; } /* real input is hidden but still focusable; echo spans + block cursor are the visible UI */ .term-input-row input.hidden-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: none; padding: 0; } /* block cursor overlays the character at the caret: inverted (ink bg, paper text), blinking. min-width keeps an end-of-line space visible as a solid block. */ .cursor { display: inline-block; min-width: 0.6em; white-space: pre; /* ~25% shorter than the full line box, bottom-aligned to the text so it reads as a caret block rather than a tall bar. */ height: 1.1em; line-height: 1.1em; vertical-align: text-bottom; overflow: hidden; background: var(--ink); color: var(--paper); animation: blink 1s steps(1) infinite; } .spinner-line { display: flex; align-items: center; } .spinner-glyph { font-family: 'Monaco', monospace; line-height: 1; display: inline-block; } /* Addendum 12: the thinking-Toadie sits where the ASCII spinner sat (inline, calm, pixel-crisp). */ .spinner-toadie { display: inline-flex; align-items: center; margin-left: 2px; } .spinner-toadie img { width: 22px; height: 22px; image-rendering: pixelated; } /* keep ALL terminal text one readable size (20px) — no tiny meta/spinner bits */ .terminal .meta, .terminal .spinner-glyph { font-size: 20px; } /* rendered Markdown in assistant replies (modern formatting, retro skin) */ .terminal strong { font-weight: bold; } .terminal code { font-family: 'Monaco', monospace; border: 1px solid var(--ink); padding: 0 3px; } .terminal .md-h { font-weight: bold; margin: 8px 0 2px; } /* A list in the agent reply renders as a little zebra table (color separates rows, no lines, no bullets), sized to the longest item, so lists look consistent with the list widgets. Subtle. */ .terminal .md-list { display: inline-block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 4px 0; vertical-align: top; } .terminal .md-list .md-li { display: block; width: auto; padding: 3px 12px; margin: 0; text-indent: 0; } .terminal .md-li-a { background: #d6e6e6; } .terminal .md-li-b { background: #ecf4f4; } .terminal .md-sp { height: 0.5em; } /* real tables in assistant replies (e.g. the weather forecast), themed hard-edged */ .md-table { border-collapse: collapse; margin: 8px 0; font-size: 16px; } .md-table th, .md-table td { border: 1px solid var(--ink); padding: 3px 8px; text-align: left; vertical-align: top; white-space: nowrap; } .md-table th { font-weight: bold; } body.sys7 .md-table th { background: #d8d8d8; } /* thumbs on responses (Addendum 5 Phase D) — quiet, passive */ .thumbs-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; } .thumbs-row .thumb { cursor: pointer; opacity: 0.45; font-size: 16px; filter: grayscale(1); } .thumbs-row .thumb:hover, .thumbs-row .thumb.on { opacity: 1; filter: none; } .thumb-comment { display: inline-flex; gap: 6px; align-items: center; } @keyframes blink { 50% { opacity: 0; } } /* ---------------- window-open zoom (the one animation) ---------------- */ .zoom-rect { position: fixed; border: 1px solid var(--ink); background: transparent; z-index: 9999; pointer-events: none; transition: transform 200ms linear, width 200ms linear, height 200ms linear, left 200ms linear, top 200ms linear; } @media (prefers-reduced-motion: reduce) { .zoom-rect { display: none; } } /* ---------------- login ---------------- */ #login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20000; } /* when logged in, #login is empty — collapse it so it doesn't overlay & swallow all clicks */ #login:empty { display: none; } /* ---------------- mobile fallback: drop the windowing, stack panels ---------------- */ @media (max-width: 640px) { #desktop .desktop-icon { display: none; } .win { position: static !important; width: 100% !important; height: auto !important; box-shadow: none; border-left: none; border-right: none; margin-bottom: 10px; transform: none !important; } #windows { position: fixed; top: var(--menubar-height); left: 0; right: 0; bottom: 0; overflow: auto; padding: 8px; } .zoom-rect { display: none; } .win .grow-box { display: none; } } /* ============================================================================================ Addendum 5 Phase G — System 7 platinum (now the PRIMARY look). Beveled gray chrome, raised buttons, inset wells, beveled gray scrollbars. The muted accent palette is functional only; gray does most of the work. The rainbow mushroom stays the one saturated element. ============================================================================================ */ :root { /* platinum grays */ --plat-bg: #c8c8c8; /* window/chrome face */ --plat-face: #d6d6d6; /* raised button face */ --plat-hi: #ffffff; /* top-left highlight */ --plat-sh: #808080; /* bottom-right shadow */ --plat-sh2: #555555; /* deeper shadow line */ --plat-well: #e8e8e8; /* inset field/list well */ /* muted, low-saturation accent palette (256-color era), functional accents only */ --acc-blue: #5a7a9a; --acc-green: #5f7a52; --acc-red: #9a5a5a; --acc-gold: #9a8a4a; } /* desktop: soft platinum */ body.sys7 { background: var(--plat-bg); } /* The workspace desktop: a colorful dithered pattern (teal + sparse 8-bit confetti), matching the landing so the brand is one coherent world. Personality layer; window chrome stays platinum gray. Crisp hard-edged dithering (no smooth gradients); the mushroom remains the only saturated mark. */ body.sys7 #desktop.dither-50 { background-color: #4e9a9a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect x='6' y='8' width='2' height='2' fill='%23e0a93b'/%3E%3Crect x='30' y='18' width='2' height='2' fill='%23c84c4c'/%3E%3Crect x='18' y='37' width='2' height='2' fill='%233b5dc9'/%3E%3Crect x='41' y='6' width='2' height='2' fill='%238a6dc1'/%3E%3Crect x='11' y='27' width='2' height='2' fill='%234f9d4f'/%3E%3Crect x='37' y='40' width='2' height='2' fill='%23f3ead3'/%3E%3C/svg%3E"), repeating-conic-gradient(#4e9a9a 0% 25%, #459090 0% 50%); background-size: 48px 48px, 4px 4px; image-rendering: pixelated; } /* menu bar: raised platinum strip */ body.sys7 #menubar { background: var(--plat-face); border-bottom: 1px solid var(--plat-sh); box-shadow: inset 0 1px 0 var(--plat-hi), inset 0 -1px 0 var(--plat-sh); } /* windows: gray face, beveled outer edge, hard drop shadow */ body.sys7 .win { background: var(--plat-bg); border: 1px solid var(--plat-sh2); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh), 3px 3px 0 0 rgba(0,0,0,0.35); } body.sys7 .win .body { background: var(--plat-bg); } /* title bar: gray pinstripe; active gets the classic horizontal lines */ body.sys7 .win .titlebar { background: var(--plat-face); border-bottom: 1px solid var(--plat-sh); box-shadow: inset 0 1px 0 var(--plat-hi); } body.sys7 .win .titlebar.titlebar-active { background-image: repeating-linear-gradient( to bottom, var(--plat-sh) 0, var(--plat-sh) 1px, var(--plat-face) 1px, var(--plat-face) 2px); } body.sys7 .win .titlebar .title { background: var(--plat-face); padding: 0 6px; } /* close box: beveled */ body.sys7 .win .titlebar .close-box { background: var(--plat-face); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* buttons: raised platinum with light/dark bevel; pressed = inset */ body.sys7 button, body.sys7 .btn { background: var(--plat-face); border: 1px solid var(--plat-sh2); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); padding: 3px 12px; border-radius: 0; } body.sys7 button:active, body.sys7 .btn:active { background: #bdbdbd; color: var(--ink); box-shadow: inset 1px 1px 0 var(--plat-sh2), inset -1px -1px 0 var(--plat-hi); } body.sys7 button.default { border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* inset wells: text fields, selects, lists, the terminal, tables */ body.sys7 input[type=text], body.sys7 input[type=email], body.sys7 input[type=password], body.sys7 select, body.sys7 textarea, body.sys7 .terminal, body.sys7 .row, body.sys7 .md-table { background: var(--plat-well); border: 1px solid var(--plat-sh); box-shadow: inset 1px 1px 0 var(--plat-sh), inset -1px -1px 0 var(--plat-hi); } body.sys7 .terminal { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25); } /* beveled gray scrollbars (webkit) */ body.sys7 .body::-webkit-scrollbar, body.sys7 .terminal::-webkit-scrollbar, body.sys7 #windows::-webkit-scrollbar { width: 15px; height: 15px; } body.sys7 .body::-webkit-scrollbar-track, body.sys7 .terminal::-webkit-scrollbar-track { background: #bdbdbd; } body.sys7 .body::-webkit-scrollbar-thumb, body.sys7 .terminal::-webkit-scrollbar-thumb { background: var(--plat-face); border: 1px solid var(--plat-sh); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* muted functional accents */ body.sys7 .tag { background: var(--acc-blue); color: #fff; border-radius: 0; padding: 0 4px; } body.sys7 .md-h { color: var(--acc-blue); } body.sys7 .cp-status-ok { color: var(--acc-green); } /* ============================================================================ Addendum 8 — color carries meaning. One shared, curated, meaning-carrying palette (recorded in DECISIONS.md). Used by the app AND the landing. ============================================================================ */ /* Agenda category tags: each type one bold-but-era-authentic color (not neon), so the kind of item reads at a glance. More specific than `body.sys7 .tag` so the per-category color wins. */ body.sys7 .tag.tag-health { background: #2f8f3a; color: #fff; } /* Health -> green */ body.sys7 .tag.tag-reminder { background: #2f54c8; color: #fff; } /* Reminder-> blue */ body.sys7 .tag.tag-bill { background: #d99422; color: #20203a; }/* Bill -> amber */ body.sys7 .tag.tag-date { background: #7a3fb0; color: #fff; } /* Date -> purple */ body.sys7 .tag.tag-recurring { background: #7a3fb0; color: #fff; } /* Recurring (shares Date purple) */ /* Grocery-by-category row tints: color the Shopping list by category the same way Agenda colors by type. Era-authentic DITHERED soft tint (the category color checkered with white, an 8-bit technique), NOT a smooth modern pastel. Item text stays dark for readability. Unmatched items (no cat-* class) keep the neutral default witem tint. Categorizer = groceryCategory() in app.js. */ .witem.cat-produce { background-color: #fff; background-image: repeating-conic-gradient(#7ec47e 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-dairy { background-color: #fff; background-image: repeating-conic-gradient(#88b6ec 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-household { background-color: #fff; background-image: repeating-conic-gradient(#e6bb63 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-pantry { background-color: #fff; background-image: repeating-conic-gradient(#cfb585 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem .wtext { color: #1a1a2e; } /* dark text on the soft tints */ /* List cards carry a color by TYPE so each kind of list reads at a glance (color = meaning). A colored left edge only; the card body stays platinum gray. Used in the Lists + Skills folders. */ .sk-wcard { border-left-width: 4px; } .sk-wcard.lt-grocery { border-left-color: #4f9d4f; } .sk-wcard.lt-collection { border-left-color: #4e9a9a; } .sk-wcard.lt-reminder { border-left-color: #3b5dc9; } .sk-wcard.lt-todo { border-left-color: #2f54c8; } .sk-wcard.lt-date { border-left-color: #8a6dc1; } .sk-wcard.lt-receipt, .sk-wcard.lt-warranty, .sk-wcard.lt-bill, .sk-wcard.lt-renewal { border-left-color: #d99422; } .sk-wcard.lt-note, .sk-wcard.lt-keep { border-left-color: #c8962f; } .sk-wcard.lt-medication { border-left-color: #c84c4c; } /* Agent window: a little color in the personality layer. The user's own lines read in a calm blue so the dialogue is easy to scan; the assistant's text stays dark for readability. */ body.sys7 .terminal .line.usr { color: #2f54c8; } /* Assistant replies read as "from your agent": a faint tinted card with a little Toadie avatar. */ body.sys7 .terminal .line.md { position: relative; background: #eef4f4; border-left: 2px solid #bcd2d2; padding: 5px 8px 5px 30px; margin: 4px 0; } body.sys7 .terminal .line.md::before { content: ''; position: absolute; left: 7px; top: 5px; width: 18px; height: 18px; background: url('/toadie/toadie-happy.svg') no-repeat center / contain; image-rendering: pixelated; } /* values, list names, links, and code the assistant mentions get a soft accent (the rest stays dark) */ body.sys7 .terminal .line.md strong { color: #2a6f6f; } body.sys7 .terminal .line.md a { color: #2f54c8; } body.sys7 .terminal .line.md code { color: #8a3fb0; } /* tool/status chips + the thinking spinner, colored by what kind of thing the agent did */ body.sys7 .terminal .line.tool-lists { color: #2f54c8; } body.sys7 .terminal .line.tool-remind { color: #2f8f3a; } body.sys7 .terminal .line.tool-info { color: #b07a1f; } body.sys7 .terminal .line.tool-make { color: #7a3fb0; } body.sys7 .terminal .spinner-glyph { color: #3f9a9a; } /* menu-bar hover keeps the inverted classic look but in muted blue */ body.sys7 #menubar .mb-item:hover, body.sys7 #mushroom-menu .mi:hover { background: var(--acc-blue); color: #fff; } /* Agent window layout (Addendum 6A): the body is a flex column so the terminal scrolls and the attach+model bar stays pinned at the bottom, always visible regardless of chat length. */ .win .body.agent-body { display: flex; flex-direction: column; overflow: hidden; padding: 8px; } /* the scrolling chat region — keeps its own white "paper" background so it never blends into the System 7 gray window body, and scrolls independently of the pinned bar. */ .agent-term { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; border: 1px solid var(--plat-sh,#808080); padding: 8px; } body.sys7 .agent-term { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.18); } /* Tool-use tags render as a filled colored CHIP (a rounded box), not just colored text. */ body.sys7 .terminal .line.tool-lists, body.sys7 .terminal .line.tool-remind, body.sys7 .terminal .line.tool-info, body.sys7 .terminal .line.tool-make { display: inline-block; padding: 2px 9px; margin: 4px 0; border-radius: 3px; font-size: 11px; line-height: 1.7; border: 1px solid; font-weight: bold; letter-spacing: 0.2px; } body.sys7 .terminal .line.tool-lists { background: #dde6fb; border-color: #4f6fd0; color: #1f3aa0; } body.sys7 .terminal .line.tool-remind { background: #d8f0db; border-color: #3f9a4a; color: #1d6b28; } body.sys7 .terminal .line.tool-info { background: #f6e8cf; border-color: #c08a2f; color: #8a5e12; } body.sys7 .terminal .line.tool-make { background: #e9ddf6; border-color: #8a5fc0; color: #5b2c87; } /* Each tool the agent used renders as its own small chip in a wrapping row. */ .terminal .chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; } body.sys7 .terminal .tool-chip { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: inherit; font-weight: bold; letter-spacing: 0.2px; border: 1px solid; } body.sys7 .terminal .tool-chip.tool-lists { background:#dde6fb; border-color:#4f6fd0; color:#1f3aa0; } body.sys7 .terminal .tool-chip.tool-remind { background:#d8f0db; border-color:#3f9a4a; color:#1d6b28; } body.sys7 .terminal .tool-chip.tool-info { background:#f6e8cf; border-color:#c08a2f; color:#8a5e12; } body.sys7 .terminal .tool-chip.tool-make { background:#e9ddf6; border-color:#8a5fc0; color:#5b2c87; } body.sys7 .terminal .tool-chip:not(.tool-lists):not(.tool-remind):not(.tool-info):not(.tool-make) { background:#e8e8e8; border-color:#9a9a9a; color:#444; }