/* ===== Theme switch ===== The knob slides left for dark, right for light. Styled here (not with utility classes) so the sliding state is driven purely by the .light class on . */ .theme-switch { position: relative; display: inline-flex; align-items: center; width: 3rem; height: 1.5rem; padding: 0; border-radius: 9999px; overflow: hidden; background-color: rgba(63, 63, 70, 0.7); box-shadow: inset 0 0 0 1px rgba(82, 82, 91, 0.6); transition: background-color .3s ease, box-shadow .3s ease; } .theme-switch:hover { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.5); } /* The knob is positioned with `left` (not transform) so stray utility transform classes can never push it outside the track. */ .theme-switch-knob { position: absolute; /* Vertically centred without transforms (top/bottom + auto margins) */ top: 0; bottom: 0; margin: auto 0; left: 2px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 9999px; background-color: #18181b; color: #34d399; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transform: none !important; transition: left .3s ease, background-color .3s ease, color .3s ease; } /* Pin the icon size so it always sits centred inside the knob */ .theme-switch-knob svg { display: block; width: 12px; height: 12px; flex: none; } html.light .theme-switch { background-color: rgba(125, 211, 252, 0.85); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.7); } html.light .theme-switch:hover { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.6); } html.light .theme-switch-knob { left: calc(100% - 1.25rem - 2px); background-color: #ffffff; color: #b45309; } @media (prefers-reduced-motion: reduce) { .theme-switch, .theme-switch-knob { transition: none; } } /* ===== Sticky note panel ===== Fixed to the viewport and kept outside the card: the card's overflow-hidden plus backdrop-blur would clip a fixed child and re-anchor it to the card. */ :root { --note-w: 320px; } .note-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--note-w); max-width: 85vw; z-index: 20; /* above #bg (0) and the card (10) */ display: flex; flex-direction: column; overflow: hidden; visibility: hidden; /* also drops it out of the tab order while closed */ transform: translateX(100%); transition: transform .22s ease, visibility 0s linear .22s; } html.note-open .note-panel { visibility: visible; transform: translateX(0); transition: transform .22s ease, visibility 0s linear 0s; } /* Floating toggle, hidden while the panel is open (the panel has its own close button) */ .note-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 21; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .note-fab:hover { transform: scale(1.08); } html.note-open .note-fab { opacity: 0; pointer-events: none; } .note-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .22s ease; display: none; /* wide screens shift the card instead of dimming it */ } /* Wide screens: shift the page so the panel never covers the card. The body padding ladder is p-3 / sm:p-6 / md:p-10, so the gutter here is 2.5rem. */ @media (min-width: 1024px) { html.note-open body { padding-right: calc(var(--note-w) + 2.5rem); } } /* Below 1024px there is no room to shift: overlay the panel and dim the page. */ @media (max-width: 1023.98px) { .note-backdrop { display: block; } html.note-open .note-backdrop { opacity: 1; pointer-events: auto; } html.note-open body { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .note-panel, .note-fab, .note-backdrop { transition: none; } } /* ===== Command palette ===== Centered overlay, kept outside the card for the same reason as the sticky note panel above (overflow-hidden + backdrop-blur would clip it). */ .palette-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .15s ease; } html.palette-open .palette-backdrop { opacity: 1; pointer-events: auto; } .palette-box { position: fixed; top: 12vh; left: 50%; width: min(560px, 92vw); max-height: 70vh; z-index: 41; display: flex; flex-direction: column; border-radius: 0.75rem; overflow: hidden; visibility: hidden; opacity: 0; transform: translate(-50%, -8px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } html.palette-open .palette-box { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; } .palette-list { overflow-y: auto; max-height: 50vh; padding: .375rem; } .palette-item { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; border-radius: .5rem; font-size: .8125rem; color: #a1a1aa; text-align: left; cursor: pointer; background: transparent; border: none; } .palette-item svg { flex: none; width: 1rem; height: 1rem; } .palette-item:hover, .palette-item.is-active { background: rgba(16, 185, 129, .12); color: #6ee7b7; } @media (prefers-reduced-motion: reduce) { .palette-backdrop, .palette-box { transition: none; } } /* ===== Log message modal ===== Centered dialog used by the log viewer to show one entry's full message. Kept outside the tool card so it is never clipped by the card's overflow. */ .log-modal-backdrop { position: fixed; inset: 0; z-index: 42; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .15s ease; } html.log-modal-open .log-modal-backdrop { opacity: 1; pointer-events: auto; } .log-modal-box { position: fixed; top: 50%; left: 50%; width: min(820px, 94vw); max-height: 82vh; z-index: 43; display: flex; flex-direction: column; border-radius: 0.75rem; overflow: hidden; visibility: hidden; opacity: 0; transform: translate(-50%, calc(-50% - 8px)); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } html.log-modal-open .log-modal-box { visibility: visible; opacity: 1; transform: translate(-50%, -50%); transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; } .log-modal-body { overflow: auto; flex: 1 1 auto; } @media (prefers-reduced-motion: reduce) { .log-modal-backdrop, .log-modal-box { transition: none; } } /* ===== Focus mode ===== For screen-sharing/demos: hides the marketing hero text and the floating sticky-note/command-palette triggers, leaving just the title bar, tab grid and active tool. The toggle itself (#focusToggle, in the footer) is never part of this hidden set, so it always stays reachable to turn back off. */ html.focus-mode #heroBlock, html.focus-mode #tabGrid, html.focus-mode #noteFab, html.focus-mode #paletteBtn { display: none; }