/* deis-theme.css -- one token system, four themes, every portal. * * Shared exactly like deis-browser-core.js: one copy per portal folder, * kept identical, tracked by check-assets.js. * * WHY THIS EXISTS * Each portal defined its own :root block, so a palette change meant * sixteen edits and the themes drifted. More importantly there was no way * for a HOLDER to choose a register: a fourteen-year-old and a * forty-year-old returning to study were given the same interface. * * HOW IT WORKS * Every theme redefines THE SAME variable names, so existing portal CSS * picks up a new palette with no changes. Set the theme by putting * data-theme on ; deis-theme.js persists the choice. * * Three registers x two modes; data-theme is "-": * aurora-night / aurora-day the DEIS house style, violet and gold * cyber-night / cyber-day "Technical" -- the DEFAULT, MONOCHROME * calm-night / calm-day adult learners, low contrast * * (Corrected 2026-09-16. This used to list cyber-dark, cyber-day, * calm-light and calm-dark -- three of those names do not exist -- and * described cyber-day as 60% white / 30% cyan / 10% gold. That brief is * aurora-day's, and cyber is monochrome again; see the CYBER blocks.) * * TYPE, and why these three * Archivo -- display. A grotesque with institutional weight. Replaces * Space Grotesk, which reads as tech-startup rather than * credentialing body. * Public Sans -- body. The typeface of the US Web Design System, which * is a deliberate choice for a credentials product: it is * literally the face of public-record interfaces. * IBM Plex Mono -- DATA ONLY. Hashes, addresses, identityIDs, counts, * timestamps. Not labels, not buttons, not prose. Mono * everywhere was the single biggest reason the old screens * felt noisy: a signal used constantly stops being a signal. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --display: 'Archivo', system-ui, sans-serif; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* Type scale -- 1.25 ratio from a 14px base. Fixed steps stop each screen inventing its own sizes, which is how the portals drifted. */ --t-xs: 11px; --t-sm: 12px; --t-base: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 31px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; } /* ── Legacy aliases ───────────────────────────────────────────────────── * The portals were written before this file existed and each invented its * own names for the same ideas -- --line, --border-default, --divider and * --hairline are four names for one hairline. Rather than rewrite every * rule in sixteen files, the theme now PROVIDES those names. * * These are declared once here, not per theme: a custom property resolves * at USE time, so --line: var(--hairline) picks up whichever hairline the * active theme defines. One line each, correct in all six. * * Semantic colours (--success, --error, --pending) map onto the theme's * own state colours so a status pill in a light theme stops being a dark * theme's green on a white card. * * NOT aliased, deliberately: student-home's painterly tokens (--violet-*, * --gold-1/2/3, --glow-*, --ink). Those drive gradients and glows specific * to the Ghibli artwork, they are already correct, and flattening them * onto generic tokens would destroy exactly the character worth keeping. */ :root { /* structure */ --line: var(--hairline); --line-bright: var(--hairline-strong); --divider: var(--hairline); --border-subtle: var(--hairline); --border-default: var(--hairline); --border-strong: var(--hairline-strong); /* surfaces */ --card: var(--surface); --card-raised: var(--surface-raised); --bg-page: var(--bg); --bg-card: var(--surface); --bg-card-secondary: var(--surface-raised); --surface-hover: var(--surface-raised); --hover-surface: var(--surface-raised); --hover-raised: var(--surface-raised); /* text */ --text-primary: var(--text); --text-secondary: var(--text-muted); --text-dim: var(--text-muted); /* state */ --success: var(--green); --error: var(--red); --danger: var(--red); --revoked: var(--red); --warning: var(--gold); --active: var(--accent); --pending: var(--accent-dim); --focus-ring: var(--accent); --accent-dark: var(--accent-dim); --amber-dim: var(--gold-dim); /* misc */ --radius-md: var(--radius); --transition: all 150ms ease-out; } /* ═══ REGISTERS × MODES ═════════════════════════════════════════════════ * * Two axes, not a flat list. A holder picks WHO THEY ARE (register) and * then LIGHT OR DARK (mode) -- which is how people actually think about * appearance, and it stops the house style from being one option among * four corporate ones. * * aurora -- the DEIS house style. Painterly violet/gold, kept from * the original SEED design. Named for what it looks like * rather than who it is for: it appears on the EP side too, * and no Educator Partner is a youth. * cyber -- technical, precise, high contrast. * calm -- adult learners. Warm, low chroma, no grid. * * Gold means ACHIEVEMENT in every register. Accent means INTERACTIVE in * every register. That consistency is what lets someone switch register * and still read the screen. */ /* ── AURORA · NIGHT ────────────────────────────────────────────────────── * The existing Ghibli evening: deep violet, warm gold, painterly. This is * DEIS's face for young learners and it is not replaced -- it is brought * into the token system so it can live alongside the others. */ [data-theme="aurora-night"] { --bg: #191033; --surface: #2F2170; --surface-raised: #3D2E82; --hairline: #55449E; --hairline-strong: #6A59B4; --text: #F4F1FF; --text-muted: #BDB2E8; --text-faint: #9083CC; --accent: #7FD8F0; /* sky -- interactive */ --accent-dim: #3E7F96; --accent-wash: rgba(127,216,240,0.12); --accent-contrast: #0A1E26; --gold: #FFC94D; /* the signature. achievement only. */ --gold-dim: #9A7420; --gold-wash: rgba(255,201,77,0.14); --red: #FF8B7D; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * aurora-night: 8.39:1 rest, 9.39:1 hover. */ --danger-contrast: #1A0C0A; --danger-hover: #FF9B8F; --red-wash: rgba(255,139,125,0.12); --green: #7FE0B4; --amber: var(--gold); --grid-opacity: 0; /* painterly, not technical -- no grid */ --shadow: 0 2px 4px rgba(25,16,51,0.5), 0 12px 32px rgba(25,16,51,0.4); } /* ── AURORA · DAY ──────────────────────────────────────────────────────── * 60 / 30 / 10 exactly as briefed: white dominant, cyan the structural * secondary, gold the 10% that catches the eye. Softer than cyber-day -- * rounder shadows, warmer gold -- because it is the same young reader in * daylight, not a different product. */ [data-theme="aurora-day"] { --bg: #FFFFFF; /* 60 */ --surface: #EFFAFD; /* 30 -- cyan, not grey */ --surface-raised: #E1F4FA; --hairline: #C4E7F1; --hairline-strong: #96D3E4; --text: #10222A; --text-muted: #4A6A76; --text-faint: #6F8C97; --accent: #0C6E82; /* 30 -- deep enough to read on white */ --accent-dim: #62A8B8; --accent-wash: rgba(12,110,130,0.08); --accent-contrast: #FFFFFF; --gold: #9A6604; /* 10 */ --gold-dim: #E0B45C; --gold-wash: rgba(255,201,77,0.26); --red: #B23A2C; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * aurora-day: 5.94:1 rest, 7.40:1 hover. */ --danger-contrast: #FFFFFF; --danger-hover: #993226; --red-wash: rgba(178,58,44,0.08); --green: #12775A; --amber: var(--gold); --grid-opacity: 0; --shadow: 0 2px 6px rgba(0,150,190,0.10), 0 12px 30px rgba(0,150,190,0.13); } /* ── CYBER · NIGHT ────────────────────────────────────────────────────── * Technical register -- the DEFAULT, and therefore what every institutional * page (EP, governance, recovery, studio, onboarding) shows first. * * MONOCHROME, restored 2026-09-16 at Daan's direction. History, because this * palette has now been decided twice and the reasons should not be lost: * * Before this theme existed (last pre-theme commit b28ebe3) the * institutional pages were monochrome, and DEIS_SYSTEM_REFERENCE still * names them "Backend/institutional (monochrome dark theme)". The greys * below are governance-dashboard's exact pre-theme values, which are also * the DAN landing page's -- the institutional house look. * * When the theme landed (3be9fb5) this block switched the accent to cyan * #22D3EE, for a real reason recorded here at the time: "--accent was * off-white, so nothing could be emphasised and everything read flat." * That was true -- governance had --text AND --accent both #F2F1ED, so an * accent-coloured link was literally the same colour as body text. * * Going back to monochrome WITHOUT repeating that flaw: --text now sits one * step BELOW --accent in brightness (#D6D5CF vs #F7F6F2, measured 1.36:1), so * anything interactive is always the brightest thing on the page. Hierarchy by * brightness instead of by hue. Gold still marks achievement, and the * semantic red/green are untouched. * * Two pre-theme greys were nudged up for legibility rather than restored * exactly: --text-muted #84848A -> #8A8A90, and --text-faint #4A4A4F -> * #5C5C62 (the original measured about 2.3:1 on the background, too faint * to read reliably). */ [data-theme="cyber-night"] { --bg: #0A0A0C; --surface: #141417; --surface-raised: #18181C; --hairline: #26262A; --hairline-strong: #3A3A3F; --text: #D6D5CF; --text-muted: #8A8A90; --text-faint: #66666C; --accent: #F7F6F2; --accent-dim: #B4B2A9; --accent-wash: rgba(247,246,242,0.08); --accent-contrast: #0A0A0C; --gold: #F0B429; --gold-dim: #7A5C15; --gold-wash: rgba(240,180,41,0.10); --red: #E4574C; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * cyber-night: 5.24:1 rest, 6.26:1 hover. */ --danger-contrast: #1A0C0A; --danger-hover: #E86F65; --red-wash: rgba(228,87,76,0.10); --green: #3FBF8F; --amber: var(--gold); --grid-opacity: 0.05; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28); } /* ── CYBER · DAY ──────────────────────────────────────────────────────── * Same precision in daylight. Crisper than aurora-day: tighter shadows, * a faint grid retained, cooler gold. * * MONOCHROME, restored with cyber-night (see the reasoning there). This * block was more than a cyan accent: surfaces #F2FAFC / #E6F5F9, hairlines * #CDE9F0 / #A5D8E4, muted text #4A6570 and both shadows were all tinted * cyan, so the whole page read blue in daylight. All neutralised. * * Same brightness hierarchy, inverted for a light ground: the accent is the * DARKEST ink (#111114), and body text sits one step lighter (#26262B), so * interactive elements still read strongest. * * Also fixes a pre-existing contrast bug rather than carrying it over: * --accent-dim was #58A5B4, LIGHTER than the accent, and it is used as a * hover background under white --accent-contrast text -- measured 2.82:1, so * button labels faded on hover. #4A4A50 measures 8.80:1. */ [data-theme="cyber-day"] { --bg: #FFFFFF; --surface: #F6F5F1; --surface-raised: #EEEDE8; --hairline: #DEDDD6; --hairline-strong: #BDBCB4; --text: #26262B; --text-muted: #5A5A60; --text-faint: #86868C; --accent: #111114; --accent-dim: #4A4A50; --accent-wash: rgba(17,17,20,0.06); --accent-contrast: #FFFFFF; --gold: #9B6800; --gold-dim: #D8B45E; --gold-wash: rgba(155,104,0,0.10); --red: #B4322A; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * cyber-day: 6.12:1 rest, 7.60:1 hover. */ --danger-contrast: #FFFFFF; --danger-hover: #9B2B24; --red-wash: rgba(180,50,42,0.07); --green: #17795C; --amber: var(--gold); --grid-opacity: 0.035; --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.07); } /* ── CALM · NIGHT ─────────────────────────────────────────────────────── * Adult learners, low light. Warm-neutral dark rather than blue-black: * blue-blacks read as "console", which is the opposite of this register's * job. Muted teal stays legible without glowing. */ [data-theme="calm-night"] { --bg: #17171A; --surface: #1E1E22; --surface-raised: #26262B; --hairline: #323238; --hairline-strong: #43434B; --text: #E9E7E3; --text-muted: #9B978F; --text-faint: #6C6963; --accent: #6FA8B5; --accent-dim: #3E6570; --accent-wash: rgba(111,168,181,0.10); --accent-contrast: #12181A; --gold: #C2A05C; --gold-dim: #7A6534; --gold-wash: rgba(194,160,92,0.10); --red: #D6675C; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * calm-night: 5.41:1 rest, 6.52:1 hover. */ --danger-contrast: #1A0C0A; --danger-hover: #DC7C73; --red-wash: rgba(214,103,92,0.10); --green: #63AD8C; --amber: var(--gold); --grid-opacity: 0; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.25); } /* ── CALM · DAY (paper) ───────────────────────────────────────────────── * Warm paper rather than white, no grid, generous rhythm. A * forty-year-old returning to study should not be handed a heads-up * display. Slate-teal instead of corporate blue: professional without the * banking-software connotation. */ [data-theme="calm-day"] { --bg: #F8F7F5; --surface: #FFFFFF; --surface-raised: #FCFBF9; --hairline: #E3E0DA; --hairline-strong: #CBC6BD; --text: #1B1D20; --text-muted: #66635D; --text-faint: #97938B; --accent: #2C5F6B; --accent-dim: #789BA3; --accent-wash: rgba(44,95,107,0.06); --accent-contrast: #FFFFFF; --gold: #8A6A22; --gold-dim: #BFA46A; --gold-wash: rgba(138,106,34,0.09); --red: #A33A30; /* patch-133. The danger button's label was hardcoded #1a0c0a on this * red, which is theme-blind: it measured 3.12:1 on cyber-day and * 2.91:1 on calm-day -- below AA on the button that STOPS a recovery. * Night reds are light so they take a dark label; day reds are dark so * they take white. Hover moves AWAY from the label (night lightens, * day darkens) so hovering can never reduce legibility. * calm-day: 6.55:1 rest, 8.07:1 hover. */ --danger-contrast: #FFFFFF; --danger-hover: #8C3229; --red-wash: rgba(163,58,48,0.07); --green: #2F6B52; --amber: var(--gold); --grid-opacity: 0; --shadow: 0 1px 2px rgba(27,29,32,0.05), 0 6px 20px rgba(27,29,32,0.06); } /* ── Typography discipline ────────────────────────────────────────────── * The rules that fix "the fonts are weird". Mono is for DATA. Everything * that is language -- labels, buttons, status, prose -- is the body face. */ .deis-data, code, kbd, samp, input.exported-key, .identityID, .hash, .address { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Eyebrows keep uppercase mono -- they ARE a system label, which is the * one place the device still earns its keep. Everything else stops. */ .eyebrow { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; } /* ── Theme switcher ───────────────────────────────────────────────────── * Deliberately NOT a bordered segmented control. Every generated interface * reaches for the same pill-shaped toggle, and that sameness is a large * part of what reads as machine-made. This is text with a rule under the * active option -- the way a tab has worked in print for a century. */ .deis-theme-switch { display: inline-flex; align-items: baseline; gap: var(--space-4); } .deis-theme-switch button { appearance: none; border: 0; background: none; padding: 0 0 5px; color: var(--text-faint); font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; cursor: pointer; line-height: 1; border-bottom: 2px solid transparent; transition: color 0.14s ease, border-color 0.14s ease; } .deis-theme-switch button:hover { color: var(--text-muted); } .deis-theme-switch button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); } .deis-theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── Theme picker (dashboard card) ────────────────────────────────────── * Register choices as rows, each with a swatch showing what it looks * like -- naming a theme is meaningless, showing it is not. The swatches * are hard-coded rather than token-driven on purpose: they must display * the OTHER registers while you are inside the current one. */ .deis-theme-picker { display: flex; flex-direction: column; gap: var(--space-4); } .deis-register-list { display: flex; flex-direction: column; gap: 1px; } .deis-register { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer; appearance: none; background: none; border: 0; border-bottom: 1px solid var(--hairline); padding: var(--space-3) var(--space-2); font-family: var(--sans); transition: background 0.14s ease; } .deis-register:last-child { border-bottom: 0; } .deis-register:hover { background: var(--accent-wash); } .deis-register[aria-pressed="true"] { background: var(--accent-wash); } .deis-register-swatch { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline-strong); margin-top: 2px; position: relative; overflow: hidden; } /* Each swatch previews its register: half night, half day. */ .deis-register-swatch[data-swatch="aurora"] { background: linear-gradient(135deg, #2F2170 0 50%, #EFFAFD 50% 100%); } .deis-register-swatch[data-swatch="cyber"] { background: linear-gradient(135deg, #101319 0 50%, #F2FAFC 50% 100%); } .deis-register-swatch[data-swatch="calm"] { background: linear-gradient(135deg, #1E1E22 0 50%, #F8F7F5 50% 100%); } /* A gold dot marks the one in use -- gold means "this is yours" everywhere else too. */ .deis-register[aria-pressed="true"] .deis-register-swatch::after { content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--surface); } .deis-register-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .deis-register-name { font-size: var(--t-base); font-weight: 600; color: var(--text); } .deis-register[aria-pressed="true"] .deis-register-name { color: var(--accent); } .deis-register-blurb { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.45; } .deis-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--hairline); } /* ── Quality floor ────────────────────────────────────────────────────── * Applied once, everywhere, instead of per-portal. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 560px) { :root { --t-2xl: 25px; --t-xl: 20px; --space-6: 24px; --space-7: 32px; } } /* ── Network bar ──────────────────────────────────────────────────────── * ONE bar, ONE wording, ONE position, on every portal that loads this file. * * WHY THIS EXISTS. Only three screens carried any network chrome, and all * three said something different -- a banner on student-dashboard, another * on the DAN landing page, a pill on identity-console -- while the EP and * SEED portals had none at all. So a student moving from their home page to * their dashboard watched a banner appear from nowhere. That divergence was * the actual complaint; the wording was only the visible part of it. * * Deliberately STATIC, not fixed or sticky. These fifteen pages were built * at different times with different header treatments, and a fixed bar would * silently cover the top of whichever ones position their own header. A * normal first child of pushes content down and cannot overlap * anything. * * Quiet on purpose: hairline, muted text, one accent dot. It is a status * label, not a warning banner -- it should be legible and then ignored. */ .deis-netbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--hairline); background: var(--surface); color: var(--text-muted); font-family: var(--sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; } .deis-netbar::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ── patch-139: the page-level Back link ───────────────────────────────── * * ONE definition for the link that leaves a page and returns to the home * that sent you. Before this there were four wordings ("Back to * institution-home", "Back to my dashboard", "Back to the DEIS Learning * Center", and nothing at all), two margins, and two positions. * * Deliberately NOT called .back-link: that name is already used in six * pages for INTERNAL panel navigation ("Back to tasks"), with a slightly * different rule in each. Reusing it would have restyled all of those as a * side effect of making page-level links consistent. * * Carries a class, so patch-134's cyber-theme underline rule * (a:not([class])) deliberately does not reach it -- this is chrome, not * inline prose, and it already reads as navigation by position. */ .deis-back { display: inline-block; margin: 0 0 16px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); text-decoration: none; } .deis-back:hover { color: var(--text); } /* patch-140: the helper hides the link when there is nowhere safe to go. * display:inline-block above would otherwise beat the hidden attribute. */ .deis-back[hidden] { display: none !important; } /* ── patch-134: links in the Technical register ────────────────────────── * * The cyber themes are deliberately monochrome -- hierarchy by brightness * instead of by hue, with anything interactive being the brightest thing on * the page (see the cyber-night header above). That works as a DESIGN cue * and fails as an ACCESSIBILITY one: --accent #F7F6F2 against --text * #D6D5CF measures 1.36:1, so a link and the sentence around it are very * nearly the same colour. WCAG 1.4.1 asks that colour not be the only way * information is conveyed, and 1.36:1 is far below the 3:1 at which a * brightness difference could carry it alone. * * The other four themes separate links by HUE as well (aurora's cyan, * calm's teal), so this is scoped to the two that do not. Whether every * theme should underline links is a broader question and is Daan's -- * recorded in DEIS_NEXT rather than decided here. * * :not([class]) deliberately: pages style anchors-as-buttons and * anchors-as-cards with classes, and underlining those would be wrong. * This reaches only bare textual links -- the policy links, "view * transaction", document filenames, "View the technical details". */ [data-theme="cyber-night"] a:not([class]), [data-theme="cyber-day"] a:not([class]) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: from-font; }