/* The themes of Question Paper Studio, drawn from public/js/lib/theme-defs.js and the imported themes. */
/* Classic */

/* Notebook */
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/kalam-400.woff2) format('woff2'); }
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/kalam-700.woff2) format('woff2'); }
:root[data-skin='notebook'], [data-skin-preview='notebook'], :root[data-theme='dark'] [data-skin-preview='notebook'][data-mode='light'] { color-scheme: light; --btn-primary-bg: var(--blue); --btn-primary-hover: var(--blue-hover); --tab-mark: var(--hl); --font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif; --font-head: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive; --r-ctl: 6px; --r-panel: 10px; --bg: #f7f9fd; --surface: #ffffff; --surface-2: #f2f6fd; --field: #ffffff; --hover: #e9f0fc; --line: #d2def1; --line-strong: #a9bedf; --ink: #142347; --ink-2: #3f4f74; --ink-3: #56668a; --blue: #1f4fbf; --blue-hover: #173f9e; --blue-ink: #ffffff; --blue-soft: #e3ebfb; --blue-text: #1c47ad; --red: #c4303f; --red-soft: #fde9eb; --red-solid: #c4303f; --green: #19815a; --green-soft: #def3ea; --amber: #875800; --amber-soft: #fff1c9; --mark: #fff27a; --desk: #e4ebf6; --grid-line: rgb(31 79 191 / 9%); --brand-tile: #1f4fbf; --pen-red: #e0464e; --focus: #1f4fbf; --rule: rgb(31 79 191 / 11%); --margin: rgb(224 70 78 / 38%); --hl: rgb(255 226 61 / 80%); --canvas-image: linear-gradient(90deg, transparent 0 58px, var(--margin) 58px 59.5px, transparent 59.5px 63px, var(--margin) 63px 64.5px, transparent 64.5px), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); --canvas-size: auto; --shadow-pop: 0 2px 6px rgb(20 35 71 / 12%), 0 18px 44px rgb(20 35 71 / 18%); --art-a: #1f4fbf; --art-b: #e0464e; --art-c: #ffe23d; --art-paper: #ffffff; --art-line: #a9bedf; }
:root[data-skin='notebook'][data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='notebook'], [data-skin-preview='notebook'][data-mode='dark'] { color-scheme: dark; --bg: #0f1628; --surface: #151e35; --surface-2: #111a2e; --field: #101a30; --hover: #1c2847; --line: #29385d; --line-strong: #3f5287; --ink: #e8eefc; --ink-2: #b9c5e4; --ink-3: #94a2c6; --blue: #8db2ff; --blue-hover: #a9c4ff; --blue-ink: #0c1530; --blue-soft: #1e2d55; --blue-text: #a9c4ff; --red: #ff8f9a; --red-soft: #3a1d27; --red-solid: #d43b4a; --green: #74d6ab; --green-soft: #173527; --amber: #f3c45d; --amber-soft: #3a3014; --mark: #66591a; --desk: #0b1120; --grid-line: rgb(255 255 255 / 5%); --brand-tile: #8db2ff; --pen-red: #f06a75; --focus: #a9c4ff; --rule: rgb(173 196 255 / 7%); --margin: rgb(240 106 117 / 32%); --hl: rgb(255 214 61 / 34%); --shadow-pop: 0 2px 6px rgb(0 0 0 / 40%), 0 18px 48px rgb(0 0 0 / 55%); --art-a: #8db2ff; --art-b: #f06a75; --art-c: #e8c547; --art-paper: #1d2847; --art-line: #3f5287; }
:root[data-skin='notebook'] .pagehead h1 { font-size: calc(2 * var(--fz)); font-weight: 700; letter-spacing: 0; }
:root[data-skin='notebook'] :is(.wz-head h2, .tcard > h2, .card-head h2, .listhead h2) { font-weight: 700; letter-spacing: 0; }
:root[data-skin='notebook'] :is(.wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .tablewrap:not(.flat), .savebar, .emptystate) { box-shadow: 0 1px 0 var(--line), 0 10px 24px rgb(20 35 71 / 6%); }
:root[data-skin='notebook'][data-theme='dark'] :is(.wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .tablewrap:not(.flat), .savebar, .emptystate) { box-shadow: 0 1px 0 #0b1120, 0 12px 28px rgb(0 0 0 / 35%); }
:root[data-skin='notebook'] .wz-body textarea { background-image: repeating-linear-gradient(transparent 0 calc(1.4em - 1px), var(--rule) calc(1.4em - 1px) 1.4em); background-attachment: local; background-position: 0 9px; line-height: 1.4; }
:root[data-skin='notebook'] .tab { isolation: isolate; }
:root[data-skin='notebook'] .tab[aria-current='page']::after { left: 10px; right: 10px; bottom: 15px; height: 11px; z-index: -1; border-radius: 3px 6px 4px 7px; transform: rotate(-1.2deg); }
:root[data-skin='notebook'] .btn.primary { box-shadow: 0 2px 0 color-mix(in srgb, var(--blue) 70%, #000); }
:root[data-skin='notebook'] .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--blue) 70%, #000); }
:root[data-skin='notebook'] .chip { border-radius: 4px; transform: rotate(-1deg); }
@media (max-width: 760px) { :root[data-skin='notebook'] { --canvas-image: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); } }

/* Blueprint */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk-var.woff2) format('woff2'); }
:root[data-skin='blueprint'], [data-skin-preview='blueprint'], :root[data-theme='dark'] [data-skin-preview='blueprint'][data-mode='light'] { color-scheme: light; --btn-primary-bg: var(--blue); --btn-primary-hover: var(--blue-hover); --tab-mark: var(--pen-red); --font-ui: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --r-ctl: 4px; --r-panel: 6px; --bg: #eef5fc; --surface: #ffffff; --surface-2: #f3f8fe; --field: #ffffff; --hover: #e4f0fc; --line: #c3dbf3; --line-strong: #8fb8e2; --ink: #0b2545; --ink-2: #304d77; --ink-3: #4d6a93; --blue: #0a66c2; --blue-hover: #0855a3; --blue-ink: #ffffff; --blue-soft: #e1effd; --blue-text: #0a5bb0; --red: #c62f2f; --red-soft: #fde8e8; --red-solid: #c62f2f; --green: #12804e; --green-soft: #dcf3e8; --amber: #8a5300; --amber-soft: #ffeccc; --mark: #ffe28a; --desk: #dce9f7; --grid-line: rgb(10 102 194 / 8%); --brand-tile: #0a66c2; --pen-red: #f2610b; --focus: #f2610b; --grid-major: rgb(10 102 194 / 11%); --grid-minor: rgb(10 102 194 / 5%); --canvas-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); --canvas-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; --shadow-pop: 0 0 0 1px rgb(10 102 194 / 10%), 8px 8px 0 rgb(10 102 194 / 10%), 0 18px 40px rgb(11 37 69 / 16%); --art-a: #0a66c2; --art-b: #f2610b; --art-c: #8fb8e2; --art-paper: #ffffff; --art-line: #8fb8e2; }
:root[data-skin='blueprint'][data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='blueprint'], [data-skin-preview='blueprint'][data-mode='dark'] { color-scheme: dark; --bg: #0b2545; --surface: #0f2e56; --surface-2: #0c294c; --field: #0b2647; --hover: #143866; --line: #2a5a8c; --line-strong: #4a7fb5; --ink: #eaf4ff; --ink-2: #bad5f1; --ink-3: #93b4da; --blue: #6fd0ff; --blue-hover: #9be0ff; --blue-ink: #06223f; --blue-soft: #163f6e; --blue-text: #8fdcff; --red: #ff9b9b; --red-soft: #3d1f2c; --red-solid: #d84a4a; --green: #7fe0b4; --green-soft: #133a37; --amber: #ffcf70; --amber-soft: #3b3018; --mark: #6b5a17; --desk: #082040; --grid-line: rgb(173 216 255 / 8%); --brand-tile: #6fd0ff; --pen-red: #ff9a52; --focus: #ff9a52; --grid-major: rgb(173 216 255 / 13%); --grid-minor: rgb(173 216 255 / 5%); --shadow-pop: 0 0 0 1px rgb(111 208 255 / 18%), 8px 8px 0 rgb(0 0 0 / 30%), 0 18px 44px rgb(0 0 0 / 50%); --art-a: #6fd0ff; --art-b: #ff9a52; --art-c: #4a7fb5; --art-paper: #123a6a; --art-line: #4a7fb5; }
:root[data-skin='blueprint'] :is(.wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .savebar, .emptystate) { position: relative; }
:root[data-skin='blueprint'] :is(.wizard, .savebar) { position: sticky; }
:root[data-skin='blueprint'] :is(.wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .savebar, .emptystate)::before { content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit; --c: var(--blue); background: linear-gradient(var(--c), var(--c)) top left / 14px 2px, linear-gradient(var(--c), var(--c)) top left / 2px 14px, linear-gradient(var(--c), var(--c)) top right / 14px 2px, linear-gradient(var(--c), var(--c)) top right / 2px 14px, linear-gradient(var(--c), var(--c)) bottom left / 14px 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px 14px, linear-gradient(var(--c), var(--c)) bottom right / 14px 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px 14px; background-repeat: no-repeat; }
:root[data-skin='blueprint'] :is(.wizard, .tcard, .card, .listcard) { box-shadow: 6px 6px 0 color-mix(in srgb, var(--blue) 9%, transparent); }
:root[data-skin='blueprint'] .pagehead h1 { font-weight: 700; letter-spacing: -.02em; }
:root[data-skin='blueprint'] .pagehead > div:first-child::after { content: ''; display: block; width: 132px; height: 9px; margin-top: 8px; background: linear-gradient(var(--pen-red), var(--pen-red)) left center / 1.5px 9px no-repeat, linear-gradient(var(--pen-red), var(--pen-red)) right center / 1.5px 9px no-repeat, linear-gradient(var(--pen-red), var(--pen-red)) center / 100% 1.5px no-repeat; }
:root[data-skin='blueprint'] .btn { border-width: 1.5px; letter-spacing: .01em; }
:root[data-skin='blueprint'] .btn:not(.primary):not(.quiet):hover:not(:disabled) { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--blue) 9%, transparent) 6px 7px); }
:root[data-skin='blueprint'] :focus-visible { outline: 2px dashed var(--focus); outline-offset: 3px; }
:root[data-skin='blueprint'] .tab[aria-current='page']::after { height: 2px; bottom: 0; border-radius: 0; box-shadow: -1px -4px 0 -0.5px var(--tab-mark), 1px -4px 0 -0.5px var(--tab-mark); }
:root[data-skin='blueprint'] .kpi-value, :root[data-skin='blueprint'] .num { font-variant-numeric: tabular-nums; }
[data-skin-preview='blueprint'] .s-card { box-shadow: 3px 3px 0 color-mix(in srgb, var(--blue) 12%, transparent); }
:root[data-skin='blueprint'] .page-art .pa-p { fill: none; }
:root[data-skin='blueprint'] .page-art .pa-ol { stroke: var(--art-a); stroke-dasharray: none; }

