/* King's Court · buttons. The approved motifs (docs/art-direction.md, decision 2), one per job:

     .kc-choice   OLIVE BANNER   choosing between options. The label sits on a band held by two olive
                                 sprigs. Chosen = aria-pressed="true" (or aria-checked="true" with
                                 role="radio"): the band turns verdigris and the leaves are gilded.
                                 Put several in .kc-choices (a grid that fits a 390 px phone).
     .kc-action   PARCHMENT ROLL the main action on a screen (one per screen): a vermilion strip of
                                 vellum held open between two rolls. Variants: .plain (a secondary
                                 action, bare vellum) and .gilt (the crown's own action).
     .kc-toggle   RIBBON         on/off (role="switch" + aria-checked). Holds <span class="kc-t">title</span>
                                 and optionally <span class="kc-d">description</span>. Off: the ribbon is
                                 furled at the left. On: it unfurls behind the title.
     .kc-seal     WAX SEAL       committing a secret choice (petition, night action, decree). A short
                                 label inside ("Seal it"). Dock its row at the foot of the screen.

   Size: every motif scales with --u (1px by default); .kc-wide makes a choice or action full width.
   Art rules kept: no outlines, no blurred shadows, no smooth gradients (each linear-gradient below is
   one flat block of color), matte pigment with fine grain, focus shown by a gold wash.
   Shapes are SVG masks colored from theme.css tokens, so .night works. Requires theme.css. */

