/* kira 1.0
   themes: kuro (default), sora, ramune, anzu, hoshi, momo
   fonts (optional): DotGothic16, M PLUS Rounded 1c */

/* tokens / sora values, kuro is applied on top when no theme is set */

:root, [data-theme] {
    color-scheme: light;

    --kr-font-ui: Tahoma, Verdana, "Segoe UI", sans-serif;
    --kr-font-body: "Times New Roman", Times, serif;
    --kr-font-heading: Verdana, Tahoma, Arial, sans-serif;
    --kr-font-display: var(--kr-font-heading);
    --kr-font-pixel: "DotGothic16", "MS Gothic", "Courier New", monospace;
    --kr-font-gothic: "MS UI Gothic", "MS PGothic", Tahoma, sans-serif;
    --kr-font-mono: Consolas, "Courier New", monospace;
    --kr-size: 15px;
    --kr-size-ui: 13px;
    --kr-size-sm: 11px;
    --kr-line: 1.45;
    --kr-prose: italic;

    --kr-width: 660px;
    --kr-page-color: #a3c8e8;
    --kr-page:
        radial-gradient(52% 12% at 16% 18%, #fffffff0, #fff0 70%),
        radial-gradient(38% 10% at 82% 9%, #ffffffc4, #fff0 70%),
        radial-gradient(48% 14% at 88% 54%, #ffffffe0, #fff0 70%),
        radial-gradient(62% 16% at 22% 76%, #fffffff0, #fff0 70%),
        radial-gradient(42% 10% at 64% 97%, #ffffffc4, #fff0 70%),
        linear-gradient(#6ea9db, #b9d8f0 55%, #e6f1fa);
    --kr-page-attach: fixed;

    --kr-surface: #ffffff;
    --kr-surface-2: #f5f9fc;
    --kr-surface-3: #e4f0fc;
    --kr-border: #d3d8de;
    --kr-border-soft: #bfd4ea;
    --kr-border-strong: #7a9cc4;
    --kr-border-width: 1px;
    --kr-radius: 0px;
    --kr-radius-control: 3px;
    --kr-shadow: 0 1px 2px #e2e9f0;

    --kr-text: #1f3646;
    --kr-text-strong: #000;
    --kr-muted: #687a87;
    --kr-heading: #1a7fc1;
    --kr-link: #3479ab;
    --kr-link-hover: #1a7fc1;
    --kr-link-weight: normal;
    --kr-link-line: none;
    --kr-accent: #1a7fc1;
    --kr-accent-fg: #fff;
    --kr-bullet: #66bdf0;
    --kr-label: #24476d;
    --kr-selection: #cfe6fb;

    --kr-h-weight: bold;
    --kr-h-style: normal;
    --kr-h1-size: 25px;
    --kr-h1-color: var(--kr-heading);
    --kr-h1-bg: none;
    --kr-h1-clip: border-box;
    --kr-h1-fill: currentColor;
    --kr-h1-border: none;
    --kr-h1-border-left: none;
    --kr-h1-pad: 0;
    --kr-h1-spacing: normal;
    --kr-h2-size: 20px;
    --kr-h2-weight: var(--kr-h-weight);
    --kr-h2-bg: none;
    --kr-h2-clip: border-box;
    --kr-h2-fill: currentColor;
    --kr-h2-border: none;
    --kr-h2-pad: 0;

    --kr-title-bg: linear-gradient(to right, #6fa3cf, #24597e);
    --kr-title-fg: #fff;
    --kr-title-font: var(--kr-font-heading);
    --kr-title-size: 17px;
    --kr-title-style: normal;
    --kr-title-transform: lowercase;
    --kr-title-spacing: normal;
    --kr-title-shadow: 1px 1px 2px #0000004d;
    --kr-title-border: none;
    --kr-title-pad: 5px 10px;

    --kr-nav-hover: var(--kr-surface-3);
    --kr-nav-active-bg: var(--kr-surface-3);
    --kr-nav-active-fg: var(--kr-text-strong);

    --kr-btn-bg: linear-gradient(#eaf1f8, #c2d8ee);
    --kr-btn-bg-hover: #e3eefc;
    --kr-btn-border: #789cc6;
    --kr-btn-border-hover: #50779f;
    --kr-btn-fg: #24476d;
    --kr-btn-weight: bold;
    --kr-btn-font: var(--kr-font-ui);
    --kr-btn-radius: 4px;
    --kr-btn-shadow: 0 1px 2px #dce7f2;
    --kr-btn-text-shadow: 0 1px 0 #fff;

    --kr-gloss-top: #55a9f5;
    --kr-gloss-mid: #1590c4;
    --kr-gloss-bottom: #0c6d92;
    --kr-gloss-hi: #6fbfff;
    --kr-gloss-border: #1aa8e8;
    --kr-gloss-fg: #fff;
    --kr-gloss-radius: 3px;

    --kr-bevel-top: #f5faff;
    --kr-bevel-bottom: #cbe0f4;
    --kr-bevel-shade: #4e7aa8;
    --kr-bevel-light: #fff;
    --kr-bevel-ring: #a9c6e4;
    --kr-bevel-fg: #24476d;

    --kr-flat-bg: #f5faff;
    --kr-flat-hover: #ffe792;
    --kr-flat-border: #a9bccf;
    --kr-flat-fg: #24476d;

    --kr-input-bg: #f8fafb;
    --kr-input-bg-focus: #f0f6fd;
    --kr-input-border: #a9bccf;
    --kr-input-focus: #5b84b5;
    --kr-input-fg: #222;
    --kr-input-shadow: inset 0 1px 2px #e2e9f0;

    --kr-table-border: #cbcbcb;
    --kr-table-head: linear-gradient(#e9f0f7, #d2e2f5);
    --kr-table-key: #f0f6fd;
    --kr-table-cell: transparent;
    --kr-code-bg: #f3f7fa;

    --kr-info-bg: #eff5f9;  --kr-info-border: #d3e0ea;  --kr-info-fg: #3b5869;
    --kr-warn-bg: #fff4d1;  --kr-warn-border: #e8d38c;  --kr-warn-fg: #634b06;
    --kr-ok-bg: #e9f6ea;    --kr-ok-border: #8fb98f;    --kr-ok-fg: #205c27;
    --kr-bad-bg: #ffedef;   --kr-bad-border: #d07070;   --kr-bad-fg: #8a2121;
    --kr-ok: #2f9a3d;
    --kr-warn: #e08a00;
    --kr-bad: #e05252;
    --kr-new: #ff4f5e;

    --kr-banner-bg: repeating-linear-gradient(-45deg, #ffb6da 0 12px, #ffc6e3 12px 24px);
    --kr-banner-fg: #3a1420;
    --kr-bar-bg: linear-gradient(to right, #6fa3cf, #24597e);
    --kr-sky: linear-gradient(#2463ad, #4f92d4 50%, #9cc8ec);

    --kr-logo: #fff;
    --kr-logo-shadow: 0 2px 8px #1d4f7a66;
    --kr-logo-font: Arial, Helvetica, sans-serif;
    --kr-panel-bg: #ffffffb3;
    --kr-side-bg: var(--kr-surface-2);

    --kr-netbar-bg: #fff;
    --kr-netbar-fg: #000;
    --kr-netbar-line: #d6d6d6;
    --kr-netbar-active-bg: #f0f0f0;
    --kr-netbar-active-fg: #1a7fc1;

}

/* ramune */

[data-theme="ramune"] {
    --kr-font-body: var(--kr-font-gothic);
    --kr-font-heading: Arial, Helvetica, sans-serif;
    --kr-font-display: Georgia, "Times New Roman", serif;
    --kr-size: 14px;
    --kr-prose: normal;
    --kr-width: 700px;
    --kr-page-color: #fff;
    --kr-page: linear-gradient(#dff4fc, #fff 240px);
    --kr-page-attach: scroll;
    --kr-surface-2: #f8fafa;
    --kr-surface-3: #def2fa;
    --kr-border: #dcdcdc;
    --kr-border-soft: #bde3f2;
    --kr-border-strong: #1d98c6;
    --kr-radius: 2px;
    --kr-shadow: none;
    --kr-text: #111;
    --kr-muted: #8a8a8a;
    --kr-heading: #111;
    --kr-link: #1d98c6;
    --kr-link-hover: #137aa2;
    --kr-link-weight: bold;
    --kr-accent: #1d98c6;
    --kr-bullet: #1d98c6;
    --kr-label: #137aa2;
    --kr-selection: #c4ebfa;
    --kr-h1-size: 30px;
    --kr-h1-spacing: 1px;
    --kr-h2-size: 21px;
    --kr-title-bg: linear-gradient(#2aa7d5, #1a8db9);
    --kr-title-font: Arial, Helvetica, sans-serif;
    --kr-title-size: 16px;
    --kr-title-transform: none;
    --kr-title-spacing: 1px;
    --kr-title-shadow: 0 1px 1px #0000002e;
    --kr-nav-active-fg: #1d98c6;
    --kr-btn-bg: linear-gradient(#fff, #e1eef3);
    --kr-btn-bg-hover: #f1f9fd;
    --kr-btn-border: #9acde2;
    --kr-btn-border-hover: #1d98c6;
    --kr-btn-fg: #137aa2;
    --kr-btn-radius: 3px;
    --kr-btn-shadow: 0 1px 2px #0000001a;
    --kr-gloss-top: #58b2ff;
    --kr-gloss-mid: #1d98c6;
    --kr-gloss-bottom: #0e7096;
    --kr-gloss-hi: #72c4ff;
    --kr-gloss-border: #2ab4ef;
    --kr-bevel-top: #f2fbff;
    --kr-bevel-bottom: #c2e5f5;
    --kr-bevel-shade: #137aa2;
    --kr-bevel-ring: #82cbe8;
    --kr-bevel-fg: #137aa2;
    --kr-flat-bg: #f2fbff;
    --kr-flat-border: #9acde2;
    --kr-flat-fg: #137aa2;
    --kr-input-bg: #fff;
    --kr-input-bg-focus: #fff;
    --kr-input-border: #c6c6c6;
    --kr-input-focus: #1d98c6;
    --kr-input-fg: #111;
    --kr-input-shadow: inset 0 1px 2px #0000000f;
    --kr-table-border: #dcdcdc;
    --kr-table-head: linear-gradient(#f7f7f7, #e7e7e7);
    --kr-table-key: #f8fafa;
    --kr-code-bg: #f8fafa;
    --kr-bar-bg: linear-gradient(#2aa7d5, #1a8db9);
    --kr-sky: linear-gradient(#1385c0, #4cb6e6 50%, #b5e6f8);
    --kr-logo: #1d98c6;
    --kr-logo-shadow: none;
    --kr-panel-bg: #f4f9fb;
    --kr-netbar-active-fg: #1d98c6;
}

/* anzu */

[data-theme="anzu"] {
    --kr-font-ui: "MS PGothic", Tahoma, Verdana, sans-serif;
    --kr-font-body: var(--kr-font-ui);
    --kr-font-heading: Georgia, "Times New Roman", serif;
    --kr-size: 15px;
    --kr-prose: normal;
    --kr-width: 760px;
    --kr-page-color: #ffe6d8;
    --kr-page:
        radial-gradient(#f6c9b4 2px, #0000 2.5px) 0 0 / 22px 22px,
        radial-gradient(#f6c9b4 2px, #0000 2.5px) 11px 11px / 22px 22px,
        #ffe6d8;
    --kr-page-attach: scroll;
    --kr-surface: #fffaea;
    --kr-surface-2: #ffeed9;
    --kr-surface-3: #fff4d4;
    --kr-border: #eec3aa;
    --kr-border-soft: #ffc4a3;
    --kr-border-strong: #d69a85;
    --kr-radius: 2px;
    --kr-shadow: 1px 1px 2px #6a4f5540;
    --kr-text: #6a4f55;
    --kr-text-strong: #4b363b;
    --kr-muted: #8a6470;
    --kr-heading: #6a4f55;
    --kr-link: #e5857f;
    --kr-link-hover: #d26864;
    --kr-link-weight: bold;
    --kr-link-line: underline;
    --kr-accent: #f99aa4;
    --kr-bullet: #f99aa4;
    --kr-label: #85544a;
    --kr-selection: #ffd4c2;
    --kr-h-style: italic;
    --kr-h1-size: 32px;
    --kr-h2-size: 25px;
    --kr-h2-border: 2px dashed #ffc4a3;
    --kr-h2-pad: 0 0 5px;
    --kr-title-bg: repeating-conic-gradient(#ffffff12 0 25%, #0000 0 50%) 0 0 / 10px 10px, linear-gradient(#8a636e, #66505a);
    --kr-title-fg: #fff4d4;
    --kr-title-size: 19px;
    --kr-title-style: italic;
    --kr-title-transform: none;
    --kr-title-shadow: 1px 1px #00000080;
    --kr-title-border: 3px ridge #ffd4c2;
    --kr-nav-hover: #ffe4bd;
    --kr-nav-active-bg: #ffc4a3;
    --kr-nav-active-fg: #6a4f55;
    --kr-btn-bg: linear-gradient(#fff4d4, #ffc0bf);
    --kr-btn-bg-hover: linear-gradient(#ffc4a3, #ffc0bf);
    --kr-btn-border: #ffc4a3;
    --kr-btn-border-hover: #ffab82;
    --kr-btn-fg: #85544a;
    --kr-btn-weight: normal;
    --kr-btn-radius: 3px;
    --kr-btn-shadow: -1.5px -1.5px 1px inset #85544a, 1.5px 1.5px 1px inset #fff, 0 0 0 1px #ffc4a3;
    --kr-btn-text-shadow: 1px 1px #fff4d4;
    --kr-gloss-top: #ffc6cb;
    --kr-gloss-mid: #f99aa4;
    --kr-gloss-bottom: #db7682;
    --kr-gloss-hi: #ffd9dd;
    --kr-gloss-border: #f08994;
    --kr-bevel-top: #fff4d4;
    --kr-bevel-bottom: #ffc0bf;
    --kr-bevel-shade: #85544a;
    --kr-bevel-ring: #ffc4a3;
    --kr-bevel-fg: #8a6470;
    --kr-flat-bg: #fff4d4;
    --kr-flat-border: #eec3aa;
    --kr-flat-fg: #85544a;
    --kr-input-bg: #fffdf6;
    --kr-input-bg-focus: #fff;
    --kr-input-border: #eec3aa;
    --kr-input-focus: #f99aa4;
    --kr-input-fg: #6a4f55;
    --kr-input-shadow: inset 1px 1px 2px #eec3aa66;
    --kr-table-border: #eec3aa;
    --kr-table-head: linear-gradient(#fff3e1, #fbdcc2);
    --kr-table-key: #ffeed9;
    --kr-code-bg: #fff4d4;
    --kr-info-bg: #fff4d4; --kr-info-border: #ffc4a3; --kr-info-fg: #85544a;
    --kr-bar-bg: linear-gradient(#8a636e, #66505a);
    --kr-sky: linear-gradient(#e8908a, #f8bc9f 50%, #ffe5c8);
    --kr-logo: #6a4f55;
    --kr-logo-shadow: 2px 2px 0 #fff4d4;
    --kr-logo-font: Georgia, "Times New Roman", serif;
    --kr-nav-font: Georgia, "Times New Roman", serif;
    --kr-panel-bg: #fff4d4;
}

/* hoshi */

[data-theme="hoshi"] {
    --kr-font-ui: Tahoma, Verdana, Geneva, sans-serif;
    --kr-font-body: var(--kr-font-ui);
    --kr-font-heading: var(--kr-font-ui);
    --kr-font-display: "M PLUS Rounded 1c", "Trebuchet MS", sans-serif;
    --kr-size: 14px;
    --kr-prose: normal;
    --kr-width: 800px;
    --kr-page-color: #fafafa;
    --kr-page:
        linear-gradient(#efbcff8c, #fff0) 0 0 / 100% 140px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23ebddf1' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath id='s' transform='translate(22 24)' d='M0-6L1.53-2.1L5.71-1.85L2.47.8L3.53 4.85L0 2.6L-3.53 4.85L-2.47.8L-5.71-1.85L-1.53-2.1Z'/%3E%3Cuse href='%23s' x='50' y='44'/%3E%3Cuse href='%23s' x='8' y='56'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100px 100px,
        #fafafa;
    --kr-page-attach: scroll;
    --kr-surface: #fff;
    --kr-surface-2: #faf6fc;
    --kr-surface-3: #f2e6f8;
    --kr-border: #d5c6dc;
    --kr-border-soft: #e4d8ea;
    --kr-border-strong: #b99dc6;
    --kr-border-width: 1.5px;
    --kr-radius: 3px;
    --kr-shadow: 1px 1px 0 #ece9ec;
    --kr-text: #654e70;
    --kr-text-strong: #4b3554;
    --kr-muted: #9b88a4;
    --kr-heading: #823b98;
    --kr-link: #9a66b8;
    --kr-link-hover: #823b98;
    --kr-accent: #9a66b8;
    --kr-bullet: #d982ff;
    --kr-label: #654e70;
    --kr-selection: #f0d6ff;
    --kr-h-weight: 800;
    --kr-h1-size: 34px;
    --kr-h1-bg: linear-gradient(#56305f, #86409a);
    --kr-h1-clip: text;
    --kr-h1-fill: transparent;
    --kr-h2-size: 26px;
    --kr-h2-bg: linear-gradient(#56305f, #86409a);
    --kr-h2-clip: text;
    --kr-h2-fill: transparent;
    --kr-title-bg: linear-gradient(#d0a8df, #a874be 50%, #9159aa 51%, #ab80c0);
    --kr-title-font: var(--kr-font-ui);
    --kr-title-size: 15px;
    --kr-title-shadow: 0 1px 2px #00000080;
    --kr-nav-hover: #64646411;
    --kr-nav-active-bg: #9a66b8;
    --kr-nav-active-fg: #fff;
    --kr-btn-bg: linear-gradient(#fafafa, #f1e9f4);
    --kr-btn-bg-hover: linear-gradient(#faf6fc, #ece1f1);
    --kr-btn-border: #c5b2cd;
    --kr-btn-border-hover: #b99dc6;
    --kr-btn-fg: #654e70;
    --kr-btn-radius: 3px;
    --kr-btn-shadow: inset 0 1px 0 #ffffffcc, 0 1px 0 #ece9ec;
    --kr-btn-text-shadow: none;
    --kr-gloss-top: #dcaef0;
    --kr-gloss-mid: #aa69c6;
    --kr-gloss-bottom: #7f409b;
    --kr-gloss-hi: #edcbfa;
    --kr-gloss-border: #9a66b8;
    --kr-gloss-radius: 999px;
    --kr-bevel-top: #fff;
    --kr-bevel-bottom: #f0e1f7;
    --kr-bevel-shade: #9a66b8;
    --kr-bevel-ring: #d5c6dc;
    --kr-bevel-fg: #654e70;
    --kr-flat-bg: #faf6fc;
    --kr-flat-border: #d5c6dc;
    --kr-flat-fg: #654e70;
    --kr-input-bg: #fafafa;
    --kr-input-bg-focus: #fff;
    --kr-input-border: #d5c6dc;
    --kr-input-focus: #9a66b8;
    --kr-input-fg: #654e70;
    --kr-input-shadow: inset 0 1.5px 0 #ededed;
    --kr-table-border: #d5c6dc;
    --kr-table-head: linear-gradient(#faf6fc, #ece1f1);
    --kr-table-key: #faf6fc;
    --kr-code-bg: #faf6fc;
    --kr-info-bg: #faf6fc; --kr-info-border: #d5c6dc; --kr-info-fg: #654e70;
    --kr-bar-bg: linear-gradient(90deg, #efbcff, #9a66b8);
    --kr-sky: linear-gradient(#8752b5, #bf8ddf 50%, #f2d9ff);
    --kr-logo: #823b98;
    --kr-logo-shadow: 0 0 12px #fff;
    --kr-logo-font: var(--kr-font-display);
    --kr-panel-bg: #faf6fc;
}

/* momo */

[data-theme="momo"] {
    --kr-font-ui: Tahoma, Verdana, Arial, sans-serif;
    --kr-font-body: var(--kr-font-ui);
    --kr-font-heading: "MS Gothic", "MS UI Gothic", sans-serif;
    --kr-size: 13px;
    --kr-size-ui: 12px;
    --kr-line: 1.55;
    --kr-prose: normal;
    --kr-page-color: #fff;
    --kr-page:
        linear-gradient(#ffd8e4, #fff0) 0 0 / 100% 170px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fbdbe5'%3E%3Cellipse cx='20' cy='28' rx='5' ry='2.6' transform='rotate(30 20 28)'/%3E%3Cellipse cx='78' cy='18' rx='4' ry='2.2' transform='rotate(-25 78 18)'/%3E%3Cellipse cx='96' cy='82' rx='5' ry='2.6' transform='rotate(60 96 82)'/%3E%3Cellipse cx='44' cy='96' rx='4' ry='2.2' transform='rotate(-50 44 96)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px,
        #fff;
    --kr-page-attach: scroll;
    --kr-surface-2: #fff8fa;
    --kr-surface-3: #ffeaf2;
    --kr-border: #e8d9df;
    --kr-border-soft: #ffe2e6;
    --kr-border-strong: #c99cad;
    --kr-radius-control: 0px;
    --kr-shadow: 2px 2px 0 #d9b2c073;
    --kr-text: #51444a;
    --kr-text-strong: #2f262a;
    --kr-muted: #7c6772;
    --kr-heading: #7f2f4f;
    --kr-link: #b8386a;
    --kr-link-hover: #8e3152;
    --kr-accent: #d86e80;
    --kr-bullet: #d86e80;
    --kr-label: #7f2f4f;
    --kr-selection: #ffdbe7;
    --kr-h1-size: 18px;
    --kr-h1-bg: #fff7f9;
    --kr-h1-border: 1px solid #d86e80;
    --kr-h1-border-left: 1px solid #d86e80;
    --kr-h1-pad: 4px 8px;
    --kr-h1-spacing: 1px;
    --kr-h2-size: 16px;
    --kr-title-bg: #f9f3db;
    --kr-title-fg: #6f4128;
    --kr-title-font: var(--kr-font-pixel);
    --kr-title-size: 13px;
    --kr-title-transform: uppercase;
    --kr-title-spacing: 1px;
    --kr-title-shadow: none;
    --kr-title-border: 1px solid #dfd2a8;
    --kr-title-pad: 6px 8px;
    --kr-nav-hover: #ffeaf2;
    --kr-nav-active-bg: #ffeaf2;
    --kr-nav-active-fg: #7f2f4f;
    --kr-btn-bg: #fff5f8;
    --kr-btn-bg-hover: #ffe792;
    --kr-btn-border: #c99cad;
    --kr-btn-border-hover: #c99cad;
    --kr-btn-fg: #7c4258;
    --kr-btn-font: "MS Gothic", "MS UI Gothic", sans-serif;
    --kr-btn-radius: 0px;
    --kr-btn-shadow: none;
    --kr-btn-text-shadow: none;
    --kr-gloss-top: #ffa8c6;
    --kr-gloss-mid: #e2608d;
    --kr-gloss-bottom: #b8386a;
    --kr-gloss-hi: #ffc6da;
    --kr-gloss-border: #d4537f;
    --kr-bevel-top: #fff5f8;
    --kr-bevel-bottom: #ffdce9;
    --kr-bevel-shade: #b8386a;
    --kr-bevel-ring: #d9b2c0;
    --kr-bevel-fg: #7c4258;
    --kr-flat-bg: #fff5f8;
    --kr-flat-border: #c99cad;
    --kr-flat-fg: #7c4258;
    --kr-input-bg: #fff;
    --kr-input-bg-focus: #fff;
    --kr-input-border: #e8d0d9;
    --kr-input-focus: #c99cad;
    --kr-input-fg: #51444a;
    --kr-input-shadow: none;
    --kr-table-border: #e8d9df;
    --kr-table-head: #fbf4dd;
    --kr-table-key: #fbf4dd;
    --kr-code-bg: #fffdf6;
    --kr-info-bg: #fff8fa; --kr-info-border: #d9b2c0; --kr-info-fg: #5d434b;
    --kr-bar-bg: linear-gradient(90deg, #ffd8e4, #d86e80);
    --kr-sky: linear-gradient(#e6739a, #f6abc4 50%, #ffe5ee);
    --kr-logo: #b8386a;
    --kr-logo-shadow: 2px 2px 0 #fff;
    --kr-logo-font: var(--kr-font-heading);
    --kr-panel-bg: #fff8fa;
}

/* kuro */

:root:not([data-theme]), [data-theme="kuro"] {
    color-scheme: dark;
    --kr-font-ui: Arial, Helvetica, sans-serif;
    --kr-font-body: var(--kr-font-ui);
    --kr-font-heading: var(--kr-font-ui);
    --kr-size: 15px;
    --kr-prose: normal;
    --kr-width: 800px;
    --kr-page-color: #000;
    --kr-page:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='20' r='1' fill-opacity='.5'/%3E%3Ccircle cx='70' cy='44' r='.8' fill-opacity='.3'/%3E%3Ccircle cx='130' cy='16' r='1.1' fill-opacity='.45'/%3E%3Ccircle cx='100' cy='110' r='.8' fill-opacity='.4'/%3E%3Ccircle cx='30' cy='140' r='1' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px,
        linear-gradient(#1a1640, #000 1000px);
    --kr-surface: #000000a3;
    --kr-surface-2: #ffffff0c;
    --kr-surface-3: #221e52;
    --kr-border: #ffffff1c;
    --kr-border-soft: #ffffff2e;
    --kr-border-strong: #8c84c4;
    --kr-radius-control: 3px;
    --kr-shadow: 1px 1px 2px #000;
    --kr-text: #fff;
    --kr-text-strong: #fff;
    --kr-muted: #aaa4cb;
    --kr-heading: #fff;
    --kr-link: #ffb3c6;
    --kr-link-hover: #ffd4de;
    --kr-link-line: underline;
    --kr-accent: #aaa2d6;
    --kr-accent-fg: #0c0a22;
    --kr-bullet: #aaa2d6;
    --kr-label: #d9d3ff;
    --kr-selection: #5e50b6;
    --kr-h-style: italic;
    --kr-h1-size: 27px;
    --kr-h1-border: 3px double #ffffff66;
    --kr-h1-pad: 0 0 2px;
    --kr-h2-size: 18px;
    --kr-h2-weight: normal;
    --kr-h2-border: 1px solid #ffffff4d;
    --kr-h2-pad: 0 0 2px;
    --kr-title-bg: linear-gradient(120deg, #8c84c4, #aaa2d6 55%, #5e50b6);
    --kr-title-font: var(--kr-font-ui);
    --kr-title-size: 17px;
    --kr-title-style: italic;
    --kr-title-shadow: 1px 1px 2px #000;
    --kr-nav-hover: #221e52;
    --kr-nav-active-bg: #bdb2ffb0;
    --kr-nav-active-fg: #fff;
    --kr-btn-bg: linear-gradient(#2d2862, #18153c);
    --kr-btn-bg-hover: linear-gradient(#3b3582, #221e52);
    --kr-btn-border: #5e50b6;
    --kr-btn-border-hover: #8c84c4;
    --kr-btn-fg: #fff;
    --kr-btn-radius: 3px;
    --kr-btn-shadow: none;
    --kr-btn-text-shadow: 1px 1px 2px #000;
    --kr-gloss-top: #c4baff;
    --kr-gloss-mid: #8378d4;
    --kr-gloss-bottom: #4f41a4;
    --kr-gloss-hi: #ddd6ff;
    --kr-gloss-border: #8c84c4;
    --kr-bevel-top: #3b3570;
    --kr-bevel-bottom: #221e52;
    --kr-bevel-shade: #000;
    --kr-bevel-light: #ffffff40;
    --kr-bevel-ring: #5e50b6;
    --kr-bevel-fg: #fff;
    --kr-flat-bg: #ffffff0c;
    --kr-flat-hover: #5e50b6;
    --kr-flat-border: #ffffff40;
    --kr-flat-fg: #fff;
    --kr-input-bg: #ffffff0c;
    --kr-input-bg-focus: #2b2b2b;
    --kr-input-border: #808080;
    --kr-input-focus: #aaa2d6;
    --kr-input-fg: #fff;
    --kr-input-shadow: inset 1px 1px 0 #000;
    --kr-table-border: #000;
    --kr-table-head: linear-gradient(#2d2862, #18153c);
    --kr-table-key: #ffffff0c;
    --kr-table-cell: linear-gradient(#222, #111);
    --kr-code-bg: #ffffff0c;
    --kr-info-bg: #ffffff14; --kr-info-border: #ffffff2e; --kr-info-fg: #e6e1ff;
    --kr-warn-bg: #fff3cd2b; --kr-warn-border: #f7e6b355; --kr-warn-fg: #f7e6b3;
    --kr-ok-bg: #2dff6a1f;   --kr-ok-border: #b3f7c455;   --kr-ok-fg: #b3f7c4;
    --kr-bad-bg: #ff2d2d2b;  --kr-bad-border: #f7b3b355;  --kr-bad-fg: #f7b3b3;
    --kr-ok: #90ee90;
    --kr-warn: #ffa500;
    --kr-bad: #ff6b6b;
    --kr-bar-bg: linear-gradient(120deg, #8c84c4, #aaa2d6 55%, #5e50b6);
    --kr-sky: linear-gradient(#06061c, #1d1a5e 55%, #5b2c8c);
    --kr-logo: #fff;
    --kr-logo-shadow: none;
    --kr-panel-bg: #ffffff0b;
    --kr-side-bg: #ffffff0c;
    --kr-side-shadow: 1px 1px 2px #000;
    --kr-netbar-bg: #0c0a22;
    --kr-netbar-fg: #d9d3ff;
    --kr-netbar-line: #ffffff1f;
    --kr-netbar-active-bg: #221e52;
    --kr-netbar-active-fg: #ffb3c6;
}

/* base */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--kr-page-color); }

body {
    display: flow-root;
    margin: 0;
    min-height: 100vh;
    background: var(--kr-page);
    background-attachment: var(--kr-page-attach);
    color: var(--kr-text);
    font-family: var(--kr-font-body);
    font-size: var(--kr-size);
    line-height: var(--kr-line);
}

[data-theme]:not(html) {
    color: var(--kr-text);
    font-family: var(--kr-font-body);
    font-size: var(--kr-size);
    line-height: var(--kr-line);
}

img { max-width: 100%; height: auto; }

::selection { background: var(--kr-selection); }

:focus-visible { outline: 2px solid var(--kr-accent); outline-offset: 2px; }

/* type */

a {
    color: var(--kr-link);
    font-weight: var(--kr-link-weight);
    text-decoration: var(--kr-link-line);
}
a:hover { color: var(--kr-link-hover); text-decoration: underline; }

p { margin: 10px 0; font-style: var(--kr-prose); }

h1, h2, h3, h4 {
    margin: 14px 0 8px;
    line-height: 1.25;
    font-family: var(--kr-font-heading);
    font-weight: var(--kr-h-weight);
    font-style: var(--kr-h-style);
    color: var(--kr-heading);
}
h1 {
    font-family: var(--kr-font-display);
    font-size: var(--kr-h1-size);
    color: var(--kr-h1-color);
    letter-spacing: var(--kr-h1-spacing);
    background: var(--kr-h1-bg);
    -webkit-background-clip: var(--kr-h1-clip);
    background-clip: var(--kr-h1-clip);
    -webkit-text-fill-color: var(--kr-h1-fill);
    border-bottom: var(--kr-h1-border);
    border-left: var(--kr-h1-border-left);
    padding: var(--kr-h1-pad);
}
h2 {
    font-family: var(--kr-font-display);
    font-size: var(--kr-h2-size);
    font-weight: var(--kr-h2-weight);
    background: var(--kr-h2-bg);
    -webkit-background-clip: var(--kr-h2-clip);
    background-clip: var(--kr-h2-clip);
    -webkit-text-fill-color: var(--kr-h2-fill);
    border-bottom: var(--kr-h2-border);
    padding: var(--kr-h2-pad);
}
h3 { font-size: 16px; }
h4 { font-size: 14px; }

small, .small { font-size: var(--kr-size-ui); }

hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px dotted var(--kr-border-strong);
}

code {
    padding: 1px 4px;
    font-family: var(--kr-font-mono);
    font-size: .85em;
    background: var(--kr-code-bg);
    border: 1px solid var(--kr-border-soft);
}
pre {
    margin: 8px 0 12px;
    padding: 10px 12px;
    overflow-x: auto;
    font: 13px/1.5 var(--kr-font-mono);
    background: var(--kr-code-bg);
    border: 1px solid var(--kr-border-soft);
}
pre code { padding: 0; font-size: inherit; background: none; border: 0; }

blockquote {
    margin: 8px 0;
    padding: 4px 14px;
    color: var(--kr-muted);
    background: var(--kr-surface-2);
    border-left: 3px solid var(--kr-border-soft);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kr-accent);
    font: bold 11px var(--kr-font-ui);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.wordmark::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 2px;
    background: currentColor;
    rotate: 45deg;
}
a.wordmark:hover { color: var(--kr-accent); text-decoration: none; }

.eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--kr-heading);
    font: 12px var(--kr-font-pixel);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: normal;
}

/* layout */

.page {
    width: min(var(--kr-width), 100% - 32px);
    margin: 20px auto 120px;
}
.page.wide { --kr-width: 820px; }

.sheet {
    padding: 10px 20px 20px;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
    border-radius: var(--kr-radius);
}

.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 8px); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 10px); }

.grid-2, .grid-3 {
    display: grid;
    gap: var(--gap, 12px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.layout-sidebar {
    display: grid;
    grid-template-columns: var(--sidebar, 170px) minmax(0, 1fr);
    gap: var(--gap, 10px);
    align-items: start;
}

/* masthead + panel layout */

.masthead { margin: 64px 0 0; padding: 0 10px 6px; }
.logo {
    display: inline-block;
    color: var(--kr-logo);
    font: bold 54px/1 var(--kr-logo-font);
    letter-spacing: -2px;
    text-decoration: none;
    text-shadow: var(--kr-logo-shadow);
}
.logo:hover { color: var(--kr-logo); text-decoration: none; }
.logo-sub {
    display: block;
    margin: 6px 0 0 2px;
    color: var(--kr-logo);
    font: bold 14px var(--kr-font-ui);
    letter-spacing: 2px;
    text-shadow: var(--kr-logo-shadow);
}

.panel {
    display: grid;
    grid-template-columns: var(--sidebar, 170px) minmax(0, 1fr);
    align-items: start;
    padding-top: 7px;
    background: var(--kr-panel-bg);
}

.side { display: flex; flex-direction: column; gap: 10px; margin: 0 10px 10px; }
.side-box {
    color: var(--kr-text);
    font-family: var(--kr-font-ui);
    font-size: var(--kr-size-ui);
    text-shadow: var(--kr-side-shadow, none);
    background: var(--kr-side-bg);
    border: var(--kr-border-width) solid var(--kr-border);
    --kr-prose: normal;
}
.side-box > :not(.side-title, .sidenav, .ticker) { margin-left: 8px; margin-right: 8px; }
.side-box > :last-child { margin-bottom: 8px; }
.side-box > .sidenav:last-child { margin-bottom: 0; }
.side-title {
    margin: 0 0 6px;
    padding: 5px 8px;
    color: var(--kr-text);
    font: italic bold 14px var(--kr-nav-font, var(--kr-font-ui));
    text-align: center;
    border-bottom: 1px dashed var(--kr-border-strong);
}
.side-box .avatar { margin: 10px auto 8px; max-width: 96px; }

.content {
    min-width: 0;
    padding: 6px 14px 14px;
    color: var(--kr-text);
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
}
.content > h1:first-child, .content > h2:first-child { margin-top: 10px; }

.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.ticker { overflow: hidden; white-space: nowrap; padding: 4px 0 6px; }
.ticker-track { display: inline-flex; animation: nk-ticker 14s linear infinite; }
.ticker-track > * { padding: 0 2.5em 0 8px; }
@keyframes nk-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* netbar */

.netbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 25px;
    padding: 0 10px;
    color: var(--kr-netbar-fg);
    font: 12px var(--kr-font-ui);
    white-space: nowrap;
    background: var(--kr-netbar-bg);
    border-bottom: 1px solid var(--kr-netbar-line);
    box-shadow: 0 0 10px #0000001a;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-font-smoothing: none;
}
.netbar-links, .netbar-right { display: flex; align-items: center; height: 100%; }
.netbar-right { gap: 8px; }
.netbar a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 10px;
    color: var(--kr-netbar-fg);
    font-weight: normal;
    text-decoration: none;
}
.netbar a:hover { color: var(--kr-netbar-fg); text-decoration: underline; }
.netbar a.active, .netbar a[aria-current] {
    color: var(--kr-netbar-active-fg);
    background: var(--kr-netbar-active-bg);
}
.netbar .wordmark { padding: 0 2px; font-size: 10px; color: var(--kr-netbar-active-fg); }
.netbar select {
    padding: 0 2px;
    color: inherit;
    font: 12px var(--kr-font-ui);
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* header & nav */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 4px 0 10px;
}
.site-header > .wordmark { margin-left: 6px; }

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-top: 6px;
    font-family: var(--kr-font-body);
    font-style: italic;
}
.nav a {
    position: relative;
    padding: 5px 10px;
    color: var(--kr-link);
    font-weight: normal;
    text-decoration: none;
}
.nav a:hover { text-decoration: underline; }
.nav a.active, .nav a[aria-current] {
    color: var(--kr-nav-active-fg);
    background: var(--kr-nav-active-bg);
}

.tabbar {
    display: flex;
    align-items: stretch;
    height: 36px;
    padding: 0 16px;
    background: var(--kr-accent);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabbar a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: var(--kr-accent-fg);
    font: bold 14px var(--kr-font-gothic);
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    transform: skewX(-15deg);
}
.tabbar a:hover { color: var(--kr-accent-fg); text-decoration: none; background: color-mix(in srgb, var(--kr-accent), #000 10%); }
.tabbar a.active, .tabbar a[aria-current] { background: color-mix(in srgb, var(--kr-accent), #000 20%); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills a {
    padding: 4px 8px;
    color: var(--kr-heading);
    font: bold 11px var(--kr-font-ui);
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--kr-surface-2);
    border: 1px solid var(--kr-border-strong);
}
.pills a:hover, .pills a.active, .pills a[aria-current] {
    text-decoration: none;
    background: var(--kr-surface-3);
    border-color: var(--kr-accent);
}

.sidenav { display: flex; flex-direction: column; padding: 6px 0; }
.sidenav a {
    display: block;
    padding: 2px 8px;
    color: var(--kr-text);
    font-family: var(--kr-nav-font, inherit);
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    text-decoration: none;
}
.sidenav a:hover { color: var(--kr-text); text-decoration: none; background: var(--kr-nav-hover); }
.sidenav a.active, .sidenav a[aria-current] { color: var(--kr-nav-active-fg); background: var(--kr-nav-active-bg); }

.sidenav.buttons { gap: 10px; padding: 10px 8px; }
.sidenav.buttons a { padding: 6px 10px; text-align: center; font-style: normal; border-radius: 10px / 20px; }

/* title bar */

.title-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0 6px;
    padding: var(--kr-title-pad);
    color: var(--kr-title-fg);
    font-family: var(--kr-title-font);
    font-size: var(--kr-title-size);
    font-style: var(--kr-title-style);
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: var(--kr-title-spacing);
    text-transform: var(--kr-title-transform);
    text-shadow: var(--kr-title-shadow);
    background: var(--kr-title-bg);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    border: 0;
    border-bottom: var(--kr-title-border);
    -webkit-font-smoothing: none;
}
.title-bar small {
    font-family: var(--kr-font-ui);
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: none;
    opacity: .85;
}
.title-bar a { color: inherit; }

.bar { height: 8px; margin: 0; border: 0; background: var(--kr-bar-bg); }

/* boxes */

.box {
    padding: 12px;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
    border-radius: var(--kr-radius);
}
.box.tinted { background: var(--kr-surface-2); border-color: var(--kr-border-soft); }
.box > .title-bar:first-child { margin: -12px -12px 12px; }
.box > :last-child { margin-bottom: 0; }
.box > :first-child:not(.title-bar) { margin-top: 0; }

.card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    color: var(--kr-text);
    font-family: var(--kr-font-ui);
    font-weight: normal;
    text-decoration: none;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
    border-radius: var(--kr-radius-control);
    box-shadow: 1px 1px 0 var(--kr-border-soft);
    transition: background-color .15s, border-color .15s;
    --kr-prose: normal;
}
a.card:hover {
    color: var(--kr-text);
    text-decoration: none;
    background: var(--kr-surface-2);
    border-color: var(--kr-border-strong);
}
.card.vertical { flex-direction: column; gap: 8px; }
.card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--kr-radius-control);
}
.card-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--kr-border);
}
.card-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.card-name { font-size: 15px; font-weight: bold; line-height: 1.25; }
.card-name small { margin-left: 6px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--kr-muted); }
a.card:hover .card-name { color: var(--kr-link); }
.card-text { margin: 0; font-size: var(--kr-size-ui); line-height: 1.4; color: var(--kr-muted); }

/* buttons */

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 16px;
    color: var(--kr-btn-fg);
    font-family: var(--kr-btn-font);
    font-size: var(--kr-size-ui);
    font-style: normal;
    font-weight: var(--kr-btn-weight);
    line-height: 1.3;
    text-decoration: none;
    text-shadow: var(--kr-btn-text-shadow);
    background: var(--kr-btn-bg);
    border: 1px solid var(--kr-btn-border);
    border-radius: var(--kr-btn-radius);
    box-shadow: var(--kr-btn-shadow);
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    color: var(--kr-btn-fg);
    text-decoration: none;
    background: var(--kr-btn-bg-hover);
    border-color: var(--kr-btn-border-hover);
}
.btn:active, button:active { filter: brightness(.95); }
.btn:disabled, button:disabled, input[type="submit"]:disabled {
    opacity: .6;
    filter: grayscale(.7);
    cursor: not-allowed;
}

.btn-glossy {
    position: relative;
    overflow: hidden;
    padding: 8px 26px;
    color: var(--kr-gloss-fg);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: 0 1px 2px #0000004d;
    background: linear-gradient(var(--kr-gloss-top), var(--kr-gloss-mid) 50%, var(--kr-gloss-bottom));
    border: 1px solid var(--kr-gloss-border);
    border-top-color: var(--kr-gloss-hi);
    border-bottom-color: var(--kr-gloss-bottom);
    border-radius: var(--kr-gloss-radius);
    box-shadow: 0 4px 8px #0000004d, inset 0 1px 0 #ffffff66, inset 0 -1px 0 #00000033;
}
.btn-glossy::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(#ffffff4d, #ffffff1a);
    border-radius: inherit;
    pointer-events: none;
}
.btn-glossy:hover {
    color: var(--kr-gloss-fg);
    background: linear-gradient(var(--kr-gloss-hi), var(--kr-gloss-top) 50%, var(--kr-gloss-mid));
    border-color: var(--kr-gloss-border);
    box-shadow: 0 6px 12px #00000066, inset 0 1px 0 #ffffff80, inset 0 -1px 0 #00000033;
    transform: translateY(-1px);
}
.btn-glossy:active { filter: none; transform: none; box-shadow: 0 2px 4px #0000004d, inset 0 2px 4px #00000033; }

.btn-bevel,
.sidenav.buttons a {
    margin: 2px;
    padding: 3px 12px;
    color: var(--kr-bevel-fg);
    font-family: var(--kr-btn-font);
    font-weight: normal;
    text-shadow: 1px 1px var(--kr-bevel-top);
    background: linear-gradient(var(--kr-bevel-top), var(--kr-bevel-bottom));
    border: 0;
    border-radius: 3px;
    box-shadow:
        -1.5px -1.5px 1px inset var(--kr-bevel-shade),
        1.5px 1.5px 1px inset var(--kr-bevel-light),
        0 0 0 2px var(--kr-bevel-ring);
}
.btn-bevel:hover,
.sidenav.buttons a:hover {
    color: var(--kr-bevel-fg);
    text-decoration: none;
    background: linear-gradient(var(--kr-bevel-ring), var(--kr-bevel-bottom));
}
.btn-bevel:active,
.sidenav.buttons a:active,
.sidenav.buttons a.active {
    color: var(--kr-bevel-fg);
    background: var(--kr-bevel-ring);
    box-shadow:
        1.5px 1.5px 1px inset var(--kr-bevel-shade),
        -1.5px -1.5px 1px inset var(--kr-bevel-light),
        0 0 0 2px var(--kr-bevel-ring);
}
.btn-bevel.pill { border-radius: 10px / 20px; }

.btn-flat {
    padding: 6px 9px;
    color: var(--kr-flat-fg);
    font-family: var(--kr-font-heading);
    font-weight: bold;
    text-shadow: none;
    background: var(--kr-flat-bg);
    border: 1px solid var(--kr-flat-border);
    border-radius: 0;
    box-shadow: none;
}
.btn-flat:hover { color: var(--kr-flat-fg); background: var(--kr-flat-hover); border-color: var(--kr-flat-border); }

.btn-danger {
    --kr-btn-bg: linear-gradient(#f8e8e8, #efc1c1);
    --kr-btn-bg-hover: #f6dada;
    --kr-btn-border: #cc7a7a;
    --kr-btn-border-hover: #b85d5d;
    --kr-btn-fg: #7b2727;
    --kr-btn-text-shadow: 0 1px 0 #fff8;
    --kr-btn-shadow: none;
    --kr-gloss-top: #ff8c8c; --kr-gloss-mid: #d83d3d; --kr-gloss-bottom: #a02323;
    --kr-gloss-hi: #ffb2b2; --kr-gloss-border: #c33232;
    --kr-flat-bg: #ffe4e4; --kr-flat-border: #c85b5b; --kr-flat-fg: #8c2020; --kr-flat-hover: #ffcaca;
}

.close {
    padding: 0 2px;
    color: inherit;
    font: 16px/1 var(--kr-font-ui);
    text-shadow: none;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: .7;
}
.close:hover { color: inherit; background: none; opacity: 1; }

.btn-sm { padding: 2px 8px; font-size: var(--kr-size-sm); }
.btn-lg { padding: 9px 26px; font-size: 16px; }

/* forms */

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"]),
textarea,
select {
    max-width: 100%;
    padding: 5px 9px;
    color: var(--kr-input-fg);
    font-family: var(--kr-font-ui);
    font-size: var(--kr-size-ui);
    font-style: normal;
    background: var(--kr-input-bg);
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius-control);
    box-shadow: var(--kr-input-shadow);
    outline: none;
    transition: border-color .2s, background-color .2s;
}
input:focus:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]),
textarea:focus,
select:focus {
    background-color: var(--kr-input-bg-focus);
    border-color: var(--kr-input-focus);
}
textarea { width: 100%; min-height: 90px; resize: vertical; }
::placeholder { color: var(--kr-muted); opacity: .8; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--kr-accent); }

.form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--kr-surface-2);
    border: var(--kr-border-width) solid var(--kr-border-soft);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
    --kr-prose: normal;
}
.field { display: flex; flex-direction: column; gap: 4px; }
label {
    color: var(--kr-label);
    font: bold var(--kr-size-ui) var(--kr-font-ui);
    font-style: normal;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kr-text);
    font-weight: normal;
}
.hint { color: var(--kr-muted); font: 12px var(--kr-font-ui); font-style: normal; }
.error { color: var(--kr-bad); font-family: var(--kr-font-ui); }
.success { color: var(--kr-ok); font-family: var(--kr-font-ui); }

.input-group {
    display: flex;
    background: var(--kr-input-bg);
    border: 1px solid var(--kr-input-border);
    border-radius: var(--kr-radius-control);
    box-shadow: var(--kr-input-shadow);
}
.input-group:focus-within { border-color: var(--kr-input-focus); }
.input-group > input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.input-group > .addon {
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: var(--kr-muted);
    font: var(--kr-size-ui) var(--kr-font-ui);
    white-space: nowrap;
    background: var(--kr-surface-2);
}
.input-group > .addon:first-child { border-right: 1px solid var(--kr-input-border); }
.input-group > .addon:last-child { border-left: 1px solid var(--kr-input-border); }

/* lists */

ul.marks { padding-left: 2px; list-style: none; }
ul.marks li { position: relative; margin: 3px 0; padding-left: 16px; }
ul.marks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--kr-bullet);
    rotate: 45deg;
}

ul.plain { margin: 0; padding: 0; list-style: none; }

.item-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
}
.item-list > li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px dotted var(--kr-border-strong);
}
.item-list > li:last-child { border-bottom: 0; }
.item-main { flex: 1; min-width: 0; }
.item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--kr-muted);
    font: var(--kr-size-ui) var(--kr-font-ui);
}
.item-meta time { font-style: italic; }
.item-title {
    color: var(--kr-link);
    font: bold 14px var(--kr-font-heading);
    text-decoration: none;
}
.item-arrow {
    flex-shrink: 0;
    color: var(--kr-link);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.item-arrow:hover { color: var(--kr-link-hover); text-decoration: none; }

/* tables */

.table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
    font: var(--kr-size-ui) var(--kr-font-ui);
}
.table th, .table td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: middle;
    background: var(--kr-table-cell);
    border: 1px solid var(--kr-table-border);
}
.table th { font-family: var(--kr-font-heading); background: var(--kr-table-head); }
.table.info td:first-child, .table.info th[scope="row"] {
    width: 32%;
    font-weight: bold;
    background: var(--kr-table-key);
}
.table-scroll { max-width: 100%; overflow-x: auto; }

/* notices & tags */

.notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0;
    padding: 6px 10px;
    color: var(--kr-info-fg);
    font: var(--kr-size-ui)/1.4 var(--kr-font-ui);
    font-style: normal;
    background: var(--kr-info-bg);
    border: 1px solid var(--kr-info-border);
}
.notice a { color: inherit; font-weight: bold; }
.notice.warn { color: var(--kr-warn-fg); background: var(--kr-warn-bg); border-color: var(--kr-warn-border); }
.notice.ok   { color: var(--kr-ok-fg);   background: var(--kr-ok-bg);   border-color: var(--kr-ok-border); }
.notice.bad  { color: var(--kr-bad-fg);  background: var(--kr-bad-bg);  border-color: var(--kr-bad-border); }

.banner {
    padding: 10px;
    color: var(--kr-banner-fg);
    font: bold 14px var(--kr-font-ui);
    text-align: center;
    background: var(--kr-banner-bg);
}
.banner a { color: inherit; text-decoration: underline; }

.tag {
    display: inline-block;
    padding: 1px 7px;
    color: var(--kr-link);
    font: 11px var(--kr-font-ui);
    font-style: normal;
    text-decoration: none;
    vertical-align: middle;
    background: var(--kr-surface-3);
    border: 1px solid var(--kr-border-soft);
}
a.tag:hover { text-decoration: none; filter: brightness(.96); }

.new {
    position: relative;
    bottom: 1px;
    color: var(--kr-new);
    font: bold 10px var(--kr-font-ui);
    font-style: normal;
}

/* faq */

details.faq {
    margin: 8px 0;
    background: var(--kr-surface-2);
    border: var(--kr-border-width) solid var(--kr-border);
    border-radius: var(--kr-radius-control);
}
details.faq > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: var(--kr-text);
    font: bold 14px var(--kr-font-ui);
    list-style: none;
    cursor: pointer;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; color: var(--kr-link); font-size: 16px; line-height: 1; }
details.faq[open] > summary::after { content: "\2212"; }
details.faq > summary:hover { color: var(--kr-link); }
details.faq > :not(summary) {
    margin: 0;
    padding: 0 14px 12px;
    color: var(--kr-muted);
    font: var(--kr-size-ui)/1.5 var(--kr-font-ui);
}

/* key visual */

.kv {
    position: relative;
    min-height: 240px;
    border: 1px solid var(--kr-border);
    background:
        radial-gradient(32% 24% at 46% 52%, #fff 35%, #fff0 70%),
        radial-gradient(26% 20% at 60% 58%, #fffffff2 35%, #fff0 70%),
        radial-gradient(28% 18% at 22% 68%, #ffffffe6 35%, #fff0 70%),
        radial-gradient(30% 16% at 82% 72%, #ffffffd9 35%, #fff0 70%),
        radial-gradient(22% 9% at 30% 20%, #ffffffb3 30%, #fff0 70%),
        radial-gradient(25% 8% at 72% 16%, #ffffffa6 30%, #fff0 70%),
        var(--kr-sky);
}
.kv > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.halftone { position: relative; isolation: isolate; }
.halftone::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #0000 .9px, #0a285a2e 1.4px) 0 0 / 4px 4px;
    pointer-events: none;
}

.kv-copy {
    position: absolute;
    z-index: 1;
    top: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--kr-heading);
    font: bold 18px/1 var(--kr-font-heading);
    font-style: normal;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
}
.kv-copy > span {
    padding: 10px 6px;
    background: var(--kr-surface);
    border: 1px solid var(--kr-border);
}

/* images */

.ph {
    position: relative;
    background:
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--kr-border-soft) 45%, #0000) 0 8px, #0000 8px 16px),
        var(--kr-surface-2);
}
.ph::after {
    content: "NO IMAGE";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    color: var(--kr-muted);
    font: bold 10px var(--kr-font-ui);
    font-style: normal;
    letter-spacing: 2px;
    white-space: nowrap;
}

.avatar {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    border-radius: 50%;
}
.avatar > * {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--kr-surface), 0 0 0 4px var(--kr-border-strong);
}
.avatar .ph::after { content: none; }

.profile {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.profile .table { margin-top: 0; }

/* characters */

.chara {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
    border-top: 3px solid var(--chara, var(--kr-accent));
    --kr-prose: normal;
}
.chara-img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--kr-border);
}
.chara-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chara-name {
    margin: 0;
    padding: 0;
    color: var(--kr-heading);
    font: bold 18px/1.3 var(--kr-font-heading);
    font-style: normal;
    background: none;
    border: 0;
    -webkit-text-fill-color: currentColor;
}
.chara-name small {
    display: block;
    color: var(--chara, var(--kr-accent));
    font: bold 10px var(--kr-font-ui);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.chara-cv { margin: 2px 0 6px; color: var(--kr-muted); font: 11px var(--kr-font-ui); }
.chara-line {
    margin: 6px 0;
    color: var(--chara, var(--kr-accent));
    font-weight: bold;
}
.chara-line::before { content: "\300C"; }
.chara-line::after { content: "\300D"; }
.chara p { font-size: var(--kr-size-ui); }

/* episodes */

.episodes {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    background: var(--kr-surface);
    border: var(--kr-border-width) solid var(--kr-border);
}
.episodes > li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px dotted var(--kr-border-strong);
}
.episodes > li:last-child { border-bottom: 0; }
.ep-no {
    padding: 3px 0;
    color: var(--kr-accent-fg);
    font: italic bold 13px var(--kr-font-ui);
    text-align: center;
    background: var(--kr-accent);
}
.ep-title { min-width: 0; color: var(--kr-text); font-weight: bold; text-decoration: none; }
.ep-title small { display: block; color: var(--kr-muted); font: 11px var(--kr-font-ui); }
a.ep-title:hover { color: var(--kr-link-hover); }
.ep-date { color: var(--kr-muted); font: italic 12px var(--kr-font-ui); white-space: nowrap; }
.episodes > li.soon { opacity: .55; }
.episodes > li.soon .ep-no { color: var(--kr-text); background: var(--kr-surface-3); }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}
.gallery > * {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--kr-border);
}
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery a:hover { border-color: var(--kr-border-strong); }

.msg {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 16px 0;
}
.msg .avatar { margin-top: 8px; }
.msg .avatar > * { box-shadow: 0 0 0 2px var(--kr-surface), 0 0 0 3px var(--kr-border-strong); }
.bubble {
    position: relative;
    padding: 8px 12px;
    font-family: var(--kr-font-ui);
    font-size: var(--kr-size-ui);
    background: var(--kr-surface-2);
    border: 1px solid var(--kr-border-soft);
    --kr-prose: normal;
}
.bubble::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 16px;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    background: inherit;
    border-left: 1px solid var(--kr-border-soft);
    border-bottom: 1px solid var(--kr-border-soft);
}
.bubble p { margin: 0; }
.msg-meta { display: block; margin-top: 4px; color: var(--kr-muted); font: 11px var(--kr-font-ui); }

.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badges img { width: 88px; height: 31px; image-rendering: pixelated; }

.checker {
    background-image: repeating-conic-gradient(#ffffff14 0 25%, #0000 0 50%);
    background-size: 10px 10px;
}

.zigzag { position: relative; }
.zigzag::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 12px;
    background: conic-gradient(from 225deg at right, var(--zigzag, var(--kr-surface-2)) 90deg, #0000 0) 0 0 / 100% 24px;
}

/* footer */

.site-footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 28px;
    padding-top: 10px;
    color: var(--kr-muted);
    font: 12px var(--kr-font-ui);
    font-style: italic;
    border-top: 1px solid var(--kr-border);
}
.site-footer a { color: var(--kr-muted); font-weight: normal; }
.site-footer a:hover { color: var(--kr-link); }

.dot-links { display: inline-flex; flex-wrap: wrap; }
.dot-links > * + *::before {
    content: "\00B7";
    display: inline-block;
    margin: 0 5px;
    color: var(--kr-muted);
}
.dot-links.pipes > * + *::before { content: "|"; }

.site-footer.center {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin-top: 20px;
    color: var(--kr-text);
    font-style: normal;
    text-align: center;
    border-top: 0;
}
.site-footer.center a { color: var(--kr-link); text-decoration: underline; }

/* utilities */

.muted   { color: var(--kr-muted); }
.center  { text-align: center; }
.right   { text-align: right; }
.italic  { font-style: italic; }
.upright { font-style: normal; }
.ui      { font-family: var(--kr-font-ui); }
.pixel   { font-family: var(--kr-font-pixel); }
.tate    { writing-mode: vertical-rl; }
.crisp   { -webkit-font-smoothing: none; }
.pixelated { image-rendering: pixelated; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* small screens */

@media (max-width: 640px) {
    .sheet { padding: 10px 12px 16px; }
    .site-header { flex-direction: column; align-items: flex-start; }
    .nav a { padding: 5px 7px; }
    .grid-2, .grid-3, .layout-sidebar, .profile { grid-template-columns: minmax(0, 1fr); }
    .profile .avatar { margin: 10px auto 0; }
    .zigzag::after { display: none; }
    .kv { min-height: 180px; }
    .episodes > li { grid-template-columns: 44px minmax(0, 1fr); }
    .ep-date { grid-column: 2; }
    .kv-copy { top: 12px; right: 12px; font-size: 15px; }
    .masthead { margin-top: 36px; padding-bottom: 28px; text-align: center; }
    .logo { font-size: 40px; }
    .panel, .cols-2 { grid-template-columns: minmax(0, 1fr); }
    .panel { padding: 7px 0 0; }
    .side { margin: 0 0 10px; }
    .content { border-left: 0; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-glossy:hover { transform: none; }
}