/* Marigold */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/baloo-2-var.woff2) format('woff2'); }
:root[data-skin='marigold'], [data-skin-preview='marigold'], :root[data-theme='dark'] [data-skin-preview='marigold'][data-mode='light'] { color-scheme: light; --btn-primary-bg: linear-gradient(135deg, #12908e, #0b6766); --btn-primary-hover: linear-gradient(135deg, #15a3a1, #0c7473); --tab-mark: linear-gradient(90deg, #f59e0b, #e85d04); --font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif; --font-head: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; --r-ctl: 12px; --r-panel: 20px; --bg: #fff6ec; --surface: #ffffff; --surface-2: #fff6ec; --field: #ffffff; --hover: #ffefdc; --line: #f2dcc2; --line-strong: #e0b98d; --ink: #2d1a10; --ink-2: #5a3b28; --ink-3: #785640; --blue: #0e7c7b; --blue-hover: #0a6766; --blue-ink: #ffffff; --blue-soft: #dcf3f1; --blue-text: #0b6968; --red: #c2272d; --red-soft: #fde6e4; --red-solid: #c2272d; --green: #2f7d32; --green-soft: #e3f3df; --amber: #8f5300; --amber-soft: #ffe9c2; --mark: #ffd166; --desk: #f7e6d2; --grid-line: rgb(245 158 11 / 10%); --brand-tile: #0e7c7b; --pen-red: #f08a00; --focus: #0e7c7b; --dot-a: rgb(240 138 0 / 20%); --dot-b: rgb(14 124 123 / 13%); --garland: #f59e0b; --garland-2: #e85d04; --canvas-image: radial-gradient(circle at 14px 14px, var(--dot-a) 2.2px, transparent 2.8px), radial-gradient(circle at 42px 42px, var(--dot-b) 2.2px, transparent 2.8px); --canvas-size: 56px 56px; --shadow-pop: 0 2px 8px rgb(124 70 20 / 12%), 0 22px 50px rgb(124 70 20 / 18%); --art-a: #0e7c7b; --art-b: #f08a00; --art-c: #e85d04; --art-paper: #ffffff; --art-line: #e0b98d; }
:root[data-skin='marigold'][data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='marigold'], [data-skin-preview='marigold'][data-mode='dark'] { color-scheme: dark; --bg: #1a1030; --surface: #241641; --surface-2: #1f1238; --field: #1d1135; --hover: #2f1d52; --line: #3e2a63; --line-strong: #5c4386; --ink: #fff3e6; --ink-2: #e5cfbd; --ink-3: #c4a993; --blue: #ffb547; --blue-hover: #ffc56f; --blue-ink: #2a1500; --blue-soft: #3d2a1a; --blue-text: #ffc56f; --red: #ff8f8f; --red-soft: #40202c; --red-solid: #d84343; --green: #7fd99a; --green-soft: #1e3a2a; --amber: #ffd27a; --amber-soft: #3f3018; --mark: #6b4a12; --desk: #140b25; --grid-line: rgb(255 181 71 / 8%); --brand-tile: #ffb547; --pen-red: #4fd1c5; --focus: #ffc56f; --dot-a: rgb(255 181 71 / 16%); --dot-b: rgb(79 209 197 / 10%); --garland: #ffb547; --garland-2: #ff8a3d; --btn-primary-bg: linear-gradient(135deg, #ffc15e, #ff9f2e); --btn-primary-hover: linear-gradient(135deg, #ffcd7a, #ffad4a); --tab-mark: linear-gradient(90deg, #4fd1c5, #ffb547); --shadow-pop: 0 2px 8px rgb(0 0 0 / 40%), 0 22px 52px rgb(0 0 0 / 55%); --art-a: #4fd1c5; --art-b: #ffb547; --art-c: #ff8a3d; --art-paper: #2f1d52; --art-line: #5c4386; }
:root[data-skin='marigold'] .appbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none; background: radial-gradient(circle at 9px 0, var(--garland) 6px, transparent 6.5px) 0 0 / 18px 9px repeat-x, radial-gradient(circle at 18px 0, var(--garland-2) 3px, transparent 3.5px) 0 0 / 18px 9px repeat-x; }
:root[data-skin='marigold'] .pagehead { margin-top: 10px; }
:root[data-skin='marigold'] .pagehead h1 { font-weight: 800; font-size: calc(1.75 * var(--fz)); letter-spacing: -.01em; }
:root[data-skin='marigold'] :is(h2, h3) { font-weight: 700; letter-spacing: 0; }
:root[data-skin='marigold'] :is(.wizard, .tcard, .card, .listcard, .emptystate) { background-image: radial-gradient(circle at 100% 0, var(--dot-a) 0 26px, transparent 27px), radial-gradient(circle at 100% 0, transparent 0 34px, var(--dot-b) 35px 37px, transparent 38px), radial-gradient(circle at 100% 0, transparent 0 44px, var(--dot-a) 45px 46px, transparent 47px); box-shadow: 0 1px 0 var(--line), 0 14px 30px rgb(124 70 20 / 7%); }
:root[data-skin='marigold'][data-theme='dark'] :is(.wizard, .tcard, .card, .listcard, .emptystate) { box-shadow: 0 14px 32px rgb(0 0 0 / 35%); }
:root[data-skin='marigold'] .btn.primary { border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 30%, transparent); }
:root[data-skin='marigold'] .btn.primary:hover:not(:disabled) { transform: translateY(-1px); }
:root[data-skin='marigold'] .tab[aria-current='page']::after { height: 4px; border-radius: 4px; bottom: 6px; left: 16px; right: 16px; }
:root[data-skin='marigold'] .avatar { background: linear-gradient(135deg, var(--garland), var(--garland-2)); color: #2a1500; }
[data-skin-preview='marigold'] .s-bar { box-shadow: 0 2px 0 var(--garland); }

/* Aurora */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-var.woff2) format('woff2'); }
:root[data-skin='aurora'], [data-skin-preview='aurora'], :root[data-theme='dark'] [data-skin-preview='aurora'][data-mode='light'] { color-scheme: light; --btn-primary-bg: linear-gradient(135deg, #7c5cff, #4f46e5); --btn-primary-hover: linear-gradient(135deg, #8f74ff, #5b52f0); --tab-mark: linear-gradient(90deg, #8b5cf6, #ec4899); --font-ui: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --r-ctl: 12px; --r-panel: 22px; --bg: #eef0fb; --surface: rgb(255 255 255 / 70%); --surface-2: rgb(255 255 255 / 52%); --field: rgb(255 255 255 / 86%); --hover: rgb(109 74 255 / 8%); --line: rgb(79 70 229 / 13%); --line-strong: rgb(79 70 229 / 25%); --ink: #141533; --ink-2: #41456b; --ink-3: #5c618c; --blue: #6d4aff; --blue-hover: #5b37f0; --blue-ink: #ffffff; --blue-soft: rgb(109 74 255 / 12%); --blue-text: #5432e6; --red: #d01f4b; --red-soft: #fde6ec; --red-solid: #d6264f; --green: #0c8761; --green-soft: #daf5ec; --amber: #875700; --amber-soft: #fff0cf; --mark: #fde68a; --desk: rgb(255 255 255 / 38%); --grid-line: rgb(109 74 255 / 7%); --brand-tile: #6d4aff; --pen-red: #ec4899; --focus: #6d4aff; --blob-1: rgb(139 92 246 / 34%); --blob-2: rgb(56 189 248 / 30%); --blob-3: rgb(52 211 153 / 26%); --blob-4: rgb(236 72 153 / 18%); --glass: blur(18px) saturate(1.45); --surface-solid: #fbfbff; --canvas-image: none; --shadow-pop: 0 2px 8px rgb(20 21 51 / 8%), 0 28px 70px rgb(79 70 229 / 22%); --shadow-sheet: 0 1px 2px rgb(20 21 51 / 12%), 0 18px 46px rgb(79 70 229 / 18%); --art-a: #6d4aff; --art-b: #ec4899; --art-c: #38bdf8; --art-paper: rgb(255 255 255 / 85%); --art-line: rgb(79 70 229 / 30%); }
:root[data-skin='aurora'][data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='aurora'], [data-skin-preview='aurora'][data-mode='dark'] { color-scheme: dark; --bg: #070b1f; --surface: rgb(22 28 60 / 62%); --surface-2: rgb(16 21 46 / 55%); --field: rgb(10 14 34 / 72%); --hover: rgb(167 139 250 / 11%); --line: rgb(167 139 250 / 17%); --line-strong: rgb(167 139 250 / 32%); --ink: #e8eaff; --ink-2: #bcc0e8; --ink-3: #959ac6; --blue: #a78bfa; --blue-hover: #c4b5fd; --blue-ink: #160d33; --blue-soft: rgb(167 139 250 / 17%); --blue-text: #c4b5fd; --red: #ff8fab; --red-soft: rgb(255 80 120 / 15%); --red-solid: #e23d66; --green: #6ee7b7; --green-soft: rgb(16 185 129 / 16%); --amber: #fcd34d; --amber-soft: rgb(251 191 36 / 14%); --mark: #5b4a1a; --desk: rgb(5 8 24 / 45%); --grid-line: rgb(167 139 250 / 7%); --brand-tile: #a78bfa; --pen-red: #f472b6; --focus: #c4b5fd; --blob-1: rgb(124 58 237 / 38%); --blob-2: rgb(20 184 166 / 30%); --blob-3: rgb(219 39 119 / 24%); --blob-4: rgb(59 130 246 / 22%); --surface-solid: #131834; --btn-primary-bg: linear-gradient(135deg, #a78bfa, #6366f1); --btn-primary-hover: linear-gradient(135deg, #c4b5fd, #818cf8); --tab-mark: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); --shadow-pop: 0 2px 8px rgb(0 0 0 / 45%), 0 28px 70px rgb(0 0 0 / 55%); --shadow-sheet: 0 1px 2px rgb(0 0 0 / 50%), 0 18px 46px rgb(0 0 0 / 50%); --art-a: #a78bfa; --art-b: #f472b6; --art-c: #22d3ee; --art-paper: rgb(30 36 76 / 85%); --art-line: rgb(167 139 250 / 35%); }
:root[data-skin='aurora'] body::before { content: ''; position: fixed; inset: -18vmax; z-index: -1; pointer-events: none; background: radial-gradient(38vmax 38vmax at 18% 22%, var(--blob-1), transparent 62%), radial-gradient(34vmax 34vmax at 84% 16%, var(--blob-2), transparent 62%), radial-gradient(44vmax 44vmax at 62% 86%, var(--blob-3), transparent 62%), radial-gradient(28vmax 28vmax at 30% 80%, var(--blob-4), transparent 62%); filter: blur(24px); animation: aurora-drift 46s ease-in-out infinite alternate; }
@keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3vmax, -2vmax, 0) rotate(7deg) scale(1.05); } 100% { transform: translate3d(-2vmax, 3vmax, 0) rotate(-5deg) scale(1); } }
:root[data-skin='aurora'] :is(.appbar, .wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .tablewrap:not(.flat), .savebar, .emptystate, .tstep) { -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-color: rgb(255 255 255 / 55%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 18px 44px rgb(79 70 229 / 10%); }
:root[data-skin='aurora'][data-theme='dark'] :is(.appbar, .wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .tablewrap:not(.flat), .savebar, .emptystate, .tstep) { border-color: rgb(167 139 250 / 18%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 18px 44px rgb(0 0 0 / 35%); }
:root[data-skin='aurora'] .appbar { background: rgb(255 255 255 / 55%); }
:root[data-skin='aurora'][data-theme='dark'] .appbar { background: rgb(12 16 40 / 55%); }
:root[data-skin='aurora'] .pagehead h1 { font-weight: 800; letter-spacing: -.03em; }
:root[data-skin='aurora'] :is(h2, h3) { font-weight: 700; letter-spacing: -.015em; }
:root[data-skin='aurora'] .btn.primary { border-color: transparent; box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 35%, transparent); }
:root[data-skin='aurora'] .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 45%, transparent); }
:root[data-skin='aurora'] .btn:not(.primary) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-skin='aurora'] .tab[aria-current='page']::after { height: 3px; border-radius: 3px; bottom: 6px; left: 18px; right: 18px; }
:root[data-skin='aurora'] .tab { transition: color .2s; }
:root[data-skin='aurora'] :is(.card, .listcard) { transition: transform .25s ease, box-shadow .25s ease; }
:root[data-skin='aurora'] :is(.card, .listcard):hover { transform: translateY(-2px); }
:root[data-skin='aurora'] .avatar { background: linear-gradient(135deg, #a78bfa, #38bdf8); color: #fff; }
[data-skin-preview='aurora'] { background-image: radial-gradient(60% 80% at 15% 20%, var(--blob-1), transparent 70%), radial-gradient(60% 80% at 90% 10%, var(--blob-2), transparent 70%), radial-gradient(60% 80% at 60% 100%, var(--blob-3), transparent 70%); background-size: auto; }
@media (prefers-reduced-motion: reduce) { :root[data-skin='aurora'] body::before { animation: none !important; } }

/* Crayon */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka-var.woff2) format('woff2'); }
:root[data-skin='crayon'], [data-skin-preview='crayon'], :root[data-theme='dark'] [data-skin-preview='crayon'][data-mode='light'] { color-scheme: light; --btn-primary-bg: var(--sun); --btn-primary-hover: #ffd766; --tab-mark: var(--tomato); --font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif; --font-head: 'Fredoka', 'Segoe UI', system-ui, sans-serif; --r-ctl: 12px; --r-panel: 18px; --bg: #f4f2ff; --surface: #ffffff; --surface-2: #faf8ff; --field: #ffffff; --hover: #fff3c4; --line: #ddd7f5; --line-strong: #1e1b2e; --ink: #1e1b2e; --ink-2: #47425e; --ink-3: #625c80; --blue: #3b5bdb; --blue-hover: #2f4bc0; --blue-ink: #ffffff; --blue-soft: #e5eaff; --blue-text: #2f4bc0; --red: #d0342a; --red-soft: #ffe5e2; --red-solid: #e5483d; --green: #11804b; --green-soft: #dcf7e8; --amber: #855700; --amber-soft: #fff1c2; --mark: #ffe066; --desk: #e9e4ff; --grid-line: rgb(30 27 46 / 7%); --brand-tile: #ff5a4e; --pen-red: #ff5a4e; --focus: #3b5bdb; --outline: #1e1b2e; --stick: #1e1b2e; --sun: #ffc93c; --sky: #3db2ff; --grass: #2ec27e; --grape: #7b61ff; --tomato: #ff5a4e; --canvas-image: radial-gradient(circle, rgb(123 97 255 / 22%) 1.3px, transparent 1.8px); --canvas-size: 22px 22px; --shadow-pop: 6px 6px 0 var(--stick); --shadow-sheet: 5px 5px 0 var(--stick); --art-a: #3b5bdb; --art-b: #ff5a4e; --art-c: #ffc93c; --art-paper: #ffffff; --art-line: #1e1b2e; }
:root[data-skin='crayon'][data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='crayon'], [data-skin-preview='crayon'][data-mode='dark'] { color-scheme: dark; --bg: #17161f; --surface: #23212f; --surface-2: #1d1b28; --field: #1b1a26; --hover: #2f2b44; --line: #3b3854; --line-strong: #e9e6ff; --ink: #f4f2ff; --ink-2: #cbc6e8; --ink-3: #a29cc4; --blue: #8ea2ff; --blue-hover: #a9b8ff; --blue-ink: #10142e; --blue-soft: #2a3160; --blue-text: #aebcff; --red: #ff9a90; --red-soft: #3d2124; --red-solid: #e5483d; --green: #6fe0a6; --green-soft: #18352a; --amber: #ffd36b; --amber-soft: #3b3115; --mark: #6a5c18; --desk: #121119; --grid-line: rgb(233 230 255 / 6%); --brand-tile: #ff7a70; --pen-red: #ff7a70; --focus: #aebcff; --outline: #e9e6ff; --stick: #7b61ff; --canvas-image: radial-gradient(circle, rgb(233 230 255 / 10%) 1.3px, transparent 1.8px); --btn-primary-bg: var(--sun); --btn-primary-hover: #ffd766; --shadow-pop: 6px 6px 0 var(--stick); --shadow-sheet: 5px 5px 0 #000; --art-a: #8ea2ff; --art-b: #ff7a70; --art-c: #ffc93c; --art-paper: #2b2840; --art-line: #e9e6ff; }
:root[data-skin='crayon'] :is(.wizard, .tcard, .ted-top, .card, .listcard, .toolbar, .kpis, .tablewrap:not(.flat), .savebar, .emptystate, .menu, dialog.modal) { border: 2px solid var(--outline); box-shadow: 5px 5px 0 var(--stick); }
:root[data-skin='crayon'] .appbar { border-bottom: 2px solid var(--outline); }
:root[data-skin='crayon'] .btn { border-width: 2px; border-color: var(--outline); box-shadow: 3px 3px 0 var(--stick); transition: transform .12s, box-shadow .12s, background-color .15s; }
:root[data-skin='crayon'] .btn.quiet { border-color: transparent; box-shadow: none; }
:root[data-skin='crayon'] .btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--stick); }
:root[data-skin='crayon'] .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stick); }
:root[data-skin='crayon'] .btn.quiet:hover:not(:disabled), :root[data-skin='crayon'] .btn.quiet:active:not(:disabled) { box-shadow: none; transform: none; }
:root[data-skin='crayon'] .btn.primary { color: #1e1b2e; border-color: var(--outline); font-family: var(--font-head); font-weight: 600; letter-spacing: .01em; }
:root[data-skin='crayon'] :is(input:where(:not([type='radio'], [type='checkbox'], [type='file'], [type='range'])), select, textarea) { border-width: 2px; border-color: var(--outline); }
:root[data-skin='crayon'] :is(input, select, textarea):focus { box-shadow: 3px 3px 0 var(--blue); }
:root[data-skin='crayon'] .pagehead h1 { font-weight: 600; font-size: calc(1.8 * var(--fz)); letter-spacing: .005em; }
:root[data-skin='crayon'] :is(h2, h3) { font-weight: 600; letter-spacing: .005em; }
:root[data-skin='crayon'] .tabs { gap: 6px; padding: 8px 0; }
:root[data-skin='crayon'] .appbar.tight .tabs { gap: 2px; }
:root[data-skin='crayon'] .tab { border-radius: 12px; border: 2px solid transparent; }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 1) .tab { --tc: var(--sun); }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 2) .tab { --tc: var(--sky); }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 3) .tab { --tc: var(--grass); }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 4) .tab { --tc: #ff9ec7; }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 5) .tab { --tc: #b9a8ff; }
:root[data-skin='crayon'] .tabs > li:nth-child(6n + 6) .tab { --tc: #ffb27a; }
:root[data-skin='crayon'] .tab[aria-current='page'] { background: var(--tc); color: #1e1b2e; border-color: var(--outline); box-shadow: 3px 3px 0 var(--stick); }
:root[data-skin='crayon'] .tab[aria-current='page'] .icon { color: #1e1b2e; }
:root[data-skin='crayon'] .tab[aria-current='page']::after { display: none; }
:root[data-skin='crayon'] .chip, :root[data-skin='crayon'] .badge { border: 1.5px solid var(--outline); }
:root[data-skin='crayon'] .avatar { background: var(--sun); color: #1e1b2e; border: 2px solid var(--outline); }
:root[data-skin='crayon'] .choice:has(input:checked) { box-shadow: 3px 3px 0 var(--stick); }
[data-skin-preview='crayon'] .s-card { border: 1.5px solid var(--outline); box-shadow: 2px 2px 0 var(--stick); }
[data-skin-preview='crayon'] .s-btn { border: 1.5px solid var(--outline); }
:root[data-skin='crayon'] .page-art .pa-ol { stroke: var(--outline); stroke-width: 2; }