/* @gen-start (generated by docs/proposals/art-workbench/gen-buttons.js: painted shapes as data URIs) */
:root {
  --kc-svg-roll-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6A7 3 0 0 1 15 4.6V55.4A7 3 0 0 1 1 55.4Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-roll-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M1 4.6A7 3 0 0 1 15 4.6V55.4A7 3 0 0 1 1 55.4Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-roll-tone-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cpath d='M11.6 0H15V60H11.6Z' fill='%231e1208' fill-opacity='0.26'/%3E%3Cpath d='M9.6 0H11.6V60H9.6Z' fill='%231e1208' fill-opacity='0.1'/%3E%3Cpath d='M2.6 0H5V60H2.6Z' fill='%23fff8ea' fill-opacity='0.36'/%3E%3Cpath d='M1 55.4A7 3 0 0 0 15 55.4V60H1Z' fill='%231e1208' fill-opacity='0.16'/%3E%3Cpath d='M1 4.6a7 3 0 1 0 14 0a7 3 0 1 0 -14 0z' fill='%23fff8ea' fill-opacity='0.5'/%3E%3Cpath d='M13.5 3.6L13.6 4.1L13.7 4.6L13.6 5.1L13.1 5.5L12.3 5.9L11.4 6.2L10.4 6.5L9.2 6.6L8 6.6L6.9 6.5L5.8 6.3L4.9 6.1L4.2 5.7L3.7 5.3L3.5 5L3.4 4.7L3.6 4.4L3.8 4.1L4.3 3.8L5.1 3.5L5.8 3.3L6.7 3.2L7.7 3.2L8.6 3.2L9.4 3.3L10.1 3.5L10.7 3.8L11.1 4L11.3 4.3L11.4 4.4L11.3 4.6L11.1 4.8L10.8 5L10.4 5.2L9.8 5.4L9.2 5.5L8.5 5.5L7.8 5.5L7.2 5.4L6.7 5.3L6.2 5.1L5.9 5L5.8 4.8L5.8 4.7L5.8 4.7L5.8 4.6L6 4.5L6.3 4.3L6.7 4.2L7.1 4.1L7.5 4.1L7.9 4.1L8.3 4.2L8.7 4.2L8.9 4.3L9.1 4.4L9.2 4.5L9.2 4.4L9.2 4.4L9.2 4.5L9.1 4.5L8.9 4.6L8.7 4.7L8.5 4.7L8.3 4.7L8.1 4.7L8.1 5.3L8.3 5.3L8.6 5.3L8.8 5.3L9.1 5.2L9.4 5.1L9.6 4.9L9.8 4.7L9.8 4.4L9.7 4.1L9.5 3.9L9.2 3.7L8.9 3.5L8.5 3.4L8 3.4L7.5 3.4L7 3.4L6.5 3.5L6 3.6L5.6 3.8L5.3 4.1L5 4.4L5 4.9L5.1 5.3L5.5 5.6L5.9 5.9L6.4 6.1L7.1 6.3L7.8 6.3L8.5 6.4L9.3 6.3L10 6.2L10.7 6L11.3 5.8L11.7 5.4L12.1 5L12.2 4.4L12 3.9L11.6 3.4L11.1 3.1L10.4 2.8L9.5 2.6L8.6 2.4L7.7 2.4L6.7 2.4L5.7 2.6L4.8 2.8L4 3.2L3.4 3.6L3 4.1L2.8 4.7L2.9 5.3L3.3 5.8L3.9 6.3L4.7 6.6L5.7 6.9L6.8 7.1L8 7.2L9.2 7.2L10.5 7L11.6 6.8L12.5 6.4L13.4 5.9L14 5.4L14.2 4.7L14 4L13.9 3.5Z' fill='%231e1208' fill-opacity='0.42'/%3E%3C/svg%3E");
  --kc-svg-roll-tone-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M11.6 0H15V60H11.6Z' fill='%231e1208' fill-opacity='0.26'/%3E%3Cpath d='M9.6 0H11.6V60H9.6Z' fill='%231e1208' fill-opacity='0.1'/%3E%3Cpath d='M2.6 0H5V60H2.6Z' fill='%23fff8ea' fill-opacity='0.36'/%3E%3Cpath d='M1 55.4A7 3 0 0 0 15 55.4V60H1Z' fill='%231e1208' fill-opacity='0.16'/%3E%3Cpath d='M1 4.6a7 3 0 1 0 14 0a7 3 0 1 0 -14 0z' fill='%23fff8ea' fill-opacity='0.5'/%3E%3Cpath d='M13.5 3.6L13.6 4.1L13.7 4.6L13.6 5.1L13.1 5.5L12.3 5.9L11.4 6.2L10.4 6.5L9.2 6.6L8 6.6L6.9 6.5L5.8 6.3L4.9 6.1L4.2 5.7L3.7 5.3L3.5 5L3.4 4.7L3.6 4.4L3.8 4.1L4.3 3.8L5.1 3.5L5.8 3.3L6.7 3.2L7.7 3.2L8.6 3.2L9.4 3.3L10.1 3.5L10.7 3.8L11.1 4L11.3 4.3L11.4 4.4L11.3 4.6L11.1 4.8L10.8 5L10.4 5.2L9.8 5.4L9.2 5.5L8.5 5.5L7.8 5.5L7.2 5.4L6.7 5.3L6.2 5.1L5.9 5L5.8 4.8L5.8 4.7L5.8 4.7L5.8 4.6L6 4.5L6.3 4.3L6.7 4.2L7.1 4.1L7.5 4.1L7.9 4.1L8.3 4.2L8.7 4.2L8.9 4.3L9.1 4.4L9.2 4.5L9.2 4.4L9.2 4.4L9.2 4.5L9.1 4.5L8.9 4.6L8.7 4.7L8.5 4.7L8.3 4.7L8.1 4.7L8.1 5.3L8.3 5.3L8.6 5.3L8.8 5.3L9.1 5.2L9.4 5.1L9.6 4.9L9.8 4.7L9.8 4.4L9.7 4.1L9.5 3.9L9.2 3.7L8.9 3.5L8.5 3.4L8 3.4L7.5 3.4L7 3.4L6.5 3.5L6 3.6L5.6 3.8L5.3 4.1L5 4.4L5 4.9L5.1 5.3L5.5 5.6L5.9 5.9L6.4 6.1L7.1 6.3L7.8 6.3L8.5 6.4L9.3 6.3L10 6.2L10.7 6L11.3 5.8L11.7 5.4L12.1 5L12.2 4.4L12 3.9L11.6 3.4L11.1 3.1L10.4 2.8L9.5 2.6L8.6 2.4L7.7 2.4L6.7 2.4L5.7 2.6L4.8 2.8L4 3.2L3.4 3.6L3 4.1L2.8 4.7L2.9 5.3L3.3 5.8L3.9 6.3L4.7 6.6L5.7 6.9L6.8 7.1L8 7.2L9.2 7.2L10.5 7L11.6 6.8L12.5 6.4L13.4 5.9L14 5.4L14.2 4.7L14 4L13.9 3.5Z' fill='%231e1208' fill-opacity='0.42'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 .4Q100 2.4 200 .4V43.6Q100 41.6 0 43.6Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-fillets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q100 7 200 5V6.4Q100 8.4 0 6.4ZM0 37.6Q100 35.6 200 37.6V39Q100 37 0 39Z' fill='%23dcb85c'/%3E%3Cpath d='M0 5Q100 7 200 5V5.6Q100 7.6 0 5.6ZM0 37.6Q100 35.6 200 37.6V38.2Q100 36.2 0 38.2Z' fill='%23f4dd94' fill-opacity='0.7'/%3E%3C/svg%3E");
  --kc-svg-sprig-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cpath d='M23 56.7L21.5 55.9L19.5 54.8L17.2 53.6L14.9 52.1L13.1 50.4L11.7 48.5L10.3 46.3L9.1 43.9L8.1 41.4L7.3 38.8L6.8 36.1L6.6 33.2L6.6 30.3L6.7 27.3L7 24.6L7.5 22L8.3 19.6L9.2 17.2L10.2 14.9L11.4 12.7L12.8 10.6L14.6 8.5L16.4 6.5L18.1 4.9L19.2 3.7L18.8 3.3L17.7 4.5L16 6.1L14.1 8L12.2 10.1L10.6 12.3L9.4 14.4L8.2 16.8L7.2 19.2L6.4 21.7L5.8 24.4L5.4 27.2L5.2 30.2L5.2 33.3L5.4 36.3L5.9 39.2L6.6 41.9L7.6 44.6L8.9 47.1L10.3 49.5L11.9 51.6L13.9 53.4L16.2 55.1L18.6 56.4L20.6 57.5L22 58.3Z' fill='%23000'/%3E%3Cpath d='M17.9 55Q14.9 60.2 8.5 57.1Q13 51.6 17.9 55Z' fill='%23000'/%3E%3Cpath d='M12.5 51Q8.1 47.9 11.6 42.5Q16.1 47 12.5 51Z' fill='%23000'/%3E%3Cpath d='M8.9 45.5Q3 48.1 -0.6 41.3Q6.9 39.3 8.9 45.5Z' fill='%23000'/%3E%3Cpath d='M6.2 36.9Q0 38.9 -3 31.7Q4.7 30.6 6.2 36.9Z' fill='%23000'/%3E%3Cpath d='M5.9 30.2Q4.4 25.4 10.1 23.4Q10.9 29.4 5.9 30.2Z' fill='%23000'/%3E%3Cpath d='M6.7 23.2Q0.3 22 1.2 14.3Q8.4 16.9 6.7 23.2Z' fill='%23000'/%3E%3Cpath d='M9.2 15.8Q10.4 10.6 16.6 11.8Q14.2 17.7 9.2 15.8Z' fill='%23000'/%3E%3Cpath d='M11 12.5Q6.1 9.2 9.6 3Q14.8 7.9 11 12.5Z' fill='%23000'/%3E%3Cpath d='M16.7 5.9Q13.6 1.8 18.2 -2Q21 3.3 16.7 5.9Z' fill='%23000'/%3E%3Cpath d='M10.8 48.7L10.3 48.9L9.7 49.3L8.9 49.7L8.2 50.1L7.7 50.3L8 50.8L8.4 50.6L9.1 50.2L9.9 49.9L10.6 49.5L11.1 49.3Z' fill='%23000'/%3E%3Cpath d='M3.7 51.8a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%23000'/%3E%3Cpath d='M7.3 41.3L6.8 41.4L6.1 41.5L5.2 41.6L4.5 41.7L4 41.8L4 42.3L4.5 42.2L5.3 42.2L6.1 42.1L6.9 42L7.4 42Z' fill='%23000'/%3E%3Cpath d='M-0.4 42.4a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-sprig-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 26 0)'%3E%3Cpath d='M23 56.7L21.5 55.9L19.5 54.8L17.2 53.6L14.9 52.1L13.1 50.4L11.7 48.5L10.3 46.3L9.1 43.9L8.1 41.4L7.3 38.8L6.8 36.1L6.6 33.2L6.6 30.3L6.7 27.3L7 24.6L7.5 22L8.3 19.6L9.2 17.2L10.2 14.9L11.4 12.7L12.8 10.6L14.6 8.5L16.4 6.5L18.1 4.9L19.2 3.7L18.8 3.3L17.7 4.5L16 6.1L14.1 8L12.2 10.1L10.6 12.3L9.4 14.4L8.2 16.8L7.2 19.2L6.4 21.7L5.8 24.4L5.4 27.2L5.2 30.2L5.2 33.3L5.4 36.3L5.9 39.2L6.6 41.9L7.6 44.6L8.9 47.1L10.3 49.5L11.9 51.6L13.9 53.4L16.2 55.1L18.6 56.4L20.6 57.5L22 58.3Z' fill='%23000'/%3E%3Cpath d='M17.9 55Q14.9 60.2 8.5 57.1Q13 51.6 17.9 55Z' fill='%23000'/%3E%3Cpath d='M12.5 51Q8.1 47.9 11.6 42.5Q16.1 47 12.5 51Z' fill='%23000'/%3E%3Cpath d='M8.9 45.5Q3 48.1 -0.6 41.3Q6.9 39.3 8.9 45.5Z' fill='%23000'/%3E%3Cpath d='M6.2 36.9Q0 38.9 -3 31.7Q4.7 30.6 6.2 36.9Z' fill='%23000'/%3E%3Cpath d='M5.9 30.2Q4.4 25.4 10.1 23.4Q10.9 29.4 5.9 30.2Z' fill='%23000'/%3E%3Cpath d='M6.7 23.2Q0.3 22 1.2 14.3Q8.4 16.9 6.7 23.2Z' fill='%23000'/%3E%3Cpath d='M9.2 15.8Q10.4 10.6 16.6 11.8Q14.2 17.7 9.2 15.8Z' fill='%23000'/%3E%3Cpath d='M11 12.5Q6.1 9.2 9.6 3Q14.8 7.9 11 12.5Z' fill='%23000'/%3E%3Cpath d='M16.7 5.9Q13.6 1.8 18.2 -2Q21 3.3 16.7 5.9Z' fill='%23000'/%3E%3Cpath d='M10.8 48.7L10.3 48.9L9.7 49.3L8.9 49.7L8.2 50.1L7.7 50.3L8 50.8L8.4 50.6L9.1 50.2L9.9 49.9L10.6 49.5L11.1 49.3Z' fill='%23000'/%3E%3Cpath d='M3.7 51.8a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%23000'/%3E%3Cpath d='M7.3 41.3L6.8 41.4L6.1 41.5L5.2 41.6L4.5 41.7L4 41.8L4 42.3L4.5 42.2L5.3 42.2L6.1 42.1L6.9 42L7.4 42Z' fill='%23000'/%3E%3Cpath d='M-0.4 42.4a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-sprig-tone-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cpath d='M17.9 55L8.5 57.1Q13 51.6 17.9 55Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M12.5 51L11.6 42.5Q8.1 47.9 12.5 51Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M8.9 45.5L-0.6 41.3Q6.9 39.3 8.9 45.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.2 36.9L-3 31.7Q4.7 30.6 6.2 36.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M5.9 30.2L10.1 23.4Q4.4 25.4 5.9 30.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.7 23.2L1.2 14.3Q8.4 16.9 6.7 23.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M9.2 15.8L16.6 11.8Q10.4 10.6 9.2 15.8Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M11 12.5L9.6 3Q14.8 7.9 11 12.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M16.7 5.9L18.2 -2Q21 3.3 16.7 5.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M3.7 51.8a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%231e1208' fill-opacity='0.55'/%3E%3Cpath d='M4.5 50.9a0.6 0.8 0 1 0 1.2 0a0.6 0.8 0 1 0 -1.2 0z' fill='%23fff8ea' fill-opacity='0.4'/%3E%3Cpath d='M-0.4 42.4a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%231e1208' fill-opacity='0.55'/%3E%3Cpath d='M0.4 41.5a0.6 0.8 0 1 0 1.2 0a0.6 0.8 0 1 0 -1.2 0z' fill='%23fff8ea' fill-opacity='0.4'/%3E%3C/svg%3E");
  --kc-svg-sprig-tone-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 26 0)'%3E%3Cpath d='M17.9 55L8.5 57.1Q13 51.6 17.9 55Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M12.5 51L11.6 42.5Q8.1 47.9 12.5 51Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M8.9 45.5L-0.6 41.3Q6.9 39.3 8.9 45.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.2 36.9L-3 31.7Q4.7 30.6 6.2 36.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M5.9 30.2L10.1 23.4Q4.4 25.4 5.9 30.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.7 23.2L1.2 14.3Q8.4 16.9 6.7 23.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M9.2 15.8L16.6 11.8Q10.4 10.6 9.2 15.8Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M11 12.5L9.6 3Q14.8 7.9 11 12.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M16.7 5.9L18.2 -2Q21 3.3 16.7 5.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M3.7 51.8a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%231e1208' fill-opacity='0.55'/%3E%3Cpath d='M4.5 50.9a0.6 0.8 0 1 0 1.2 0a0.6 0.8 0 1 0 -1.2 0z' fill='%23fff8ea' fill-opacity='0.4'/%3E%3Cpath d='M-0.4 42.4a2.1 2.6 0 1 0 4.2 0a2.1 2.6 0 1 0 -4.2 0z' fill='%231e1208' fill-opacity='0.55'/%3E%3Cpath d='M0.4 41.5a0.6 0.8 0 1 0 1.2 0a0.6 0.8 0 1 0 -1.2 0z' fill='%23fff8ea' fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-wither-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cpath d='M23 56.7L21.5 55.9L19.5 54.8L17.2 53.6L14.9 52.1L13.1 50.4L11.7 48.5L10.3 46.3L9.1 43.9L8.1 41.4L7.3 38.8L6.8 36.1L6.6 33.2L6.6 30.3L6.7 27.3L7 24.6L7.5 22L8.3 19.6L9.2 17.2L10.2 14.9L11.4 12.7L12.8 10.6L14.6 8.5L16.4 6.5L18.1 4.9L19.2 3.7L18.8 3.3L17.7 4.5L16 6.1L14.1 8L12.2 10.1L10.6 12.3L9.4 14.4L8.2 16.8L7.2 19.2L6.4 21.7L5.8 24.4L5.4 27.2L5.2 30.2L5.2 33.3L5.4 36.3L5.9 39.2L6.6 41.9L7.6 44.6L8.9 47.1L10.3 49.5L11.9 51.6L13.9 53.4L16.2 55.1L18.6 56.4L20.6 57.5L22 58.3Z' fill='%23000'/%3E%3Cpath d='M17.9 55Q20.2 58 17 61.3Q14.8 57.3 17.9 55Z' fill='%23000'/%3E%3Cpath d='M12.5 51Q13.5 47.7 17.6 48.5Q15.7 52.2 12.5 51Z' fill='%23000'/%3E%3Cpath d='M8.9 45.5Q9.1 49.6 4.2 50.4Q4.8 45.5 8.9 45.5Z' fill='%23000'/%3E%3Cpath d='M6.2 36.9Q5.9 41.1 0.9 41.4Q2.1 36.6 6.2 36.9Z' fill='%23000'/%3E%3Cpath d='M5.9 30.2Q8.5 28.4 11 31.3Q7.5 33 5.9 30.2Z' fill='%23000'/%3E%3Cpath d='M6.7 23.2Q4.4 26.7 -0.1 24.6Q3.2 20.9 6.7 23.2Z' fill='%23000'/%3E%3Cpath d='M9.2 15.8Q12.6 15.5 13.3 19.5Q9.3 19.2 9.2 15.8Z' fill='%23000'/%3E%3Cpath d='M11 12.5Q7.8 14.6 4.8 11.2Q8.9 9.3 11 12.5Z' fill='%23000'/%3E%3Cpath d='M16.7 5.9Q13.5 6.7 12.1 3.1Q16 2.7 16.7 5.9Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-wither-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 26 0)'%3E%3Cpath d='M23 56.7L21.5 55.9L19.5 54.8L17.2 53.6L14.9 52.1L13.1 50.4L11.7 48.5L10.3 46.3L9.1 43.9L8.1 41.4L7.3 38.8L6.8 36.1L6.6 33.2L6.6 30.3L6.7 27.3L7 24.6L7.5 22L8.3 19.6L9.2 17.2L10.2 14.9L11.4 12.7L12.8 10.6L14.6 8.5L16.4 6.5L18.1 4.9L19.2 3.7L18.8 3.3L17.7 4.5L16 6.1L14.1 8L12.2 10.1L10.6 12.3L9.4 14.4L8.2 16.8L7.2 19.2L6.4 21.7L5.8 24.4L5.4 27.2L5.2 30.2L5.2 33.3L5.4 36.3L5.9 39.2L6.6 41.9L7.6 44.6L8.9 47.1L10.3 49.5L11.9 51.6L13.9 53.4L16.2 55.1L18.6 56.4L20.6 57.5L22 58.3Z' fill='%23000'/%3E%3Cpath d='M17.9 55Q20.2 58 17 61.3Q14.8 57.3 17.9 55Z' fill='%23000'/%3E%3Cpath d='M12.5 51Q13.5 47.7 17.6 48.5Q15.7 52.2 12.5 51Z' fill='%23000'/%3E%3Cpath d='M8.9 45.5Q9.1 49.6 4.2 50.4Q4.8 45.5 8.9 45.5Z' fill='%23000'/%3E%3Cpath d='M6.2 36.9Q5.9 41.1 0.9 41.4Q2.1 36.6 6.2 36.9Z' fill='%23000'/%3E%3Cpath d='M5.9 30.2Q8.5 28.4 11 31.3Q7.5 33 5.9 30.2Z' fill='%23000'/%3E%3Cpath d='M6.7 23.2Q4.4 26.7 -0.1 24.6Q3.2 20.9 6.7 23.2Z' fill='%23000'/%3E%3Cpath d='M9.2 15.8Q12.6 15.5 13.3 19.5Q9.3 19.2 9.2 15.8Z' fill='%23000'/%3E%3Cpath d='M11 12.5Q7.8 14.6 4.8 11.2Q8.9 9.3 11 12.5Z' fill='%23000'/%3E%3Cpath d='M16.7 5.9Q13.5 6.7 12.1 3.1Q16 2.7 16.7 5.9Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-wither-tone-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cpath d='M17.9 55L17 61.3Q14.8 57.3 17.9 55Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M12.5 51L17.6 48.5Q13.5 47.7 12.5 51Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M8.9 45.5L4.2 50.4Q4.8 45.5 8.9 45.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.2 36.9L0.9 41.4Q2.1 36.6 6.2 36.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M5.9 30.2L11 31.3Q8.5 28.4 5.9 30.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.7 23.2L-0.1 24.6Q3.2 20.9 6.7 23.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M9.2 15.8L13.3 19.5Q12.6 15.5 9.2 15.8Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M11 12.5L4.8 11.2Q8.9 9.3 11 12.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M16.7 5.9L12.1 3.1Q16 2.7 16.7 5.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3C/svg%3E");
  --kc-svg-wither-tone-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 26 0)'%3E%3Cpath d='M17.9 55L17 61.3Q14.8 57.3 17.9 55Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M12.5 51L17.6 48.5Q13.5 47.7 12.5 51Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M8.9 45.5L4.2 50.4Q4.8 45.5 8.9 45.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.2 36.9L0.9 41.4Q2.1 36.6 6.2 36.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M5.9 30.2L11 31.3Q8.5 28.4 5.9 30.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M6.7 23.2L-0.1 24.6Q3.2 20.9 6.7 23.2Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M9.2 15.8L13.3 19.5Q12.6 15.5 9.2 15.8Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M11 12.5L4.8 11.2Q8.9 9.3 11 12.5Z' fill='%231e1208' fill-opacity='0.3'/%3E%3Cpath d='M16.7 5.9L12.1 3.1Q16 2.7 16.7 5.9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  --kc-svg-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'%3E%3Cpath d='M0 .8Q50 0 100 .6T200 .4V35.4Q150 36 100 35.4T0 35.6Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-band-tone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'%3E%3Cpath d='M0 30.4Q100 31 200 30.4V36H0Z' fill='%231e1208' fill-opacity='0.16'/%3E%3C/svg%3E");
  --kc-svg-rib-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 50' preserveAspectRatio='none'%3E%3Cpath d='M0 18H15V38H21V46H0L5.5 32Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-rib-tone-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 50' preserveAspectRatio='none'%3E%3Cpath d='M0 18H15V38H21V46H0L5.5 32Z' fill='%231e1208' fill-opacity='0.22'/%3E%3Cpath d='M15 38H21V46Z' fill='%231e1208' fill-opacity='0.4'/%3E%3C/svg%3E");
  --kc-svg-rib-face-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0H14L7 17L14 34H0Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M95.6 50L96.2 54L95.6 58L94.2 61.8L92.4 65.4L90.5 68.9L88.3 72.1L85.8 75.1L83.3 77.9L80.8 80.8L78.1 83.4L75 85.8L71.8 87.7L68.5 89.6L65.1 91.6L61.7 93.6L58 95.1L54 95.9L50 95.6L46.1 94.4L42.5 92.6L39.1 90.8L35.6 89.4L31.9 88.7L27.9 88.3L23.7 87.6L19.8 86L16.7 83.3L14.5 79.8L12.7 76.1L11 72.5L9 69.1L7.3 65.5L6.2 61.7L6 57.8L6.6 53.8L7.6 50L8.5 46.4L8.9 42.8L8.9 39L8.9 35L9.3 31L10.6 27.2L12.7 23.9L15.4 21L18.4 18.4L21.5 16L24.6 13.7L27.8 11.5L31.3 9.9L35 8.9L38.9 8.6L42.7 8.5L46.3 8.3L50 7.6L53.8 6.7L57.8 5.9L61.9 5.7L65.8 6.6L69.4 8.5L72.5 11L75.3 13.9L78 16.7L80.6 19.4L83.3 22.1L85.6 25L87.5 28.3L88.9 31.8L90.1 35.4L91.3 38.9L92.7 42.5L94.3 46.1Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-seal-tone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M7 50a43 43 0 1 0 86 0a43 43 0 1 0 -86 0zM9 52a43 43 0 1 1 86 0a43 43 0 1 1 -86 0z' fill='%23fff8ea' fill-opacity='0.14'/%3E%3Cpath d='M13.5 50a36.5 36.5 0 1 0 73 0a36.5 36.5 0 1 0 -73 0z' fill='%231e1208' fill-opacity='0.14'/%3E%3Cpath d='M13.5 50a36.5 36.5 0 1 0 73 0a36.5 36.5 0 1 0 -73 0zM15.3 51.8a36.5 36.5 0 1 1 73 0a36.5 36.5 0 1 1 -73 0z' fill='%231e1208' fill-opacity='0.26'/%3E%3Cpath d='M13.5 50a36.5 36.5 0 1 0 73 0a36.5 36.5 0 1 0 -73 0zM11.9 48.4a36.5 36.5 0 1 1 73 0a36.5 36.5 0 1 1 -73 0z' fill='%23fff8ea' fill-opacity='0.16'/%3E%3Cpath d='M80.6 50a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM79.8 57a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM77.4 63.7a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM73.7 69.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM68.7 74.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM62.7 78.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM56.1 80.7a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM49.1 81.5a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM42 80.7a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM35.4 78.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM29.4 74.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM24.4 69.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM20.7 63.7a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM18.3 57a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM17.6 50a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM18.3 43a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM20.7 36.3a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM24.4 30.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM29.4 25.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM35.4 21.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM42 19.3a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM49 18.5a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM56.1 19.3a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM62.7 21.6a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM68.7 25.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM73.7 30.4a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM77.4 36.3a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0zM79.8 43a1 1 0 1 0 1.9 0a1 1 0 1 0 -1.9 0z' fill='%23fff8ea' fill-opacity='0.3'/%3E%3C/svg%3E");
  --kc-svg-seal-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M22 0H32L19 58 14 50 5 55ZM28 0H38L55 55 46 50 41 58Z' fill='%23000'/%3E%3C/svg%3E");
  --kc-svg-seal-tag-tone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M28 0H38L55 55 46 50 41 58Z' fill='%231e1208' fill-opacity='0.26'/%3E%3Cpath d='M27 0H33L30 9Z' fill='%231e1208' fill-opacity='0.3'/%3E%3C/svg%3E");
}
/* @gen-end */

