/* ========================================================================== ESPYCRUX design tokens Lifted verbatim from espycrux.com: the same token names, the same HSL triplets, the same ten named designs each with a dark variant. Selecting a design sets data-design on ; dark mode adds .dark. Nothing here is invented — this file is the brand, and the components below consume it. ========================================================================== */ :root { --background: 40 24% 95%; --foreground: 24 12% 10%; --card: 40 30% 97%; --primary: 24 12% 10%; --primary-foreground: 40 30% 97%; --secondary: 40 18% 91%; --muted: 40 18% 91%; --muted-foreground: 28 6% 38%; --accent: 12 82% 47%; --accent-foreground: 40 30% 97%; --signal: 12 82% 47%; --border: 30 12% 82%; --rule: 30 10% 72%; --ring: 12 82% 47%; --destructive: 4 70% 45%; --destructive-foreground: 40 30% 97%; --radius: 0px; --surface-shadow: none; --card-foreground: 24 12% 10%; --popover-foreground: 24 12% 10%; --secondary-foreground: 24 12% 10%; --popover: 40 30% 97%; --signal-foreground: 40 30% 97%; --input: 30 12% 82%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 800; --display-tracking: -.035em; --display-leading: .92; --display-transform: uppercase; --display-variation: "wdth" 112; --meta-tracking: .16em; } :root[data-design="archive"] { --background: 40 43.9% 83.9%; --foreground: 32.7 14.7% 14.7%; --card: 42.9 56% 90.2%; --primary: 32.7 14.7% 14.7%; --primary-foreground: 40 43.9% 83.9%; --secondary: 41.4 37.5% 78%; --muted: 41.4 37.5% 78%; --muted-foreground: 39 12.2% 32.2%; --accent: 5.5 58.6% 43.5%; --accent-foreground: 42.9 56% 90.2%; --signal: 5.5 58.6% 43.5%; --border: 42.3 26.8% 67.8%; --rule: 42.3 26.8% 67.8%; --ring: 5.5 58.6% 43.5%; --radius: 0px; --surface-shadow: 3px 3px 0 0 hsl(var(--foreground) / .14); --card-foreground: 32.7 14.7% 14.7%; --popover-foreground: 32.7 14.7% 14.7%; --secondary-foreground: 32.7 14.7% 14.7%; --popover: 42.9 56% 90.2%; --signal-foreground: 42.9 56% 90.2%; --input: 42.3 26.8% 67.8%; --font-display: "Courier Prime","JetBrains Mono",ui-monospace,monospace; --font-body: "Source Serif 4",Georgia,"Iowan Old Style",serif; --font-mono: "Courier Prime","JetBrains Mono",ui-monospace,monospace; --display-weight: 700; --display-tracking: .01em; --display-leading: 1.06; --display-transform: uppercase; --display-variation: normal; --meta-tracking: .15em; } :root[data-design="blueprint"] { --background: 210.5 70.1% 17.1%; --foreground: 211.8 68% 95.1%; --card: 211.2 75.8% 12.9%; --primary: 211.8 68% 95.1%; --primary-foreground: 210.5 70.1% 17.1%; --secondary: 211.1 73% 14.5%; --muted: 211.1 73% 14.5%; --muted-foreground: 211.8 29.3% 67.3%; --accent: 36.1 100% 65.1%; --accent-foreground: 211.2 75.8% 12.9%; --signal: 36.1 100% 65.1%; --border: 211.4 41.7% 29.6%; --rule: 211.4 41.7% 29.6%; --ring: 36.1 100% 65.1%; --radius: 0px; --surface-shadow: none; --card-foreground: 211.8 68% 95.1%; --popover-foreground: 211.8 68% 95.1%; --secondary-foreground: 211.8 68% 95.1%; --popover: 211.2 75.8% 12.9%; --signal-foreground: 211.2 75.8% 12.9%; --input: 211.4 41.7% 29.6%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 700; --display-tracking: -.02em; --display-leading: .98; --display-transform: uppercase; --display-variation: "wdth" 100; --meta-tracking: .2em; } :root[data-design="brutalist"] { --background: 48 100% 98%; --foreground: 0 0% 6.7%; --card: 0 0% 100%; --primary: 0 0% 6.7%; --primary-foreground: 48 100% 98%; --secondary: 49.9 100% 50%; --muted: 49.9 100% 50%; --muted-foreground: 0 0% 23.9%; --accent: 332.2 91.5% 45.9%; --accent-foreground: 0 0% 100%; --signal: 332.2 91.5% 45.9%; --border: 0 0% 6.7%; --rule: 0 0% 6.7%; --ring: 332.2 91.5% 45.9%; --radius: 0px; --surface-shadow: 8px 8px 0 0 hsl(var(--foreground)); --card-foreground: 0 0% 6.7%; --popover-foreground: 0 0% 6.7%; --secondary-foreground: 0 0% 6.7%; --popover: 0 0% 100%; --signal-foreground: 0 0% 100%; --input: 0 0% 6.7%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "Archivo",ui-monospace,monospace; --display-weight: 900; --display-tracking: -.04em; --display-leading: .9; --display-transform: uppercase; --display-variation: "wdth" 120; --meta-tracking: .14em; } :root[data-design="editorial"] { --background: 42 31.3% 93.7%; --foreground: 34.3 18.9% 7.3%; --card: 41.2 25.8% 87.8%; --primary: 34.3 18.9% 7.3%; --primary-foreground: 42 31.3% 93.7%; --secondary: 41.2 29.6% 89.4%; --muted: 41.2 29.6% 89.4%; --muted-foreground: 36.7 10.7% 32.9%; --accent: 9.7 65.7% 33.1%; --accent-foreground: 42 31.3% 93.7%; --signal: 9.7 65.7% 33.1%; --border: 40.8 20.7% 76.3%; --rule: 40.8 20.7% 76.3%; --ring: 9.7 65.7% 33.1%; --radius: 0px; --surface-shadow: none; --card-foreground: 34.3 18.9% 7.3%; --popover-foreground: 34.3 18.9% 7.3%; --secondary-foreground: 34.3 18.9% 7.3%; --popover: 41.2 25.8% 87.8%; --signal-foreground: 42 31.3% 93.7%; --input: 40.8 20.7% 76.3%; --font-display: "Instrument Serif","Playfair Display",Georgia,serif; --font-body: "Newsreader","Source Serif 4",Georgia,serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 400; --display-tracking: -.015em; --display-leading: .98; --display-transform: none; --display-variation: normal; --meta-tracking: .13em; } :root[data-design="kinetic-swiss"] { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --primary: 0 0% 3.9%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 94.9%; --muted: 0 0% 94.9%; --muted-foreground: 0 0% 35.3%; --accent: 10.6 100% 50%; --accent-foreground: 0 0% 100%; --signal: 10.6 100% 50%; --border: 0 0% 3.9%; --rule: 0 0% 3.9%; --ring: 10.6 100% 50%; --radius: 0px; --surface-shadow: none; --card-foreground: 0 0% 3.9%; --popover-foreground: 0 0% 3.9%; --secondary-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --signal-foreground: 0 0% 100%; --input: 0 0% 3.9%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "Archivo",ui-monospace,monospace; --display-weight: 900; --display-tracking: -.055em; --display-leading: .86; --display-transform: uppercase; --display-variation: "wdth" 88; --meta-tracking: .2em; } :root[data-design="risograph"] { --background: 44 48.4% 93.9%; --foreground: 33.3 17% 10.4%; --card: 46.7 100% 98.2%; --primary: 33.3 17% 10.4%; --primary-foreground: 44 48.4% 93.9%; --secondary: 43.6 40.7% 89.4%; --muted: 43.6 40.7% 89.4%; --muted-foreground: 38.2 11.5% 37.6%; --accent: 6.8 100% 63.9%; --accent-foreground: 46.7 100% 98.2%; --signal: 6.8 100% 63.9%; --border: 41.5 25% 79.6%; --rule: 41.5 25% 79.6%; --ring: 6.8 100% 63.9%; --radius: 0px; --surface-shadow: 4px 4px 0 0 hsl(var(--signal) / .28); --card-foreground: 33.3 17% 10.4%; --popover-foreground: 33.3 17% 10.4%; --secondary-foreground: 33.3 17% 10.4%; --popover: 46.7 100% 98.2%; --signal-foreground: 46.7 100% 98.2%; --input: 41.5 25% 79.6%; --font-display: "Poppins","Inter",ui-sans-serif,sans-serif; --font-body: "Newsreader","Source Serif 4",Georgia,serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 800; --display-tracking: -.03em; --display-leading: .94; --display-transform: none; --display-variation: normal; --meta-tracking: .16em; } :root[data-design="spatial"] { --background: 228 26.3% 3.7%; --foreground: 220 21.4% 94.5%; --card: 225 26.7% 5.9%; --primary: 220 21.4% 94.5%; --primary-foreground: 228 26.3% 3.7%; --secondary: 223.6 26.8% 8%; --muted: 223.6 26.8% 8%; --muted-foreground: 220.9 10.4% 58.4%; --accent: 187.3 100% 50%; --accent-foreground: 230 42.9% 2.7%; --signal: 187.3 100% 50%; --border: 225 18.6% 16.9%; --rule: 225 18.6% 16.9%; --ring: 187.3 100% 50%; --radius: 2px; --surface-shadow: none; --card-foreground: 220 21.4% 94.5%; --popover-foreground: 220 21.4% 94.5%; --secondary-foreground: 220 21.4% 94.5%; --popover: 225 26.7% 5.9%; --signal-foreground: 230 42.9% 2.7%; --input: 225 18.6% 16.9%; --font-display: "Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 200; --display-tracking: -.045em; --display-leading: .95; --display-transform: none; --display-variation: normal; --meta-tracking: .22em; } :root[data-design="terminal"] { --background: 200 15.8% 3.7%; --foreground: 193.3 12.7% 86.1%; --card: 204 15.2% 6.5%; --primary: 193.3 12.7% 86.1%; --primary-foreground: 200 15.8% 3.7%; --secondary: 200 13.6% 8.6%; --muted: 200 13.6% 8.6%; --muted-foreground: 190 7.3% 51.8%; --accent: 145 73.8% 53.5%; --accent-foreground: 180 20% 2%; --signal: 145 73.8% 53.5%; --border: 192 15.6% 12.5%; --rule: 192 15.6% 12.5%; --ring: 145 73.8% 53.5%; --radius: 0px; --surface-shadow: none; --card-foreground: 193.3 12.7% 86.1%; --popover-foreground: 193.3 12.7% 86.1%; --secondary-foreground: 193.3 12.7% 86.1%; --popover: 204 15.2% 6.5%; --signal-foreground: 180 20% 2%; --input: 192 15.6% 12.5%; --font-display: "JetBrains Mono",ui-monospace,monospace; --font-body: "JetBrains Mono",ui-monospace,monospace; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 700; --display-tracking: -.01em; --display-leading: 1.05; --display-transform: uppercase; --display-variation: normal; --meta-tracking: .18em; } :root[data-design="thread"] { --background: 40 25.7% 93.1%; --foreground: 240 8.3% 9.4%; --card: 0 0% 100%; --primary: 240 8.3% 9.4%; --primary-foreground: 40 25.7% 93.1%; --secondary: 40 21.4% 89%; --muted: 40 21.4% 89%; --muted-foreground: 240 3.9% 40.4%; --accent: 74.4 100% 24.5%; --accent-foreground: 0 0% 100%; --signal: 74.4 100% 24.5%; --border: 40 15.2% 80.6%; --rule: 40 15.2% 80.6%; --ring: 74.4 100% 24.5%; --radius: 0px; --surface-shadow: none; --card-foreground: 240 8.3% 9.4%; --popover-foreground: 240 8.3% 9.4%; --secondary-foreground: 240 8.3% 9.4%; --popover: 0 0% 100%; --signal-foreground: 0 0% 100%; --input: 40 15.2% 80.6%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 700; --display-tracking: -.03em; --display-leading: .95; --display-transform: none; --display-variation: "wdth" 100; --meta-tracking: .17em; } :root[data-design="transit"] { --background: 221 50.6% 15.9%; --foreground: 0 0% 100%; --card: 222.4 46.8% 21.4%; --primary: 0 0% 100%; --primary-foreground: 221 50.6% 15.9%; --secondary: 222.9 57.4% 12%; --muted: 222.9 57.4% 12%; --muted-foreground: 220.5 30.3% 74.1%; --accent: 42.9 100% 50.6%; --accent-foreground: 221 50.6% 15.9%; --signal: 42.9 100% 50.6%; --border: 222.9 35.4% 31%; --rule: 222.9 35.4% 31%; --ring: 42.9 100% 50.6%; --radius: 2px; --surface-shadow: none; --card-foreground: 0 0% 100%; --popover-foreground: 0 0% 100%; --secondary-foreground: 0 0% 100%; --popover: 222.4 46.8% 21.4%; --signal-foreground: 221 50.6% 15.9%; --input: 222.9 35.4% 31%; --font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --display-weight: 800; --display-tracking: -.025em; --display-leading: .94; --display-transform: uppercase; --display-variation: "wdth" 95; --meta-tracking: .18em; } /* --- dark variants ------------------------------------------------------ */ :root.dark { --background: 24 8% 7%; --foreground: 40 16% 92%; --card: 24 8% 10%; --primary: 40 16% 92%; --primary-foreground: 24 8% 7%; --secondary: 24 7% 14%; --muted: 24 7% 14%; --muted-foreground: 36 8% 62%; --accent: 14 90% 57%; --accent-foreground: 24 8% 7%; --signal: 14 90% 57%; --border: 30 6% 20%; --rule: 30 6% 26%; --ring: 14 90% 57%; --destructive: 4 74% 55%; --destructive-foreground: 40 16% 92%; --card-foreground: 40 16% 92%; --popover-foreground: 40 16% 92%; --secondary-foreground: 40 16% 92%; --popover: 24 8% 10%; --signal-foreground: 24 8% 7%; --input: 30 6% 20%; } :root[data-design="archive"].dark { --background: 36 16.7% 11.8%; --foreground: 40 43.9% 83.9%; --card: 35 16.2% 14.5%; --primary: 40 43.9% 83.9%; --primary-foreground: 36 16.7% 11.8%; --secondary: 36 17.2% 17.1%; --muted: 36 17.2% 17.1%; --muted-foreground: 40 14.7% 60%; --accent: 9.6 56.1% 51.8%; --accent-foreground: 36 16.7% 11.8%; --signal: 9.6 56.1% 51.8%; --border: 37.1 18.6% 22.2%; --rule: 37.1 18.6% 22.2%; --ring: 9.6 56.1% 51.8%; --card-foreground: 40 43.9% 83.9%; --popover-foreground: 40 43.9% 83.9%; --secondary-foreground: 40 43.9% 83.9%; --popover: 35 16.2% 14.5%; --signal-foreground: 36 16.7% 11.8%; --input: 37.1 18.6% 22.2%; } :root[data-design="blueprint"].dark { --background: 211.2 75.8% 12.9%; --foreground: 211.8 68% 95.1%; --card: 211.4 77.8% 10.6%; --primary: 211.8 68% 95.1%; --primary-foreground: 211.2 75.8% 12.9%; --secondary: 208.8 75% 12.5%; --muted: 208.8 75% 12.5%; --muted-foreground: 211.8 29.3% 67.3%; --accent: 36.1 100% 65.1%; --accent-foreground: 211.2 75.8% 12.9%; --signal: 36.1 100% 65.1%; --border: 211 43.9% 25.9%; --rule: 211 43.9% 25.9%; --ring: 36.1 100% 65.1%; --card-foreground: 211.8 68% 95.1%; --popover-foreground: 211.8 68% 95.1%; --secondary-foreground: 211.8 68% 95.1%; --popover: 211.4 77.8% 10.6%; --signal-foreground: 211.2 75.8% 12.9%; --input: 211 43.9% 25.9%; } :root[data-design="brutalist"].dark { --background: 0 0% 6.7%; --foreground: 48 100% 98%; --card: 0 0% 10.2%; --primary: 48 100% 98%; --primary-foreground: 0 0% 6.7%; --secondary: 45.5 100% 11.4%; --muted: 45.5 100% 11.4%; --muted-foreground: 44.2 11.8% 68.4%; --accent: 334.4 100% 68.2%; --accent-foreground: 0 0% 6.7%; --signal: 334.4 100% 68.2%; --border: 48 100% 98%; --rule: 48 100% 98%; --ring: 334.4 100% 68.2%; --card-foreground: 48 100% 98%; --popover-foreground: 48 100% 98%; --secondary-foreground: 48 100% 98%; --popover: 0 0% 10.2%; --signal-foreground: 0 0% 6.7%; --input: 48 100% 98%; } :root[data-design="editorial"].dark { --background: 36 14.3% 6.9%; --foreground: 41.2 29.6% 89.4%; --card: 30 12.5% 9.4%; --primary: 41.2 29.6% 89.4%; --primary-foreground: 36 14.3% 6.9%; --secondary: 34.3 12.3% 11.2%; --muted: 34.3 12.3% 11.2%; --muted-foreground: 36.9 12.5% 59.2%; --accent: 11.9 53.5% 50.2%; --accent-foreground: 36 14.3% 6.9%; --signal: 11.9 53.5% 50.2%; --border: 35 13.3% 17.6%; --rule: 35 13.3% 17.6%; --ring: 11.9 53.5% 50.2%; --card-foreground: 41.2 29.6% 89.4%; --popover-foreground: 41.2 29.6% 89.4%; --secondary-foreground: 41.2 29.6% 89.4%; --popover: 30 12.5% 9.4%; --signal-foreground: 36 14.3% 6.9%; --input: 35 13.3% 17.6%; } :root[data-design="kinetic-swiss"].dark { --background: 0 0% 3.9%; --foreground: 0 0% 100%; --card: 0 0% 6.7%; --primary: 0 0% 100%; --primary-foreground: 0 0% 3.9%; --secondary: 0 0% 9%; --muted: 0 0% 9%; --muted-foreground: 0 0% 63.9%; --accent: 10.9 100% 56.7%; --accent-foreground: 0 0% 3.9%; --signal: 10.9 100% 56.7%; --border: 0 0% 100%; --rule: 0 0% 100%; --ring: 10.9 100% 56.7%; --card-foreground: 0 0% 100%; --popover-foreground: 0 0% 100%; --secondary-foreground: 0 0% 100%; --popover: 0 0% 6.7%; --signal-foreground: 0 0% 3.9%; --input: 0 0% 100%; } :root[data-design="risograph"].dark { --background: 34.3 17.9% 7.6%; --foreground: 40 40.9% 91.4%; --card: 33.3 17.6% 10%; --primary: 40 40.9% 91.4%; --primary-foreground: 34.3 17.9% 7.6%; --secondary: 35 20% 11.8%; --muted: 35 20% 11.8%; --muted-foreground: 37.8 13.4% 60.6%; --accent: 6.8 100% 63.9%; --accent-foreground: 34.3 17.9% 7.6%; --signal: 6.8 100% 63.9%; --border: 35.3 20% 16.7%; --rule: 35.3 20% 16.7%; --ring: 6.8 100% 63.9%; --card-foreground: 40 40.9% 91.4%; --popover-foreground: 40 40.9% 91.4%; --secondary-foreground: 40 40.9% 91.4%; --popover: 33.3 17.6% 10%; --signal-foreground: 34.3 17.9% 7.6%; --input: 35.3 20% 16.7%; } :root[data-design="spatial"].dark { --background: 228 33.3% 2.9%; --foreground: 220 21.4% 94.5%; --card: 222.9 28% 4.9%; --primary: 220 21.4% 94.5%; --primary-foreground: 228 33.3% 2.9%; --secondary: 222 27.8% 7.1%; --muted: 222 27.8% 7.1%; --muted-foreground: 220.9 10.4% 58.4%; --accent: 187.3 100% 50%; --accent-foreground: 230 42.9% 2.7%; --signal: 187.3 100% 50%; --border: 225 18.6% 16.9%; --rule: 225 18.6% 16.9%; --ring: 187.3 100% 50%; --card-foreground: 220 21.4% 94.5%; --popover-foreground: 220 21.4% 94.5%; --secondary-foreground: 220 21.4% 94.5%; --popover: 222.9 28% 4.9%; --signal-foreground: 230 42.9% 2.7%; --input: 225 18.6% 16.9%; } :root[data-design="terminal"].dark { --background: 200 23.1% 2.5%; --foreground: 193.3 12.7% 86.1%; --card: 204 18.5% 5.3%; --primary: 193.3 12.7% 86.1%; --primary-foreground: 200 23.1% 2.5%; --secondary: 200 15.8% 7.5%; --muted: 200 15.8% 7.5%; --muted-foreground: 190 7.3% 51.8%; --accent: 145 73.8% 53.5%; --accent-foreground: 180 20% 2%; --signal: 145 73.8% 53.5%; --border: 192 15.6% 12.5%; --rule: 192 15.6% 12.5%; --ring: 145 73.8% 53.5%; --card-foreground: 193.3 12.7% 86.1%; --popover-foreground: 193.3 12.7% 86.1%; --secondary-foreground: 193.3 12.7% 86.1%; --popover: 204 18.5% 5.3%; --signal-foreground: 180 20% 2%; --input: 192 15.6% 12.5%; } :root[data-design="thread"].dark { --background: 240 7.7% 7.6%; --foreground: 40 25.7% 93.1%; --card: 240 12.3% 11.2%; --primary: 40 25.7% 93.1%; --primary-foreground: 240 7.7% 7.6%; --secondary: 240 11.4% 13.7%; --muted: 240 11.4% 13.7%; --muted-foreground: 240 5.2% 62.4%; --accent: 77 100% 62%; --accent-foreground: 240 7.7% 7.6%; --signal: 77 100% 62%; --border: 240 9.7% 18.2%; --rule: 240 9.7% 18.2%; --ring: 77 100% 62%; --card-foreground: 40 25.7% 93.1%; --popover-foreground: 40 25.7% 93.1%; --secondary-foreground: 40 25.7% 93.1%; --popover: 240 12.3% 11.2%; --signal-foreground: 240 7.7% 7.6%; --input: 240 9.7% 18.2%; } :root[data-design="transit"].dark { --background: 222.9 57.4% 12%; --foreground: 0 0% 100%; --card: 226.2 54.2% 18.8%; --primary: 0 0% 100%; --primary-foreground: 222.9 57.4% 12%; --secondary: 222.9 58.3% 9.4%; --muted: 222.9 58.3% 9.4%; --muted-foreground: 220.5 30.3% 74.1%; --accent: 42.9 100% 50.6%; --accent-foreground: 222.9 57.4% 12%; --signal: 42.9 100% 50.6%; --border: 222.7 37.7% 27.1%; --rule: 222.7 37.7% 27.1%; --ring: 42.9 100% 50.6%; --card-foreground: 0 0% 100%; --popover-foreground: 0 0% 100%; --secondary-foreground: 0 0% 100%; --popover: 226.2 54.2% 18.8%; --signal-foreground: 222.9 57.4% 12%; --input: 222.7 37.7% 27.1%; } /* Must equal ROW_H in app.js — the virtualizer positions rows by arithmetic, not by layout, so a mismatch silently offsets every row from its hit area. */ :root { --row-h: 46px; } /* ========================================================================== Components ========================================================================== Everything below is expressed only in the tokens above. No literal colour appears past this line, which is what lets all ten designs and both modes work without a single component-level override. House rules taken from espycrux.com: · Corners come from --radius (0px in most designs). Nothing is rounded by hand. · Depth is a hairline rule, not a shadow. --surface-shadow is honoured where a design defines one (brutalist's 8px offset, archive's 3px). · Small labels are mono, uppercase, widely tracked (--meta-tracking). · --signal is used for fills, borders, icons and focus rings, never for small text. Some designs pair a bright accent with a light background (risograph is 2.8:1) which reads fine as a rule or a glyph and badly as a 10px label. · Headings are the display face, tight and set in --display-transform. ========================================================================== */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } [hidden] { display: none !important; } ::selection { background: hsl(var(--signal)); color: hsl(var(--signal-foreground)); } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* --- typographic primitives ---------------------------------------------- */ .display { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); } /* The workhorse label: column heads, status bar, buttons, counters. */ .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform, uppercase); font-weight: 500; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: hsl(var(--foreground)); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: var(--meta-tracking); text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 110ms linear, color 110ms linear, border-color 110ms linear; user-select: none; } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn--sm { height: 28px; padding: 0 9px; font-size: 10px; } .btn--icon { padding: 0; width: 32px; justify-content: center; } .btn--icon.btn--sm { width: 28px; } .btn--block { width: 100%; justify-content: center; height: 38px; } .btn--ghost { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); } .btn--ghost:hover:not(:disabled) { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border-color: hsl(var(--rule)); } .btn--primary { background: hsl(var(--signal)); color: hsl(var(--signal-foreground)); border-color: hsl(var(--signal)); } .btn--primary:hover:not(:disabled) { filter: brightness(1.1); } .btn--danger { background: transparent; color: hsl(var(--destructive)); border-color: hsl(var(--destructive)); } .btn--danger:hover:not(:disabled) { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn.is-busy { position: relative; color: transparent !important; } .btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; color: hsl(var(--signal-foreground)); animation: spin .7s linear infinite; } .btn--ghost.is-busy::after { color: hsl(var(--muted-foreground)); } @keyframes spin { to { transform: rotate(360deg); } } /* --- sign in -------------------------------------------------------------- */ .login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: hsl(var(--background)); } .login__card { width: 100%; max-width: 380px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--surface-shadow); padding: 32px 30px 28px; } .login__mark { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); text-transform: uppercase; font-size: 17px; color: hsl(var(--foreground)); margin-bottom: 26px; } .login__eyebrow { color: hsl(var(--muted-foreground)); margin-bottom: 10px; } .login__title { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); font-size: 34px; margin: 0 0 12px; } .login__sub { margin: 0 0 24px; color: hsl(var(--muted-foreground)); font-size: 13.5px; } .login__error { margin: 0 0 14px; color: hsl(var(--destructive)); border-left: 2px solid hsl(var(--destructive)); padding: 6px 0 6px 10px; font-size: 12.5px; } .field { display: block; margin-bottom: 18px; } .field__label { display: block; color: hsl(var(--muted-foreground)); margin-bottom: 7px; } .field__input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); font-size: 14px; transition: border-color 110ms linear; } .field__input:focus { outline: none; border-color: hsl(var(--ring)); } /* --- shell ---------------------------------------------------------------- */ .app { height: 100dvh; display: grid; grid-template-rows: 50px 44px auto 34px 1fr 26px; grid-template-areas: "top" "sub" "sel" "head" "view" "status"; } .topbar { grid-area: top; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid hsl(var(--rule)); background: hsl(var(--background)); } .topbar__brand { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); text-transform: uppercase; font-size: 15px; color: hsl(var(--foreground)); flex-shrink: 0; text-decoration: none; } .topbar__sep { color: hsl(var(--border)); flex-shrink: 0; } .topbar__bucket { color: hsl(var(--muted-foreground)); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } .topbar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } .search { position: relative; flex: 1; max-width: 380px; min-width: 0; } .search__input { width: 100%; height: 30px; padding: 0 32px 0 11px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; transition: border-color 110ms linear; } .search__input::placeholder { color: hsl(var(--muted-foreground)); letter-spacing: var(--meta-tracking); text-transform: uppercase; font-size: 10px; } .search__input:focus { outline: none; border-color: hsl(var(--ring)); } .search__kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; color: hsl(var(--muted-foreground)); pointer-events: none; } .search__input:focus ~ .search__kbd { opacity: 0; } /* --- breadcrumbs ---------------------------------------------------------- */ .subbar { grid-area: sub; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; } .subbar__actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; } .crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .crumbs::-webkit-scrollbar { display: none; } .crumb { border: 0; background: transparent; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; padding: 4px 6px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: color 110ms linear, background 110ms linear; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .crumb:hover { color: hsl(var(--foreground)); } .crumb[aria-current="page"] { color: hsl(var(--foreground)); } .crumb[aria-current="page"]:hover { background: transparent; } .crumb__sep { color: hsl(var(--border)); font-size: 11px; user-select: none; flex-shrink: 0; } .crumb.is-droptarget { background: hsl(var(--signal)); color: hsl(var(--signal-foreground)); } /* --- selection bar -------------------------------------------------------- */ .selbar { grid-area: sel; display: flex; align-items: center; gap: 8px; padding: 7px 16px; background: hsl(var(--secondary)); border-bottom: 1px solid hsl(var(--border)); } .selbar__count { color: hsl(var(--foreground)); } .selbar__spacer { flex: 1; } /* --- table ---------------------------------------------------------------- */ .tablehead, .row { display: grid; grid-template-columns: 36px minmax(0,1fr) 96px 172px 72px; align-items: center; } @media (max-width: 760px) { .tablehead, .row { grid-template-columns: 36px minmax(0,1fr) 84px 72px; } .cell--date { display: none; } } .tablehead { grid-area: head; height: 34px; padding: 0 16px; border-bottom: 1px solid hsl(var(--rule)); color: hsl(var(--muted-foreground)); user-select: none; } .sortbtn { border: 0; background: transparent; color: inherit; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; font-weight: 500; text-align: left; padding: 0 4px; height: 100%; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 110ms linear; } .sortbtn:hover { color: hsl(var(--foreground)); } .sortbtn[data-dir="asc"] .sortbtn__arrow::after { content: "\2191"; } .sortbtn[data-dir="desc"] .sortbtn__arrow::after { content: "\2193"; } .sortbtn[data-dir] { color: hsl(var(--foreground)); } .cell--size, .cell--date { justify-content: flex-end; text-align: right; } /* --- virtual viewport ----------------------------------------------------- */ .viewport { grid-area: view; position: relative; overflow-y: auto; overflow-x: hidden; outline: none; overscroll-behavior: contain; scrollbar-gutter: stable; contain: strict; } .viewport__sizer { width: 1px; } .viewport__rows { position: absolute; top: 0; left: 0; right: 0; will-change: transform; } .row { position: absolute; left: 0; right: 0; height: var(--row-h); padding: 0 16px; border-bottom: 1px solid hsl(var(--border)); cursor: default; contain: layout style; transition: background 90ms linear; } .row:hover { background: hsl(var(--secondary)); } .row.is-selected { background: hsl(var(--secondary)); box-shadow: inset 2px 0 0 0 hsl(var(--signal)); } .row.is-cursor::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: hsl(var(--signal)); } .row.is-dragging { opacity: .35; } .row.is-droptarget { background: hsl(var(--secondary)); box-shadow: inset 0 0 0 1px hsl(var(--signal)); } .cell { display: flex; align-items: center; min-width: 0; } .cell--menu { justify-content: flex-end; gap: 1px; } .row__main { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 12px; } .row__icon { flex-shrink: 0; width: 16px; height: 16px; color: hsl(var(--muted-foreground)); display: grid; place-items: center; } .row.is-folder .row__icon { color: hsl(var(--signal)); } .row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; font-family: var(--font-body); font-size: 13.5px; color: inherit; text-align: left; cursor: pointer; min-width: 0; } .row.is-folder .row__name { font-weight: 600; } .row__name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .row__size, .row__date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; justify-content: flex-end; white-space: nowrap; } .row__act { border: 0; background: transparent; color: hsl(var(--muted-foreground)); width: 26px; height: 26px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 110ms linear, color 110ms linear, background 110ms linear; } .row:hover .row__act, .row.is-selected .row__act, .row__act:focus-visible { opacity: 1; } .row__act:hover { color: hsl(var(--signal)); background: hsl(var(--background)); } .row__act[hidden] { display: none; } input[type="checkbox"] { width: 13px; height: 13px; accent-color: hsl(var(--signal)); cursor: pointer; margin: 0; border-radius: 0; } /* --- empty + skeleton ----------------------------------------------------- */ .empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: hsl(var(--muted-foreground)); text-align: center; pointer-events: none; } .empty__title { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 22px; color: hsl(var(--foreground)); margin: 0; opacity: .35; } .empty__sub { margin: 0; } .skeleton { position: absolute; inset: 0; } .skeleton::before { content: ""; display: block; height: 100%; margin: 0 16px; background-image: repeating-linear-gradient( to bottom, hsl(var(--secondary)) 0, hsl(var(--secondary)) 12px, transparent 12px, transparent var(--row-h) ); background-size: 100% var(--row-h); -webkit-mask-image: linear-gradient(to right, #000 0 38%, transparent 58%); mask-image: linear-gradient(to right, #000 0 38%, transparent 58%); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .4; } } /* --- status bar ----------------------------------------------------------- */ .statusbar { grid-area: status; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid hsl(var(--rule)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font-size: 10px; font-variant-numeric: tabular-nums; } .statusbar__spacer { flex: 1; } .statusbar__hint { color: hsl(var(--muted-foreground)); } @media (max-width: 700px) { .statusbar__hint { display: none; } } /* --- dropzone ------------------------------------------------------------- */ .dropzone { position: fixed; inset: 0; z-index: 60; background: hsl(var(--background) / .88); display: grid; place-items: center; padding: 24px; } .dropzone__inner { border: 1px dashed hsl(var(--signal)); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--surface-shadow); padding: 44px 60px; text-align: center; color: hsl(var(--foreground)); /* the dashed signal border carries the accent */ } .dropzone__title { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 26px; margin: 0 0 8px; } .dropzone__inner small { color: hsl(var(--muted-foreground)); } /* --- upload dock ---------------------------------------------------------- */ .dock { position: fixed; right: 16px; bottom: 40px; z-index: 55; width: 348px; max-width: calc(100vw - 32px); background: hsl(var(--card)); border: 1px solid hsl(var(--rule)); border-radius: var(--radius); box-shadow: var(--surface-shadow); overflow: hidden; } .dock__head { display: flex; align-items: center; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .dock__headActions { margin-left: auto; display: flex; gap: 2px; } .dock__btn { border: 0; background: transparent; color: hsl(var(--muted-foreground)); width: 22px; height: 22px; border-radius: var(--radius); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; font-family: var(--font-mono); } .dock__btn:hover { color: hsl(var(--foreground)); background: hsl(var(--secondary)); } .dock__list { max-height: 254px; overflow-y: auto; overscroll-behavior: contain; } .dock.is-collapsed .dock__list { display: none; } .up { padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; } .up:last-child { border-bottom: 0; } .up__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--foreground)); font-size: 12.5px; } .up__pct { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--meta-tracking); text-transform: uppercase; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; } .up__bar { grid-column: 1 / -1; height: 2px; background: hsl(var(--border)); } .up__fill { height: 100%; width: 0; background: hsl(var(--signal)); transition: width 140ms linear; } .up.is-done .up__fill { background: hsl(var(--foreground)); } .up.is-error .up__fill { background: hsl(var(--destructive)); } .up.is-error .up__pct { color: hsl(var(--destructive)); } .up__meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: hsl(var(--muted-foreground)); } /* --- modal ---------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; } .modal__scrim { position: absolute; inset: 0; background: hsl(var(--foreground) / .35); } .modal__card { position: relative; width: 100%; max-width: 440px; background: hsl(var(--card)); border: 1px solid hsl(var(--rule)); border-radius: var(--radius); box-shadow: var(--surface-shadow); padding: 24px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; } .modal__title { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); line-height: var(--display-leading); text-transform: var(--display-transform); font-size: 21px; margin: 0 0 14px; word-break: break-word; } .modal__body { font-size: 13.5px; color: hsl(var(--muted-foreground)); overflow-y: auto; } .modal__body p { margin: 0 0 8px; } .modal__body strong { color: hsl(var(--foreground)); font-weight: 600; } .modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .modal__list { margin: 10px 0 0; padding: 9px 11px; max-height: 170px; overflow-y: auto; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); font-family: var(--font-mono); font-size: 11px; list-style: none; } .modal__list li { padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .copyrow { display: flex; gap: 6px; margin-top: 12px; } .copyrow input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font-family: var(--font-mono); font-size: 11px; } .seglist { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .seg { border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); border-radius: var(--radius); padding: 6px 11px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--meta-tracking); text-transform: uppercase; cursor: pointer; transition: all 110ms linear; } .seg:hover:not(:disabled) { color: hsl(var(--foreground)); border-color: hsl(var(--rule)); } .seg.is-on { background: hsl(var(--signal)); border-color: hsl(var(--signal)); color: hsl(var(--signal-foreground)); } .seg:disabled { opacity: .35; cursor: not-allowed; } .check { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 7px 0; font-size: 12.5px; } .check__dot { width: 6px; height: 6px; margin-top: 6px; } .check__dot.ok { background: hsl(var(--signal)); } .check__dot.bad { background: hsl(var(--destructive)); } .check strong { display: block; color: hsl(var(--foreground)); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; margin-bottom: 2px; } /* --- destination picker --------------------------------------------------- */ .picker { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; background: hsl(var(--background)); } .picker__path { display: flex; align-items: center; gap: 2px; padding: 7px 9px; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; scrollbar-width: none; } .picker__path::-webkit-scrollbar { display: none; } .picker__list { max-height: 220px; min-height: 128px; overflow-y: auto; overscroll-behavior: contain; } .picker__row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border: 0; border-bottom: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--foreground)); font-family: var(--font-body); font-size: 13px; text-align: left; cursor: pointer; transition: background 110ms linear; } .picker__row:last-child { border-bottom: 0; } .picker__row:hover:not(:disabled) { background: hsl(var(--secondary)); } .picker__row svg { color: hsl(var(--signal)); flex-shrink: 0; } .picker__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker__row:disabled { opacity: .35; cursor: not-allowed; } .picker__empty { padding: 24px 12px; text-align: center; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--meta-tracking); text-transform: uppercase; } /* --- design switcher ------------------------------------------------------ */ .designs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 12px; } .design { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: transparent; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--meta-tracking); text-transform: uppercase; cursor: pointer; text-align: left; transition: border-color 110ms linear, color 110ms linear; } .design:hover { color: hsl(var(--foreground)); border-color: hsl(var(--rule)); } .design.is-on { border-color: hsl(var(--signal)); color: hsl(var(--foreground)); } /* Each swatch previews that design's own background / foreground / accent. */ .design__swatch { display: flex; flex-shrink: 0; width: 30px; height: 14px; border: 1px solid hsl(var(--border)); } .design__swatch i { flex: 1; } /* --- preview -------------------------------------------------------------- */ .preview { position: fixed; inset: 0; z-index: 70; background: hsl(var(--background)); display: grid; grid-template-rows: 48px 1fr; } .preview__bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid hsl(var(--rule)); } .preview__name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview__pos { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--meta-tracking); color: hsl(var(--muted-foreground)); white-space: nowrap; flex-shrink: 0; } .preview__acts { margin-left: auto; display: flex; gap: 6px; } .preview__bar .btn--icon:disabled { opacity: .25; } @media (max-width: 660px) { .preview__pos, #previewDownload { display: none; } } .preview__stage { display: grid; place-items: center; padding: 24px; overflow: auto; min-height: 0; } .preview__stage img, .preview__stage video { max-width: 100%; max-height: 100%; border: 1px solid hsl(var(--border)); box-shadow: var(--surface-shadow); } .preview__stage video { background: #000; } .preview__stage iframe { width: 100%; height: 100%; border: 1px solid hsl(var(--border)); background: #fff; } .preview__stage pre { margin: 0; width: 100%; max-width: 920px; align-self: start; background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); padding: 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; } .preview__audio { display: grid; gap: 16px; justify-items: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: var(--surface-shadow); padding: 32px 36px; } .preview__audioName { font-size: 13.5px; color: hsl(var(--foreground)); } .preview__audio audio { width: min(420px, 70vw); } .preview__loading { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; color: hsl(var(--muted-foreground)); } .preview__none { display: grid; justify-items: center; gap: 6px; color: hsl(var(--muted-foreground)); text-align: center; padding: 40px; } .preview__none svg { opacity: .3; margin-bottom: 10px; } .preview__noneTitle { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-variation); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 20px; color: hsl(var(--foreground)); } .preview__noneSub { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; } /* --- toasts --------------------------------------------------------------- */ .toasts { position: fixed; left: 16px; bottom: 34px; z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 9px 13px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; pointer-events: auto; max-width: min(92vw, 520px); } .toast--error { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .toast.is-out { animation: toastout 140ms linear both; } @keyframes toastout { to { opacity: 0; } } .toast--ok::before { content: "\2713"; } .toast__act { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: var(--radius); padding: 2px 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--meta-tracking); text-transform: uppercase; cursor: pointer; margin-left: 2px; } .toast__act:hover { background: currentColor; filter: invert(1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }