:root {
    color-scheme: light;

    
    --wash-tan: #c9a382;
    --wash-olive:  #b8bba8;
    --wash-amber:  #e0bd7e;
    
    --wash-base:   #bda986;

    
    --paper:      #faf4e8;
    --paper-soft: #f2e8d8;
    
    --box-fade:   #f8efdd;
    
    --lace:       #e1d5c0;
    --lace-edge:  #b6a184;
    
    --lace-ground:  #f3ebdb;
    --lace-ground-2:#e9dfca;

    
    --ink:       #46352a;
    --ink-soft:  #776450;
    --ink-faint: #a08b73;

    
    
    --sage:      #646a54;
    --sage-deep: #4d5340;
    
    --sage-soft: #e6e3d0;

    --clay:      #8c6743;      
    --clay-deep: #684a28;
    --clay-soft: #e6d6bf;

    
    --gold:      #b8893a;
    --gold-deep: #96701e;
    --gold-soft: #efe1c3;

    --bark:      #705340;      
    --bark-deep: #533c2c;
    --bark-soft: #e4d7c8;

    --plum:      #7c5a72;
    
    --berry:     #9c3f3a;

    
    --twig:      #8a6644;
    --leaf-burnt:#b5542a;

    --border:  #e0ccae;
    --border-2:#c8ab86;

    
    
    
    --pill-green:      var(--btn-brown);

    
    --icon: #5f7742;
    
    --link:       var(--gold-deep);
    --link-hover: var(--icon);
    
    --btn-brown: #d8b78f;
    
    --btn-fill:  linear-gradient(180deg,
                   var(--btn-brown) 0,
                   color-mix(in srgb, var(--btn-brown) 38%, var(--box-fade)) 42%,
                   var(--box-fade) 100%);
    
    --icon-ease: color var(--speed) var(--ease);
    --pill-fill:       linear-gradient(180deg,
                         var(--pill-green) 0,
                         color-mix(in srgb, var(--pill-green) 38%, var(--box-fade)) 42%,
                         var(--box-fade) 100%);
    --pill-lip:        inset 0 1px 0 rgba(255,255,255,.5);

    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

    
    --box-gap: 14px;

    
    
    --fs-xs:.80rem; --fs-sm:.94rem; --fs-base:1rem;
    --fs-md:1.1rem; --fs-lg:1.25rem; --fs-xl:1.55rem;
    
    --fs-label:.74rem;

    --radius: 14px;
    --radius-sm: 8px;
    --pill: 999px;

    
    --shadow: 0 2px 6px rgba(88,63,46,.14), 0 12px 26px rgba(88,63,46,.16);
    --shadow-sm: 0 1px 3px rgba(88,63,46,.12), 0 4px 10px rgba(88,63,46,.10);
    
    --shadow-text: 0 1px 0 #fffaf4, 0 2px 3px rgba(88,63,46,.45), 0 4px 9px rgba(88,63,46,.28);
    
    --shadow-icon: 0 1px 0 #fffaf4, 0 1px 2px rgba(88,63,46,.42), 0 3px 6px rgba(88,63,46,.24);
    --shadow-icon-svg: drop-shadow(0 1px 1px rgba(88,63,46,.42)) drop-shadow(0 2px 4px rgba(88,63,46,.22));

    --ease: cubic-bezier(.4,0,.2,1);
    --speed:.22s;

    --script: "Parisienne", "Segoe Script", cursive;
    --serif:  "Cormorant Garamond", Georgia, serif;
    --sans:   "Overpass", "Segoe UI", system-ui, sans-serif;
  }

  * { box-sizing:border-box; margin:0; padding:0; }
  ul { list-style:none; }
  a { text-decoration:none; color:inherit; }
  svg { display:block; }

  
  body {
    font-family: var(--sans);
    font-size:16px; line-height:1.6; color:var(--ink);
    background-color: var(--wash-base);
    min-height:100vh;
    padding-bottom: var(--sp-10);
  }

  
  body::after {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:
      
      radial-gradient(ellipse 46% 34% at 26% 18%, rgba(138,102,68,.13), rgba(138,102,68,.05) 46%, transparent 82%),
      radial-gradient(ellipse 42% 32% at 72% 26%, rgba(150,112,42,.15), rgba(150,112,42,.06) 46%, transparent 82%),
      radial-gradient(ellipse 44% 34% at 18% 56%, rgba(100,106,84,.14),  rgba(100,106,84,.05) 46%,  transparent 82%),
      radial-gradient(ellipse 48% 36% at 82% 68%, rgba(112,82,60,.11),  rgba(112,82,60,.04) 46%,  transparent 82%),
      radial-gradient(ellipse 40% 30% at 46% 84%, rgba(118,124,100,.13), rgba(118,124,100,.05) 46%, transparent 82%),
      
      radial-gradient(ellipse 72% 56% at 12% 4%,  rgba(188,160,126,.55), rgba(188,160,126,.22) 50%, transparent 88%),
      radial-gradient(ellipse 68% 52% at 88% 10%, rgba(199,171,126,.58), rgba(199,171,126,.24) 50%, transparent 88%),
      radial-gradient(ellipse 82% 60% at 50% 42%, rgba(182,142,74,.26),  rgba(182,142,74,.10) 50%,  transparent 88%),
      radial-gradient(ellipse 72% 56% at 8%  72%, rgba(176,179,158,.55), rgba(176,179,158,.22) 50%, transparent 88%),
      radial-gradient(ellipse 68% 52% at 92% 88%, rgba(138,102,68,.26),  rgba(138,102,68,.10) 50%,  transparent 88%);
  }

  
  body::before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(ellipse 88% 70% at 50% 45%, transparent 55%, rgba(86,62,44,.42) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
    background-size: cover, 200px 200px;
    
    opacity:.34;
  }

  
  .drift { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  
  .drift .leaf { position:absolute; top:-8%; opacity:0; }

  @media (prefers-reduced-motion: no-preference) {
    
    .drift .leaf {
      animation: fall var(--fall) linear var(--delay) infinite;
    }
  }
  @keyframes fall {
    0%   { transform: translate3d(0,0,0) rotate(0deg); opacity:0; }
    8%   { opacity:.34; }
    88%  { opacity:.34; }
    100% { transform: translate3d(var(--sway), 112vh, 0) rotate(var(--spin)); opacity:0; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .drift { display:none; }
  }

  
  .trail {
    position:fixed; inset:0;
    pointer-events:none; z-index:9999;
    overflow:hidden;
  }
  .trail-leaf {
    position:absolute;
    
    transform:translate(-50%, -50%);
    opacity:0;
    animation:leaf-trail .66s var(--ease) forwards;
    will-change:transform, opacity;
  }
  @keyframes leaf-trail {
    0%   { opacity:0;
           transform:translate(-50%, -50%) scale(.55) rotate(0deg); }
    
    18%  { opacity:.52; }
    
    100% { opacity:0;
           transform:translate(calc(-50% + var(--drift, 0px)),
                               calc(-50% + var(--drop, 12px)))
                     scale(.92) rotate(var(--turn, 90deg)); }
  }
  
  @media (prefers-reduced-motion: reduce) { .trail { display:none; } }

  .page { position:relative; z-index:1; max-width:1680px; margin:0 auto; padding:0 var(--sp-4); }

  
  .hero { position:relative; }
  .hero {
    position:relative; margin:var(--sp-5) 0 var(--sp-8);
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    min-height:330px;
    
    background-color:#e8d9bf;
    background-image:
      radial-gradient(ellipse 46% 42% at 50% 48%, rgba(250,242,228,.62), rgba(250,242,228,.26) 58%, transparent 84%),
      url("/images/header/autumn.jpg");
    background-size:cover, cover;
    background-position:center, center 52%;
    background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  
  
  .hero { border-color:var(--clay); }
  .hero > .lace-band { display:none; }
  .hero::after {
    content:""; position:absolute; z-index:3; pointer-events:none;
    inset:7px;
    border:1.5px dashed #fdf6e9;
    border-radius:calc(var(--radius) - 4px);
    
    filter:drop-shadow(0 1px 2px rgba(60,38,18,.55));
    opacity:.85;
  }
  .hero-inner { text-align:center; position:relative; z-index:2; padding: var(--sp-10) var(--sp-5); }
  
  
  
  .logo {
    text-decoration:none; color:var(--clay-deep);
    display:inline-flex; align-items:center; gap:.3em;
    font-family: var(--script);
    font-size: clamp(52px, 11vw, 92px);
    line-height:1; color:var(--clay-deep);
    
    filter:
      drop-shadow(0 1px 0 #fffaf4)
      drop-shadow(0 0 3px rgba(253,247,236,.95))
      drop-shadow(0 0 10px rgba(253,247,236,.7))
      
      drop-shadow(0 2px 3px rgba(88,63,46,.45))
      drop-shadow(0 4px 9px rgba(88,63,46,.28));
    
    animation-name: logo-pulse;
    animation-duration: 2.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    
    --pulse: 0;
    transition: --pulse .45s ease-out;
    
    
    scale: calc(1 + .022 * var(--pulse)
                  + .028 * var(--breath) * var(--pulse) * var(--pulse));
    
  }

  
  .hero:hover .logo { will-change: scale; }

  
  @property --pulse {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
  }
  @property --breath {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
  }
  .logo:hover { --pulse: 1; }
  @keyframes logo-pulse {
    0%, 100% { --breath:0; }
    50%      { --breath:1; }
  }

  
  .logo-name {
    
    display:inline-block;
    padding:.08em .16em; margin:-.08em -.16em;
    background-image:linear-gradient(100deg,
      var(--clay-deep) 0%, var(--gold-deep) 22%, var(--sage-deep) 44%,
      var(--plum) 62%, var(--clay) 80%, var(--clay-deep) 100%);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation: logo-drift 14s ease-in-out infinite;
  }

  
  .logo-leaf {
    font-size:.42em; color:var(--sage-deep);
    transform-origin:60% 80%;
    animation: logo-leaf 9s ease-in-out infinite;
  }

  
  @keyframes logo-float {
    0%        { translate:0 0; }
    10%       { translate:0 -0.48px; }
    20%       { translate:0 -1.73px; }
    30%       { translate:0 -3.27px; }
    40%       { translate:0 -4.52px; }
    50%       { translate:0 -5px; }
    60%       { translate:0 -4.52px; }
    70%       { translate:0 -3.27px; }
    80%       { translate:0 -1.73px; }
    90%       { translate:0 -0.48px; }
    100%      { translate:0 0; }
  }
  @keyframes logo-drift {
    0%, 100% { background-position:0% 50%; }
    50%      { background-position:100% 50%; }
  }
  @keyframes logo-leaf {
    0%, 100% { transform:rotate(-8deg); }
    50%      { transform:rotate(9deg); }
  }

  
  
  @media (prefers-reduced-motion: reduce) {
    .logo, .logo-name, .logo-leaf, .logo-sub { animation:none; }
  }
  
  
  .logo-sub {
    animation: logo-float 8s linear infinite;
    will-change: translate;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm); letter-spacing:.34em; text-transform:uppercase;
    color:var(--ink); font-weight:600;
    text-shadow:
      0 0 3px rgba(253,247,236,.98),
      0 0 7px rgba(253,247,236,.92),
      0 0 16px rgba(253,247,236,.8),
      0 1px 0 #fffaf4;
  }
  .logo-sub .hl { color: var(--sage-deep); }
  
  .logo-heart {
    color:var(--berry); font-size:.9em;
    display:inline-block; vertical-align:-.05em;
    animation:logo-heart 3.2s ease-in-out infinite;
  }
  @keyframes logo-heart {
    0%, 100% { transform:scale(1); }
    12%      { transform:scale(1.18); }
    24%      { transform:scale(1); }
    36%      { transform:scale(1.12); }
    48%      { transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce) { .logo-heart { animation:none; } }

  
  
  .box.title-box { padding: var(--sp-5) var(--sp-6); }
  .section-title {
    display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  }
  
  .rule { color:var(--border-2); }
  .section-title .rule { flex:1; max-width:260px; }
  .section-title .word {
    font-family: var(--script); font-size:2.1rem; line-height:1;
    color: var(--clay-deep); padding:0 var(--sp-2);
    text-shadow: var(--shadow-text);
  }
  
  .box.title-box--small { padding: var(--sp-4) var(--sp-5); }
  
  .section-title.small .word { font-size:1.7rem; }
  .section-title.small .rule { max-width:180px; }

  

  
  .foot-sep {
    display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  }
  
  .foot-sep .rule { flex:1; max-width:260px; }
  .foot-sep i { color:var(--sage-deep); font-size:13px; }

  .foot-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
  @media (max-width:640px) { .foot-cols { grid-template-columns:minmax(0,1fr); } }
  
  .foot-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  .foot-btn {
    
    cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px; border-radius:var(--pill);
    border:1px solid var(--border-2); background:var(--pill-fill);
    box-shadow:var(--pill-lip);
    
    
    font-family:inherit;
    
    font-size:var(--fs-xs); font-weight:400; line-height:1.4; color:var(--ink-soft);
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  
  .foot-btn[hidden] { display:none; }
  .foot-btn .fbic { font-size:12px; color:var(--icon); flex-shrink:0; transition:var(--icon-ease); }
  
  .foot-btn:hover { filter:brightness(1.05); color:var(--icon); }
  .foot-btn:hover .fbic { color:var(--ink); }
  
  
  
  .sep { display:inline-block; margin:0 .4em; opacity:.7; }

  .copyright {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-3); flex-wrap:wrap;
    font-size:var(--fs-xs); color:var(--ink-faint);
    
    letter-spacing:.035em;
    margin-top:var(--sp-5); padding-top:var(--sp-4);
    border-top:1px dashed var(--border-2);
  }
  .counter { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
  .counter > span {
    display:inline-flex; align-items:center; gap:5px;
    font-variant-numeric:tabular-nums;
  }
  .counter i { font-size:10px; color:var(--icon); }
  
  @media (min-width:620px) {
    .counter { border-left:1px dashed var(--border-2); padding-left:var(--sp-4); }
  }
  @media (max-width:619px) {
    .copyright { justify-content:center; text-align:center; }
  }
  
  .copyright .hrt {
    color:var(--berry); font-size:.9em;
    display:inline-block; vertical-align:-.05em;
    animation:logo-heart 3.2s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .copyright .hrt { animation:none; } }

  

  
  .res-toolbar {
    display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    padding:var(--sp-3);
    margin-bottom:var(--sp-4);
  }
  .res-search { position:relative; flex:1; min-width:180px; }
  .res-search .sic { font-size:12px; color:var(--sage-deep);
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    opacity:.7; pointer-events:none;
  }
  
  .res-search input {
    width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--pill); padding:9px 14px 9px 34px;
    transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  }
  .res-search input:focus { border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft); }
  
  .res-search input { padding-right:48px; }
  
  .res-search input::-webkit-search-cancel-button {
    cursor:pointer;
    
    opacity:.55;
    transition:opacity var(--speed) var(--ease);
  }
  .res-search input::-webkit-search-cancel-button:hover { opacity:1; }

  
  
  .hero-find {
    position:absolute; left:18px; bottom:16px; z-index:3;
    width:min(260px, 46vw);
  }
  .hero-find .res-search input {
    
    background-image:var(--btn-fill);
    background-color:var(--box-fade);
    box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); padding-top:7px; padding-bottom:7px;
    padding-right:42px;
    
    padding-left:14px;
  }
  .hero-find .res-search .sic { display:none; }
  
  .hero-find .res-go {
    width:22px; height:22px; font-size:9px; right:7px;
    outline-offset:-3px;
  }
  @media (max-width:760px) {
    
    .hero-find {
      position:static; width:100%; margin-top:var(--sp-2);
    }
  }

  
  .find-tags {
    display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-2);
  }
  .find-tags .res-pill {
    
    font-size:var(--fs-xs); padding:4px 11px; gap:6px; line-height:1.4;
    background:var(--pill-fill); backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:var(--pill-lip);
    transition:color var(--speed) var(--ease),
               border-color var(--speed) var(--ease);
  }
  
  .find-tags .res-pill--go { cursor:pointer; text-decoration:none; }
  .find-tags .res-pill--go:hover,
  .find-tags .res-pill--go:focus-visible {
    color:var(--clay-deep);
    border-color:color-mix(in srgb, var(--clay-deep) 40%, transparent);
  }
  .find-tags .res-pill--go:hover i,
  .find-tags .res-pill--go:focus-visible i {
    color:var(--clay-deep); opacity:1;
  }
  .find-n {
    color:var(--ink-faint); font-weight:600;
    font-variant-numeric:tabular-nums; font-size:.9em;
    transition:color var(--speed) var(--ease);
  }
  .find-tags .res-pill--go:hover .find-n,
  .find-tags .res-pill--go:focus-visible .find-n {
    color:color-mix(in srgb, var(--clay-deep) 70%, transparent);
  }

  
  .find-wanted {
    margin-top:var(--sp-5); padding-top:var(--sp-4);
    border-top:1px dashed var(--border-2);
  }
  .find-wanted .find-tags { margin-top:var(--sp-2); }
  
  .find-wanted { scroll-margin-top:var(--sp-5); }

  
  .wanted-list {
    display:flex; flex-direction:column; gap:4px;
    margin-top:var(--sp-3);
  }
  
  .wanted-list--scroll {
    max-height:304px; overflow-y:auto;
    padding-right:var(--sp-2);
    
    mask-image:linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%);
  }
  .wanted-row {
    display:flex; align-items:center; gap:var(--sp-2);
    padding:5px 10px; border-radius:var(--radius-sm);
    border:1px solid var(--border-2);
    background:color-mix(in srgb, var(--paper) 45%, transparent);
  }
  
  .wanted-word {
    flex:1 1 auto; min-width:0;
    display:inline-flex; align-items:center; gap:7px;
    font-size:var(--fs-sm); font-weight:600; color:var(--clay-deep);
    overflow-wrap:anywhere;
  }
  .wanted-word i { font-size:10px; color:var(--icon); opacity:.8; }
  
  .wanted-n {
    flex:0 0 auto; font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  
  .wanted-mine { flex:0 0 auto; color:var(--clay-deep); font-weight:600; }
  .wanted-mine i { color:var(--clay-deep); opacity:.8; }

  
  .kind-head {
    display:flex; align-items:center; gap:7px;
    margin-top:var(--sp-4); margin-bottom:var(--sp-2);
    font-size:var(--fs-label); color:var(--ink-faint);
    letter-spacing:.06em; text-transform:uppercase;
  }
  .kind-head i { color:var(--icon); }
  .kind-head a { color:var(--clay-deep); font-weight:600; text-decoration:none; }
  .kind-head a:hover { color:var(--link-hover); }
  .kind-n { color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .res-go {
    
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border-2); background:var(--pill-fill);
    box-shadow:var(--pill-lip); color:var(--clay-deep); font-size:11px;
    
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-4px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  
  .res-go:hover, .res-go:focus-visible {
    filter:brightness(1.05); color:var(--icon);
    outline-color:color-mix(in srgb, var(--clay) 50%, transparent);
  }

  
  .res-tabs { display:flex; flex-wrap:wrap; gap:5px; }
  .res-tab {
    --cat:var(--trim);
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px; border-radius:var(--pill);
    border:1px solid var(--border-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); color:var(--ink-soft); text-decoration:none;
    cursor:pointer;
    transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease),
               background-color var(--speed) var(--ease);
  }
  
  .res-tab > i { font-size:9px; opacity:.7; color:var(--icon); }
  .res-tab .n { font-variant-numeric:tabular-nums; opacity:.65; }
  .res-tab:hover { border-color:var(--cat); color:var(--ink); }
  .res-tab[aria-selected="true"] {
    border-color:color-mix(in srgb, var(--cat) 55%, transparent);
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--cat) 14%, transparent),
        color-mix(in srgb, var(--cat) 14%, transparent)),
      var(--pill-fill);
    color:var(--ink); font-weight:600;
  }
  .res-tab[aria-selected="true"] .n { opacity:.8; }

  .res-desc {
    font-size:var(--fs-sm); color:var(--ink-soft);
    padding:var(--sp-3) 0; margin-bottom:var(--sp-2);
    border-top:1px dashed var(--border-2); border-bottom:1px dashed var(--border-2);
  }
  .res-desc b { color:var(--ink); }

  
  .res-grid {
    display:grid; gap:var(--sp-3);
    grid-template-columns:repeat(var(--res-cols, 5), 1fr);
  }
  @media (max-width:1240px) { .res-grid { grid-template-columns:repeat(var(--res-cols-md, 4), 1fr); } }
  @media (max-width:900px)  { .res-grid { grid-template-columns:repeat(var(--res-cols-sm, 3), 1fr); } }
  @media (max-width:560px)  { .res-grid { grid-template-columns:repeat(var(--res-cols-xs, 2), 1fr); } }

  
  .res-item {
    position:relative; border-radius:var(--radius-sm);
    aspect-ratio:var(--res-aspect, 1 / 1);
    width:100%; overflow:hidden; cursor:pointer;
    padding:6px;
    border:1.5px solid color-mix(in srgb, var(--clay) 45%, var(--trim, var(--sage)));
    background:linear-gradient(180deg, var(--trim-soft, var(--sage-soft)) 0, var(--box-fade) 100%);
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--speed) var(--ease);
  }
  
  
  .res-item:hover, .res-item:has(:focus-visible) {
    box-shadow:var(--shadow-sm), inset 0 0 0 999px rgba(40, 30, 22, .1);
  }
  
  .res-item::after {
    content:""; position:absolute; inset:3px; z-index:4; pointer-events:none;
    border:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    border-radius:calc(var(--radius-sm) - 2px);
  }
  
  
  .res-item.is-checkered .res-inner::before {
    content:""; position:absolute; inset:0; z-index:0;
    background-color:var(--paper);
    background-image:
      linear-gradient(45deg, #e8ddcd 25%, transparent 25%, transparent 75%, #e8ddcd 75%),
      linear-gradient(45deg, #e8ddcd 25%, transparent 25%, transparent 75%, #e8ddcd 75%);
    background-size:14px 14px;
    background-position:0 0, 7px 7px;
    transition:filter var(--speed) var(--ease);
  }
  .res-item.is-checkered:hover .res-inner::before,
  .res-item.is-checkered:has(:focus-visible) .res-inner::before { filter:brightness(.74); }
  

  .res-inner {
    position:absolute; inset:6px; z-index:1; overflow:hidden;
    border-radius:calc(var(--radius-sm) - 4px);
  }
  
  .res-item.is-natural .res-inner { border-radius:0; }

  
  .res-art {
    position:absolute; inset:0;
    background-repeat:no-repeat;
    transition:transform .3s var(--ease), filter var(--speed) var(--ease);
  }
  
  .res-item:not(.is-natural):hover .res-art,
  .res-item:not(.is-natural):has(:focus-visible) .res-art {
    transform:scale(1.035);
    filter:brightness(.74) blur(1px);
  }
  
  .res-item.is-natural:hover .res-art,
  .res-item.is-natural:has(:focus-visible) .res-art { filter:brightness(.74) blur(.6px); }

  
  .res-bar {
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:1px 6px; pointer-events:none;
    background:color-mix(in srgb, var(--paper-soft) 74%, transparent);
    -webkit-backdrop-filter:blur(7px) saturate(115%);
    backdrop-filter:blur(7px) saturate(115%);
    border-top:1px solid color-mix(in srgb, var(--border-2) 70%, transparent);
    font-size:10px; line-height:1.15; color:var(--clay-deep);
    letter-spacing:.03em; font-variant-numeric:tabular-nums;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transform:translateY(100%);
    transition:transform .18s ease;
  }
  .res-bar i { font-size:.9em; color:var(--icon); opacity:.85; }
  .res-item:hover .res-bar,
  .res-item:has(:focus-visible) .res-bar { transform:none; }

  
  
  .res-pills {
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    display:flex; flex-wrap:wrap; align-content:flex-end; gap:3px; padding:5px;
    pointer-events:none;
  }
  .res-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:1px 7px; border-radius:var(--pill);
    background:color-mix(in srgb, var(--paper-soft) 74%, transparent);
    -webkit-backdrop-filter:blur(7px) saturate(115%);
    backdrop-filter:blur(7px) saturate(115%);
    border:1px solid color-mix(in srgb, var(--border-2) 70%, transparent);
    font-size:9px; letter-spacing:.03em; color:var(--clay-deep);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .res-pill i { font-size:.85em; color:var(--icon); opacity:.85; }
  
  .res-pill--on {
    color:var(--sage-deep); font-weight:600;
  }
  .res-pill--on i { color:var(--sage-deep); opacity:1; }
  
  .res-pill--mine {
    color:var(--clay-deep); font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .res-pill--mine i { color:var(--clay-deep); opacity:1; }

  
  .res-actions {
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
    opacity:0; transition:opacity var(--speed) var(--ease);
  }
  .res-item:hover .res-actions, .res-item:has(:focus-visible) .res-actions { opacity:1; }
  .res-act {
    display:inline-flex; align-items:center; justify-content:center;
    
    flex:none; width:30px; height:30px; border-radius:50%;
    background:var(--paper); color:var(--clay-deep);
    border:1px solid var(--border-2); box-shadow:var(--pill-lip);
    transition:background-color var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .res-act i { font-size:12px; }
  
  .res-item:hover .res-act, .res-item:has(:focus-visible) .res-act {
    background:var(--paper); color:var(--clay-deep);
    border-color:color-mix(in srgb, var(--clay) 45%, var(--border-2));
    box-shadow:0 2px 10px rgba(40, 30, 22, .35);
  }
  
  .res-act:hover,
  .res-item:hover .res-act:hover, .res-item:has(:focus-visible) .res-act:hover {
    
    background:color-mix(in srgb, var(--paper-soft) 82%, var(--clay));
    color:var(--clay-deep);
    border-color:color-mix(in srgb, var(--clay) 55%, var(--border-2));
  }

  
  .respanel {
    position:fixed; inset:0; z-index:10050;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:transparent;
    
    pointer-events:none;
  }
  .respanel[hidden] { display:none; }
  .respanel-box {
    pointer-events:auto; position:relative;
    display:grid; grid-template-columns:minmax(0,1fr) 270px;
    
    width:min(1080px, 100%); max-height:100%;
    border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--trim, var(--sage)); box-shadow:0 18px 50px rgba(40,30,22,.4);
    
    background:var(--box-fade);
    
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-7px;
  }
  @media (max-width:760px) { .respanel-box { grid-template-columns:minmax(0,1fr); } }

  .respanel-stage {
    position:relative; min-height:320px;
    background-repeat:repeat; background-position:center;
  }
  
  .respanel-box:has(.respanel-stage:not(.is-fitted):not(.is-cover)) {
    max-height:min(58vh, 440px);
    
    width:min(700px, 100%);
  }

  
  .respanel-box:has(.respanel-stage.is-checkered) { width:min(1020px, 100%); }
  
  .respanel-stage.is-fitted {
    overflow:hidden; padding:10px; box-sizing:border-box;
    display:flex; align-items:flex-start; justify-content:center;
    
    max-height:min(82vh, 860px);
  }
  
  .respanel-stage.is-checkered::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    
    background-color:#3b2e24;
    background-image:
      linear-gradient(45deg, #2f241b 25%, transparent 25%, transparent 75%, #2f241b 75%),
      linear-gradient(45deg, #2f241b 25%, transparent 25%, transparent 75%, #2f241b 75%);
    background-size:18px 18px; background-position:0 0, 9px 9px;
    opacity:0; transition:opacity .28s var(--ease);
  }
  .respanel-stage.is-checkered.is-dark::before { opacity:1; }
  
  .respanel-stage.is-fitted[data-section="headers"] { height:min(46vh, 420px); }
  
  .respanel-stage.is-fitted[data-section="textures"] { height:min(46vh, 420px); }
  
  .respanel-stage.is-fitted[data-section="brushes"] { height:min(60vh, 560px); }

  
  .respanel-stage.is-fitted[data-section="headers"] .respanel-img,
  .respanel-stage.is-fitted[data-section="textures"] .respanel-img,
  .respanel-stage.is-fitted[data-section="brushes"] .respanel-img {
    max-height:100%;
  }

  
  .respanel-stage.is-fitted.is-checkered { max-height:min(82vh, 820px); }
  .respanel-stage.is-checkered .respanel-img { max-height:calc(min(82vh, 820px) - 20px); }

  .respanel-stage.is-checkered {
    background-color:var(--paper);
    background-image:
      linear-gradient(45deg, #e8ddcd 25%, transparent 25%, transparent 75%, #e8ddcd 75%),
      linear-gradient(45deg, #e8ddcd 25%, transparent 25%, transparent 75%, #e8ddcd 75%);
    background-size:18px 18px; background-position:0 0, 9px 9px;
  }
  
  .respanel-tile {
    position:absolute; inset:0; z-index:1;
    background-repeat:repeat; background-position:center;
  }
  .respanel-tile[hidden] { display:none; }
  .respanel-img {
    display:block; margin:auto; align-self:flex-start;
    
    position:relative; z-index:1;
    
    max-width:100%; max-height:calc(min(82vh, 860px) - 20px);
    width:auto; height:auto;
  }
  .respanel-img[hidden] { display:none; }
  
  .respanel-stage.is-cover { padding:0; height:min(74vh, 620px); }
  .respanel-stage.is-cover .respanel-img {
    width:100%; height:100%; max-width:none; max-height:none;
    object-fit:cover; object-position:center top;
  }

  .respanel-side {
    padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3);
    border-left:1px solid var(--border-2);
    
    overflow-y:auto;
  }
  
  .respanel-side h3 {
    font-family:var(--script); font-size:1.7rem; line-height:1.15;
    color:var(--clay-deep); overflow-wrap:anywhere;
    white-space:nowrap; overflow:hidden;
    
    padding-right:46px; padding-left:5px; margin-left:-5px;
  }
  .respanel-side h3.wraps { white-space:normal; }

  .respanel-facts { display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm); }
  .respanel-facts dt {
    color:var(--ink-faint); letter-spacing:.06em;
    text-transform:uppercase; font-size:11px;
  }
  .respanel-facts dd { color:var(--ink); }
  .respanel-facts i { color:var(--icon); }

  
  .respanel-mine {
    margin-top:calc(7px - var(--sp-3));
  }
  .respanel-mine dd { color:var(--clay-deep); font-weight:600; font-variant-numeric:tabular-nums; }
  .respanel-mine[hidden] { display:none; }

  
  .respanel-tagbox {
    display:flex; flex-direction:column; gap:3px;
    margin-top:calc(7px - var(--sp-3));
  }
  .respanel-tagbox[hidden] { display:none; }
  .respanel-lab {
    color:var(--ink-faint); letter-spacing:.06em;
    text-transform:uppercase; font-size:11px;
  }
  .respanel-lab i { color:var(--icon); }
  .respanel-tags { display:flex; flex-wrap:wrap; gap:4px; }
  
  
  .respanel-tags .res-pill--go { cursor:pointer; text-decoration:none; }
  .respanel-tags .res-pill--go:hover { color:var(--clay-deep); }
  .respanel-tags .res-pill--go:hover i { color:var(--clay-deep); opacity:1; }

  .respanel-tags .res-pill {
    background:color-mix(in srgb, var(--paper) 80%, transparent);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    font-size:10px; padding:2px 8px;
  }

  
  .respanel-acts {
    margin-top:auto; padding-top:var(--sp-3);
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .respanel-btn { flex:1 1 100%; justify-content:center; font-weight:600; }
  
  .respanel-btn, .respanel-nav {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               border-color var(--speed) var(--ease),
               background-color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  .respanel-btn:hover, .respanel-nav:hover,
  .respanel-btn:focus-visible, .respanel-nav:focus-visible {
    outline-color:color-mix(in srgb, var(--clay) 50%, transparent);
  }
  
  .respanel-btn.is-on {
    background-image:none;
    background-color:color-mix(in srgb, var(--clay) 16%, var(--pill-fill));
    border-color:color-mix(in srgb, var(--clay) 55%, transparent);
    color:var(--clay-deep);
  }
  .respanel-btn.is-on .fbic { color:var(--clay-deep); }

  
  .respanel-step { display:flex; gap:6px; width:100%; }
  .respanel-nav {
    flex:1; height:30px; border-radius:var(--pill);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--pill-fill); color:var(--clay-deep);
    border:1px solid var(--border-2); box-shadow:var(--pill-lip);
    font-size:12px; cursor:pointer;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .respanel-nav[hidden] { display:none; }
  
  .respanel-nav:hover { filter:brightness(1.05); color:var(--icon); }

  
  
  .respanel-x {
    position:absolute; top:10px; right:10px; z-index:5;
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip), var(--shadow-sm);
    color:var(--ink-soft); font-size:13px;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               border-color var(--speed) var(--ease),
               background-color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  .respanel-x:hover, .respanel-x:focus-visible {
    background-image:var(--btn-fill);
    border-color:var(--clay);
    color:var(--clay-deep);
    filter:brightness(1.04);
    outline-color:color-mix(in srgb, var(--clay) 50%, transparent);
  }

  
  body.showing-pattern::before,
  body.showing-pattern::after { display:none; }

  
  .loglist { display:flex; flex-direction:column; gap:5px; }
  .logrow {
    display:grid; align-items:center; gap:var(--sp-2) var(--sp-3);
    grid-template-columns:16px minmax(0,1.6fr) minmax(0,1.3fr) auto auto;
    padding:8px 12px; border-radius:var(--radius-sm);
    border:1px solid var(--border-2);
    font-size:var(--fs-sm); color:var(--ink-soft);
  }
  
  .foot-btn.is-on {
    background-image:linear-gradient(170deg, var(--clay) 0%, var(--clay-deep) 100%);
    border-color:var(--clay-deep); color:#fffaf4;
  }
  .foot-btn.is-on .fbic { color:#fffaf4; }
  
  .foot-btn-n {
    font-variant-numeric:tabular-nums; font-weight:400; opacity:.7;
  }

  .log-mark { color:var(--icon); font-size:12px; }
  .log-who  { color:var(--ink); font-weight:600; min-width:0; overflow-wrap:anywhere; }
  .log-ip {
    font-family:var(--mono, ui-monospace, monospace); font-size:var(--fs-xs);
    color:var(--ink-faint); min-width:0; overflow-wrap:anywhere;
  }
  .log-when {
    font-size:var(--fs-xs); color:var(--ink-faint);
    font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
  }
  .log-when small { display:block; opacity:.8; }
  .log-status {
    justify-self:end; white-space:nowrap;
    padding:3px 10px; border-radius:var(--pill);
    border:1px solid var(--border-2); background:var(--pill-fill);
    box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft);
  }
  
  .logrow.bad { border-color:var(--berry); }
  .logrow.bad .log-mark { color:var(--berry); }
  .logrow.bad .log-status { border-color:var(--berry); color:var(--berry); }

  @media (max-width:720px) {
    .logrow { grid-template-columns:16px minmax(0,1fr) auto; }
    .log-ip { grid-column:2 / -1; }
  }

  
  .pager {
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px;
    margin-top:var(--sp-4); padding-top:var(--sp-4);
    border-top:1px dashed var(--border-2);
  }
  .pg {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; padding:0 var(--sp-2);
    border:1px solid var(--border-2); border-radius:var(--pill);
    background:var(--pill-fill); box-shadow:var(--pill-lip); color:var(--ink-soft);
    font-size:var(--fs-xs); font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .pg:hover { filter:brightness(1.05); color:var(--trim); }
  .pg.current {
    background-image:linear-gradient(170deg, var(--clay) 0%, var(--clay-deep) 100%);
    border-color:var(--clay-deep); color:#fffaf4;
  }
  
  .pg i { font-size:11px; }

  
  
  .pick-row {
    flex:1 1 100%;
    display:flex; flex-wrap:wrap; align-items:center;
    gap:var(--sp-2) var(--sp-4);
  }
  
  .series-pick {
    flex:1 1 240px;
    display:flex; align-items:center; gap:var(--sp-2);
    min-width:0;
  }
  .series-pick .field-label { margin-bottom:0; flex:0 0 auto; }
  .series-pick select {
    flex:1 1 auto; width:100%; min-width:0;
    
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }

  
  @supports (appearance: base-select) {
    .field select,
    .ans-row select,
    :is(.affi-edit, .credit-edit) select {
      appearance:base-select;
    }

    .field select::picker(select),
    .ans-row select::picker(select),
    :is(.affi-edit, .credit-edit) select::picker(select) {
      appearance:base-select;
      border:1px solid var(--border-2);
      border-radius:var(--radius-sm);
      background:var(--paper);
      box-shadow:var(--shadow);
      outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
      outline-offset:-5px;
      padding:4px;
      max-height:min(60vh, 420px);

      
      scrollbar-width:thin;
      scrollbar-color:var(--clay) var(--paper-soft);
    }

    .field select::picker(select)::-webkit-scrollbar,
    .ans-row select::picker(select)::-webkit-scrollbar,
    :is(.affi-edit, .credit-edit) select::picker(select)::-webkit-scrollbar {
      width:11px;
    }
    .field select::picker(select)::-webkit-scrollbar-track {
      background:var(--paper-soft); border-radius:var(--pill);
    }
    .field select::picker(select)::-webkit-scrollbar-thumb {
      background:var(--clay);
      border:2px solid var(--paper-soft);
      border-radius:var(--pill);
    }
    .field select::picker(select)::-webkit-scrollbar-thumb:hover {
      background:var(--clay-deep);
    }

    .field select option,
    .ans-row select option,
    :is(.affi-edit, .credit-edit) select option {
      padding:5px 9px;
      border-radius:var(--radius-sm);
      font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
      background:transparent;
    }

    
    .field select::picker(select) option:hover,
    .field select::picker(select) option:focus,
    .ans-row select::picker(select) option:hover,
    :is(.affi-edit, .credit-edit) select::picker(select) option:hover {
      background-color:color-mix(in srgb, var(--clay) 14%, var(--paper));
      color:var(--clay-deep);
    }

    .field select::picker(select) option:checked,
    .ans-row select::picker(select) option:checked,
    :is(.affi-edit, .credit-edit) select::picker(select) option:checked {
      background-color:var(--clay-deep);
      color:#fffaf4;
    }

    
    .field select::picker(select) hr {
      height:0; margin:4px 2px;
      border:0; border-top:1px dashed var(--border-2);
    }

    
    .field select::picker(select) optgroup {
      padding:0; border:0; background:transparent;
      font-weight:inherit; font-style:normal;
    }
    .field select::picker(select) optgroup::label {
      position:sticky; top:-4px; z-index:1;
      display:block;
      padding:5px 9px 3px;
      background:var(--paper);
      font-size:10px; font-weight:700; letter-spacing:.09em;
      text-transform:uppercase;
      color:var(--ink-soft);
    }
    
    .field select::picker(select) optgroup:not(:first-of-type)::label {
      margin-top:3px;
      border-top:1px dashed color-mix(in srgb, var(--border-2) 60%, transparent);
    }
    
    .field select::picker(select) optgroup option { padding-left:15px; }

    
    .field select,
    .ans-row select,
    :is(.affi-edit, .credit-edit) select { color:var(--ink); }

    
    .field select option::checkmark { display:none; }

    
    .field select::picker-icon { display:none; }
  }

  
  
  
  .cols {
    display:grid;
    grid-template-columns: 272px minmax(0,1fr) 312px;
    gap: var(--box-gap);
    align-items:start;
  }
  .col { display:flex; flex-direction:column; gap: var(--box-gap); }

  
  .pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--box-gap); }
  
  .pair-stack { display:flex; flex-direction:column; gap:var(--box-gap); min-width:0; }
  
  .pair-stack > .box:last-child { flex:1 1 auto; }
  .pair > .box, .triple > .box { display:flex; flex-direction:column; }
  .pair > .box > .content, .triple > .box > .content { flex:1; }
  @media (max-width:1180px) { .pair { grid-template-columns:minmax(0,1fr); } }

  
  .box {
    --trim: var(--sage);
    --trim-soft: var(--sage-soft);
    position:relative;
    background: var(--box-fade);
    
    background-image: linear-gradient(
      180deg,
      var(--trim-soft) 0,
      var(--box-fade) 175px
    );
    background-repeat: no-repeat;
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
    
    overflow:hidden;
  }

  
  .box.clay { --trim: var(--clay); --trim-soft: var(--clay-soft); }
  .box.gold { --trim: var(--gold); --trim-soft: var(--gold-soft); }
  .box.sage { --trim: var(--sage); --trim-soft: var(--sage-soft); }
  .box.bark { --trim: var(--bark); --trim-soft: var(--bark-soft); }

  
  .box.box--tint {
    --trim-soft: color-mix(in srgb, var(--tint) 20%, var(--box-fade));
    --trim: color-mix(in srgb, var(--tint) 45%, var(--border));
    border-color: color-mix(in srgb, var(--tint) 28%, var(--border));
  }
  
  .box.box--tint[style*="--tint2"] {
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tint) 24%, var(--box-fade)) 0,
      color-mix(in srgb, var(--tint2) 26%, var(--box-fade)) 100%
    );
  }

  
  .lace-band {
    position:absolute; left:0; right:0; width:100%; height:18px;
    pointer-events:none;
    background-color:var(--wash-base);
  }
  
  .box > .lace-band,
  .fav-card > .lace-band { display:none; }

  
  
  .box, .fav-card { border-color:var(--trim); }
  .box::after, .fav-card::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed var(--border-2);
    border-radius:calc(var(--radius) - 3px);
    opacity:.75;
  }
  .fav-card::after { border-radius:calc(var(--radius-sm) - 3px); }

  
  
  .box { padding:var(--sp-2) var(--sp-5) var(--sp-3); }
  .fav-card { padding:var(--sp-4); }
  .lace-band.top { top:0; }
  .lace-band.bottom { bottom:0; transform: scaleY(-1); }
  .box > .content { position:relative; padding: var(--sp-4) 0 var(--sp-1); }

  
  
  .vine-top {
    position:absolute; top:0; left:0; right:0; width:100%; height:30px;
    pointer-events:none; z-index:2;
  }
  
  .box--vine > .content { padding-top: calc(var(--sp-3) + 16px); }

  
  .leafmark { position:absolute; top:14px; right:14px; color:var(--sage-deep); opacity:.22; transform:rotate(12deg); pointer-events:none; }

  
  
  .box-title {
    display:flex; align-items:baseline; gap:var(--sp-2);
    margin-top:-5px; margin-bottom: var(--sp-3);
  }
  
  .box-title .tic { font-size:17px;
    width:19px; height:19px; flex-shrink:0; align-self:center;
    color:var(--sage-deep); fill:currentColor;
  }
  .nav-sub { display:flex; align-items:center; gap:6px; }
  .nav-sub .sic { font-size:12px; color:var(--sage-deep); flex-shrink:0; }
  .navgrid a .ic { font-size:12px; width:1.15em; text-align:center; }
  
  
  
  .box-title .name {
    font-family: var(--script); font-size:1.75rem; line-height:1;
    color: var(--sage-deep); text-shadow: var(--shadow-text);
  }
  .box-title .tabs {
    font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
    color: var(--gold-deep); font-weight:600;
    
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  .box-title .tabs b { color: var(--gold-deep); font-weight:700; }

  
  
  .navgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-6); position:relative; }
  
  .navgrid::after {
    content:""; position:absolute; top:4px; bottom:4px; left:50%;
    transform:translateX(-50%);
    border-left:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
  }
  
  .navgrid a {
    display:flex; align-items:center; gap:var(--sp-2);
    padding:5px 8px; margin-inline:-8px;
    font-size:var(--fs-sm); color:var(--ink);
    position:relative;
    transition:color var(--speed) var(--ease), transform var(--speed) var(--ease);
  }
  
  .navgrid a:hover,
  .navgrid a:focus-visible { transform:translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .navgrid a { transition:none; } }
  .navgrid a .ic { color: var(--icon); flex-shrink:0; display:inline-flex;
                   transition:var(--icon-ease); }
  
  
  .navgrid a .lbl { position:relative; padding-bottom:0; }
  
  .navgrid a .lbl::before,
  .navgrid a .lbl::after {
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:1px; border-radius:2px;
  }
  .navgrid a .lbl::before {
    background:repeating-linear-gradient(90deg,
      var(--border-2) 0 3px, transparent 3px 6px);
  }
  .navgrid a .lbl::after {
    background: currentColor; transform:scaleX(0); transform-origin:left;
    transition: transform var(--speed) var(--ease);
  }
  
  .navgrid a:hover { color: var(--icon); }
  .navgrid a:hover .ic { color: var(--ink); }
  .navgrid a:hover .lbl::after { transform:scaleX(1); }
  
  .nav-sub {
    grid-column:1 / -1;
    font-size:var(--fs-label); font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--trim);
    margin-top:var(--sp-2); padding-bottom:2px;
  }
  .nav-sub:first-child { margin-top:0; }
  
  .navgrid a[aria-current="page"] { color: var(--clay-deep); }
  .navgrid a[aria-current="page"] .lbl::after { transform:scaleX(1); }

  
  
  :is(.prose, .creditlist, .pairlist, .contact-line, .factrow dd,
      .faq-inner, .la-what, .copyright, .tl-body, .rulelist, .note, .bubble,
      .shout-head, .jam-what, .find-wanted, .upd-text, .res-empty,
      .cookies-text) a {
    color:var(--link);
    font-weight:600;
    transition:color var(--speed) var(--ease);
  }
  :is(.prose, .creditlist, .pairlist, .contact-line, .factrow dd,
      .faq-inner, .la-what, .copyright, .tl-body, .rulelist, .note, .bubble,
      .shout-head, .jam-what, .find-wanted, .upd-text, .res-empty,
      .cookies-text)
    a:is(:hover, :focus-visible) { color:var(--link-hover); }

  
  
  .prose { font-size:var(--fs-sm); color:var(--ink-soft); }
  .prose strong, .prose b { color:var(--ink); font-weight:600; }
  .prose p + p { margin-top: var(--sp-3); }

  

  
  .prose h2, .prose h3, .prose h4 {
    font-family:var(--serif); color:var(--ink);
    line-height:1.25; margin-top:var(--sp-4);
  }
  .prose h2 { font-size:var(--fs-lg); }
  .prose h3 { font-size:var(--fs-md, 1.05rem); }
  .prose h4 { font-size:var(--fs-sm); letter-spacing:.02em; }
  .prose :is(h2, h3, h4):first-child { margin-top:0; }

  
  .prose ul, .prose ol { margin:var(--sp-3) 0 0 1.2em; }
  .prose ul { list-style:disc; }
  .prose ol { list-style:decimal; }
  .prose li + li { margin-top:4px; }
  .prose li::marker { color:var(--icon); }

  .prose blockquote {
    margin:var(--sp-3) 0 0; padding:var(--sp-2) var(--sp-4);
    border-left:2px solid color-mix(in srgb, var(--clay) 45%, transparent);
    color:var(--ink-soft); font-style:italic;
  }

  
  .prose img {
    max-width:100%; height:auto; display:block;
    margin:var(--sp-3) 0 0;
    border-radius:var(--radius-sm); border:1px solid var(--border-2);
  }

  .prose hr {
    margin:var(--sp-4) 0; border:0;
    border-top:1px dashed var(--border-2);
  }

  .prose code {
    font-family:var(--mono, ui-monospace, monospace); font-size:.92em;
    background:color-mix(in srgb, var(--paper) 70%, transparent);
    border:1px solid var(--border-2); border-radius:4px;
    padding:1px 5px;
  }

  .head-row { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
              padding-bottom:var(--sp-2); margin-bottom:var(--sp-3);
              border-bottom:1px dashed var(--border-2); }
  .head-row h2 { font-family:var(--serif); font-size:var(--fs-lg); font-weight:600; color:var(--ink); }
  .meta { margin-left:auto; display:flex; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--ink-faint); }

  .thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:var(--sp-2); }
  .thumb { aspect-ratio:1/1; border-radius:var(--radius-sm); border:1px solid var(--border);
           box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease); }
  .thumb:hover { border-color:var(--sage-deep); }

  
  
  .la-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4); }
  
  @media (max-width:560px) { .la-grid { gap:0 var(--sp-3); } }
  .la-item { padding:var(--sp-3) 0; border-bottom:1px dashed var(--border-2); min-width:0; }
  
  .la-grid--folded .la-item.is-away { display:none; }
  
  .la-grid--folded.is-tall {
    overflow-y:auto;
    
    mask-image:linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%);
  }
  
  
  .la-item:nth-last-child(-n+2),
  .la-item.is-last-shown { border-bottom:0; }
  .la-when {
    display:flex; align-items:center; gap:6px;
    font-size:var(--fs-label); font-weight:700; letter-spacing:.06em;
    
    color:var(--ink-faint); margin-bottom:3px;
  }
  .la-when i { font-size:9px; opacity:.7; color:var(--icon); flex-shrink:0; }
  
  .la-what { font-size:var(--fs-xs); color:var(--ink); line-height:1.55; }
  .la-what a { color:var(--ink); transition:var(--icon-ease); }
  .la-what a:hover { color:var(--trim); }
  .la-what i { font-style:normal; color:var(--ink-faint); margin-right:1px; }
  .la-row { display:flex; align-items:baseline; gap:var(--sp-2); margin-top:3px; }
  .badge {
    flex-shrink:0; font-size:9.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; padding:2px 6px; border-radius:3px;
    background:var(--gold-soft); color:var(--gold-deep); border:1px solid var(--gold);
  }

  
  .upd-list { display:flex; flex-direction:column; }
  
  .upd { display:flex; flex-direction:column; gap:5px; padding:10px 12px 9px; }

  .upd-head { display:flex; align-items:center; }
  
  .upd-when {
    flex-shrink:0; white-space:nowrap;
    font-size:11px; color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }
  .upd-when i { font-size:8px; opacity:.7; margin-right:4px; color:var(--icon); }

  .upd-text { font-size:var(--fs-sm); color:var(--ink-soft); overflow-wrap:anywhere; }

  
  .upd-tags { display:flex; flex-wrap:wrap; gap:4px; }
  
  .upd-tag {
    display:inline-flex; align-items:center;
    padding:1px 9px; border-radius:var(--pill);
    font-size:9px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; line-height:1.6;
    border:1px solid color-mix(in srgb, var(--tag) 50%, transparent);
    background:color-mix(in srgb, var(--tag) 13%, var(--paper));
    color:color-mix(in srgb, var(--tag) 70%, var(--ink));
  }

  
  .tag-sage  { --tag: var(--sage-deep); }
  .tag-clay  { --tag: var(--clay-deep); }
  .tag-gold  { --tag: var(--gold-deep); }
  .tag-berry { --tag: var(--berry); }
  .tag-plum  { --tag: var(--plum); }
  .tag-bark  { --tag: var(--ink-soft); }

  
  
  .upd-tag { --tag: var(--clay); }

  
  
  
  .quiz-window {
    
    position:fixed; inset:0; margin:auto;
    width:min(980px, calc(100vw - var(--sp-5) * 2));
    max-width:calc(100vw - var(--sp-5) * 2);
    max-height:calc(100vh - var(--sp-6) * 2);
    height:fit-content;
    padding:0; border:0; background:none;
    overflow:visible;
  }
  .quiz-window::backdrop {
    background:rgba(40,30,22,.42);
    backdrop-filter:blur(2px);
  }
  
  .quiz-window-bar {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border:1px solid var(--border); border-bottom:0;
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--box-fade);
  }
  .quiz-window-name {
    font-family:var(--serif); font-size:var(--fs-lg); color:var(--ink);
  }
  .quiz-window-shut { margin-left:auto; }
  .quiz-window-body {
    max-height:calc(100vh - var(--sp-6) * 2 - 60px);
    overflow-y:auto; overscroll-behavior:contain;
    padding:var(--sp-4);
    border:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius);
    background:var(--paper);
  }
  
  .quiz-window .box { box-shadow:none; }
  .quiz-window .quiz-panel + .quiz-panel { margin-top:var(--box-gap); }

  
  .quiz-tabs { margin-bottom:var(--sp-3); }
  
  .quiz-tabs[hidden] { display:none; }

  @media (max-width:760px) {
    .quiz-window { width:100vw; max-height:100vh; }
    .quiz-window-bar { border-radius:0; }
    .quiz-window-body { border-radius:0; max-height:calc(100vh - 60px); }
  }

  
  .post-split {
    
    display:grid; grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
    gap:var(--sp-5);
    align-items:start;
  }
  .post-side .stufflist { margin-top:var(--sp-2); }
  
  .post-side .stufflist {
    max-height:320px; overflow-y:auto; padding-right:var(--sp-2);
  }
  @media (max-width:900px) {
    .post-split { grid-template-columns:minmax(0,1fr); }
  }

  
  .colorpick-chosen {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    min-height:34px;
    padding:5px; margin-bottom:var(--sp-2);
    border:1px dashed var(--border-2); border-radius:var(--radius-sm);
  }
  .colorpick-none { font-size:var(--fs-xs); color:var(--ink-faint); padding:0 4px; }

  
  .colorpick-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 4px 3px 7px; border-radius:var(--pill);
    font-size:10px; font-weight:700; letter-spacing:.04em;
    border:1px solid color-mix(in srgb, var(--tint) 50%, transparent);
    background:color-mix(in srgb, var(--tint) 13%, var(--paper));
    color:color-mix(in srgb, var(--tint) 70%, var(--ink));
    cursor:grab; user-select:none;
  }
  .colorpick-pill.is-lifted { opacity:.45; cursor:grabbing; }
  .colorpick-dab {
    width:13px; height:13px; border-radius:50%;
    background:var(--tint);
    border:1px solid color-mix(in srgb, var(--tint) 60%, var(--border));
    flex-shrink:0;
  }
  .colorpick-off {
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; padding:0;
    border:0; border-radius:50%; background:none;
    color:color-mix(in srgb, var(--tint) 70%, var(--ink));
    font-size:9px; cursor:pointer;
  }
  .colorpick-off:hover { background:color-mix(in srgb, var(--tint) 22%, transparent); }

  .colorpick-palette { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-2); }
  .colorpick-swatch {
    position:relative;
    width:24px; height:24px; padding:0;
    border-radius:var(--radius-sm);
    border:1px solid color-mix(in srgb, var(--tint) 45%, var(--border));
    background-image:linear-gradient(170deg,
      color-mix(in srgb, var(--tint) 60%, var(--box-fade)) 0, var(--box-fade) 100%);
    box-shadow:var(--pill-lip);
    cursor:pointer;
    transition:transform var(--speed) var(--ease);
  }
  .colorpick-swatch:hover { transform:translateY(-1px); }
  
  .colorpick.is-full .colorpick-palette { opacity:.4; pointer-events:none; }
  .colorpick-own { border-style:dashed; display:inline-block; }
  .colorpick-own input[type="color"] {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; border:0; padding:0; background:none; cursor:pointer;
  }
  .colorpick-raw { font-size:var(--fs-xs); }

  .tintpick { display:flex; flex-wrap:wrap; gap:7px; }
  .tintpick-one { cursor:pointer; line-height:0; }
  
  .tintpick-one > input[type="radio"] {
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  }
  .tintpick-dab {
    display:block; width:30px; height:30px;
    border-radius:var(--radius-sm);
    border:1px solid color-mix(in srgb, var(--tint, var(--border-2)) 40%, var(--border));
    background-image:linear-gradient(170deg,
      color-mix(in srgb, var(--tint, var(--box-fade)) 55%, var(--box-fade)) 0,
      var(--box-fade) 100%);
    box-shadow:var(--pill-lip);
    transition:transform var(--speed) var(--ease), outline-color var(--speed) var(--ease);
    outline:2px solid transparent; outline-offset:2px;
  }
  .tintpick-one.is-plain .tintpick-dab {
    background-image:linear-gradient(170deg, var(--clay-soft) 0, var(--box-fade) 100%);
  }
  .tintpick-one:hover .tintpick-dab { transform:translateY(-1px); }
  
  .tintpick-one > input[type="radio"]:checked + .tintpick-dab {
    outline-color:var(--clay-deep);
  }
  .tintpick-one > input[type="radio"]:focus-visible + .tintpick-dab {
    outline-color:var(--clay);
  }

  
  .tintpick-own { position:relative; }
  .tintpick-own .tintpick-dab {
    border-style:dashed;
    border-color:color-mix(in srgb, var(--tint) 60%, var(--border-2));
  }
  .tintpick-own.is-on .tintpick-dab { border-style:solid; }
  .tintpick-own .tintpick-wheel {
    position:absolute; inset:0; z-index:2;
    width:100%; height:100%;
    opacity:0; cursor:pointer;
    border:0; padding:0; background:none;
  }

  .tagpick { display:flex; flex-wrap:wrap; gap:5px; }
  .tagpick-one { cursor:pointer; }
  .tagpick-one > input {
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  }
  .tagpick-one > span {
    display:inline-flex; align-items:center;
    padding:3px 11px; border-radius:var(--pill);
    font-size:11px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; line-height:1.4;
    border:1px dashed var(--border-2);
    color:var(--ink-faint);
    transition:border-color var(--speed) var(--ease), background-color var(--speed) var(--ease),
               color var(--speed) var(--ease);
  }
  .tagpick-one:hover > span { border-color:var(--tag); color:var(--tag); }
  
  .tagpick-one > input:checked + span {
    border-style:solid;
    border-color:color-mix(in srgb, var(--tag) 55%, transparent);
    background:color-mix(in srgb, var(--tag) 14%, var(--paper));
    color:color-mix(in srgb, var(--tag) 78%, var(--ink));
  }
  
  .tagpick-one > input:focus-visible + span {
    outline:2px solid var(--clay); outline-offset:2px;
  }

  .upd-empty {
    display:flex; align-items:center; gap:7px;
    font-size:var(--fs-sm); color:var(--ink-faint);
  }
  .upd-empty i { color:var(--icon); }

  
  .upd-reacts { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
  .upd-react {
    display:inline-flex; align-items:center; gap:4px;
    padding:1px 8px; min-height:22px; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--pill);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    font-family:inherit; font-size:var(--fs-xs); line-height:1;
    color:var(--ink-soft);
    transition:filter var(--speed) var(--ease), border-color var(--speed) var(--ease),
               color var(--speed) var(--ease);
  }
  .upd-react:hover { filter:brightness(1.05); }
  
  .upd-react.mine {
    border-color:var(--trim); color:var(--ink); font-weight:600;
  }
  .upd-react-em { font-size:.88rem; line-height:1; }

  
  .upd-react, .upd-react-n, .chip-tag, .upd-tag, .poll-cat, .poll-tab,
  .res-tab, .legal-n, .rulelist--numbered li::before, .tabs, .foot-btn, .btn,
  
  .news-fact, .find-tags .res-pill, .wanted-word {
    text-box:trim-both cap alphabetic;
  }
  .upd-react-em { text-box:normal; }
  .upd-react-n { font-variant-numeric:tabular-nums; }

  .upd-admin { margin-top:2px; }
  .upd-edit {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; color:var(--ink-faint);
    opacity:.65; transition:opacity var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .upd-edit:hover { opacity:1; color:var(--icon); }
  .upd-edit i { font-size:8px; opacity:.7; color:var(--icon); }

  
  .upd-scroll { display:flex; flex-direction:column; gap:var(--sp-3); }
  .upd-scroll.tall {
    max-height:320px; overflow-y:auto; padding-right:var(--sp-2);
    --fade:16px; --fade-top:0px; --fade-bot:16px;
    mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
  }

  
  .upd-buttons {
    display:flex; gap:5px;
    margin-top:var(--sp-4);
  }
  .upd-more {
    flex:1;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:6px var(--sp-3);
    border:1px dashed var(--border-2); border-radius:var(--pill);
    
    font-family:inherit; background:none; cursor:pointer;
    font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft);
    transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  
  .upd-more:hover {
    color:var(--icon);
    border-color:color-mix(in srgb, var(--icon) 40%, var(--border-2));
  }
  .upd-more:hover i { color:var(--ink); }
  .upd-more i { font-size:9px; opacity:.7; color:var(--icon); }

  .upd-end {
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
    font-size:var(--fs-xs); color:var(--ink-faint);
  }
  .upd-end i { font-size:9px; opacity:.7; color:var(--icon); }

  
  .updrow { align-items:flex-start; }
  .updrow-body { flex:1; min-width:0; }
  .updrow-text { font-size:var(--fs-sm); color:var(--ink-soft); overflow-wrap:anywhere; }
  .updrow-when {
    margin-top:3px; font-size:11px; color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }
  .updrow-when i { font-size:8px; opacity:.7; margin-right:4px; color:var(--icon); }

  
  
  .jam { display:flex; flex-direction:column; gap:5px; }
  
  .jam-row {
    position:relative;
    display:flex; align-items:center; gap:var(--sp-3);
    padding:10px 12px 9px;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
  }
  .jam-row::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed var(--border-2);
    border-radius:calc(var(--radius-sm) - 3px);
    opacity:.75;
  }
  
  .jam-cover { position:relative; flex-shrink:0; line-height:0; }
  .jam-art {
    width:64px; height:64px;
    border:1px solid var(--border-2);
    border-radius:var(--radius-sm);
    background-image:linear-gradient(150deg, var(--gold) 0%, var(--clay) 55%, var(--plum) 100%);
    display:flex; align-items:center; justify-content:center;
    color:rgba(253,246,234,.8);
    box-shadow:var(--shadow-sm);
    object-fit:cover;
    
    outline:1.5px dashed color-mix(in srgb, var(--paper) 55%, transparent);
    outline-offset:-4px;
  }
  
  
  .jam-what {
    flex:1; min-width:0; align-self:stretch;
    display:flex; flex-direction:column; align-items:stretch;
  }
  
  .jam-track, .jam-artist { display:flex; align-items:baseline; gap:6px; }
  .jam-track > span, .jam-artist > span {
    position:relative; min-width:0; overflow-wrap:anywhere;
  }
  
  .jam-track > i, .jam-artist > i {
    flex:0 0 12px; width:12px;
    display:inline-flex; align-items:center; justify-content:center;
    
    font-size:10px; opacity:.8; color:var(--icon);
  }
  
  .jam-status > i, .jam-status .jam-eq {
    position:absolute; left:0; top:.28em;
    width:12px; display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; opacity:.8; color:var(--icon);
  }

  .jam-track {
    position:relative; text-align:left;
    
    font-weight:700; font-size:var(--fs-xs); color:var(--ink);
    padding-bottom:1px;
    transition:color var(--speed) var(--ease);
  }
  
  
  
  .jam-artist { margin-top:1px; text-align:left; font-size:11px; }

  
  .jam-song {
    
    flex:1; min-height:64px;
    display:flex; flex-direction:column; justify-content:center;
    padding:6px 9px; border-radius:var(--radius-sm);
    border:1px solid var(--border-2);
    
    background:transparent;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-4px;
  }
  
  .jam-status {
    
    display:block; padding-left:18px; position:relative;
    margin-top:4px; line-height:1.4;
    
    font-size:11px; color:var(--ink-faint);
  }
  .jam-status i { font-size:9px; opacity:.7; color:var(--icon); }

  
  
  .jam-dot {
    position:absolute; top:-3px; right:-3px;
    width:9px; height:9px; border-radius:50%;
    background:var(--ink-faint);
    box-shadow:0 0 0 2px var(--box-fade);
  }
  .jam-dot.on { background:var(--icon); }
  .jam-dot.on::after {
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--icon);
    animation:jam-pulse 1.8s ease-out infinite;
  }
  @keyframes jam-pulse {
    from { transform:scale(1);   opacity:.55; }
    to   { transform:scale(2.6); opacity:0;   }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .jam-dot.on::after { animation:none; opacity:0; }
  }

  
  .jam-eq {
    display:inline-flex; align-items:flex-end; gap:2px;
    height:9px; flex-shrink:0;
  }
  
  .jam-status .jam-eq { align-items:flex-end; opacity:1; top:.2em; }
  .jam-eq span {
    width:2px; height:100%; border-radius:1px;
    background:var(--icon); transform-origin:bottom;
    animation:jam-eq 1s ease-in-out infinite;
  }
  .jam-eq span:nth-child(2) { animation-delay:.18s; }
  .jam-eq span:nth-child(3) { animation-delay:.36s; }
  @keyframes jam-eq {
    0%, 100% { transform:scaleY(.3); }
    50%      { transform:scaleY(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .jam-eq span { animation:none; transform:scaleY(.65); }
    .jam-eq span:nth-child(2) { transform:scaleY(1); }
  }

  
  
  
  .shout-scroll {
    
    display:flex; flex-direction:column; gap:var(--sp-2);
    max-height:340px; overflow-y:auto;
    padding-right:var(--sp-2);
    
    --fade:16px; --fade-top:0px; --fade-bot:16px;
    mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
  }
  
  .shout-scroll:not(:has(.shout + .shout)) {
    mask-image:none; -webkit-mask-image:none;
  }
  
  .shout { display:flex; flex-direction:column; gap:3px; padding:10px 12px 9px; }

  
  .bubble.is-folded {
    max-height:7.4em; overflow:hidden;
    mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
  }
  .shout-more {
    align-self:flex-start; cursor:pointer;
    padding:0; border:0; background:none;
    font-family:inherit; font-size:var(--fs-xs); font-weight:600;
    color:var(--icon);
    transition:color var(--speed) var(--ease);
  }
  
  .shout-more:hover { color:var(--link-hover); }
  .shout-more i { font-size:9px; margin-right:4px; color:var(--icon); }

  
  
  .shout-head {
    display:flex; align-items:center; gap:5px; flex-wrap:wrap;
    min-width:0;
  }
  
  
  .shout-head > .news-fact { min-width:0; max-width:100%; padding:3px 9px; gap:5px; }
  
  .shout-scroll .shout-head > .news-fact { gap:2px; padding:3px 7px; }
  
  .shout-scroll .shout-head > .shout-when {
    padding:2px 6px; font-size:10px;
  }
  .shout-scroll .shout-head > .shout-when i { font-size:8px; }
  
  .shout-scroll .shout-head > .shout-when + .shout-when { margin-left:-2px; }

  
  .upd-head > .upd-when:not(.upd-when + .upd-when),
  .shout-head > .shout-when:not(.shout-when + .shout-when) { margin-left:auto; }

  
  .upd-head > .upd-who { padding:3px 7px; gap:2px; }
  .upd-head > .upd-when {
    padding:2px 6px; font-size:10px;
  }
  .upd-head > .upd-when i { font-size:8px; }
  .upd-head > .upd-when + .upd-when { margin-left:3px; }

  
  .shout-scroll .shout-head { flex-wrap:nowrap; }
  .shout-scroll .shout-head > .news-fact:first-child { flex:0 1 auto; min-width:0; }
  .shout-scroll .shout-head > .news-fact i { font-size:9px; }
  
  .shout-head > .news-fact.shout-when { flex:0 0 auto; margin-left:auto; }
  .news-fact .shout-name {
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  
  .shout-name { font-size:var(--fs-sm); min-width:0; }
  
  span.shout-name {
    font-weight:400; color:var(--clay-deep);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  
  a.shout-name { overflow-wrap:anywhere; }
  .news-fact a.shout-name {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    overflow-wrap:normal; min-width:0;
  }

  
  
  
  
  .bubble {
    align-self:stretch;
    padding-top:2px;
    
    font-size:var(--fs-sm); color:var(--ink-soft);
    overflow-wrap:anywhere;
  }
  
  .shout-reply .bubble { font-size:var(--fs-sm); }

  
  .shout-said {
    min-width:0; font-size:var(--fs-xs); color:var(--ink-faint);
    font-style:italic;
  }
  .shout-said .shout-name { font-size:inherit; font-weight:600; }
  .shout-said time { font-variant-numeric:tabular-nums; }

  
  .shout-out { margin-left:4px; font-size:.8em; opacity:.7; }

  
  
  .shout-reply {
    display:flex; flex-direction:column; gap:2px;
    margin:6px 0 0;
    padding-left:var(--sp-2);
    border-left:2px solid var(--trim);
    font-size:var(--fs-xs);
  }
  .shout-reply .shout-name { color:var(--sage-deep); font-size:var(--fs-xs); }
  
  .shout-reply .bubble {
    padding:0; border:0; background:none; border-radius:0;
    font-size:var(--fs-xs); font-style:italic;
  }

  
  @keyframes shout-said {
    to {
      opacity:0; max-height:0;
      margin:0; padding-top:0; padding-bottom:0; border-width:0;
    }
  }
  #shout-thread > .notice {
    overflow:hidden; max-height:8em;
    animation:shout-said .5s var(--ease) 5s forwards;
  }

  
  @property --fade-top {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
  }
  @property --fade-bot {
    syntax: "<length>";
    initial-value: 16px;
    inherits: false;
  }
  @keyframes fade-the-top { to { --fade-top: var(--fade); } }
  @keyframes fade-the-bottom { to { --fade-bot: 0px; } }

  @supports (animation-timeline: scroll()) {
    .shout-scroll, .stufflist--scroll, .upd-scroll.tall, .pairlist--scroll, .past-grid {
      animation: fade-the-top linear both, fade-the-bottom linear both;
      animation-timeline: scroll(self block), scroll(self block);
      
      animation-range: 0 var(--fade), calc(100% - var(--fade)) 100%;
    }
  }

  
  .shout-pager {
    display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
  }
  .shout-pager-at {
    font-size:var(--fs-xs); color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }

  .shout-ic { font-size:10px; color:var(--icon); flex-shrink:0; }
  .shout-empty {
    display:flex; align-items:center; gap:7px;
    font-size:var(--fs-sm); color:var(--ink-faint);
  }
  .shout-empty i { color:var(--icon); }
  
  .shout-when i { font-size:8px; opacity:.7; margin-right:4px; color:var(--icon); }

  
  .field:has(> .ed) textarea { padding-left:12px; }

  
  
  
  .shout-admin {
    position:relative;
    display:flex; align-items:center; flex-wrap:nowrap; gap:2px var(--sp-2);
    min-height:1.5em; margin-top:4px;
    font-size:11px; color:var(--ink-faint);
  }
  .shout-admin:has(.shout-tools[open]) { flex-wrap:wrap; }
  .shout-meta-bit {
    display:inline-flex; align-items:center; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:var(--mono, ui-monospace, monospace);
    opacity:.65; transition:opacity var(--speed) var(--ease);
  }
  .shout-meta-bit i { flex-shrink:0; }
  .shout-meta-bit:hover { opacity:1; }
  .shout-meta-bit i { font-size:8px; opacity:.7; margin-right:4px; color:var(--icon); }

  
  .shout-tools { margin-left:auto; }
  .shout-tools[open] { flex:1 1 100%; margin-left:0; }
  .shout-tools[open] > summary { position:absolute; top:0; right:0; }
  .shout-tools > summary {
    display:inline-flex; cursor:pointer; list-style:none; width:max-content;
  }
  .shout-tools > summary::-webkit-details-marker { display:none; }
  .shout-tools-cue {
    white-space:nowrap; font-weight:600;
    opacity:.65; transition:opacity var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .shout-tools > summary:hover .shout-tools-cue,
  .shout-tools[open] .shout-tools-cue { opacity:1; color:var(--icon); }
  .shout-tools-cue i { font-size:8px; opacity:.7; margin-right:4px; color:var(--icon); }
  .shout-tool-form {
    display:flex; flex-direction:column; gap:5px;
    margin-top:var(--sp-2); padding-top:var(--sp-2);
    border-top:1px dashed var(--border-2);
  }
  .shout-tool-form input[type="text"],
  .shout-tool-form textarea {
    width:100%; font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--radius-sm); padding:8px 11px;
  }
  .shout-tool-form textarea { min-height:54px; resize:vertical; }
  .shout-tool-form input:focus, .shout-tool-form textarea:focus {
    border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .shout-tool-row { display:flex; justify-content:flex-end; gap:5px; }
  .foot-btn.danger { border-color:var(--berry); color:var(--berry); }
  .foot-btn.danger .fbic { color:var(--berry); }
  
  
  
  .shout-when {
    margin-left:auto; flex-shrink:0; white-space:nowrap;
    font-size:11px; color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }

  
  
  .field { position:relative; }
  
  .field[hidden] { display:none; }

  
  .fields { display:flex; flex-direction:column; gap:var(--sp-4); }

  
  
  .shout-form {
    display:flex; flex-direction:column; gap:var(--sp-3);
    margin-bottom:var(--sp-4); padding-bottom:var(--sp-4);
    border-bottom:1px dashed var(--border-2);
  }
  .shout-form .btn { margin-top:var(--sp-1); }
  
  
  .shout-form .field .ed textarea,
  .shout-form .ed-visual,
  .shout-tool-form .ed textarea,
  .shout-tool-form .ed-visual,
  .shout-tool-form textarea {
    line-height:1.6;
    min-height:calc(3.2em + 20px);
  }
  .field .fic { color:var(--sage-deep);
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    color:var(--ink-faint); pointer-events:none; display:inline-flex;
  }
  
  
  .field input, .field textarea {
    width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
    background:transparent; border:1px solid var(--border-2); border-radius:var(--pill);
    padding:7px 12px 7px 32px; line-height:1.3;
    transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  }
  .field textarea { border-radius:var(--radius-sm); resize:vertical; min-height:62px; }
  .field input:focus, .field textarea:focus {
    border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }

  
  .field input, .field textarea, .field select,
  .res-search input,
  .shout-tool-form input[type="text"], .shout-tool-form textarea,
  :is(.affi-edit, .credit-edit) input[type="text"],
  :is(.affi-edit, .credit-edit) input[type="url"],
  :is(.affi-edit, .credit-edit) select,
  .ans-row input {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    outline-offset:-5px;
  }
  
  .shout-tool-form input[type="text"], .shout-tool-form textarea,
  :is(.affi-edit, .credit-edit) input[type="text"],
  :is(.affi-edit, .credit-edit) input[type="url"],
  :is(.affi-edit, .credit-edit) select,
  .ans-row input { outline-offset:-4px; }

  .field input:focus, .field textarea:focus, .field select:focus,
  .res-search input:focus,
  .shout-tool-form input:focus, .shout-tool-form textarea:focus,
  :is(.affi-edit, .credit-edit) input:focus,
  :is(.affi-edit, .credit-edit) select:focus,
  .ans-row input:focus {
    outline-color:color-mix(in srgb, var(--clay) 60%, transparent);
  }
  .field input::placeholder, .field textarea::placeholder { color:var(--ink-faint); }

  
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    width:100%; cursor:pointer;
    
    padding:5px var(--sp-4); line-height:1.3;
    
    border:1px solid var(--border-2); border-radius:var(--pill);
    font-family:inherit; font-size:var(--fs-sm); font-weight:700;
    color:var(--clay-deep);
    background-image:var(--btn-fill);
    box-shadow:var(--pill-lip), var(--shadow-sm);
    transition:filter var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  .btn i { color:var(--clay-deep); }
  
  .btn:hover { filter:brightness(1.05); }

  

  

  @media (max-width:1080px) {
    .cols { grid-template-columns: 256px minmax(0,1fr); }
    .col.shout-col { grid-column:1 / -1; }
  }
  @media (max-width:720px) {
    .cols { grid-template-columns:minmax(0,1fr); }
    .navgrid::after { display:none; }
    .hero { min-height:230px; }
  }

  
  
  .signoff-line {
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
  }
  .signoff {
    display:inline-block; margin-top:4px;
    font-family:var(--script); font-weight:400;
    font-size:1.75rem; line-height:1;
    color:var(--sage-deep);
    text-shadow:var(--shadow-text);
  }
  .signoff .hrt { color:var(--berry); font-size:.8em; }
  .signoff .hrt { color:var(--berry); }

  

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

  
  
  
  .factrow {
    display:flex; flex-wrap:wrap;
    gap:var(--sp-3) var(--sp-4);
  }
  .factrow > div {
    flex:1 1 auto; min-width:max-content;
    padding:var(--sp-2) var(--sp-3);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
  }
  .factrow dt {
    font-size:var(--fs-xs); color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.06em;
    display:flex; align-items:center; gap:6px;
    white-space:nowrap;
  }
  .factrow dt i { color:var(--sage-deep); }
  .factrow dd { margin-top:2px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); }

  .factlist { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); }
  .factlist dt { color:var(--ink-soft); white-space:nowrap; }
  .factlist dt i { color:var(--sage-deep); }
  .factlist dd { color:var(--ink); font-weight:600; }

  .story p { margin-bottom:var(--sp-3); }
  .story-date {
    font-size:var(--fs-md); color:var(--sage-deep);
    margin-top:var(--sp-5); margin-bottom:var(--sp-2);
  }
  .story-date:first-child { margin-top:0; }
  .story-date i { color:var(--gold-deep); }
  .story-close { color:var(--ink); }
  .story-close .hrt { color:var(--berry); }

  
  
  .past-grid {
    --tile:120px;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));
    gap:var(--sp-2);
    max-height:calc((var(--tile) * 0.8 * 3) + (var(--sp-2) * 2));
    overflow-y:auto; padding-right:var(--sp-2);
    --fade:16px; --fade-top:0px; --fade-bot:16px;
    mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
  }
  .past-thumb {
    position:relative;
    
    padding:0; border:1px solid var(--trim); border-radius:var(--radius-sm);
    background:var(--paper); cursor:pointer; overflow:hidden; aspect-ratio:5/4;
    transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  .past-thumb img {
    width:100%; height:100%; object-fit:cover; object-position:center top;
    display:block;
    
    transition:transform 420ms var(--ease);
  }
  
  .past-thumb:hover img, .past-thumb:focus-visible img { transform:scale(1.06); }
  @media (prefers-reduced-motion: reduce) { .past-thumb img { transition:none; } }
  
  .past-thumb::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:rgba(40,30,22,0);
    transition:background-color var(--speed) var(--ease);
  }
  .past-thumb:hover, .past-thumb:focus-visible {
    border-color:var(--sage-deep); box-shadow:var(--shadow-sm);
    
    outline:1.5px dashed color-mix(in srgb, var(--paper) 72%, transparent);
    outline-offset:-5px;
  }
  
  .past-thumb:hover::before, .past-thumb:focus-visible::before {
    background:rgba(40,30,22,.22);
  }
  @media (prefers-reduced-motion: reduce) { .past-thumb::before { transition:none; } }
  
  .past-no {
    position:absolute; left:4px; bottom:4px; z-index:2;
    min-width:18px; height:18px; padding:0 4px; border-radius:var(--pill);
    background:rgba(40,30,22,.62); color:var(--paper);
    font-size:10px; line-height:18px; text-align:center;
    font-variant-numeric:tabular-nums;
  }

  
  .triple { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--box-gap); align-items:start; }
  @media (max-width:1180px) { .triple { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:760px)  { .triple { grid-template-columns:minmax(0,1fr); } }

  .pairlist { display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-sm); }
  
  
  .pairlist--scroll {
    --rows:6;
    max-height:calc(var(--rows) * 32px);
    overflow-y:auto; padding-right:var(--sp-2);
    --fade:16px; --fade-top:0px; --fade-bot:16px;
    mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
  }

  .pairlist--cards { gap:5px; }
  .pairlist--cards li { padding:9px 12px 8px; }

  
  .pairlist--two {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  
  
  .pairlist.pairlist--two li,
  .pairlist.pairlist--cols li {
    
    display:grid; grid-template-columns:auto minmax(0, 1fr);
    align-items:center; gap:1px var(--sp-2);
  }
  .pairlist.pairlist--two li > i,
  .pairlist.pairlist--cols li > i { grid-column:1; grid-row:1; }
  .pairlist.pairlist--two .pl-label,
  .pairlist.pairlist--cols .pl-label { grid-column:2; grid-row:1; }
  .pairlist.pairlist--two .pl-label,
  .pairlist.pairlist--cols .pl-label {
    margin-right:0; font-weight:700; font-size:var(--fs-xs); color:var(--clay-deep);
  }
  .pairlist.pairlist--two li > :last-child,
  .pairlist.pairlist--cols li > :last-child {
    
    grid-column:1 / -1; grid-row:2;
    font-weight:400; font-size:var(--fs-sm); color:var(--ink-soft);
    overflow-wrap:break-word; min-width:0; max-width:100%;
  }
  
  .pairlist--cols {
    
    display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
  }
  @media (max-width:520px) {
    .pairlist--two { grid-template-columns:minmax(0, 1fr); }
  }
  .pairlist li { display:flex; align-items:baseline; gap:var(--sp-2); }
  .pairlist i { color:var(--sage-deep); }
  
  .pairlist .pl-label { font-weight:600; color:var(--ink); margin-right:var(--sp-2); }

  .chiplist { display:flex; flex-wrap:wrap; gap:6px; }
  
  
  .chip-tag {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:28px; padding:1px 11px 0; border-radius:var(--pill);
    background:var(--pill-fill); border:1px solid var(--border-2);
    
    font-size:var(--fs-xs); line-height:1; color:var(--ink);
    box-shadow:var(--pill-lip);
  }
  

  .fav-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--sp-4); }
  .fav-head {
    display:flex; align-items:center; gap:7px;
    font-size:var(--fs-label); font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold-deep); margin-bottom:var(--sp-2);
  }
  .fav-head i { color:var(--sage-deep); }

  
  
  
  
  .affi-wall {
    
    display:grid; grid-template-columns:repeat(auto-fill, 99px);
    gap:var(--sp-2); justify-content:start;
  }
  
  .affi {
    display:flex; align-items:center; justify-content:center;
    box-sizing:content-box;
    width:88px; height:31px; padding:4px;
    
    border:1.5px solid var(--clay); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    overflow:hidden;
    transition:filter var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  
  .affi img { width:88px; height:31px; display:block; object-fit:cover; }
  
  .affi:hover, .affi:focus-visible {
    
    filter:brightness(1.12) saturate(1.12);
    
    border-color:color-mix(in srgb, var(--clay) 66%, var(--paper));
  }
  
  .affi-text {
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               border-color var(--speed) var(--ease);
  }
  
  .affi-text:hover, .affi-text:focus-visible { filter:brightness(1.05); }
  .affi-text:hover span, .affi-text:focus-visible span { color:var(--icon); }
  .affi-text span {
    padding:0 5px; font-size:11px; line-height:1.15; font-weight:600;
    text-align:center; color:var(--ink);
    overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere;
  }

  
  .creditlist { display:flex; flex-direction:column; gap:5px; font-size:var(--fs-sm); }
  .creditlist li { display:flex; align-items:baseline; gap:6px; padding:9px 12px 8px; }
  .creditlist i { font-size:8px; color:var(--gold-deep); flex-shrink:0; }
  

  .creditlist li[title] { }

  
  
  
  .skill-split {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--sp-3); align-items:start;
  }
  
  @media (max-width:640px) { .skill-split { grid-template-columns:minmax(0,1fr); } }
  
  .skill-groups { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
  .skills { display:flex; flex-direction:column; gap:var(--sp-2); }
  .skill { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-sm); }
  .skill-icon { color:var(--clay-deep); font-size:15px; flex-shrink:0; }
  .skill-name { flex:1; min-width:0; color:var(--ink); }
  
  .skill-name small {
    
    display:inline; white-space:nowrap;
    font-size:var(--fs-xs); color:var(--ink-faint);
    letter-spacing:.04em;
  }
  .skill-name small::before { content:"·"; margin:0 .35em; opacity:.6; }
  .stars { display:inline-flex; gap:3px; flex-shrink:0; }
  .stars i { font-size:11px; color:var(--border-2); }
  .stars i.on { color:var(--sage-deep); }

  
  .faq { display:flex; flex-direction:column; gap:var(--sp-2); }

  
  .doc-dates {
    display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
    margin-top:var(--sp-3);
    font-size:var(--fs-xs); font-style:italic; color:var(--ink-faint);
  }
  .doc-dates i { margin-right:5px; color:var(--icon); }
  
  .faq-item {
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    overflow:hidden;
    background:linear-gradient(180deg, var(--pill-green) 0, var(--box-fade) 88px);
    background-repeat:no-repeat;
    box-shadow:var(--pill-lip);
  }
  
  .faq-item summary {
    display:flex; align-items:center; gap:var(--sp-2);
    padding:var(--sp-3); cursor:pointer; list-style:none;
    font-family:var(--sans); font-size:var(--fs-sm); font-weight:400;
    color:var(--ink); background:transparent;
  }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary > span { flex:1; }
  .faq-item summary > i:first-child { color:var(--sage-deep); flex-shrink:0; }
  .faq-chev { color:var(--ink-faint); font-size:11px; transition:transform var(--speed) var(--ease); }
  .faq-item[open] .faq-chev { transform:rotate(180deg); }

  
  
  
  .id-card {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    gap:var(--sp-4); align-items:start;
  }
  @media (max-width:440px) {
    .id-card { grid-template-columns:minmax(0,1fr); }
    .avatar { max-width:170px; margin-inline:auto; }
  }

  .avatar-wrap { text-align:center; }

  
  
  .avatar-frame {
    position:relative;
    padding:9px;
    background:linear-gradient(180deg, var(--trim-soft) 0, var(--box-fade) 100%);
    border:1px solid var(--trim); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
  }
  .avatar-frame > .lace-edge { display:none; }
  .avatar-frame::after {
    content:""; position:absolute; z-index:2; pointer-events:none;
    inset:4px;
    border:1.5px dashed var(--border-2);
    border-radius:calc(var(--radius-sm) - 2px);
    opacity:.75;
  }
  
  .avatar {
    width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top;
    
    border-radius:calc(var(--radius-sm) - 5px);
    box-shadow:0 0 0 1px var(--border-2);
    
    margin:0; display:block;
  }
  
  .avatar-name {
    margin-top:var(--sp-2);
    font-family:var(--script); font-weight:400;
    font-size:1.75rem; line-height:1;
    color:var(--sage-deep);
    text-shadow:var(--shadow-text);
  }
  .avatar-symbol { color:var(--berry); font-size:.8em; }

  

  
  
  
  .hero-row { position:relative; }
  
  .admin-bar {
    --admin-gap: max(0px, calc((100vw - 1712px) / 2));
    position:absolute; z-index:0;
    top:58px; right:100%;
    display:flex; flex-direction:column; gap:9px;
    
    align-items:flex-end;
  }
  
  .admin-btn {
    display:flex; align-items:center; gap:9px;
    
    width:max-content; height:36px;
    padding-left:15px; padding-right:24px;
    border:1px solid var(--border-2); border-right:0;
    border-radius:var(--pill) 0 0 var(--pill);
    background:var(--pill-fill);
    box-shadow:var(--pill-lip), -3px 2px 8px rgba(88,63,46,.22);
    font-size:var(--fs-xs); font-weight:600; color:var(--ink);
    white-space:nowrap;
    
    transform:translateX(calc(100% - min(34px, var(--admin-gap))));
    
    transition:transform 420ms cubic-bezier(.22,.92,.26,1),
               color var(--speed) var(--ease);
  }
  .admin-btn i { font-size:14px; color:var(--icon); flex-shrink:0;
                 transition:var(--icon-ease); }

  
  .admin-dot {
    position:absolute; top:5px; left:6px;
    width:9px; height:9px; border-radius:50%;
    background:var(--berry);
    box-shadow:0 0 0 2px var(--box-fade), 0 1px 3px rgba(88,63,46,.5);
  }
  @media (prefers-reduced-motion: no-preference) {
    .admin-dot { animation:dotPulse 2.4s ease-in-out infinite; }
  }
  @keyframes dotPulse {
    0%, 100% { transform:scale(1);    opacity:1; }
    50%      { transform:scale(1.18); opacity:.85; }
  }
  
  .admin-btn { position:relative; }

  
  .foot-btn.notice { border-color:var(--berry); }
  .foot-btn.notice .fbic { color:var(--berry); }

  
  .mtile.has-waiting { border-color:var(--berry); }
  .mtile-dot {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; margin-left:auto;
    border-radius:var(--pill); background:var(--berry); color:#fff9f2;
    font-size:10px; font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; flex-shrink:0;
  }
  
  .admin-btn:hover, .admin-btn:focus-visible, .admin-btn[aria-current="page"] {
    transform:translateX(calc(14px + max(0px, 100% - 14px - var(--admin-gap))));
    color:var(--icon);
  }
  .admin-btn:hover i, .admin-btn:focus-visible i,
  .admin-btn[aria-current="page"] i { color:var(--ink); }
  @media (prefers-reduced-motion: reduce) { .admin-btn { transition:none; } }
  
  @media (max-width:820px) {
    .hero-row { flex-direction:column; }
    .admin-bar {
      flex-direction:row; justify-content:center;
      width:100%; margin-top:var(--sp-5); margin-bottom:calc(var(--sp-5) * -1);
    }
  }

  
  
  
  .page-foot { margin-top:calc(var(--sp-4) - var(--box-gap)); }

  
  .poll-form { margin:0; }
  .poll-set { border:0; padding:0; margin:0; min-width:0; }
  
  .poll-cat {
    display:inline-flex; align-items:center;
    margin-bottom:5px; padding:1px 9px; border-radius:var(--pill);
    font-size:9px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; line-height:1.6;
    border:1px solid color-mix(in srgb, var(--cat) 50%, transparent);
    background:color-mix(in srgb, var(--cat) 13%, var(--paper));
    color:color-mix(in srgb, var(--cat) 70%, var(--ink));
  }
  
  .poll-cat[style*="--cat2"] {
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--cat) 15%, var(--paper)),
      color-mix(in srgb, var(--cat2) 15%, var(--paper)));
  }

  
  .poll-icon { flex-shrink:0; font-size:13px; width:1.1em; text-align:center; }

  
  .poll-q {
    padding:0;
    
    font-family:var(--serif); font-size:var(--fs-lg);
    font-weight:600; color:var(--clay-deep);
  }
  .poll-how {
    display:flex; align-items:center; gap:6px;
    margin:3px 0 var(--sp-3);
    font-size:11px; color:var(--ink-faint);
  }
  .poll-how i { font-size:9px; opacity:.7; color:var(--icon); }

  
  .poll-options { display:flex; flex-direction:column; gap:5px; margin-top:var(--sp-3); }

  
  .poll-drawn {
    flex-direction:row; flex-wrap:wrap; gap:10px;
    
    display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  }
  .poll-drawn .poll-option {
    flex-direction:column; align-items:center; text-align:center;
    gap:8px; padding:12px 10px 14px;
    border:1px solid var(--lace-edge); border-radius:var(--radius);
    background:var(--paper-soft);
    transition:border-color .2s, transform .25s, background .2s;
  }
  .poll-drawn .poll-option:hover { transform:translateY(-3px); border-color:var(--sage); }
  .poll-drawn .poll-option:has(input:checked) {
    border-color:var(--sage-deep); background:var(--paper);
  }
  .poll-art { display:block; width:100%; }
  .poll-art svg { display:block; width:100%; height:120px; }
  .poll-drawn .poll-text { font-size:var(--fs-xs); line-height:1.45; }

  
  .poll-drawn .poll-option:has(input:focus-visible) { outline:2px solid var(--sage-deep); outline-offset:2px; }

  @media (max-width:560px) {
    .poll-drawn { grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); }
    .poll-art svg { height:92px; }
  }

  
  .poll-option {
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:9px;
    
    padding:10px 13px; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    
    font-size:var(--fs-sm); color:var(--ink-soft);
    transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  
  .poll-option {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
  }
  .poll-option:hover {
    border-color:var(--trim); color:var(--ink);
    outline-color:color-mix(in srgb, var(--trim) 40%, transparent);
  }
  
  .poll-option.mine {
    outline-color:color-mix(in srgb, var(--trim) 45%, transparent);
  }
  .poll-option > input {
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  }

  
  .poll-option.voted::before {
    content:""; position:absolute; inset:0 auto 0 0;
    width:var(--share); border-radius:inherit;
    background:color-mix(in srgb, var(--trim) 16%, transparent);
    transition:width 600ms var(--ease);
  }
  .poll-option.voted.mine::before {
    background:color-mix(in srgb, var(--trim) 30%, transparent);
  }

  
  @keyframes poll-grow { from { width:0; } }
  @keyframes poll-said { from { opacity:0; transform:translateY(2px); } }

  .poll-option.voted::before { animation:poll-grow 700ms var(--ease) both; }
  .poll-option:nth-child(2)::before { animation-delay:60ms; }
  .poll-option:nth-child(3)::before { animation-delay:120ms; }
  .poll-option:nth-child(4)::before { animation-delay:180ms; }
  .poll-option:nth-child(5)::before { animation-delay:240ms; }
  .poll-option:nth-child(6)::before { animation-delay:300ms; }
  .poll-option:nth-child(n+7)::before { animation-delay:360ms; }

  
  .poll-count { animation:poll-said 500ms var(--ease) 260ms both; }
  .poll-option > * { position:relative; }

  
  .poll-mark {
    flex-shrink:0; width:15px; height:15px;
    border:1px solid var(--border-2); background:var(--paper);
    transition:border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  }
  
  .poll-mark { border-radius:4px; }
  
  .poll-mark { position:relative; }
  .poll-option > input:checked + .poll-mark {
    border-color:var(--trim);
    background:var(--trim);
  }
  
  .poll-option > input:focus-visible + .poll-mark {
    outline:2px solid var(--clay); outline-offset:2px;
  }

  
  .poll-mark--flat { border-color:transparent; background:none; }
  .poll-mark--flat.is-mine {
    border-color:var(--trim); background:var(--trim);
  }
  .poll-option > input:checked + .poll-mark::after,
  .poll-mark--flat.is-mine::after {
    content:""; position:absolute; left:50%; top:46%;
    width:4px; height:8px;
    border:solid var(--paper); border-width:0 2px 2px 0;
    transform:translate(-50%, -55%) rotate(45deg);
  }

  .poll-text { flex:1; min-width:0; overflow-wrap:anywhere; }
  .poll-option.mine .poll-text { font-weight:600; color:var(--ink); }
  
  .poll-count {
    flex-shrink:0; display:inline-flex; align-items:baseline; gap:4px;
    font-size:var(--fs-xs); color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .poll-count small { font-size:10px; color:var(--ink-faint); }

  
  .poll-count--hold { visibility:hidden; animation:none; }

  
  
  .poll-foot {
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);
    margin-top:5px; padding-top:var(--sp-2);
    border-top:1px dashed var(--border-2);
  }
  .poll-total {
    display:inline-flex; align-items:center; gap:6px; margin-left:auto;
    font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
  }
  .poll-total i { font-size:9px; opacity:.7; color:var(--icon); }
  .poll-acts { display:flex; flex-wrap:wrap; gap:5px; }
  
  .poll-done { cursor:default; color:var(--icon); }
  .poll-done .fbic { color:var(--icon); }

  
  
  .poll-said {
    margin:var(--sp-2) 0 0; padding:0; min-height:1.35em;
    font-size:var(--fs-xs); color:var(--clay);
    opacity:0;
    transition:opacity var(--speed) var(--ease);
  }
  
  .quiz-form .poll-said {
    color:var(--berry); font-weight:600;
    text-align:center;
  }
  .quiz-form .poll-said.on { animation:poll-said 260ms var(--ease) both; }
  .poll-said.on { opacity:1; }

  
  .poll-ends {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin:0 0 var(--sp-3);
    font-size:11px; color:var(--ink-faint);
  }
  .poll-ends i { font-size:9px; opacity:.7; color:var(--icon); }
  .poll-clock {
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
    color:var(--ink-soft); cursor:help;
    border-bottom:1px dotted var(--border-2);
  }
  .poll-clock--soon { color:var(--clay); font-weight:600; }

  
  .poll-cat--done {
    --cat:var(--trim);
    border-style:dashed;
  }
  .poll-cat--done i { font-size:8px; margin-right:4px; }
  
  .poll-kind { --cat:var(--trim); }
  .poll-kind i { font-size:8px; margin-right:4px; opacity:.8; }
  .poll-head { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .poll-option.done { cursor:default; }
  .poll-option.done:hover { border-color:var(--border-2); color:var(--ink-soft); }
  .poll--closed .poll-q { color:var(--ink-soft); }
  .poll--over .poll-acts { opacity:.5; }

  
  .poll-tabs {
    display:flex; flex-wrap:wrap; gap:5px;
    margin-top:var(--sp-3);
  }
  
  .own-tabs {
    display:flex; flex-wrap:wrap; gap:6px;
    margin:var(--box-gap) 0;
    justify-content:center;
  }
  .poll-tab, .own-tab {
    --cat:var(--trim);
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px; border-radius:var(--pill);
    
    border:1px solid var(--border-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); color:var(--ink-soft); text-decoration:none;
    transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease),
               background-color var(--speed) var(--ease);
  }
  .poll-tab::before {
    content:""; width:7px; height:7px; border-radius:50%;
    background:var(--cat); flex-shrink:0;
  }
  .poll-tab > i { font-size:9px; opacity:.7; color:var(--icon); }
  
  .poll-tab:first-child::before { display:none; }
  .poll-tab:hover { border-color:var(--cat); color:var(--ink); }
  .poll-tab.on {
    border-color:color-mix(in srgb, var(--cat) 55%, transparent);
    
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--cat) 14%, transparent),
        color-mix(in srgb, var(--cat) 14%, transparent)),
      var(--pill-fill);
    color:var(--ink); font-weight:600;
  }
  .poll-tab-n {
    font-size:9px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
  }
  
  .poll-tab--past::before { display:none; }

  
  .own-tab { padding:7px 14px; font-size:var(--fs-sm); }
  .own-tab .poll-tab-n { font-size:var(--fs-xs); }
  
  .own-tab > i {
    font-size:11px; color:var(--icon); opacity:.85;
    transition:color var(--speed) var(--ease), opacity var(--speed) var(--ease);
  }
  .own-tab:hover { border-color:var(--clay); color:var(--ink); }
  .own-tab:hover > i { opacity:1; }
  .own-tab.on > i { color:var(--clay-deep); opacity:1; }
  .own-tab.on {
    border-color:color-mix(in srgb, var(--clay) 55%, transparent);
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--clay) 14%, transparent),
        color-mix(in srgb, var(--clay) 14%, transparent)),
      var(--pill-fill);
    color:var(--ink); font-weight:600;
  }

  
  @keyframes own-panel-in {
    from { opacity:0; translate:0 7px; }
    to   { opacity:1; translate:0 0; }
  }
  .own-panel.is-fresh { animation:own-panel-in 260ms var(--ease) both; }

  @media (prefers-reduced-motion: reduce) {
    .own-panel.is-fresh { animation:none; }
  }

  @media (max-width:520px) {
    
    .own-tabs { justify-content:flex-start; }
    .own-tab { padding:6px 11px; font-size:var(--fs-xs); }
  }

  
  #poll-region { transition:opacity 180ms var(--ease); }
  #poll-region.is-turning { opacity:.45; }

  
  @property --score {
    syntax:'<number>'; initial-value:0; inherits:false;
  }

  

  .quiz-blurb { margin-top:4px; }
  
  .quiz-tags { margin:2px 0 var(--sp-3); }
  
  .quiz-title { margin:var(--sp-2) 0 var(--sp-3); }
  
  .quiz-q .poll-q { font-size:var(--fs-xl); }

  
  .quiz-no {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; margin-right:7px; border-radius:50%;
    font-family:var(--sans); font-size:var(--fs-xs); font-weight:700;
    line-height:1; vertical-align:2px;
    color:var(--clay-deep); background-image:var(--btn-fill);
    border:1px solid var(--clay); box-shadow:var(--pill-lip);
  }

  
  .quiz-form { margin:0; }
  .quiz-q {
    border:0; padding:0 0 var(--sp-4); margin:0 0 var(--sp-4); min-width:0;
    border-bottom:1px dashed var(--border-2);
  }
  .quiz-q:last-of-type { border-bottom:0; padding-bottom:0; }
  
  .quiz-q .poll-q { display:block; padding:0; font-size:var(--fs-lg); }
  
  .quiz-q .poll-q:focus { outline:none; }
  
  .quiz-q .poll-option { font-size:var(--fs-sm); }

  
  .quiz-score {
    display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
    margin-top:var(--sp-4);
  }
  .quiz-said { flex:1 1 220px; min-width:0; }
  .quiz-said-big {
    font-family:var(--serif); font-size:var(--fs-lg);
    font-weight:600; color:var(--clay-deep); margin-bottom:2px;
  }

  
  .quiz-ring {
    --score:0;
    flex:0 0 auto; position:relative;
    width:112px; height:112px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:
      conic-gradient(var(--sage-deep) calc(var(--score) * 1%),
                     color-mix(in srgb, var(--border-2) 55%, transparent) 0);
    animation:quiz-fill 900ms var(--ease) both;
  }
  
  .quiz-ring::before {
    content:""; position:absolute; inset:9px; border-radius:50%;
    background:var(--box-fade);
    border:1px solid var(--border-2);
  }
  .quiz-percent {
    position:relative;
    font-family:var(--serif); font-size:var(--fs-lg); font-weight:700;
    color:var(--clay-deep); font-variant-numeric:tabular-nums;
  }
  @keyframes quiz-fill { from { --score:0; } }

  
  .quiz-ring--all {
    animation:quiz-fill 900ms var(--ease) both,
              quiz-glow 3.4s ease-in-out 900ms infinite;
    will-change:filter;
  }
  .quiz-ring--all .quiz-percent { color:var(--gold-deep); }
  @keyframes quiz-glow {
    0%, 100% {
      filter:drop-shadow(0 0 4px rgba(255, 214, 122, .34))
             drop-shadow(0 0 10px rgba(255, 190, 80, .16));
    }
    50% {
      filter:drop-shadow(0 0 13px rgba(255, 221, 138, .85))
             drop-shadow(0 0 30px rgba(255, 190, 80, .48));
    }
  }

  
  .quiz-walk {
    display:flex; align-items:center; gap:var(--sp-3);
    margin:var(--sp-4) 0 var(--sp-2);
  }
  .quiz-step { flex:1 1 auto; min-width:0; text-align:center; }
  .quiz-step-text {
    display:block; font-size:var(--fs-xs); color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }
  .quiz-step-bar {
    display:block; height:4px; margin-top:4px; border-radius:var(--pill);
    background:color-mix(in srgb, var(--border-2) 60%, transparent);
    overflow:hidden;
  }
  .quiz-step-bar > span {
    display:block; height:100%; width:0; border-radius:inherit;
    background:var(--sage-deep);
    transition:width var(--speed) var(--ease);
  }
  .quiz-back[disabled] { opacity:.45; cursor:default; }
  
  .quiz-walk .poll-send { flex:0 0 auto; }
  .quiz-next[hidden], .poll-send[hidden] { display:none; }

  @media (prefers-reduced-motion: reduce) {
    .quiz-ring, .quiz-ring--all { animation:none; }
    .quiz-step-bar > span { transition:none; }
  }

  
  .outcome {
    --tone:var(--clay);
    position:relative; margin-top:var(--sp-4);
    padding:var(--sp-5); border-radius:var(--radius);
    
    box-shadow:var(--shadow-sm);
    border:1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    background:
      radial-gradient(120% 90% at 12% 0%,
        color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%),
      color-mix(in srgb, var(--tone) 7%, var(--paper));
    overflow:hidden;
  }
  
  
  .reveal {
    display:grid; justify-items:center; text-align:center;
    margin:var(--sp-5) 0 var(--sp-2);
    
    font-family:var(--script); font-size:clamp(1.8rem, 5vw, 2.6rem);
    line-height:1.2; color:var(--clay-deep);
  }
  
  .reveal-word { grid-area:1 / 1; opacity:0; }
  .reveal-word:last-child { opacity:1; }

  .reveal.is-walking .reveal-word {
    opacity:0;
    
    transition:opacity .5s var(--ease), transform .5s var(--ease);
    transform:translateY(8px) scale(.96);
  }
  .reveal.is-walking .reveal-word.is-on {
    opacity:1; transform:none;
  }

  
  .reveal-dots {
    display:flex; justify-content:center; gap:7px;
    margin-bottom:var(--sp-4); min-height:9px;
    opacity:0; transition:opacity .3s var(--ease);
  }
  .reveal.is-walking + .reveal-dots { opacity:1; }
  .reveal-dots span {
    width:7px; height:7px; border-radius:50%;
    background:color-mix(in srgb, var(--clay) 55%, var(--paper));
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal-dots span { animation:reveal-bob 1.1s var(--ease) infinite; }
    .reveal-dots span:nth-child(2) { animation-delay:.16s; }
    .reveal-dots span:nth-child(3) { animation-delay:.32s; }
  }
  @keyframes reveal-bob {
    0%, 60%, 100% { transform:translateY(0);    opacity:.45; }
    30%           { transform:translateY(-6px); opacity:1; }
  }
  
  .reveal.is-walking + .reveal-dots.is-done { opacity:0; }

  
  .outcome-lead {
    display:flex; justify-content:center;
    perspective:1100px;
  }
  .outcome-lead.is-waiting > .outcome { opacity:0; }
  .outcome-lead.is-here > .outcome {
    animation:outcome-flip .8s cubic-bezier(.22, .9, .3, 1.06) both;
  }
  @keyframes outcome-flip {
    0%   { opacity:0; transform:rotateY(-88deg) scale(.94); }
    40%  { opacity:1; }
    72%  { transform:rotateY(7deg) scale(1.01); }
    100% { opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .outcome-lead.is-waiting > .outcome { opacity:1; }
    .outcome-lead.is-here > .outcome { animation:none; }
  }
  .outcome-lead > .outcome {
    width:100%; max-width:var(--outcome-card);
  }

  
  .result-split {
    display:grid;
    
    grid-template-columns:minmax(0,1fr) minmax(0,372px);
    gap:var(--sp-6);
    align-items:start;
    margin-top:var(--sp-4);
  }
  @media (max-width:1180px) {
    .result-split { grid-template-columns:minmax(0,1fr); gap:0; }
  }
  
  .result-split > .outcome-lead > .outcome { max-width:none; }
  
  .result-split > .quiz-score { margin-top:0; }

  
  .badge-take {
    min-width:0;
    padding-left:var(--sp-6);
    border-left:1px dashed color-mix(in srgb, var(--clay) 28%, transparent);
  }
  @media (max-width:1180px) {
    .badge-take {
      padding-left:0; border-left:0;
      margin-top:var(--sp-5); padding-top:var(--sp-5);
      border-top:1px dashed color-mix(in srgb, var(--clay) 28%, transparent);
    }
  }
  
  .badge-take.is-waiting { opacity:0; }
  .badge-take.is-here { animation:badge-in .45s var(--ease) .6s both; }
  
  .badge-take:not([data-reveal-card]) {
    animation:badge-in .45s var(--ease) .78s both;
  }
  @keyframes badge-in {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .badge-take.is-waiting { opacity:1; }
    .badge-take.is-here,
    .badge-take:not([data-reveal-card]) { animation:none; }
  }

  
  .badge-show {
    display:flex; justify-content:center;
    margin:var(--sp-4) 0;
  }
  
  .badge-show > a { box-shadow:var(--shadow-sm); }

  .copybox-label {
    display:block; margin-bottom:var(--sp-2);
    font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase;
    color:color-mix(in srgb, var(--ink) 65%, var(--paper));
  }
  
  .copybox-code {
    display:block; width:100%; box-sizing:border-box; resize:vertical;
    padding:var(--sp-3);
    border:1px solid color-mix(in srgb, var(--clay) 30%, transparent);
    border-radius:var(--radius-sm);
    background:var(--box-fade); color:var(--ink);
    font-family:ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size:var(--fs-xs); line-height:1.55;
    white-space:pre-wrap; word-break:break-all;
  }
  .copybox-code:focus-visible {
    outline:2px solid color-mix(in srgb, var(--clay) 55%, transparent);
    outline-offset:1px;
  }
  .copybox .foot-row { margin-top:var(--sp-3); }

  
  
  .usage-sheet {
    overflow-x:auto;
    background:#fff; color:#000;
    padding:var(--sp-3); border-radius:var(--radius-sm);
    border:1px solid var(--border-2);
  }
  .usage-sheet img { max-width:none; }

  
  .cat-row {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    flex:1 1 auto; min-width:0;
  }
  .cat-row .poll-cat { margin-bottom:0; flex:0 0 auto; }
  
  .cat-name { flex:1 1 160px; min-width:0; max-width:280px; }
  
  .cat-n { margin-left:auto; }
  .cat-row input[type="color"] {
    flex:0 0 auto; width:30px; height:26px; padding:1px;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    background:var(--btn-fill); cursor:pointer;
  }
  
  .cat-two {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 5px; border-radius:var(--pill);
    border:1px dashed var(--border-2);
  }
  
  .cat-two:not(:has(:checked)) input[type="color"] { opacity:.3; }
  .cat-n {
    flex:0 0 auto; min-width:2.2em; text-align:center;
    font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft);
  }
  
  .icon-btn.is-off {
    opacity:.35; cursor:not-allowed;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .cat-move { display:inline-flex; gap:2px; }
  .cat-add {
    display:flex; align-items:flex-end; gap:var(--sp-3); flex-wrap:wrap;
    margin-top:var(--sp-4); padding-top:var(--sp-4);
    border-top:1px dashed var(--border-2);
  }
  .cat-add .field { flex:1 1 200px; min-width:0; margin:0; }
  .cat-add-color { flex:0 0 auto; }
  .cat-add input[type="color"] {
    width:44px; height:34px; padding:1px;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    background:var(--btn-fill); cursor:pointer;
  }

  .copymore { margin-top:var(--sp-4); }
  .copymore > summary {
    display:flex; align-items:center; gap:var(--sp-2);
    cursor:pointer; list-style:none;
    font-size:var(--fs-sm); color:var(--clay-deep);
  }
  .copymore > summary::-webkit-details-marker { display:none; }
  
  .copymore > summary::before {
    content:""; flex:0 0 auto; width:0; height:0;
    border:4px solid transparent; border-left-color:var(--clay);
    transition:transform var(--speed) var(--ease);
  }
  .copymore[open] > summary::before { transform:rotate(90deg); }
  .copymore > summary:hover { color:var(--clay); }
  .copymore > summary:focus-visible {
    outline:2px solid color-mix(in srgb, var(--clay) 55%, transparent);
    outline-offset:3px; border-radius:var(--radius-sm);
  }
  .copymore .prose { margin:var(--sp-3) 0; font-size:var(--fs-sm); }
  .copymore code {
    padding:1px 5px; border-radius:4px;
    background:color-mix(in srgb, var(--clay) 10%, var(--paper));
    font-size:.92em;
  }
  
  .foot-btn.is-copied {
    border-color:color-mix(in srgb, var(--sage-deep) 55%, transparent);
    color:var(--sage-deep);
  }

  .outcome::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:6px; border-radius:calc(var(--radius) - 4px);
    border:1.5px dashed color-mix(in srgb, var(--tone) 40%, transparent);
  }

  
  .outcome-head {
    position:relative; z-index:2;
    display:flex; align-items:center; gap:var(--sp-4); flex-wrap:nowrap;
  }
  .outcome-head > div { min-width:0; }
  
  .outcome-icon {
    flex:0 0 auto;
    width:64px; height:64px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:26px; color:var(--paper);
    background:var(--tone);
    border:1px solid color-mix(in srgb, var(--tone) 65%, var(--ink));
    box-shadow:inset 0 -3px 8px rgba(40,30,22,.18);
  }
  
  .outcome-mark {
    width:52px; height:52px;
    fill:var(--paper); fill-opacity:.95;
  }
  .outcome-eyebrow {
    font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
    color:color-mix(in srgb, var(--tone) 60%, var(--ink-faint));
  }
  .outcome-title {
    font-family:var(--script); font-size:2.4rem; line-height:1.05;
    color:color-mix(in srgb, var(--tone) 72%, var(--ink));
  }
  .outcome-summary {
    margin-top:2px; font-size:var(--fs-sm); color:var(--ink-soft);
  }
  
  
  .outcome--many {
    border-color:color-mix(in srgb, var(--tone) 40%, transparent);
    background:var(--tones-soft);
  }
  .outcome--many::after {
    border-color:color-mix(in srgb, var(--ink) 14%, transparent);
  }
  
  .outcome--many .outcome-icon {
    background:var(--tones-ring);
    border-color:color-mix(in srgb, var(--tone) 45%, transparent);
  }
  .outcome--many .outcome-title {
    background-image:var(--tones);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    
    display:inline-block; padding:.06em .14em; margin:-.06em -.14em;
  }

  .outcome-text { position:relative; z-index:2; margin-top:var(--sp-4); }
  .outcome-text p + p { margin-top:var(--sp-3); }
  .outcome .foot-row { position:relative; z-index:2; }

  
  .outcome-company {
    position:relative; z-index:2;
    margin-top:var(--sp-4); text-align:right;
    font-size:var(--fs-xs); font-style:italic;
    color:color-mix(in srgb, var(--tone) 42%, var(--ink-faint));
  }
  
  .outcome--many .outcome-company { color:var(--ink-faint); }

  
  
  :root { --outcome-card:420px; }

  .outcome-wall {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--outcome-card)), var(--outcome-card)));
    justify-content:start;
    gap:var(--sp-4); margin-top:var(--sp-3);
  }
  
  .outcome-slot { display:flex; flex-direction:column; }
  .outcome-slot .outcome { margin-top:4px; }

  
  .outcome-edit {
    display:flex; flex-direction:column; gap:var(--sp-2);
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
  }
  .outcome-edit .field { display:flex; flex-direction:column; gap:4px; }
  
  .outcome-edit textarea { resize:vertical; min-height:120px; }
  .outcome-edit .foot-btn { align-self:flex-start; }
  .outcome-rank {
    font-size:var(--fs-xs); color:var(--ink-faint);
    letter-spacing:.06em; text-transform:uppercase;
  }

  
  .spread { margin-top:var(--sp-4); }
  
  .spread > summary { display:inline-flex; cursor:pointer; list-style:none; }
  .spread > summary::-webkit-details-marker { display:none; }
  

  .spread-body {
    margin-top:var(--sp-3); padding:var(--sp-4);
    border:1px solid var(--lace-edge); border-radius:var(--radius);
    background:var(--paper-soft);
  }
  .spread-note {
    margin:0 0 var(--sp-3); font-size:var(--fs-xs); color:var(--ink-faint);
  }
  .spread-list { margin:0; padding:0; list-style:none; display:grid; gap:7px; }

  
  .spread-row {
    display:grid; grid-template-columns:minmax(0,9.5em) 1fr 3.2em;
    align-items:center; gap:10px;
    font-size:var(--fs-sm);
  }
  .spread-name {
    display:flex; align-items:center; gap:7px; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .spread-ic { flex:0 0 auto; width:1em; text-align:center; }

  .spread-bar {
    display:block; height:9px; border-radius:999px;
    background:var(--paper-soft); border:1px solid var(--lace-edge);
    overflow:hidden;
  }
  .spread-bar i {
    display:block; height:100%; border-radius:999px;
    background:var(--sage-deep);
    
    animation:spread-grow .7s cubic-bezier(.2,.8,.3,1) both;
    transform-origin:left center;
  }
  @keyframes spread-grow { from { transform:scaleX(0) } to { transform:none } }

  .spread-pc {
    text-align:right; font-variant-numeric:tabular-nums;
    font-size:var(--fs-xs); color:var(--ink-faint);
  }
  
  .spread-row.is-mine { font-weight:700; }
  .spread-row.is-mine .spread-pc { color:var(--ink); }
  .spread-row.is-mine .spread-name::after {
    content:"you"; margin-left:6px;
    font-size:var(--fs-xs); font-weight:500; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-faint);
  }

  @media (max-width:520px) {
    .spread-row { grid-template-columns:minmax(0,7em) 1fr 3em; gap:7px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .spread-bar i { animation:none; }
  }

  
  
  .quiz-answer.is-right {
    border-color:color-mix(in srgb, var(--sage-deep) 55%, transparent);
    color:var(--ink);
  }
  .quiz-answer.is-right .poll-mark {
    border-color:var(--sage-deep); background:var(--sage-deep);
  }
  .quiz-answer.is-wrong {
    border-color:color-mix(in srgb, var(--berry) 55%, transparent);
  }
  .quiz-answer.is-wrong .poll-mark {
    border-color:var(--berry); background:var(--berry);
  }
  
  .quiz-answer.is-right .poll-mark::after,
  .quiz-answer.is-wrong .poll-mark::after {
    content:""; position:absolute; left:50%; top:46%;
    width:4px; height:8px;
    border:solid var(--paper); border-width:0 2px 2px 0;
    transform:translate(-50%, -55%) rotate(45deg);
  }
  .quiz-answer .poll-count small { color:var(--ink-faint); }
  .quiz-right { --cat:var(--sage-deep); }
  .quiz-wrong { --cat:var(--berry); }

  
  

  
  .ans-list { display:flex; flex-direction:column; gap:5px; }
  .ans-row { display:flex; align-items:center; gap:6px; }
  
  #ans-more { margin-top:var(--sp-3); }
  .ans-eye {
    flex-shrink:0; width:26px; height:26px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px dashed var(--border-2); border-radius:var(--radius-sm);
    background:var(--paper); font-size:12px; color:var(--icon);
  }
  .ans-row .ans-text { flex:1 1 auto; min-width:0; }
  
  .ans-right {
    flex:0 0 auto; position:relative; display:inline-flex; cursor:pointer;
  }
  .ans-right input {
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  }
  .ans-right .poll-mark { width:20px; height:20px; }
  .ans-right input:checked + .poll-mark {
    border-color:var(--sage-deep); background:var(--sage-deep);
  }
  .ans-right input:checked + .poll-mark::after {
    content:""; position:absolute; left:50%; top:46%;
    width:5px; height:9px;
    border:solid var(--paper); border-width:0 2px 2px 0;
    transform:translate(-50%, -55%) rotate(45deg);
  }
  .ans-right input:focus-visible + .poll-mark {
    outline:2px solid var(--clay); outline-offset:2px;
  }
  .ans-row .ans-icon { flex:0 0 110px; }
  
  .ans-row .ans-outcome { flex:0 0 160px; min-width:0; font-size:11px; }
  .ans-row .ans-tint { flex:1 1 auto; min-width:0; }
  
  .ans-tint-pair { flex:0 0 124px; display:flex; align-items:center; gap:5px; }
  .ans-dot {
    flex:0 0 26px; width:26px; height:26px; padding:2px; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    background:transparent;
  }
  
  .ans-dot::-webkit-color-swatch-wrapper { padding:0; }
  .ans-dot::-webkit-color-swatch { border:0; border-radius:2px; }
  .ans-dot::-moz-color-swatch { border:0; border-radius:2px; }
  .ans-row .ans-icon, .ans-row .ans-tint {
    font-family:var(--mono, monospace); font-size:11px;
  }
  @media (max-width:640px) {
    .ans-row { flex-wrap:wrap; }
    .ans-row .ans-text { flex:1 1 100%; order:1; }
    .ans-row .ans-eye  { order:2; }
    .ans-row .ans-icon { flex:1 1 auto; order:3; }
    .ans-row .ans-tint { flex:0 0 92px; order:4; }
  }

  
  .pollrow { flex-wrap:wrap; gap:4px var(--sp-2); }
  .pollrow-q {
    display:inline-flex; align-items:center; gap:7px;
    flex:1 1 55%; min-width:0;
  }
  .pollrow-q a { overflow-wrap:anywhere; }
  .poll-dot {
    flex-shrink:0; width:8px; height:8px; border-radius:50%;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .pollrow-n {
    font-size:var(--fs-xs); color:var(--ink-faint);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .pollrow .cr-acts { margin-left:auto; }

  
  .wall, .poll-wall { --wall-cols:3; columns:3; column-gap:var(--box-gap); }
  
  .wall--two { --wall-cols:2; columns:2; }

  
  .wall.is-packed, .poll-wall.is-packed {
    columns:auto;
    display:flex; align-items:flex-start; gap:var(--box-gap);
  }
  .wall-col {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; gap:var(--box-gap);
  }
  
  .is-packed > .wall-col > .box { margin-bottom:0; }
  
  .wall--two .box-title,
  .affi-listed .box-title {
    
    margin-top:0;
  }
  .wall--two .box-title .name,
  .affi-listed .box-title .name {
    
    font-family:var(--serif); font-size:var(--fs-lg);
    font-weight:600; line-height:1.2;
  }

  
  .affi-layout { display:flex; align-items:flex-start; gap:var(--box-gap); }
  .affi-layout > .wall { flex:1 1 auto; min-width:0; }
  
  .affi-listed {
    flex:0 0 clamp(230px, 27%, 320px);
    display:flex; flex-direction:column; gap:var(--box-gap);
  }
  @media (max-width:1180px) {
    .affi-layout { flex-direction:column; }
    .affi-layout > .wall { align-self:stretch; }
    .affi-listed { flex:0 0 auto; align-self:stretch; }
  }
  .wall > .box, .poll-wall > .box {
    break-inside:avoid;
    margin-bottom:var(--box-gap);
  }
  @media (max-width:1180px) { .wall, .poll-wall { --wall-cols:2; columns:2; } }
  @media (max-width:760px)  { .wall, .poll-wall { --wall-cols:1; columns:1; } }

  @media (prefers-reduced-motion: reduce) {
    .poll-option.voted::before { transition:none; animation:none; }
    .poll-count { animation:none; }
  }

  
  
  .to-top {
    position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:900;
    width:44px; height:44px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-2); background:var(--btn-fill);
    box-shadow:var(--pill-lip), var(--shadow);
    color:var(--clay-deep); font-size:15px;
    opacity:0; visibility:hidden; transform:translateY(10px) scale(.92);
    transition:opacity var(--speed) var(--ease),
               transform var(--speed) var(--ease),
               visibility 0s linear var(--speed),
               filter var(--speed) var(--ease);
  }
  .to-top.is-up {
    opacity:1; visibility:visible; transform:none;
    transition-delay:0s;
  }
  .to-top:hover { filter:brightness(1.05); }
  
  @media (max-width:640px) {
    .to-top {
      right:var(--sp-4);
      bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
      width:40px; height:40px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .to-top { transition:opacity var(--speed) var(--ease), visibility 0s linear var(--speed); }
    .to-top, .to-top.is-up { transform:none; }
  }

  
  .cookies {
    position:fixed; z-index:950;
    right:var(--sp-5); bottom:var(--sp-5);
    display:flex; gap:var(--sp-3); align-items:flex-start;
    box-sizing:border-box; width:calc(100vw - var(--sp-5) * 2); max-width:330px;
    
    padding:var(--sp-5);
    border:1px solid var(--trim, var(--sage)); border-radius:var(--radius);
    background-image:linear-gradient(180deg, var(--sage-soft) 0, var(--box-fade) 120px);
    background-color:var(--box-fade);
    box-shadow:var(--shadow);
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .34s var(--ease), transform .34s var(--ease);
  }
  
  .cookies::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed var(--border-2);
    border-radius:calc(var(--radius) - 3px);
    opacity:.75;
  }
  .cookies.is-here { opacity:1; transform:none; }
  
  .cookies[hidden] { display:none; }

  .cookies-pic { flex:0 0 auto; display:block; margin-top:1px; }
  .cookies-dough { fill:color-mix(in srgb, var(--clay) 38%, var(--paper)); }
  .cookies-chips { fill:var(--clay-deep); opacity:.78; }

  .cookies-say { min-width:0; }
  .cookies-head {
    margin:0 0 2px;
    font-size:var(--fs-label); letter-spacing:.09em; text-transform:uppercase;
    color:var(--clay-deep);
  }
  .cookies-text {
    margin:0; font-size:var(--fs-sm); line-height:1.5;
    color:color-mix(in srgb, var(--ink) 86%, var(--paper));
  }
  
  .cookies-row { margin-top:var(--sp-3); }

  
  .to-top { transition-property:opacity, transform, visibility, filter, bottom; }
  body:has(.cookies.is-here) .to-top {
    bottom:calc(var(--sp-5) + var(--cookies-lift, 170px) + var(--sp-3));
  }

  @media (max-width:640px) {
    .cookies {
      right:var(--sp-4); left:var(--sp-4); width:auto; max-width:none;
      bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    }
    body:has(.cookies.is-here) .to-top {
      bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)
                  + var(--cookies-lift, 170px) + var(--sp-3));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cookies { transition:opacity .2s linear; transform:none; }
    .cookies.is-here { transform:none; }
  }

  .login-foot { display:flex; margin:var(--sp-2) 0; }
  .login-foot a {
    display:inline-flex; align-items:center; gap:6px;
    
    padding:4px 11px; line-height:1.4; border-radius:var(--pill);
    border:1px solid var(--border-2); background:var(--pill-fill);
    box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); font-weight:600; color:var(--ink);
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .login-foot a i { color:var(--icon); transition:var(--icon-ease); }
  .login-foot a:hover { filter:brightness(1.05); }
  .login-foot a:hover i { color:var(--ink); }

  
  .narrow-box { max-width:420px; margin-inline:auto; }
  .stack-form { display:flex; flex-direction:column; gap:var(--sp-3); }
  .stack-form .btn { justify-content:center; }

  
  
  .field-label {
    display:flex; align-items:center; gap:7px; margin-bottom:5px;
    font-size:var(--fs-label); font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .field-label > i { flex-shrink:0; }
  .field-label > span:not(.field-hint) { white-space:nowrap; }
  .field-label i { color:var(--icon); font-size:12px; }
  .field:has(.field-label) input,
  .field:has(.field-label) textarea { padding-left:12px; }

  
  .field select {
    width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
    background:transparent;
    border:1px solid var(--border-2); border-radius:var(--pill);
    
    padding:7px 34px 7px 12px; line-height:1.3; cursor:pointer;
    
    appearance:none; -webkit-appearance:none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f7742' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  }
  .field select:focus {
    border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }

  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
  @media (max-width:560px) { .field-row { grid-template-columns:minmax(0,1fr); } }
  
  .triple .field-row { grid-template-columns:minmax(0,1fr); }

  
  .field-err {
    display:flex; align-items:center; gap:6px; margin-top:5px;
    font-size:var(--fs-xs); color:var(--berry);
  }
  .field [aria-invalid="true"] { border-color:var(--berry); }
  .field [aria-invalid="true"]:focus { box-shadow:0 0 0 3px rgba(156,63,58,.18); }

  
  .captcha-q {
    display:block; margin-bottom:6px;
    font-size:var(--fs-sm); font-style:italic; color:var(--ink);
  }
  
  .captcha-new {
    width:22px; height:22px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border-2); border-radius:50%;
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    color:var(--icon); font-size:11px; cursor:pointer;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .captcha-new:hover { filter:brightness(1.05); color:var(--ink); }
  
  .captcha-new i { transition:transform var(--speed) var(--ease); }
  .captcha-new:hover i { transform:rotate(90deg); }
  .captcha-new.is-spinning i {
    animation:spin .7s linear infinite;
    
    transform:none;
  }
  @keyframes spin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .captcha-new i,
    .captcha-new:hover i { transition:none; transform:none; }
    .captcha-new.is-spinning i { animation:none; opacity:.5; }
  }

  
  .note {
    display:flex; align-items:flex-start; gap:9px;
    padding:10px 13px; margin-bottom:var(--sp-3);
    border-radius:var(--radius-sm); font-size:var(--fs-sm);
    border:1px solid var(--border-2);
  }
  .note i { margin-top:3px; flex-shrink:0; }
  
  .note--ok  {
    background:color-mix(in srgb, var(--icon) 13%, var(--paper));
    color:color-mix(in srgb, var(--icon) 62%, var(--ink));
    border-color:var(--icon);
  }
  .note--ok i { color:var(--icon); }
  .note--bad {
    background:color-mix(in srgb, var(--berry) 11%, var(--paper));
    color:#6b2e2a;
    border-color:var(--berry);
  }
  .note--bad i { color:var(--berry); }

  
  .field-bad {
    display:flex; align-items:flex-start; gap:5px;
    margin-top:4px;
    font-size:var(--fs-xs); line-height:1.35; color:var(--berry);
  }
  .field-bad i { font-size:10px; margin-top:.28em; flex-shrink:0; }

  
  .legal { display:flex; flex-direction:column; gap:var(--sp-4); }

  
  .legal-clauses {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-5); align-items:start;
  }
  .legal-clauses.one { grid-template-columns:minmax(0,1fr); }
  @media (max-width:640px) {
    .legal-clauses { grid-template-columns:minmax(0,1fr); }
  }
  .legal-clause { display:flex; flex-direction:column; gap:var(--sp-3); }

  .legal-h {
    display:flex; align-items:center; gap:9px;
    padding-bottom:var(--sp-2);
    border-bottom:1px dashed var(--border-2);
    font-family:var(--serif); font-size:var(--fs-md);
    font-weight:600; color:var(--ink);
    
    scroll-margin-top:32vh;
  }
  

  
  @property --rim {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rim-run  { to { --rim: 1turn; } }
  @keyframes rim-fade { to { opacity: 0; } }

  .legal-clause { position:relative; }

  
  .legal-glow { display:none; }
  .legal-clause:has(> .legal-h:target) > .legal-glow {
    display:block;
    position:absolute; inset:calc(var(--sp-3) * -1);
    pointer-events:none;
    
    filter:
      drop-shadow(0 0 3px  color-mix(in srgb, var(--icon) 90%, transparent))
      drop-shadow(0 0 9px  color-mix(in srgb, var(--icon) 65%, transparent))
      drop-shadow(0 0 20px color-mix(in srgb, var(--icon) 40%, transparent));
    animation:rim-fade 1s var(--ease) 10.4s forwards;
  }

  .legal-glow::after {
    content:""; position:absolute; inset:0;
    border-radius:var(--radius-sm);
    
    padding:2px;
    
    background:conic-gradient(from var(--rim),
      transparent 0turn,
      color-mix(in srgb, var(--icon) 30%, transparent) .16turn,
      var(--icon) .42turn,
      var(--sage-deep) .62turn,
      color-mix(in srgb, var(--sage-deep) 30%, transparent) .84turn,
      transparent 1turn);
    
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    
    animation:rim-run 3.8s linear 3;
  }

  
  .legal-h:target { color:var(--clay-deep); border-bottom-color:var(--clay); }

  @media (prefers-reduced-motion: reduce) {
    .legal-glow::after { animation:none; background:var(--icon); }
  }

  
  .legal-n, .rulelist--numbered li::before {
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    
    line-height:1;
    font-family:var(--sans); font-size:var(--fs-xs); font-weight:700;
    color:var(--clay-deep); background-image:var(--btn-fill);
    border:1px solid var(--clay); box-shadow:var(--pill-lip);
  }

  .legal-sub {
    font-size:var(--fs-label); font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }

  
  .legal-facts .mail { margin-top:0; }

  
  .stuff-kind + .stuff-kind { margin-top:var(--sp-6); }
  .stuff-set + .stuff-set { margin-top:var(--sp-4); }
  .stuff-wall { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  
  .stuff {
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px; border:1px solid var(--border-2); border-radius:var(--radius-sm);
    background:var(--paper);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    transition:outline-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  .stuff img { display:block; max-width:100%; height:auto; }

  
  
  
  .now-row { display:flex; flex-direction:column; gap:var(--sp-3); }
  
  
  
  .factrow--pills {
    display:grid;
    
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  .factrow--pills > div {
    display:block;
    padding:8px 13px; border-radius:var(--radius);
    background:transparent; background-image:none;
    border:1px solid var(--border-2); box-shadow:none;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    min-width:0;
  }
  
  .factrow--pills dt {
    display:flex; align-items:center; gap:6px;
    font-size:var(--fs-xs); letter-spacing:.02em;
    text-transform:none; color:var(--clay-deep); font-weight:700;
    white-space:normal;
  }
  .factrow--pills dt i { font-size:9px; opacity:.7; color:var(--icon); }
  .factrow--pills dd {
    margin:2px 0 0; font-size:var(--fs-sm); font-weight:400; color:var(--ink-soft);
    
    overflow-wrap:break-word;
  }

  
  .now-row > .factrow { width:100%; gap:var(--sp-3) 5px; }
  
  .now-row > .factrow--pills { grid-template-columns:repeat(3, minmax(0, 1fr)); }

  
  
  .now-col {
    flex:0 0 auto; max-width:100%; align-self:stretch;
    display:flex; flex-direction:column; gap:var(--sp-3);
  }
  .now-since { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  
  .now-pill {
    
    flex:1 1 auto; justify-content:center; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
    
    padding:4px 11px; line-height:1.4; border-radius:var(--pill);
    background:transparent; border:1px solid var(--border-2);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-4px;
    font-size:var(--fs-xs); color:var(--ink-faint);
  }
  .now-pill i { font-size:9px; opacity:.7; color:var(--icon); }
  .now-pill time,
  .now-pill strong { color:var(--ink-soft); font-weight:600; }
  
  .now-dot { opacity:.55; }
  
  
  .now-shot {
    
    flex:0 0 auto; width:100%;
    
    aspect-ratio:auto; height:auto; line-height:0;
    display:block; cursor:default;
  }
  .now-shot img { width:100%; height:auto; aspect-ratio:auto; object-fit:fill; }
  
  .now-shot::before { content:none; }
  .now-shot:hover img, .now-shot:focus-visible img { transform:none; }
  
  .now-shot:hover, .now-shot:focus-visible {
    border-color:var(--trim);
    box-shadow:none;
    outline-color:color-mix(in srgb, var(--border-2) 75%, transparent);
  }
  
  @media (max-width:640px) { .now-since { flex-wrap:wrap; } }

  

  
  .design-shot { flex:0 0 96px; max-width:96px; }
  .design-shot img { border-radius:2px; }
  .design-row { align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap; }
  
  .design-words {
    flex:1 1 220px; min-width:0;
    font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.5;
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  }
  .design-row .cr-acts { margin-left:auto; }
  
  .when-row { display:flex; gap:5px; }
  .when-row .when-year { flex:0 0 84px; }
  .when-row .when-month { flex:1 1 auto; min-width:0; }
  .when-row .when-day { flex:0 0 72px; }
  
  .design-row.is-now { border-color:var(--trim); }
  .is-now-mark { color:var(--gold-deep); }
  
  .design-scroll { --rows:6; max-height:calc(var(--rows) * 86px); }
  
  .field > .design-shot { flex:0 0 auto; width:max-content; }

  
  
  .check { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
           align-self:flex-start; margin:-4px 0 var(--sp-3);
           font-size:var(--fs-sm); color:var(--ink-soft); }
  
  .check > span { white-space:nowrap; text-box:trim-both cap alphabetic; }
  .check input { width:16px; height:16px; accent-color:var(--icon); cursor:pointer; flex-shrink:0; }
  .field-hint { margin-left:auto; font-weight:400; text-transform:none;
                letter-spacing:0; color:var(--ink-faint); }
  
  .field.is-off { opacity:.45; }
  .field.is-off input { cursor:not-allowed; }

  
  .field input[type="file"] {
    width:100%; font-family:inherit; font-size:var(--fs-xs); color:var(--ink-soft);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--radius-sm); padding:8px 10px;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-4px;
  }
  .field input[type="file"]:focus-visible {
    outline-color:color-mix(in srgb, var(--clay) 50%, transparent);
  }
  .field input[type="file"]::file-selector-button {
    font-family:inherit; font-size:var(--fs-xs); font-weight:600;
    margin-right:10px; padding:5px 12px; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--pill);
    background:var(--btn-fill); color:var(--clay-deep);
  }

  
  .stufflist { display:flex; flex-direction:column; gap:var(--sp-2); }
  
  .stufflist--scroll {
    
    --rows:5;
    --row:124px;
    max-height:calc(var(--rows) * var(--row));
    overflow-y:auto; padding-right:var(--sp-2);
    
    --fade:16px; --fade-top:0px; --fade-bot:16px;
    mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0, #000 var(--fade-top),
      #000 calc(100% - var(--fade-bot)), transparent 100%);
  }
  
  .stufflist--slim { --rows:10; --row:52px; }
  .stuffrow {
    display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
  }
  .stuffrow-name {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    min-width:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
    word-break:break-all;
  }
  .stuffrow-acts { display:flex; align-items:center; gap:5px; margin-left:auto; flex-wrap:wrap; }
  
  .stuffrow-acts { flex:0 0 auto; }
  .stuffrow > .affi-edit { flex:1 1 300px; }
  .inline-form { display:inline-flex; align-items:center; gap:4px; margin:0; }
  .inline-form.rename input {
    width:120px; font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:var(--paper); border:1px solid var(--border-2);
    border-radius:var(--pill); padding:5px 10px;
  }
  .inline-form.rename input:focus {
    outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .icon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%; cursor:pointer;
    border:1px solid var(--border-2); background:var(--pill-fill);
    box-shadow:var(--pill-lip); color:var(--icon); font-size:11px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .icon-btn:hover { filter:brightness(1.05); color:var(--ink); }
  
  .affi-edit {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    flex:1; min-width:0; margin:0;
  }
  
  .credit-edit {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    flex:1; min-width:0; margin:0;
  }
  
  
  :is(.affi-edit, .credit-edit, .cat-row) input[type="text"],
  :is(.affi-edit, .credit-edit, .cat-row) input[type="url"],
  :is(.affi-edit, .credit-edit, .cat-row) select {
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--pill); padding:8px 12px; min-width:0;
  }
  :is(.affi-edit, .credit-edit, .cat-row) input:focus,
  :is(.affi-edit, .credit-edit, .cat-row) select:focus {
    border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .affi-name { flex:1 1 130px; }
  .affi-url  { flex:2 1 200px; }
  
  .cr-name   { flex:1 1 110px; }
  .cr-url    { flex:1 1 140px; }
  .cr-tip    { flex:1 1 140px; }
  
  .cr-acts { display:inline-flex; gap:5px; margin-left:auto; }

  
  
  .icon-btn.is-off { color:var(--ink-faint); opacity:.5; cursor:default; }
  :is(.affi-edit, .credit-edit) select { flex:0 0 auto; padding-right:28px; }
  .affi-file { flex:1 1 150px; font-size:11px; color:var(--ink-faint); }
  .affi-file::file-selector-button {
    font-family:inherit; font-size:10px; font-weight:600;
    margin-right:7px; padding:3px 9px; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--pill);
    background:var(--btn-fill); color:var(--clay-deep);
  }
  
  
  .stuffrow:has(.affi-edit),
  .stuffrow:has(.credit-edit) {
    position:relative;
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  }
  .stuffrow .affi-edit,
  .stuffrow .credit-edit { display:contents; }
  .stuffrow .affi-edit > .icon-btn,
  .stuffrow .cr-acts,
  .stuffrow .stuffrow-acts { margin-left:0; }
  .stuffrow .cr-acts,
  .stuffrow .stuffrow-acts { gap:var(--sp-2); }

  
  .stuffrow:has(.affi-hits) { padding-top:22px; }
  .affi-hits {
    position:absolute; top:5px; right:11px;
    display:inline-flex; align-items:center; gap:5px;
    font-size:var(--fs-xs); color:var(--ink-faint); font-variant-numeric:tabular-nums;
  }
  .affi-hits i { font-size:10px; color:var(--icon); }

  
  
  .wall-list {
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
  }

  

  
  .stuffrow .affi-file { flex:1 1 140px; }
  .stuffrow .affi-edit > .icon-btn { margin-left:auto; }

  
  form > .box,
  form > .pair { margin-bottom:var(--box-gap); }
  form > .pair > .box { margin-bottom:0; }

  
  .pairlist-edit { display:flex; flex-direction:column; gap:6px; }
  .pair-row { display:flex; align-items:center; gap:6px; }
  .pair-row > i { color:var(--icon); font-size:13px; flex-shrink:0; width:18px; text-align:center; }
  .pair-row input {
    flex:1 1 0; min-width:0;
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:var(--paper); border:1px solid var(--border-2);
    border-radius:var(--pill); padding:6px 11px;
  }
  .pair-row input:focus {
    outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .pair-row .icon-btn { width:24px; height:24px; font-size:10px; }

  
  .save-bar {
    position:sticky; bottom:var(--sp-3); z-index:5;
    margin-top:var(--sp-5);
  }
  
  .save-bar .btn {
    box-shadow:var(--pill-lip), var(--shadow);
    background-image:linear-gradient(180deg,
      color-mix(in srgb, var(--icon) 55%, var(--paper)) 0,
      color-mix(in srgb, var(--icon) 30%, var(--box-fade)) 42%,
      var(--box-fade) 100%);
    border-color:color-mix(in srgb, var(--icon) 55%, transparent);
    color:var(--sage-deep);
  }
  .save-bar .btn i { color:var(--sage-deep); }
  
  .save-bar .btn:hover {
    background-image:linear-gradient(180deg,
      color-mix(in srgb, var(--icon) 68%, var(--paper)) 0,
      color-mix(in srgb, var(--icon) 40%, var(--box-fade)) 42%,
      var(--box-fade) 100%);
    filter:none;
  }

  
  .size-pair { display:flex; align-items:center; gap:var(--sp-2); }
  .size-pair input {
    width:100px; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
    background:var(--paper); border:1px solid var(--border-2);
    border-radius:var(--pill); padding:9px 12px;
  }
  .size-pair input:focus {
    outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .size-x { color:var(--ink-faint); font-size:var(--fs-sm); }

  .icon-btn.danger { color:var(--berry); }
  .icon-btn.danger:hover { color:var(--berry); filter:brightness(1.08); }

  
  .req-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-3); }
  .req {
    display:flex; flex-direction:column; gap:var(--sp-2);
    padding:var(--sp-3); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
  }
  .req-shot {
    display:flex; align-items:center; justify-content:center;
    height:41px; padding:3px; border-radius:var(--radius-sm);
    background:var(--paper); border:1px solid var(--border-2);
  }
  .req-shot img { display:block; max-width:100%; max-height:100%; }
  
  .req-shot.none { color:var(--ink-faint); font-size:var(--fs-xs); font-style:italic; }
  .req-name { font-weight:700; font-size:var(--fs-sm); color:var(--ink); word-break:break-word; }
  .req-host { font-size:var(--fs-xs); color:var(--ink-faint); word-break:break-all; }
  .req-row { display:flex; gap:6px; margin-top:auto; }
  
  .req-note {
    margin:0; padding:var(--sp-2) var(--sp-3);
    border-left:2px solid var(--border-2); border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--paper) 70%, transparent);
    font-size:var(--fs-xs); font-style:italic; color:var(--ink-soft);
    overflow-wrap:anywhere;
  }
  
  .req-row:not(:last-child) { margin-top:0; }

  
  .req-row { flex-wrap:wrap; }
  .req-row > * { flex:0 0 auto; }
  .req-row .foot-btn { white-space:nowrap; }
  
  .req-row .inline-form:has(select) { display:contents; }
  .req-row select {
    order:-1; flex:1 1 100%; min-width:0;
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--pill); padding:7px 11px;
  }
  .req-row select:focus {
    border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
    outline:none;
  }

  
  
  .rulelist li, .pairlist--cards li, .fav-card, .skill-group,
  .shout, .upd, .creditlist li, .res-toolbar {
    position:relative; background:transparent;
    border:1px solid var(--border-2);
    border-radius:var(--radius-sm);
  }
  .rulelist li::after, .pairlist--cards li::after, .skill-group::after,
  .shout::after, .upd::after, .creditlist li::after, .res-toolbar::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed var(--border-2);
    border-radius:calc(var(--radius-sm) - 3px);
    opacity:.75;
  }

  .rulelist { display:flex; flex-direction:column; gap:5px; font-size:var(--fs-sm); }
  .rulelist li {
    display:flex; align-items:flex-start; gap:9px; color:var(--ink-soft);
    padding:10px 12px 9px;
  }
  .rulelist li i { color:var(--gold-deep); margin-top:3px; flex-shrink:0; font-size:12px; }

  
  .rulelist--numbered { counter-reset:rule; }
  .rulelist--numbered li::before { counter-increment:rule; content:counter(rule); }
  
  .rulelist--numbered li { align-items:baseline; }
  
  .rulelist li > span { min-width:0; }
  

  
  .reach { margin-top:var(--sp-4); padding-top:var(--sp-4);
           border-top:1px dashed var(--border-2); }
  .reach .social-row { margin-top:var(--sp-3); }
  
  .mail {
    display:inline-block;
    font-family:var(--mono, ui-monospace, monospace); font-size:var(--fs-xs);
    
    padding:4px 11px; line-height:1.4; border-radius:var(--pill);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2); color:var(--ink); word-break:break-all;
  }
  .reach .mail { margin-top:var(--sp-2); }

  
  
  .ed { display:flex; flex-direction:column; position:relative; }
  
  
  .ed-bar {
    display:flex; align-items:center; gap:2px; flex-wrap:wrap; row-gap:3px;
    padding:5px 6px;
    
    background:transparent;
    border:1px solid var(--border-2); border-bottom:0;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  }
  
  .field .ed textarea, .ed-bar + textarea {
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    border-top-color:var(--border);
    margin-bottom:0;
    
    padding:9px 12px;
  }

  
  .ed::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    border-radius:calc(var(--radius-sm) - 3px);
  }
  .field .ed textarea, .ed-bar + textarea { outline:none; }
  
  .ed:focus-within::after { border-color:color-mix(in srgb, var(--clay) 60%, transparent); }
  .ed-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:26px; padding:0; flex-shrink:0;
    background:none; border:1px solid transparent; border-radius:var(--radius-sm);
    color:var(--ink-soft); font-size:12px; cursor:pointer;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .ed-btn:hover, .ed-btn[aria-expanded="true"] {
    background:var(--paper); border-color:var(--border-2); color:var(--sage-deep);
  }
  
  .ed-btn.on, .ed-btn.on:hover {
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border-color:var(--clay); color:var(--clay-deep);
  }
  .ed-count {
    margin-left:auto; font-size:var(--fs-xs); color:var(--ink-faint);
    font-variant-numeric:tabular-nums; padding-right:3px;
  }
  .ed-count.low { color:var(--berry); font-weight:600; }

  
  .ed-emoji-holder { display:inline-flex; }

  
  .ed-link {
    position:fixed; z-index:10060; width:270px; max-width:calc(100vw - 16px);
    display:flex; flex-wrap:wrap; align-items:center; gap:5px;
    padding:var(--sp-2);
    background:var(--paper); border:1px solid var(--border-2);
    border-radius:var(--radius-sm); box-shadow:var(--shadow);
  }
  
  .ed-link[hidden] { display:none; }
  
  .ed-link-url { flex:1 1 100%; }
  .ed-link-text { flex:1 1 110px; min-width:0; }
  .ed-link-url, .ed-link-text {
    min-width:0;
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    background:transparent; border:1px solid var(--border-2);
    border-radius:var(--pill); padding:6px 11px;
  }
  .ed-link-url:focus, .ed-link-text:focus {
    outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-soft);
  }
  .ed-link-go {
    flex:0 0 auto; cursor:pointer;
    padding:6px 13px; border-radius:var(--pill);
    border:1px solid var(--border-2); background-image:var(--btn-fill);
    font-family:inherit; font-size:var(--fs-xs); font-weight:700;
    color:var(--clay-deep);
    transition:filter var(--speed) var(--ease);
  }
  .ed-link-go:hover { filter:brightness(1.04); }
  
  .ed-link-note:not(:empty) {
    flex:1 1 100%; font-size:var(--fs-xs); color:var(--berry);
  }
  
  
  .ed-emoji {
    position:fixed; z-index:10060; width:270px; max-width:calc(100vw - 16px);
    display:flex; flex-direction:column;
    padding:var(--sp-2);
    background:var(--box-fade); border:1px solid var(--border-2);
    border-radius:var(--radius-sm); box-shadow:var(--shadow);
  }
  
  .ed-emoji[hidden] { display:none; }

  
  .ed-emoji-tabs {
    display:flex; gap:2px; flex-shrink:0;
    padding-bottom:var(--sp-2); margin-bottom:var(--sp-2);
    border-bottom:1px dashed var(--border-2);
  }
  .ed-emoji-tab {
    flex:1; min-width:0; padding:4px 0; cursor:pointer;
    background:none; border:1px solid transparent; border-radius:var(--radius-sm);
    font-size:15px; line-height:1.2;
    filter:grayscale(.65); opacity:.75;
    transition:filter var(--speed) var(--ease), opacity var(--speed) var(--ease),
               background-color var(--speed) var(--ease);
  }
  .ed-emoji-tab:hover { filter:none; opacity:1; }
  
  .ed-emoji-tab.is-on {
    filter:none; opacity:1;
    background:var(--paper); border-color:var(--border-2);
  }

  .ed-emoji-grids { min-height:0; }
  .ed-emoji-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(30px,1fr)); gap:1px;
    max-height:186px; overflow-y:auto;
  }
  .ed-emoji-grid[hidden] { display:none; }

  .ed-emoji-pick {
    background:none; border:0; border-radius:4px; cursor:pointer;
    font-size:17px; line-height:1; padding:5px 0;
    
    text-shadow:0 1px 1px rgba(70,53,42,.35);
    transition:background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
  }
  .ed-emoji-pick:hover { background:var(--clay-soft); transform:scale(1.15); }

  
  .ed-emoji-tab, .ed-chip { text-shadow:0 1px 1px rgba(70,53,42,.3); }

  
  .ed-chips {
    position:relative;
    display:flex; align-items:center; flex-wrap:wrap; gap:5px;
    min-height:34px; padding:4px 6px;
    border:1px solid var(--border-2); border-radius:var(--pill);
  }
  .ed-chosen { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:1; min-width:0; }
  .ed-chosen-none { font-size:var(--fs-xs); color:var(--ink-faint); padding-left:5px; }

  
  .ed-chip {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:26px; padding:0; cursor:pointer;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    font-size:15px; line-height:1;
    transition:border-color var(--speed) var(--ease), filter var(--speed) var(--ease);
  }
  .ed-chip:hover { border-color:var(--berry); filter:brightness(1.04); }
  .ed-chips .ed-btn { flex-shrink:0; margin-left:auto; }

  
  
  .chip-tag.swatch { font-weight:400; }

  
  .timeline { list-style:none; margin:0; padding:0; position:relative; }
  .timeline::before {
    content:""; position:absolute; left:15px; top:10px; bottom:10px;
    border-left:2px dotted var(--border-2);
  }
  .tl-entry { position:relative; display:flex; gap:var(--sp-4); padding-bottom:var(--sp-6); }
  .tl-entry:last-child { padding-bottom:0; }
  .tl-dot {
    position:relative; z-index:1; flex-shrink:0;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:2px solid var(--sage-deep);
    color:var(--sage-deep); font-size:13px;
  }
  .tl-body { min-width:0; flex:1; }
  .tl-when {
    font-family:var(--script); font-size:1.5rem; line-height:1;
    color:var(--sage-deep);
  }
  .tl-what {
    font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold-deep); font-weight:600; margin:2px 0 var(--sp-3);
  }
  .story-close {
    margin-top:var(--sp-5); padding-top:var(--sp-4);
    border-top:1px dashed var(--border-2);
    color:var(--ink); font-size:var(--fs-sm);
  }
  .story-close .hrt { color:var(--berry); }
  @media (max-width:560px) {
    .tl-entry { gap:var(--sp-3); }
    .timeline::before { left:13px; }
    .tl-dot { width:28px; height:28px; font-size:11px; }
  }

  
  .lb[hidden] { display:none; }
  
  html { scrollbar-gutter: stable; }
  body.lb-open { overflow:hidden; }

  .lb {
    position:fixed; inset:0; z-index:10050;
    display:flex; align-items:center; justify-content:center;
    padding:var(--sp-5);
    background:rgba(40,30,22,.62);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    animation:lbFade .18s var(--ease);
  }
  @keyframes lbFade { from { opacity:0; } to { opacity:1; } }

  
  .lb-figure {
    position:relative;
    display:flex; flex-direction:column;
    max-width:100%; min-height:0; min-width:0;
    margin:0; padding:0;
    background:transparent; border:0;
  }
  @keyframes lbPop {
    from { opacity:0; transform:scale(.94) translateY(8px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lb, .lb-panel { animation:none; }
  }

  
  .lb.is-closing { animation:lbFadeOut .2s var(--ease) forwards; }
  .lb.is-closing .lb-panel { animation:lbPopOut .2s var(--ease) forwards; }
  @keyframes lbFadeOut { from { opacity:1; } to { opacity:0; } }
  @keyframes lbPopOut {
    from { opacity:1; transform:scale(1) translateY(0); }
    to   { opacity:0; transform:scale(.95) translateY(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lb.is-closing, .lb.is-closing .lb-panel { animation:none; }
  }

  .lb-img {
    max-width:100%; max-height:56vh; object-fit:contain;
    
    border:1px solid var(--clay);
    border-radius:var(--radius-sm);
    
    background:transparent;
    display:block; margin:0 auto;
  }

  
  .lb-img, .past-thumb {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    outline-offset:-5px;
  }
  .lb-img {
    outline-offset:-9px;
    outline-color:color-mix(in srgb, var(--paper) 70%, transparent);
  }
  
  
  .lb-caption {
    margin-top:var(--sp-3); padding:10px 12px 9px;
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    outline-offset:-5px;
    color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.6;
    max-height:24vh; overflow-y:auto;
  }
  
  .lb-when {
    display:flex; align-items:center; gap:6px;
    margin-bottom:5px;
    font-size:var(--fs-xs); font-weight:700; color:var(--clay-deep);
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
  }
  .lb-when i { font-size:9px; opacity:.7; color:var(--icon); }
  .lb-when[hidden] { display:none; }

  
  .design-when {
    display:inline-flex; align-items:center; gap:5px; margin-right:6px;
    color:var(--ink-faint); font-variant-numeric:tabular-nums;
  }
  .design-when i { font-size:8px; opacity:.7; color:var(--icon); }
  .lb-caption[hidden] { display:none; }

  @media (max-width:640px) {
    
    .lb { padding:var(--sp-3) 4px; }
    .lb-shell { gap:2px; }
    .lb-nav, .lb-close { width:30px; height:30px; }
    .lb-side { flex-basis:30px; }
  }

  
  .tilegroup {
    margin-top:var(--sp-4); margin-bottom:var(--sp-2);
    font-size:var(--fs-label); color:var(--ink-faint);
    letter-spacing:.06em; text-transform:uppercase;
  }
  .tilegroup:first-of-type { margin-top:var(--sp-2); }

  
  .orph-kind {
    flex:0 0 auto; padding:2px 9px; border-radius:var(--pill);
    background:var(--pill-fill); border:1px solid var(--border-2);
    font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .orph-path {
    flex:1 1 220px; min-width:0;
    font-size:var(--fs-xs); color:var(--ink-faint);
    overflow-wrap:anywhere;
  }

  
  .up-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:var(--sp-3); margin-top:var(--sp-3);
  }
  .up-item { position:relative; }

  
  .up-tick {
    position:absolute; top:6px; left:6px; z-index:2;
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    border:1px solid var(--border-2); box-shadow:var(--pill-lip);
    cursor:pointer;
  }
  .up-tick input { margin:0; cursor:pointer; }

  
  .up-open {
    display:flex; flex-direction:column; gap:4px;
    width:100%; padding:6px; cursor:pointer; text-align:left;
    font-family:inherit; color:inherit;
    border:1.5px solid color-mix(in srgb, var(--clay) 45%, var(--trim, var(--sage)));
    border-radius:var(--radius-sm);
    background:linear-gradient(180deg, var(--trim-soft, var(--sage-soft)) 0, var(--box-fade) 100%);
    box-shadow:var(--shadow-sm);
    transition:filter var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  .up-open:hover, .up-open:focus-visible {
    filter:brightness(1.03);
    border-color:var(--clay);
  }
  .up-art {
    display:block; width:100%; aspect-ratio:1 / 1;
    border-radius:calc(var(--radius-sm) - 4px);
    background-color:var(--paper);
    background-size:contain; background-repeat:no-repeat; background-position:center;
  }
  .up-name {
    font-size:var(--fs-xs); font-weight:600; color:var(--clay-deep);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .up-meta {
    font-size:10px; color:var(--ink-faint);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  
  .up-bulk {
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3);
    margin-top:var(--sp-3); padding:var(--sp-3);
    border:1px dashed var(--border-2); border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--paper) 45%, transparent);
  }
  .up-bulk-lead {
    font-size:var(--fs-xs); color:var(--ink-faint);
    letter-spacing:.04em; text-transform:uppercase;
  }
  .up-bulk-lead i { color:var(--icon); margin-right:5px; }
  .up-bulk-set { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .up-bulk-set input[type="text"] {
    width:150px; font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    padding:6px 10px; border-radius:var(--pill);
    border:1px solid var(--border-2); background:var(--pill-fill);
  }

  
  .up-cats { max-height:84px; overflow-y:auto; }

  
  .up-add { display:flex; flex-direction:column; gap:var(--sp-4); }
  .up-add-row {
    display:flex; flex-wrap:wrap; gap:var(--sp-4);
    align-items:flex-start;
  }
  
  .up-add-row > .field { flex:1 1 200px; min-width:0; }
  .up-add-kind { display:flex; flex-direction:column; gap:var(--sp-4); }
  .up-add-kind[hidden] { display:none; }
  .up-add .foot-row { margin-top:var(--sp-2); }
  .up-add-none { font-size:var(--fs-sm); color:var(--ink-faint); }
  .up-add-none[hidden] { display:none; }
  
  .up-add .field-hint { margin-left:0; font-weight:400; }

  
  .up-pick { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .up-pick select, .up-pick input[type="text"] {
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    padding:6px 10px; border-radius:var(--pill);
    border:1px solid var(--border-2); background:var(--pill-fill);
    max-width:100%;
  }
  .up-pick input[type="text"] { width:150px; }
  .up-pick input[hidden] { display:none; }

  
  .up-tags {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    padding:5px 6px; border-radius:var(--radius-sm);
    border:1px solid var(--border-2); background:var(--paper-soft);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    outline-offset:-5px;
  }
  .up-tags:focus-within { outline-color:color-mix(in srgb, var(--clay) 60%, transparent); }
  .up-tags-set { display:contents; }
  .up-tag {
    display:inline-flex; align-items:center; gap:5px;
    padding:2px 4px 2px 9px; border-radius:var(--pill);
    background:var(--pill-fill); border:1px solid var(--border-2);
    font-size:var(--fs-xs); color:var(--clay-deep);
  }
  .up-tag-off {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; cursor:pointer;
    border:0; background:transparent; color:var(--ink-faint); font-size:10px;
    transition:color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  }
  .up-tag-off:hover { background:var(--clay); color:var(--paper); }
  #upEditTagNew {
    flex:1 1 90px; min-width:90px;
    border:0; background:transparent; outline:none;
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink);
    padding:3px 4px;
  }

  
  .up-drop-note {
    font-size:10px; color:var(--ink-faint);
    overflow-wrap:anywhere; margin-top:-2px;
  }

  
  .upedit-box { grid-template-columns:minmax(0,1fr) 340px; }
  @media (max-width:860px) { .upedit-box { grid-template-columns:minmax(0,1fr); } }
  .upedit-stage { min-height:260px; }
  .upedit-form, .upedit-drop {
    display:flex; flex-direction:column; gap:var(--sp-2);
    min-height:0; flex:1;
  }
  .upedit-form[hidden], .upedit-drop[hidden] { display:none; }
  .upedit-extra {
    display:flex; flex-direction:column; gap:var(--sp-2);
    padding-top:var(--sp-2); margin-top:2px;
    border-top:1px dashed var(--border-2);
  }
  .upedit-extra[hidden] { display:none; }
  
  .upedit-box .respanel-side { overflow-y:auto; }

  
  ::selection {
    background:rgba(140,103,67,.28);
    color:var(--ink);
    text-shadow:none;
  }
  ::-moz-selection {
    background:rgba(140,103,67,.28);
    color:var(--ink);
    text-shadow:none;
  }
  
  .hero ::selection { background:rgba(255,246,230,.45); color:var(--clay-deep); }
  .hero ::-moz-selection { background:rgba(255,246,230,.45); color:var(--clay-deep); }

  
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--clay) var(--paper-soft);
  }
  *::-webkit-scrollbar { width:11px; height:11px; }
  *::-webkit-scrollbar-track {
    background:var(--paper-soft);
    border-radius:var(--pill);
  }
  *::-webkit-scrollbar-thumb {
    background:var(--clay);
    border:2px solid var(--paper-soft);
    border-radius:var(--pill);
  }
  *::-webkit-scrollbar-thumb:hover { background:var(--clay-deep); }
  *::-webkit-scrollbar-corner { background:transparent; }

  
  html { scrollbar-color: var(--clay) rgba(250,244,232,.5); }
  html::-webkit-scrollbar-track { background:rgba(250,244,232,.45); }
  html::-webkit-scrollbar-thumb { border-color:rgba(250,244,232,.45); }

  
  .statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
  .statgrid.three { grid-template-columns:repeat(3,1fr); }
  @media (max-width:560px) { .statgrid, .statgrid.three { grid-template-columns:repeat(2,1fr); } }
  .stat {
    text-align:center; padding:var(--sp-3) var(--sp-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
    border-radius:var(--radius-sm);
  }
  .stat-n {
    display:block; font-family:var(--script); font-size:1.7rem; line-height:1;
    color:var(--sage-deep); font-variant-numeric:tabular-nums;
  }
  .stat-l {
    display:block; margin-top:4px;
    font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .stat-note { margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-soft); }
  .stat-note i { color:var(--gold-deep); margin-right:5px; }

  
  .spark {
    display:flex; align-items:flex-end; gap:3px;
    height:56px; margin-top:var(--sp-4);
    padding:var(--sp-2); background:var(--paper-soft);
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
  }
  
  .spark-bar {
    flex:1; display:flex; align-items:flex-end; height:100%;
    cursor:default;
  }
  .spark-bar > span {
    width:100%; border-radius:2px 2px 0 0;
    background:linear-gradient(to top, var(--clay), var(--gold));
    transition:filter var(--speed) var(--ease);
  }
  .spark-bar:hover > span { filter:brightness(1.15); }
  .spark-bar:last-child > span { background:linear-gradient(to top, var(--sage-deep), var(--sage)); }
  .spark-axis {
    display:flex; justify-content:space-between;
    font-size:var(--fs-xs); color:var(--ink-faint); margin-top:4px;
  }

  .tilegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-3); }
  .mtile {
    display:flex; flex-direction:column; gap:3px;
    padding:var(--sp-4); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .mtile:hover { filter:brightness(1.05); }
  
  .mtile-head { display:flex; align-items:center; gap:8px; }
  .mtile-head i { font-size:15px; color:var(--icon); flex-shrink:0;
                  transition:var(--icon-ease); }
  .mtile-label { font-weight:700; font-size:var(--fs-sm); color:var(--ink);
                 transition:var(--icon-ease); }
  .mtile-note { font-size:var(--fs-xs); color:var(--ink-faint); }
  
  .mtile:hover .mtile-label { color:var(--icon); }
  .mtile:hover .mtile-head i { color:var(--ink); }
  
  .mtile.not-built { opacity:.62; border-style:dashed; }
  .mtile.not-built .mtile-head i { color:var(--ink-faint); }

  .pairlist i.ok  { color:var(--color-ok, var(--sage-deep)); }
  .pairlist i.bad { color:var(--berry); }

  
  
  .skill-groups { grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
  
  .skills {
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(140px,auto));
    justify-content:start;
    
    gap:var(--sp-8) var(--sp-4);
  }
  
  .skills .skill-name { white-space:nowrap; }
  
  .skills .skill {
    display:grid; grid-template-columns:auto minmax(0,1fr);
    align-items:center; gap:2px var(--sp-2);
  }
  .skills .skill-icon { grid-column:1; grid-row:1; }
  .skills .skill-name { grid-column:2; grid-row:1; }
  .skills .stars { grid-column:2; grid-row:2; }
  .skills .stars i { font-size:12px; }

  
  .faq-item .faq-wrap {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 280ms var(--ease);
  }
  .faq-item.is-open .faq-wrap { grid-template-rows:1fr; }
  .faq-chev { transition:transform 280ms var(--ease); }
  .faq-item.is-open .faq-chev { transform:rotate(180deg); }
  @media (prefers-reduced-motion: reduce) {
    .faq-item .faq-wrap, .faq-chev { transition:none; }
  }

  
  
  .tip {
    position:fixed; top:0; left:0; z-index:10100;
    max-width:min(280px, calc(100vw - 16px));
    
    padding:8px 12px; border-radius:var(--radius-sm);
    
    background:var(--pill-fill);
    border:1px solid var(--border-2);
    
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    color:var(--ink);
    
    font-size:.90rem; font-family:var(--sans); font-weight:600;
    letter-spacing:normal; line-height:1.45;
    overflow-wrap:anywhere;
    box-shadow:var(--pill-lip), var(--shadow);
    pointer-events:none;
    opacity:0; transition:opacity var(--speed) var(--ease);
  }
  .tip[hidden] { display:none; }
  .tip.is-on { opacity:1; }
  @media (prefers-reduced-motion: reduce) { .tip { transition:none; } }

  
  .social-row { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
  .social {
    --brand: var(--sage-deep);
    display:inline-flex; align-items:center; justify-content:center;
    
    width:34px; height:34px; border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
    color:var(--ink-soft); font-size:1.05rem;
    transition:color var(--speed) var(--ease), border-color var(--speed) var(--ease),
               background var(--speed) var(--ease);
  }
  a.social { cursor:pointer; }
  
  .social i { transition:var(--icon-ease); }

  
  
  .social:hover {
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 26%, var(--box-fade)) 0,
      color-mix(in srgb, var(--brand) 13%, var(--box-fade)) 42%,
      color-mix(in srgb, var(--brand) 7%,  var(--box-fade)) 100%);
    border-color:color-mix(in srgb, var(--brand) 42%, var(--border-2));
  }
  .social:hover i { color:var(--brand); }

  
  .social:has(.fa-discord)     { --brand:#5865F2; }
  .social:has(.fa-instagram)   { --brand:#E1306C; }
  .social:has(.fa-twitter)     { --brand:#1DA1F2; }
  .social:has(.fa-x-twitter)   { --brand:#111111; }
  .social:has(.fa-twitch)      { --brand:#9146FF; }
  .social:has(.fa-youtube)     { --brand:#FF0000; }
  .social:has(.fa-tiktok)      { --brand:#111111; }
  .social:has(.fa-github)      { --brand:#24292f; }
  .social:has(.fa-facebook-f)  { --brand:#1877F2; }
  .social:has(.fa-linkedin-in) { --brand:#0A66C2; }
  .social:has(.fa-spotify)     { --brand:#1DB954; }
  .social:has(.fa-steam)       { --brand:#1b2838; }
  .social:has(.fa-pinterest)   { --brand:#E60023; }
  .social:has(.fa-reddit)      { --brand:#FF4500; }
  .social:has(.fa-tumblr)      { --brand:#36465D; }
  .social:has(.fa-snapchat)    { --brand:#c9c400; }
  .social:has(.fa-bluesky)     { --brand:#0085ff; }
  .social:has(.fa-mastodon)    { --brand:#6364FF; }
  .social:has(.fa-threads)     { --brand:#111111; }
  .social:has(.fa-envelope)    { --brand:var(--clay-deep); }
  .social:has(.fa-link)        { --brand:var(--sage-deep); }
  
  
  .lb-shell {
    display:flex; align-items:center; justify-content:center;
    gap:var(--sp-3);
    max-width:100%; max-height:100%; min-width:0;
  }
  
  .lb-nav {
    flex:0 0 auto;
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    border:1px solid var(--border-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip), var(--shadow-sm);
    color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               border-color var(--speed) var(--ease),
               background-color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  
  .lb-nav[hidden] { display:block; visibility:hidden; }

  
  .lb-panel {
    position:relative;
    animation:lbPop .22s var(--ease);
    display:flex; flex-direction:column;
    min-width:0; max-width:min(760px, 100%); max-height:100%;
    padding:var(--sp-3);
    background:var(--box-fade);
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
  }
  .lb-panel::after {
    content:""; position:absolute; z-index:1; pointer-events:none;
    inset:5px;
    border:1.5px dashed color-mix(in srgb, var(--border-2) 75%, transparent);
    border-radius:calc(var(--radius-sm) - 3px);
  }
  
  @media (prefers-reduced-motion: reduce) { .lb-panel { animation:none; } }

  
  .lb-side {
    position:relative; flex:0 0 34px; align-self:stretch;
    display:flex; align-items:center; justify-content:center;
  }
  .lb-side--r .lb-close { position:absolute; top:0; left:0; }
  .lb-close {
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    border:1px solid var(--border-2);
    background:var(--pill-fill); box-shadow:var(--pill-lip), var(--shadow-sm);
    color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    transition:filter var(--speed) var(--ease), color var(--speed) var(--ease),
               border-color var(--speed) var(--ease),
               background-color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  
  .lb-close:hover, .lb-nav:hover,
  .lb-close:focus-visible, .lb-nav:focus-visible {
    background-image:var(--btn-fill);
    border-color:var(--clay);
    color:var(--clay-deep);
    filter:brightness(1.04);
    outline-color:color-mix(in srgb, var(--clay) 50%, transparent);
  }
  .lb-close[hidden] { display:none; }

  .lb-counter {
    margin-top:var(--sp-2); text-align:center;
    color:var(--ink-faint); font-size:var(--fs-xs);
    letter-spacing:.1em; font-variant-numeric:tabular-nums;
  }
  .lb-counter[hidden] { display:none; }

  
  
  .fav-card, .skill-group {
    position:relative; overflow:hidden;
    padding:var(--sp-4) var(--sp-4) var(--sp-3);
  }
  
  
  .skill-group { padding:13px 13px 18px; }
  .fav-card .fav-head, .skill-group .fav-head { margin-bottom:var(--sp-2); }

  
  .fav-card .chip-tag { flex:1 1 auto; }
  
  .fav-card .chip-tag.swatch { flex:0 0 auto; }

  
  .chip-tag.flagged { gap:6px; }
  .flag { font-size:1.05em; line-height:1; }

  
  .faq-item .faq-answer { overflow:hidden; min-height:0; padding:0; }
  .faq-item .faq-inner {
    padding:0 var(--sp-3) var(--sp-3) calc(var(--sp-3) + 20px);
    font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.65;
  }

  
  
  .has-tip { cursor:help; }

  
  .contact-line .mail { margin-top:3px; }

  
  i.fas, i.fab, i.far {
    text-shadow: var(--shadow-icon);
  }
  .lb i.fas, .drift i, .leafmark { text-shadow:none; }
  .box-title .tic, .tl-dot i {
    filter: var(--shadow-icon-svg);
  }

  
  [data-tip] { cursor:default; }
  a[data-tip], button[data-tip] { cursor:pointer; }
  .creditlist li[data-tip] { position:relative; }
  .creditlist li[data-tip]::after { white-space:normal; max-width:240px; text-align:center; }

  
  .foot-btn, .btn, .chip-tag, .upd-react, .poll-tab, .res-tab,
  .mail, .pg, .log-status, .tagpick-one > span, .req-name, .ed-link-go,
  .affi-file, .social, .to-top, .icon-btn, .legal-n,
  .rulelist--numbered li::before {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    
    transition:filter var(--speed) var(--ease),
               color var(--speed) var(--ease),
               border-color var(--speed) var(--ease),
               background-color var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }

  
  .pg, .log-status,
  .tagpick-one > span, .req-name, .ed-link-go {
    padding-block:4px; outline-offset:-4px;
  }
  
  .poll-tab, .res-tab { padding-block:8px; }
  
  .foot-btn { outline-offset:-4px; }
  
  .btn { padding-block:7px; }
  .mail { outline-offset:-4px; }
  
  .social { outline-offset:-4px; }
  
  .chip-tag { min-height:28px; outline-offset:-4px; }
  
  .upd-react { min-height:24px; outline-offset:-3px; }
  .legal-n, .rulelist--numbered li::before { width:26px; height:26px; }

  
  .upd-tag, .poll-cat {
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-3px;
  }

  
  .legal-n, .rulelist--numbered li::before {
    outline-color:color-mix(in srgb, var(--paper) 75%, transparent);
  }

  
  .foot-btn:hover, .btn:hover, .poll-tab:hover, .res-tab:hover, .pg:hover,
  .social:hover, .icon-btn:hover, .to-top:hover, .mail:hover,
  .foot-btn:focus-visible, .btn:focus-visible,
  .poll-tab:focus-visible, .res-tab:focus-visible,
  .tagpick-one > input:focus-visible + span {
    
    outline:1.5px dashed color-mix(in srgb, var(--clay) 45%, transparent);
  }
  
  .to-top {
    transition:opacity var(--speed) var(--ease),
               transform var(--speed) var(--ease),
               visibility 0s linear var(--speed),
               filter var(--speed) var(--ease),
               outline-color var(--speed) var(--ease);
  }
  .to-top.is-up { transition-delay:0s; }
  

  

  .mobile-bar { display:none; }
  .drawer-scrim { display:none; }

  @media (max-width:900px) {

    
    :root { --mb-h:52px; }

    
    .cols { grid-template-columns:minmax(0,1fr); }

    
    
    .mobile-bar {
      display:flex; align-items:center; gap:var(--sp-3);
      position:sticky; top:0; z-index:9020;
      min-height:var(--mb-h); margin-bottom:var(--sp-4);
      padding:6px var(--sp-3);
      border:1px solid var(--border-2); border-radius:var(--radius);
      background:var(--box-fade);
      backdrop-filter:blur(6px);
      box-shadow:0 2px 10px rgba(40,30,22,.10);
      transition:margin-inline .16s var(--ease),
                 padding-inline .16s var(--ease),
                 border-radius .16s var(--ease);
    }
    
    .mobile-bar.is-stuck {
      margin-inline:calc(-1 * var(--sp-4));
      padding-inline:var(--sp-4);
      border-radius:0;
      border-top:0; border-left:0; border-right:0;
    }
    @media (prefers-reduced-motion: reduce) { .mobile-bar { transition:none; } }
    .mb-rails { display:flex; align-items:center; gap:6px; margin-left:auto; }

    
    .admin-bar { display:none; }

    .mb-mine {
      position:relative; text-decoration:none;
      
      padding:7px 10px;
    }
    
    .mb-mine .admin-dot { top:3px; left:auto; right:3px; }

    .mb-btn {
      display:inline-flex; align-items:center; gap:7px;
      padding:7px 11px; border-radius:999px;
      border:1px solid var(--border-2);
      background:color-mix(in srgb, var(--paper) 70%, transparent);
      color:var(--ink-soft); font-size:var(--fs-sm); cursor:pointer;
      outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
      outline-offset:-4px;
      transition:background var(--speed) var(--ease),
                 color var(--speed) var(--ease),
                 outline-color var(--speed) var(--ease);
    }
    .mb-btn i { font-size:13px; color:var(--icon); }
    .mb-btn:hover, .mb-btn[aria-expanded="true"] {
      background:color-mix(in srgb, var(--sage-soft) 60%, var(--paper));
      color:var(--ink);
      outline-color:color-mix(in srgb, var(--clay) 45%, transparent);
    }
    .mb-burger { font-weight:600; }

    
    @media (max-width:430px) {
      .mb-rails .mb-btn span { position:absolute; width:1px; height:1px;
        overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
      .mb-rails .mb-btn { padding:7px 10px; }
    }

    
    
    .nav-col, .col.shout-col {
      position:fixed; top:0; bottom:0; z-index:9010;
      width:min(86vw, 340px);
      margin:0; padding:calc(var(--mb-h) + var(--sp-4)) var(--sp-4) var(--sp-5);
      overflow-y:auto; overscroll-behavior:contain;
      background:var(--paper);
      box-shadow:0 0 30px rgba(40,30,22,.28);
      visibility:hidden;
      transition:transform .26s var(--ease), visibility 0s linear .26s;
    }
    
    .nav-col {
      left:0; border-right:1px solid var(--border-2); transform:translateX(-100%);
      width:min(66vw, 260px);
    }
    
    .col.shout-col {
      right:0; left:auto;
      transform:translateX(100%);
      grid-column:auto;
      background:none; box-shadow:none; border:0;
    }
    .nav-col.is-open, .col.shout-col.is-open {
      transform:none; visibility:visible; transition-delay:0s;
    }

    
    .nav-col > *, .col.shout-col > * { flex:0 0 auto; }

    
    .nav-col .box {
      border:0; border-radius:0; padding:0; margin:0;
      background:none; box-shadow:none; overflow:visible;
    }
    
    .nav-col .box::before,
    .nav-col .box::after,
    .nav-col .box > svg,
    .nav-col .leafmark { display:none; }
    .nav-col .content { padding:0; }

    
    .nav-col .box-title {
      margin:0 0 var(--sp-1);
      padding-top:var(--sp-4);
      align-items:center;
    }
    .nav-col .box + .box .box-title {
      border-top:1px dashed var(--border-2);
    }
    .nav-col .box-title .name { font-size:1.3rem; text-shadow:none; }
    .nav-col .box-title .tic  { font-size:14px; width:16px; height:16px; }
    .nav-col .box-title .tabs { font-size:9px; }

    
    .nav-col .navgrid { display:block; }
    .nav-col .navgrid::after { display:none; }

    
    .nav-col .navgrid a {
      display:block;
      padding:11px 2px; margin-inline:0;
      min-height:44px; line-height:1.4;
      font-size:var(--fs-base);
    }
    
    .nav-col .navgrid a .ic,
    .nav-col .nav-sub .sic { display:none; }

    
    .nav-col .nav-sub {
      margin-top:var(--sp-3); padding-bottom:0;
      font-size:9px;
    }

    
    .col.shout-col[data-show="status"] > [data-rail]:not([data-rail="status"]),
    .col.shout-col[data-show="jam"]    > [data-rail]:not([data-rail="jam"]),
    .col.shout-col[data-show="shout"]  > [data-rail]:not([data-rail="shout"]) {
      display:none;
    }

    
    .drawer-scrim:not([hidden]) {
      display:block; position:fixed; inset:0; z-index:9000;
      background:rgba(40,30,22,.42);
      backdrop-filter:blur(1px);
    }
    
    body.drawer-open { overflow:hidden; }

    
    body.drawer-open .mobile-bar {
      position:fixed; top:0; left:0; right:0;
      margin:0;
    }
  }

  @media (max-width:900px) and (prefers-reduced-motion: reduce) {
    .nav-col, .col.shout-col { transition:visibility 0s; }
  }
  

  

  
  .news-head {
    display:flex; align-items:flex-start; gap:var(--sp-3);
    margin-bottom:var(--sp-3);
  }
  .news-facts { flex:1; min-width:0; }
  
  .news-face {
    position:relative;
    flex:0 0 auto; width:86px; height:86px; border-radius:50%;
    padding:6px;
    background:linear-gradient(180deg, var(--trim-soft) 0, var(--box-fade) 100%);
    border:1px solid var(--trim);
    box-shadow:var(--shadow-sm);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--icon);
  }
  .news-face::after {
    content:""; position:absolute; z-index:2; pointer-events:none;
    inset:2px; border-radius:50%;
    border:1.5px dashed var(--border-2);
    opacity:.75;
  }
  .news-face img {
    width:100%; height:100%; border-radius:50%;
    object-fit:cover; object-position:center top;
    box-shadow:0 0 0 1px var(--border-2);
  }

  
  .news-title {
    font-family:var(--script); font-size:2rem; line-height:1.05;
    color:var(--clay-deep); overflow-wrap:anywhere;
  }
  
  .news-title a {
    color:inherit; border:0;
    transition:color var(--speed) var(--ease);
  }
  .news-title a:is(:hover, :focus-visible) { color:var(--link-hover); }

  .news-meta {
    margin-top:6px; display:flex; align-items:center; flex-wrap:wrap; gap:5px;
    font-size:var(--fs-xs); color:var(--ink-faint);
  }
  
  .news-meta--edit { margin-top:5px; }
  
  .news-meta--edit .news-fact {
    padding:3px 9px; gap:5px;
    font-size:.74rem; line-height:1.35;
    outline-offset:-3px;
  }
  .news-meta--edit .news-fact i { font-size:9px; }
  
  
  .news-fact {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px; border-radius:var(--pill);
    border:1px solid var(--border-2);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-4px;
    
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    font-size:var(--fs-xs); line-height:1.4; color:var(--ink-faint);
  }
  
  .news-fact i {
    width:auto; line-height:1; flex-shrink:0;
    position:relative; top:.5px;
  }
  
  .news-fact + .news-fact { margin-left:5px; }
  
  
  .upd-who { color:var(--link); font-weight:600; text-decoration:none; }
  .upd-who:hover { color:var(--link-hover); }
  .upd-who i { color:var(--icon); }
  
  .news-fact .shout-name { font-size:inherit; }
  .news-fact i { font-size:10px; opacity:.75; color:var(--icon); }
  .news-fact time { font-variant-numeric:tabular-nums; }
  .news-by a { color:var(--ink-soft); font-weight:600; }
  .news-by a:hover { color:var(--icon); }

  
  
  .news[id], #comments { scroll-margin-top:100px; }

  .news-updates { margin-top:var(--sp-4); }
  .news-updates .foot-row { flex-wrap:wrap; margin-top:var(--sp-3); }
  

  
  .comment-list { display:flex; flex-direction:column; gap:var(--sp-3); }
  .comment {
    padding:var(--sp-3); border-radius:var(--radius-sm);
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    border:1px solid var(--border-2);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
  }
  .comment-head {
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
    margin-bottom:5px; font-size:var(--fs-xs); color:var(--ink-faint);
  }
  .comment-who { font-weight:600; color:var(--ink); }
  .comment-when { font-variant-numeric:tabular-nums; }

  
  .comment-reply {
    margin-top:var(--sp-3); padding-top:var(--sp-3);
    border-top:1px dashed var(--border-2);
  }

  
  .ed-modes { margin-left:auto; display:inline-flex; gap:4px; }
  .ed-mode {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:var(--pill);
    border:1px solid var(--border-2); background:transparent;
    font-family:inherit; font-size:var(--fs-xs); color:var(--ink-faint);
    cursor:pointer;
    transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
  }
  .ed-mode i { font-size:9px; }
  .ed-mode:hover { color:var(--ink); }
  .ed-mode.on {
    background:var(--pill-fill); box-shadow:var(--pill-lip);
    color:var(--ink);
  }
  
  .post-visual {
    min-height:18rem;
    padding:var(--sp-4);
    border:1px solid var(--border-2);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    background:color-mix(in srgb, var(--paper) 60%, transparent);
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    overflow-wrap:anywhere;
  }
  .post-visual:focus {
    outline-color:color-mix(in srgb, var(--clay) 60%, transparent);
    border-color:var(--clay);
  }
  
  .post-visual:empty::before {
    content:"Write the post‚6";
    color:var(--ink-faint);
  }
  
  .ed-bar--visual { border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
  .ed-sep {
    width:1px; align-self:stretch; margin:2px 4px;
    background:var(--border-2);
  }

  
  .ed-visual {
    
    min-height:120px;
    padding:9px 12px;
    font-family:inherit; font-size:var(--fs-sm); line-height:1.6;
    color:var(--ink); background:transparent;
    border:1px solid var(--border-2); border-top-color:var(--border);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    overflow-wrap:anywhere;
  }
  .ed-visual:focus { outline:none; border-color:var(--clay); }
  
  .ed-visual a {
    color:var(--link); font-weight:600; text-decoration:underline;
    text-underline-offset:2px; cursor:pointer;
  }
  .ed-visual a:hover { color:var(--link-hover); }
  .ed-visual:empty::before {
    content:attr(data-empty);
    color:var(--ink-faint);
  }
  
  .ed-swap { margin-left:auto; }
  .ed-bar > * { flex-shrink:0; }

  

  .took-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:var(--sp-4); align-items:start;
    margin-top:var(--sp-4);
  }
  .took-card { display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
  
  .took-title {
    font-family:var(--serif); font-size:var(--fs-md); font-weight:600;
    line-height:1.2; color:var(--clay-deep);
  }
  .took-title a { color:inherit; }

  
  .took-badge {
    box-sizing:border-box;
    padding:var(--sp-3);
    display:flex; align-items:center; justify-content:center; text-align:center;
    background:var(--paper);
    border:1px solid var(--border-2); border-radius:var(--radius-sm);
    
    outline:1.5px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
    outline-offset:-5px;
    font:400 13px/1.45 Verdana, Geneva, sans-serif;
    color:var(--ink);
    
    max-width:100%; overflow:auto; overflow-wrap:anywhere;
  }
  .took-badge img { max-width:100%; height:auto; }
  
  .took-badge table { max-width:100%; border-collapse:collapse; }

  .took-note { margin:0; font-size:var(--fs-sm); font-style:italic; color:var(--ink-soft); }

  
  .took-from {
    display:flex; align-items:center; gap:6px; margin:0;
    font-size:var(--fs-xs); color:var(--ink-faint);
  }
  .took-from i { color:var(--clay); }
  .took-none { margin-top:var(--sp-3); color:var(--ink-soft); }

  

  
  .took-admin {
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-4);
    margin-top:var(--sp-3);
  }
  
  .took-admin-show { flex:0 1 260px; min-width:0; }
  
  .took-admin-facts { flex:999 1 280px; min-width:0; }
  .took-admin-facts .foot-row { margin-top:var(--sp-3); }
  .took-admin-none { margin:0; padding:var(--sp-3) 0; font-size:var(--fs-xs); color:var(--ink-faint); }
  .took-admin-none i { color:var(--clay); }

  
  .took-mine {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--sp-4); align-items:start;
    margin-top:var(--sp-4);
  }
  
  @media (max-width:1180px) { .took-mine { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  @media (max-width:620px)  { .took-mine { grid-template-columns:minmax(0, 1fr); } }
  
  .took-head { margin-top:var(--sp-5); }
  .took-head:first-of-type { margin-top:var(--sp-4); }
  .took-mine + .took-head { margin-top:var(--sp-6); }

  
  .copymore .copy-wrap {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 280ms var(--ease);
  }
  .copymore.is-open .copy-wrap { grid-template-rows:1fr; }
  
  .copymore .copy-inner { overflow:hidden; min-height:0; }
  
  .copymore .copy-inner > :first-child { margin-top:var(--sp-3); }

  @media (prefers-reduced-motion: reduce) {
    .copymore .copy-wrap { transition:none; }
  }