:root {
  /* fine grain for pigment and gold, sized in screen pixels */
  /* baked PNG tiles drawn at half their pixel size (see theme.css), not live SVG noise */
  --kc-grain: -webkit-image-set(url('/shared/tile-paint.png') 2x);
  --kc-gold-grain: -webkit-image-set(url('/shared/tile-gilt-fine.png') 2x);
}

/* ---------- shared ---------- */
.kc-choice, .kc-action, .kc-toggle, .kc-seal {
  --u: 1px;
  --kc-press: transparent;     /* a darker wash laid on while pressed */
  --kc-in: 0px;                /* how far the ends curl or bow inward while pressed */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-rubric);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.14s ease, color 0.2s ease;
}
.kc-choice::before, .kc-choice::after,
.kc-action::before, .kc-action::after,
.kc-toggle::before, .kc-seal::before, .kc-seal::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* theme.css paints a focused button's whole box gold; these motifs show focus on their own shapes */
.kc-choice:focus-visible, .kc-action:focus-visible, .kc-toggle:focus-visible, .kc-seal:focus-visible { outline: none; background: none; }
.kc-choice:disabled, .kc-action:disabled, .kc-toggle:disabled, .kc-seal:disabled { cursor: not-allowed; }
.kc-wide { display: flex; width: 100%; }

