/* ═══════════════════════════════════════════════════════════════ FLOW SCHOOL — Global Design System global.css SECTIONS 0. Fonts 1. Design Tokens (:root) 1b. Dark Mode Tokens 1c. Theme Transition 2. Base Reset 3. Typography 4. Layout (.inner, .wrap) 4b. Sticky CTA Bar 6. Header / Navigation 7. Hero 8. Buttons (ghost, primary, secondary, icon) 9. Chips / Toggle Selectors 10. Cards / Panels 11. Inputs 12. Range Sliders 12b.Saved / Favorites Sections 13. Toast 14. Nav Auth 15. Animations 16. Utilities 17. Responsive 18. Tool Cards (home page grid) 19. Auth Pages 20. App Shell / Sidebar 21. Auth Form 22. Dark Mode Element Overrides 23. Tool Page Components (controls-bar, modal, card-actions, search) 24. Site Footer (injected by lib/nav.js) HOW TO ADD A NEW TOOL PAGE 1. Copy the page shell from any existing tool (e.g. arbitrary-rule-generator.html) 2. Include: global.css → lib/nav.js → lib/toast.js → lib/tracker.js (library pages also: lib/confirm-delete.js → lib/library.js — shared esc/fmtDate/sort/date-stamp/discard-modal helpers) 3. Use

to wrap hero + content 4. Use .controls-bar for filter/action row, .ctl-label for control labels 5. Use .card-actions for the action row inside a tool output card 6. Use .modal-backdrop / .modal-card for any save/load dialogs 7. Add page-specific CSS only in a