/* ======================================================================
   OLIVE BANNER (.kc-choice)
   ====================================================================== */
.kc-choice {
  --kc-band: var(--vellum-light);
  --kc-band-paint: var(--vellum-texture);
  --kc-leaf: var(--verdigris);
  --kc-leaf-paint: var(--kc-grain);
  --kc-sprig-l: var(--kc-svg-sprig-l);
  --kc-sprig-r: var(--kc-svg-sprig-r);
  --kc-sprig-tone-l: var(--kc-svg-sprig-tone-l);
  --kc-sprig-tone-r: var(--kc-svg-sprig-tone-r);
  color: var(--iron-gall);
  min-height: calc(var(--u) * 56);
  padding: calc(var(--u) * 9) calc(var(--u) * 17 + 6px) calc(var(--u) * 10);
}
.night .kc-choice { --kc-band: var(--page-raised); --kc-band-paint: none; --kc-leaf: color-mix(in srgb, var(--verdigris) 72%, var(--bone)); color: var(--bone); }
/* the band */
.kc-choice::after {
  z-index: -2;
  inset: calc(var(--u) * 11) calc(var(--u) * 12);
  -webkit-mask: var(--kc-svg-band) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-band) 0 0 / 100% 100% no-repeat;
  background: var(--kc-svg-band-tone) 0 0 / 100% 100% no-repeat, linear-gradient(var(--kc-press), var(--kc-press)), var(--kc-band-paint), var(--kc-band);
}
/* the two sprigs, in one layer in front of the band's ends */
.kc-choice::before {
  z-index: -1;
  inset: 0;
  --w: calc(var(--u) * 26);
  -webkit-mask: var(--kc-sprig-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat, var(--kc-sprig-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat;
  mask: var(--kc-sprig-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat, var(--kc-sprig-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat;
  background:
    var(--kc-sprig-tone-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat,
    var(--kc-sprig-tone-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat,
    var(--kc-leaf-paint),
    var(--kc-leaf);
}
.kc-choice[aria-pressed='true'], .kc-choice[aria-checked='true'] {
  --kc-band: var(--verdigris);
  --kc-band-paint: var(--kc-grain);
  --kc-leaf: var(--gold-leaf);
  --kc-leaf-paint: var(--kc-gold-grain);
  color: var(--bone);
}
.kc-choice:active:not(:disabled), .kc-choice.is-pressed {
  --kc-in: calc(var(--u) * 2);   /* the sprigs bow in */
  --kc-press: rgba(150, 100, 30, 0.2);
  transform: translateY(1px);
}
.kc-choice:focus-visible, .kc-choice.is-focus { --kc-band: color-mix(in srgb, var(--gold-leaf-hi) 70%, var(--vellum-light)); --kc-band-paint: none; color: var(--iron-gall); }
.kc-choice[aria-pressed='true']:focus-visible, .kc-choice[aria-checked='true']:focus-visible,
.kc-choice[aria-pressed='true'].is-focus { --kc-band: color-mix(in srgb, var(--verdigris) 70%, var(--gold-leaf-hi)); color: var(--iron-gall); }
.kc-choice:disabled {
  --kc-sprig-l: var(--kc-svg-wither-l);
  --kc-sprig-r: var(--kc-svg-wither-r);
  --kc-sprig-tone-l: var(--kc-svg-wither-tone-l);
  --kc-sprig-tone-r: var(--kc-svg-wither-tone-r);
  --kc-leaf: color-mix(in srgb, var(--faded-ink) 55%, var(--page));
  --kc-band: color-mix(in srgb, var(--vellum-light) 40%, var(--page));
  color: color-mix(in srgb, var(--text) 45%, var(--page));
}
.night .kc-choice:disabled { --kc-band: color-mix(in srgb, var(--page-raised) 50%, var(--page)); --kc-leaf: color-mix(in srgb, var(--faded-ink) 70%, var(--page)); }

/* several choices: three to a row on a phone, wrapping */
.kc-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 4px 2px; }
.kc-choices > .kc-choice { width: 100%; font-size: 17px; letter-spacing: 0.03em; padding-inline: calc(var(--u) * 15 + 3px); }

/* ======================================================================
   PARCHMENT ROLL (.kc-action)
   The rolls show the raw underside of the vellum; the strip between them is what gets painted.
   ====================================================================== */
.kc-action {
  --kc-strip: var(--vermilion);
  --kc-strip-paint: var(--kc-grain);
  --kc-fillets: var(--kc-svg-fillets);
  --kc-roll: var(--vellum-shadow);
  --kc-shade: rgba(30, 8, 4, 0.26);
  color: var(--bone);
  min-height: calc(var(--u) * 60);
  padding: calc(var(--u) * 12) calc(var(--u) * 16 + 16px) calc(var(--u) * 13);
  font-size: 21px;
  letter-spacing: 0.06em;
}
/* the strip; its ends tuck under the rolls */
.kc-action::after {
  z-index: -2;
  --e: calc(var(--u) * 8);
  inset: var(--e) calc(var(--e) + var(--kc-in));
  -webkit-mask: var(--kc-svg-strip) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-strip) 0 0 / 100% 100% no-repeat;
  background:
    linear-gradient(var(--kc-shade), var(--kc-shade)) left var(--e) top 0 / calc(var(--u) * 3.5) 100% no-repeat,
    linear-gradient(var(--kc-shade), var(--kc-shade)) right var(--e) top 0 / calc(var(--u) * 3.5) 100% no-repeat,
    var(--kc-fillets) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--kc-press), var(--kc-press)),
    var(--kc-strip-paint),
    var(--kc-strip);
  transition: inset 0.16s ease;
}
/* the two rolls, in one layer */
.kc-action::before {
  z-index: -1;
  inset: 0;
  --w: calc(var(--u) * 16);
  -webkit-mask: var(--kc-svg-roll-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat, var(--kc-svg-roll-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat;
  mask: var(--kc-svg-roll-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat, var(--kc-svg-roll-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat;
  background:
    var(--kc-svg-roll-tone-l) left var(--kc-in) top 0 / var(--w) 100% no-repeat,
    var(--kc-svg-roll-tone-r) right var(--kc-in) top 0 / var(--w) 100% no-repeat,
    var(--vellum-texture),
    var(--kc-roll);
  transition: -webkit-mask-position 0.16s ease, mask-position 0.16s ease, background-position 0.16s ease;
}
.kc-action.plain {
  --kc-strip: var(--vellum-light);
  --kc-strip-paint: var(--vellum-texture);
  --kc-fillets: none;
  --kc-shade: rgba(30, 18, 8, 0.12);
  color: var(--iron-gall);
  font-size: 18px;
  letter-spacing: 0.05em;
}
.kc-action.gilt {
  --kc-strip: var(--gold-leaf);
  --kc-strip-paint: var(--kc-gold-grain);
  --kc-fillets: none;
  --kc-shade: rgba(60, 36, 4, 0.22);
  color: var(--iron-gall);
}
.kc-action:active:not(:disabled), .kc-action.is-pressed {
  --kc-in: calc(var(--u) * 2.5);   /* the rolls curl in a little */
  --kc-press: rgba(30, 8, 4, 0.16);
  transform: translateY(1px);
}
.kc-action:focus-visible, .kc-action.is-focus { --kc-roll: var(--gold-leaf-hi); --kc-strip: var(--vermilion-deep); color: var(--gold-leaf-hi); }
.kc-action.plain:focus-visible, .kc-action.plain.is-focus,
.kc-action.gilt:focus-visible, .kc-action.gilt.is-focus { --kc-strip: color-mix(in srgb, var(--gold-leaf-hi) 70%, var(--vellum-light)); --kc-strip-paint: none; color: var(--iron-gall); }
.kc-action:disabled {
  --kc-strip: color-mix(in srgb, var(--vermilion) 30%, var(--page));
  --kc-fillets: none;
  --kc-roll: color-mix(in srgb, var(--vellum-shadow) 45%, var(--page));
  color: color-mix(in srgb, var(--bone) 55%, var(--page));
}
.kc-action.plain:disabled, .kc-action.gilt:disabled {
  --kc-strip: color-mix(in srgb, var(--vellum-light) 40%, var(--page));
  color: color-mix(in srgb, var(--text) 45%, var(--page));
}

/* ======================================================================
   RIBBON (.kc-toggle): unfurls behind the title when on; furled into a coil when off.
   ====================================================================== */
.kc-toggle {
  --kc-c: color-mix(in srgb, var(--verdigris) 62%, var(--page));
  --kc-paint: var(--vellum-texture);
  display: grid;
  justify-items: start;
  justify-content: start;      /* the base rule centres; a short line would drift right of the tail */
  align-content: center;
  gap: 1px;
  width: 100%;
  min-height: 72px;
  padding: 8px 12px 10px 54px;
  text-align: left;
  color: var(--text);
}
.kc-toggle .kc-t { position: relative; display: flex; align-items: center; min-height: 36px; padding-right: 10px; font-family: var(--font-rubric); font-size: 19px; letter-spacing: 0.05em; transition: color 0.3s ease; }
.kc-toggle .kc-d { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.25; letter-spacing: 0; color: var(--muted); }
.kc-toggle::before {           /* the forked tail, behind the face's left end */
  left: 11px;
  top: 8px;
  width: calc(36px * 21 / 38);
  height: calc(36px * 50 / 38);
  -webkit-mask: var(--kc-svg-rib-l) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-rib-l) 0 0 / 100% 100% no-repeat;
  background: var(--kc-svg-rib-tone-l) 0 0 / 100% 100% no-repeat, var(--kc-paint), var(--kc-c);
  transition: background-color 0.3s ease;
}
.kc-toggle .kc-t::before {     /* the face */
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(11px + 36px * 15 / 38 - 54px);
  right: -18px;
  -webkit-mask: linear-gradient(#000, #000) left top / calc(100% - 12px) 100% no-repeat, var(--kc-svg-rib-face-end) right top / 13px 100% no-repeat;
  mask: linear-gradient(#000, #000) left top / calc(100% - 12px) 100% no-repeat, var(--kc-svg-rib-face-end) right top / 13px 100% no-repeat;
  background: var(--kc-paint), var(--kc-c);
  clip-path: inset(0 calc(100% - 14px) 0 0);
  transition: clip-path 0.5s cubic-bezier(.5, 0, .3, 1), background-color 0.3s ease;
}
.kc-toggle .kc-t::after {      /* the coil it is furled into; it rolls away as the ribbon opens */
  content: '';
  position: absolute;
  z-index: -1;
  top: -4px;
  bottom: -4px;
  width: 10px;
  left: calc(11px + 36px * 15 / 38 - 54px + 8px);
  -webkit-mask: var(--kc-svg-roll-l) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-roll-l) 0 0 / 100% 100% no-repeat;
  background: var(--kc-svg-roll-tone-l) 0 0 / 100% 100% no-repeat, linear-gradient(rgba(30, 18, 8, 0.16), rgba(30, 18, 8, 0.16)), var(--kc-paint), var(--kc-c);
  transition: left 0.5s cubic-bezier(.5, 0, .3, 1), opacity 0.1s ease, background-color 0.3s ease;
}
.kc-toggle[aria-checked='true'] { --kc-c: var(--verdigris); --kc-paint: var(--kc-grain); }
.kc-toggle[aria-checked='true'] .kc-t { color: var(--bone); }
.kc-toggle[aria-checked='true'] .kc-t::before { clip-path: inset(0 0 0 0); }
.kc-toggle[aria-checked='true'] .kc-t::after {
  left: calc(100% + 18px - 10px);
  opacity: 0;
  transition: left 0.5s cubic-bezier(.5, 0, .3, 1), opacity 0.15s ease 0.38s, background-color 0.3s ease;
}
.kc-toggle:focus-visible, .kc-toggle.is-focus { background: color-mix(in srgb, var(--gold-leaf-hi) 42%, transparent); }
.kc-toggle:active, .kc-toggle.is-pressed { transform: translateY(1px); }
.kc-toggle:disabled { opacity: 0.5; }

/* ======================================================================
   WAX SEAL (.kc-seal): a blob of wax with a raised rim and a ring of punched dots, on a lapis tag.
   ====================================================================== */
.kc-seal {
  --kc-wax: #a3271d;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  flex: none;
  padding: 0 4%;
  color: #f6dcc9;
  font-size: calc(var(--u) * 15);
  line-height: 1.05;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease;
}
/* the wax */
.kc-seal::after {
  z-index: -1;
  inset: 0;
  -webkit-mask: var(--kc-svg-seal) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-seal) 0 0 / 100% 100% no-repeat;
  background: var(--kc-svg-seal-tone) 0 0 / 100% 100% no-repeat, linear-gradient(var(--kc-press), var(--kc-press)), var(--kc-grain), var(--kc-wax);
}
/* the tag of ribbon it hangs from */
.kc-seal::before {
  z-index: -2;
  left: 18%;
  right: 18%;
  top: 52%;
  height: 60%;
  -webkit-mask: var(--kc-svg-seal-tag) 0 0 / 100% 100% no-repeat;
  mask: var(--kc-svg-seal-tag) 0 0 / 100% 100% no-repeat;
  background: var(--kc-svg-seal-tag-tone) 0 0 / 100% 100% no-repeat, var(--kc-grain), var(--lapis);
}
.kc-seal:active:not(:disabled), .kc-seal.is-pressed { transform: scale(0.92) rotate(-4deg); --kc-press: rgba(30, 8, 4, 0.18); }
.kc-seal:focus-visible, .kc-seal.is-focus { --kc-wax: #b8402b; color: var(--gold-leaf-hi); }
.kc-seal:disabled { --kc-wax: color-mix(in srgb, #a3271d 40%, var(--page)); color: color-mix(in srgb, #f6dcc9 60%, var(--page)); }

@media (prefers-reduced-motion: reduce) {
  .kc-choice, .kc-action, .kc-toggle, .kc-seal, .kc-toggle .kc-t,
  .kc-choice::before, .kc-choice::after, .kc-action::before, .kc-action::after,
  .kc-toggle::before, .kc-toggle .kc-t::before, .kc-toggle .kc-t::after { transition: none !important; animation: none !important; }
}