:root {

  --hset-bg:#1a2233;

  --w-navy-bg:#0d1220;  --w-navy-ac:#d8b86a;
  --w-ivory-bg:#f5eee9; --w-ivory-ac:#2F8FA8;
    --bg:#0d1220;
    --ink:#f3f1e8; --ink-2:#e5dfcf; --dim:#9aa2b8;
    --field:#111521; --line:#3c4359; --line-2:#252b3d;
    --gold:#d8b86a; --gold-2:#9f7f37; --on-gold:#15120c;
    --card:rgba(17,21,33,.62); --warn:#e8a0a0;

    --panel:rgba(17,21,33,.5);
    --tint:rgba(255,255,255,.06);

    --drop-cb:rgba(108,193,214,.22);
    --drop-horo:rgba(215,106,152,.22);
    --drop-tool:rgba(184,115,207,.22);
    --mark:rgba(216,184,106,.55);
    --mark-2:rgba(216,184,106,.8);
    --bar:rgba(11,15,26,.94);

    --film:rgba(255,255,255,.04);
    --film-2:rgba(255,255,255,.06);
    --film-3:rgba(255,255,255,.015);

    --fs-1:1.5rem;
    --fs-2:1.375rem;
    --fs-3:1.125rem;
    --fs-4:1.125rem;
    --fs-6:1.125rem;
    --fs-7:1.125rem;
    --fs-9:1rem;
    --fs-10:1rem;
    --fs-11:1rem;
    --fs-12:1rem;
    --fs-14:1rem;
    --glow:rgba(216,184,106,.12);
    --glow-2:rgba(216,184,106,.10);
    --glow-3:rgba(216,184,106,.14);
    --glow-4:rgba(216,184,106,.22);
    --glow-5:rgba(216,184,106,.45);
    --scbar:rgba(216,184,106,.22);
    --fade:#000;
    --on-film:#15120c;
    --sw-ring:rgba(255,255,255,.14);

    --tone:var(--gold); --tone-2:var(--gold-2);
    --btn-bg:none; --btn-bg-c:var(--sel-btn);

    --rect-ink:#d69a6c;

    --here:var(--line);
    --on-here:var(--ink-2);
    --glow-6:rgba(216,184,106,.55);
    --ph:#5c6478;
    --thumb:#606a8a;

    --card-line:var(--line-2);
    --card-ring:none;
    --sb-thumb:var(--glow-6);
    --sb-track:var(--film-2);
    --acc:var(--gold);
    --on-acc:var(--on-gold);
    --on-btn:var(--on-gold);
    --btn-hi:var(--btn-bg);
    --sg-fire:var(--e-fire);
    --sg-earth:var(--e-earth);
    --sg-air:var(--e-air);
    --sg-water:var(--e-water);
    --asp-soft:var(--soft);
    --asp-hard:var(--hard);

    --f-body:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
    --f-head:var(--f-body); --f-head-w:700;
    --f-ui:var(--f-body);   --f-ui-w:inherit;
    --f-form:inherit;
    --f-btn:inherit; --f-btn-w:800; --f-btn-ls:normal;
    --f-num:inherit;

    --num-size:1rem;
    --num-pad-x:.6rem;
    --num-pad-y:.5rem;
    --num-card-pad:1.1rem;

    --lh-body:1.75;
    --lh-head:1.3;
    --lh-ui:1.45;
    --lh-num:1.25;
    --s-soft:#7ad2e6;
    --s-hard:#ff8f6b;

    --on-bar:var(--dim);
  }

  :root[data-preset="ivory"] {

  --hset-bg:#faf6f2;
    --bg:#f5eee9;

    --ink:#1b2430; --ink-2:#1b2430; --dim:#6e685c;
    --field:#faf6f2; --line:#2F8FA8; --line-2:#d8cfc6;

    --gold:#175263; --gold-2:#0F3C4A; --on-gold:#faf6f2;
    --btn:#57B6C8; --btn-2:#46A9BE;
    --card:rgba(250,246,242,.72); --warn:#8a3b3b;
    --panel:rgba(255,255,255,.62);
    --tint:rgba(27,36,48,.05);

    --drop-cb:rgba(46,142,166,.10);
    --drop-horo:rgba(195,40,104,.10);
    --drop-tool:rgba(177,100,202,.10);
    --mark:rgba(47,143,168,.34);
    --mark-2:rgba(23,82,99,.7);

    --bar:rgba(250,246,242,.94);
    --on-bar:#6b7683;
    --on-bar-bg:rgba(47,143,168,.13);

    --scbar:rgba(47,143,168,.38);

    --here:var(--btn);
    --on-here:#fff;
    color-scheme:light;

    --film:rgba(27,36,48,.10);
    --film-2:rgba(27,36,48,.14);
    --film-3:rgba(27,36,48,.02);

    --card-line:var(--line);

    --card-ring:inset 0 0 0 1px var(--bg), inset 0 0 0 2.5px rgba(47,143,168,.45);
    --sb-thumb:var(--mark); --sb-track:var(--tint);

    --acc:var(--btn); --on-acc:#fff;

    --on-btn:#fff;

    --rect-ink:#6d411f;

    --sg-fire:#e50000; --sg-earth:#727400; --sg-air:#007e7c; --sg-water:#0000ff;

    --asp-soft:#2f5bb7; --asp-hard:#b73a3a;
    --s-soft:#2f5bb7;   --s-hard:#b73a3a;
    --thumb:#a9b0b8;
    --glow-2:rgba(47,143,168,.09);
    --glow-5:rgba(47,143,168,.45);
    --glow-3:var(--tint); --glow:var(--tint);
    --ph:#8a93a0;
    --on-film:var(--ink);

    --f-body:var(--f-big);
    --f-head:var(--f-big); --f-head-w:600;
    --f-ui:var(--f-small); --f-ui-w:700;
    --f-form:system-ui,-apple-system,sans-serif;

    --f-btn:var(--f-big); --f-btn-w:400; --f-btn-ls:.14em;

    --f-num:"Hiragino Mincho ProN","BIZ UDPMincho","Yu Mincho",serif;
    --f-small:"Tsukushi A Round Gothic","Hiragino Maru Gothic ProN",
              "BIZ UDPGothic","Meiryo",system-ui,sans-serif;
    --f-big:"Klee","Klee One","Hiragino Mincho ProN",
            "BIZ UDPMincho","Yu Mincho","YuMincho",serif;
  }

  #go, #wgo, button[type="submit"] {
    font-family:var(--f-btn); font-weight:var(--f-btn-w); letter-spacing:var(--f-btn-ls);
  }
  #go:hover:not(:disabled),
  #wgo:hover:not(:disabled),
  button[type="submit"]:hover:not(:disabled) { background-image:var(--btn-hi); }

:root[data-preset="ivory"] #wheelcard {
    border:1px solid var(--line); border-radius:18px; padding:.9rem;
  }

  #basebox { display:contents; }
  #basebox[hidden] { display:none; }

  @media (max-width:34rem) {

    #basebox { display:block; padding:.6rem; }

    html #basebox > #wheelcard,
    html #basebox > #posbox {
      margin:0; border:0; border-radius:0; padding:0;
      background:none; box-shadow:none;
    }

    html #basebox > #wheelcard { margin-bottom:.35rem; }
  }

  * { box-sizing:border-box; }
  html { color-scheme:dark; }

  body {
    margin:0; padding:2rem 1rem 4rem; min-height:100vh; color:var(--ink);

    font-family:var(--f-body);

    line-height:var(--lh-body); background:var(--bg);
  }
  main { max-width:47rem; margin:0 auto; }

  .kicker { font-size:var(--fs-12); letter-spacing:.22em; color:var(--tone); font-weight:700; margin:0 0 .35rem; }

  h1, h2, h3 { font-family:var(--f-head); line-height:var(--lh-head); }
  h1 { font-size:clamp(1.7rem,5vw,2.6rem); font-weight:var(--f-head-w); margin:0 0 .8rem; letter-spacing:.01em; }
  h2, h3 { font-weight:var(--f-head-w); }
  .kicker, label, .lab, .ok1, summary { font-family:var(--f-ui); }

  .kicker, label, .lab, .ok1, summary, .twhint { line-height:var(--lh-ui); }
  .ok1 { font-weight:var(--f-ui-w); }

  .lead { color:var(--ink-2); margin:0 0 1.8rem; font-size:var(--fs-2); line-height:1.75; }

  .card { background:var(--card); border:1px solid var(--card-line); border-radius:18px;
          padding:1.5rem; margin-bottom:1.3rem;

          position:relative; box-shadow:var(--card-ring); }

  #wheelcard { background:none; border:0; border-radius:0; padding:0; }
  .field { margin-bottom:1.1rem; }
  .field:last-of-type { margin-bottom:0; }
  label, .lab { display:block; font-size:var(--fs-6); font-weight:700; color:var(--ink-2); margin-bottom:.4rem; }
  .req { color:var(--gold); font-size:var(--fs-9); font-weight:700; margin-left:.5em; }

  input, select {
    width:100%; height:45px; padding:0 12px; font-size:16px; font-family:var(--f-form);
    background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:18px;
  }

  input[type="date"], input[type="time"] { -webkit-appearance:none; appearance:none; }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value { text-align:left; margin:0; }
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator { opacity:.55; }
  input:focus, select:focus { outline:2px solid var(--gold); outline-offset:1px; }
  input::placeholder { color:var(--ph); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }

  @media (max-width:34rem) { .two { grid-template-columns:1fr; } }

  @media (max-width:49rem) {
    #wheelcard { margin-left:-1rem; margin-right:-1rem; }
  }

  .muted { opacity:.4; transition:opacity .15s; }
  .why { font-size:var(--fs-6); color:var(--gold); margin:.4rem 0 0; }

  .hint { font-size:var(--fs-6); color:var(--dim); margin:.4rem 0 0; }
  .hint b { color:var(--ink-2); font-weight:700; }
  .warn { color:var(--warn); }
  .err { color:var(--warn); font-size:var(--fs-6); min-height:1.3em; margin:.2rem 0 0; }

  button {
    font-family:var(--f-form); color:var(--on-btn); border:0; border-radius:18px; cursor:pointer;
    background-color:var(--btn-bg-c); background-image:var(--btn-bg);
  }

  #go, #wgo, button[type="submit"] {
    width:100%; margin-top:1.4rem; padding:14px 12px; font-size:var(--fs-2); font-weight:800;
  }
  button:disabled { opacity:.55; cursor:default; }

  .notes { margin:1.1rem 0 0; padding:0; list-style:none; font-size:var(--fs-9); color:var(--dim); }
  .notes li { margin:.3rem 0; }

  details { margin-top:1rem; border:1px solid var(--card-line); border-radius:18px; background:var(--panel); }
  summary { cursor:pointer; padding:.7rem 1rem; font-size:var(--fs-6); font-weight:700; color:var(--gold); }
  details .body { padding:0 1rem 1rem; font-size:var(--fs-9); color:var(--dim); }
  details .body a { color:var(--ink-2); }

  .h2 { font-size:var(--fs-3); font-weight:700; margin:0 0 .8rem; color:var(--ink); }
  .tw { overflow-x:auto; }
  #postbl, #postbl2 { border-collapse:collapse; width:100%; font-size:var(--num-size); font-family:var(--f-num); }

  #postbl th , #postbl2 th { text-align:left; font-weight:700; color:var(--dim); font-size:var(--fs-9);
               padding:var(--num-pad-y) var(--num-pad-x); border-bottom:1px solid var(--line-2);
               white-space:nowrap; line-height:var(--lh-num); }
  #postbl td , #postbl2 td { padding:var(--num-pad-y) var(--num-pad-x); border-bottom:1px solid var(--film); white-space:nowrap; line-height:var(--lh-num); }
  #postbl .sym , #postbl2 .sym { font-size:var(--fs-2);
                 font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
                 font-variant-emoji:text; color:var(--p, var(--ink-2)); }

  #postbl .sg , #postbl2 .sg { font-size:var(--fs-3);
                font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
                font-variant-emoji:text; }
  #postbl .sg.e0 , #postbl2 .sg.e0 { color:var(--sg-fire); } #postbl .sg.e1 , #postbl2 .sg.e1 { color:var(--sg-earth); }
  #postbl .sg.e2 , #postbl2 .sg.e2 { color:var(--sg-air); } #postbl .sg.e3 , #postbl2 .sg.e3 { color:var(--sg-water); }
  #postbl .deg , #postbl2 .deg { font-variant-numeric:tabular-nums; }

  #postbl .rx  , #postbl2 .rx  { color:var(--dim); font-size:var(--fs-6); }

  #postbl .edge , #postbl2 .edge { color:var(--gold); font-size:var(--fs-9); }

  #postbl tr.angle td , #postbl2 tr.angle td { color:var(--ink); }

  pre { white-space:pre-wrap; word-break:break-word; font-size:var(--fs-6); line-height:1.7;
        margin:0; color:var(--ink-2); overflow-x:auto; }

.bars { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
        white-space:pre; word-break:normal; overflow-x:auto; font-size:var(--fs-9);
        line-height:1.55; margin:0; color:var(--ink-2); letter-spacing:0; }
.bars b { color:var(--gold); font-weight:400; }

.bar1 { font-size:var(--fs-9); margin:.35rem 0 .6rem; }

.tw { overflow-x:auto; position:relative;
      scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }
.tw::-webkit-scrollbar          { height:8px; }
.tw::-webkit-scrollbar-track    { background:var(--tint); border-radius:4px; }
.tw::-webkit-scrollbar-thumb    { background:var(--mark); border-radius:4px; }
.tw::-webkit-scrollbar-thumb:hover { background:var(--mark-2); }

.tw.more { -webkit-mask-image:linear-gradient(90deg,var(--fade) 88%,transparent 100%);
                   mask-image:linear-gradient(90deg,var(--fade) 88%,transparent 100%); }
.tw.more.end { -webkit-mask-image:none; mask-image:none; }

.twhint { font-size:var(--fs-9); color:var(--gold); margin:.35rem 0 0; }
.twhint[hidden] { display:none; }

.startline { margin:2.4rem 0 1.3rem; padding-top:1.5rem; border-top:1px solid var(--gold-2); }
.startline h2 { font-size:var(--fs-1); font-weight:var(--f-head-w); margin:0 0 .5rem;
                letter-spacing:.01em; color:var(--ink); }
.startline .lead { margin:0; }

.sec { margin:0 0 1.3rem; }

details.apx { margin:2.2rem 0 1.3rem; border:0; border-radius:0; background:transparent; }
details.apx > summary { display:block; width:100%; box-sizing:border-box;
  padding:.85rem 1rem; text-align:center; cursor:pointer;
  font-size:var(--fs-6); font-weight:700; letter-spacing:.12em; color:var(--dim);
  border:1px solid var(--card-line); border-radius:18px; background:var(--panel); }
details.apx > summary:hover { color:var(--ink-2); border-color:var(--line-2); }
details.apx > summary::marker, details.apx > summary::-webkit-details-marker { color:var(--dim); }
details.apx[open] > summary { margin-bottom:1.3rem; }

details.apx + details.apx, a.apxgo + details.apx { margin-top:0; }

details.apx.c-star > summary,
details.apx.c-card > summary,
details.apx.c-top  > summary,
a.apxgo.c-top, a.apxgo.c-card, a.apxgo.c-star {
  border:0; color:var(--on-btn); letter-spacing:var(--f-btn-ls);
  font-family:var(--f-btn); font-weight:var(--f-btn-w); font-size:var(--fs-3);
}

:is(details.apx, a.apxgo).c-star { --sel-btn:var(--t-dynamic-btn); }
:is(details.apx, a.apxgo).c-card { --sel-btn:var(--t-predictive-btn); }
:is(details.apx, a.apxgo).c-top  { --sel-btn:var(--t-character-build-btn); }
details.apx:is(.c-star, .c-card, .c-top) > summary, a.apxgo:is(.c-star, .c-card, .c-top) { background:var(--sel-btn); background-image:none; color:var(--on-btn); }
:root[data-preset="ivory"] :is(details.apx:is(.c-star, .c-card, .c-top) > summary, a.apxgo:is(.c-star, .c-card, .c-top)):hover { filter:brightness(1.06); }

a.apxgo.c-rect { margin-top:2.6rem; letter-spacing:var(--f-btn-ls);
  font-family:var(--f-btn); font-weight:var(--f-btn-w); font-size:var(--fs-3);
  background:none; background-image:none;
  border:1px solid var(--rect-ink); color:var(--rect-ink); }
a.apxgo.c-rect:hover { background:var(--tint); }

details.apx[open] > summary { background:var(--panel); background-image:none;
  border:1px solid var(--card-line); color:var(--dim);
  font-family:var(--f-ui); font-weight:700; font-size:var(--fs-6); letter-spacing:.12em; }

details.apx > .apxbody { padding:0; font-size:inherit; color:inherit; }

.ntwrap { margin:.45rem 0 0; }
.ntlab { display:flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:var(--fs-6); color:var(--ink-2); font-weight:400; }
.ntlab input { width:1.05rem; height:1.05rem; margin:0; accent-color:var(--gold); cursor:pointer; }
.ntnote { display:block; margin:.4rem 0 0; }

#t:disabled { opacity:.5; cursor:not-allowed; }

.apxgo { display:block; box-sizing:border-box; width:100%; margin:0 0 1.3rem;
  padding:.85rem 1rem; text-align:center; text-decoration:none;
  font-size:var(--fs-6); font-weight:700; letter-spacing:.12em; color:var(--dim);

  line-height:var(--lh-ui);
  border:1px solid var(--card-line); border-radius:18px; background:var(--panel); }
.apxgo:hover { color:var(--ink-2); border-color:var(--line-2); }

details.apx2 { margin:.7rem 0 .2rem; border:0; background:transparent; }
details.apx2 > summary { display:inline-block; width:auto; padding:.25rem 0;
  text-align:left; cursor:pointer; font-size:var(--fs-7); font-weight:600;
  letter-spacing:.06em; color:var(--dim); border:0; border-radius:0; background:none; }
details.apx2 > summary:hover { color:var(--ink-2); }
details.apx2[open] > summary { margin-bottom:.4rem; }
details.apx2 .apxbody { padding-left:.9rem; border-left:2px solid var(--line); }

a.apxgo.c-min { display:block; width:auto; margin:.35rem 0 0; padding:.2rem 0;
  text-align:left; font-size:var(--fs-7); font-weight:600; letter-spacing:.04em;
  color:var(--ink-2); border:0; border-radius:0; background:none; line-height:var(--lh-ui); }
a.apxgo.c-min:hover { color:var(--ink); text-decoration:underline; }

b.mpwhen { display:inline-block; padding:.05em .5em; border-radius:8px;
  font-size:var(--fs-7); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line-2); color:var(--dim); background:none; }
b.mpwhen.x { border-color:var(--rect-ink); color:var(--rect-ink); }

.apxgo[data-to] { border:0; letter-spacing:var(--f-btn-ls);
  font-family:var(--f-btn); font-weight:var(--f-btn-w); font-size:var(--fs-3);
  line-height:var(--lh-ui); }
.apxgo[data-to]:hover { filter:brightness(1.06); }

.onecta { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line-2); }
.onecta a { text-decoration:none; }
.onecta .cname b { font-size:var(--fs-4); font-weight:700; color:var(--gold); }
.onecta .cname:hover b { text-decoration:underline; }

details.sec.fold { margin:0 0 1.3rem; padding:0; }
details.sec.fold > summary { color:var(--ink); }
details.sec.fold > .body { font-size:inherit; color:inherit; }
.sec hr { border:0; border-top:1px solid var(--line-2); margin:1.4rem 0; }

details .body hr { border:0; border-top:1px solid var(--line-2); margin:.9rem 0; }

.sec.sub { border-color:var(--line-2); background:transparent; padding-top:1rem; padding-bottom:1rem; }
.sec.sub .md3 { margin:0 0 .3rem; font-size:var(--fs-3); }
.sec.sub p { font-size:var(--fs-6); color:var(--dim); margin:0; }

.lk { margin:.6rem 0 0; padding-left:1.1rem; }
.lk li { margin:.5rem 0; font-size:var(--fs-6); color:var(--dim); line-height:1.65; }
.lk li a { color:var(--gold); font-weight:700; }

.tl { min-width:32rem; font-size:var(--fs-12); line-height:1.5;
      border:1px solid var(--line-2); border-radius:12px; overflow:hidden; }
.tl-y, .tl-m { display:flex; }

#postbl td.sym.ang , #postbl2 td.sym.ang { font-family:inherit; font-size:var(--fs-9); font-weight:700; letter-spacing:.02em; }

.tl-y span, .tl-m span { flex-basis:0; text-align:center; padding:.2rem 0;
      border-right:1px solid var(--line-2); }
.tl-y span:last-child, .tl-m span:last-child { border-right:0; }
.tl-y { color:var(--ink-2); font-weight:700; border-bottom:1px solid var(--line-2); }
.tl-m { color:var(--dim); border-bottom:1px solid var(--line-2); }

.tl-b { position:relative; height:1.55rem; border-bottom:1px solid var(--line-2); }
.tl-b:last-child { border-bottom:0; }

.tl-b i { position:absolute; top:.55rem; height:3px; border-radius:999px;
          background:var(--gold); opacity:.85; }

.tl-b u { position:absolute; top:.2rem; height:1.1rem; width:2px; margin-left:-1px;
          background:var(--ink); text-decoration:none; }

.tl-b s { position:absolute; top:.42rem; color:var(--gold); font-size:var(--fs-12);
          text-decoration:none; line-height:1; }
.tl-b s.l::before { content:"◂"; } .tl-b s.l { left:1px; }
.tl-b s.r::before { content:"▸"; } .tl-b s.r { right:1px; }

.tl-b.named { height:1.9rem; }
.tl-b em { position:absolute; left:.4rem; top:.1rem; font-style:normal;
           white-space:nowrap; letter-spacing:.12em; }
.tl-b em .sym { font-size:var(--fs-6); }

.tl-b em b { margin-left:.5em; font-weight:400; font-size:var(--fs-12);
             color:var(--dim); letter-spacing:0; }
.tl-b.named i { top:1.25rem; }
.tl-b.named u { top:.95rem; height:.95rem; }
.tl-b.named s { top:1.12rem; }

.pt { padding:1.5rem 0 .3rem; border-top:2px solid var(--line); }
.pt:first-of-type { border-top:0; padding-top:.4rem; }
.pt h3 { margin:0 0 .1rem; }
.pt .sup { font-size:var(--fs-6); color:var(--dim); margin-top:.45rem; }

.sec .md1 { font-size:var(--fs-1); font-weight:700; color:var(--gold); margin:.2rem 0 .8rem; line-height:1.4; }

a { color:var(--gold); text-underline-offset:.22em; text-decoration-thickness:1px; }
a:visited { color:var(--gold); }
a:hover { color:var(--ink); }

.sec .md2 { font-size:var(--fs-2); font-weight:700; color:var(--ink); margin:0 0 .9rem;
            padding-bottom:.4rem; border-bottom:1px solid var(--line-2); }

.md3 { font-size:var(--fs-4); }
.sec .md3 { font-size:var(--fs-4); font-weight:700; color:var(--ink); margin:1.2rem 0 .5rem; }
.sec .md3:first-child { margin-top:0; }

.sec p  { margin:.6rem 0; font-size:var(--fs-3); color:var(--ink-2); }

.sec .md1 + p, .sec-items .md3 + p { font-size:var(--fs-6); color:var(--ink-2); }

.sec .twhint { font-size:var(--fs-9); color:var(--gold); margin:.35rem 0 0; }
.sec ul { margin:.5rem 0; padding-left:1.2rem; }
.sec li { margin:.3rem 0; font-size:var(--fs-3); color:var(--ink-2); }
.sec strong { color:var(--ink); font-weight:700; }

.mdt { border-collapse:collapse; width:auto; min-width:100%; font-size:var(--num-size); font-family:var(--f-num); }
.mdt th { text-align:left; font-weight:700; color:var(--dim); font-size:var(--fs-9);
          padding:var(--num-pad-y) var(--num-pad-x); border-bottom:1px solid var(--line-2);
          white-space:nowrap; line-height:var(--lh-num); }

.mdt td { padding:var(--num-pad-y) var(--num-pad-x); border-bottom:1px solid var(--film);
          color:var(--ink-2); white-space:nowrap; line-height:var(--lh-num); }
.mdt tr:last-child td { border-bottom:0; }

.mdt .dg { color:var(--gold); }

.mdt .num { text-align:center; font-variant-numeric:tabular-nums; }
.mdt td.sc { font-variant-numeric:tabular-nums; background-repeat:no-repeat;

             background-image:linear-gradient(90deg,
               var(--scbar) var(--w,0%), rgba(0,0,0,0) var(--w,0%)); }

.tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin:0 0 1rem; }
.tab { font:inherit; font-size:var(--fs-9); font-weight:700; cursor:pointer; text-align:center;
       padding:.55rem .3rem; border-radius:999px; white-space:nowrap;
       background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.tab:hover { border-color:var(--gold-2); }
.tab.on { background:var(--acc); color:var(--on-acc); border-color:var(--acc); }

.mdt td.kind { font-weight:700; letter-spacing:.05em; color:var(--ink); }
.mdt td.kind.kX   { color:var(--gold); }
.mdt td.kind.kout { color:var(--dim); }

.sym { font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
       font-variant-emoji:text;

       color:var(--p, inherit); }

.sym.asp      { --p:var(--ink); }
.sym.asp.soft { --p:var(--asp-soft); }
.sym.asp.hard { --p:var(--asp-hard); }

.sym.b-ドラゴンヘッド, .sym.b-ASC, .sym.b-MC { --p:var(--ink-2); }

.mdt td.sym { font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
              font-variant-emoji:text; text-align:center; font-size:var(--fs-2);

              color:var(--p, var(--ink)); }

@media (max-width:34rem) {
  .mdt td, .mdt th { padding-left:.2rem; padding-right:.2rem; }

  .mdt th[style*="2.4rem"] { min-width:1.9rem !important; }
  .mdt th[style*="6rem"]   { min-width:5.4rem !important; }
  .mdt td.sym { font-size:var(--fs-3); }
}

:root[data-fs="xl"] {
  --fs-1:1.75rem;
  --fs-2:1.5rem;
  --fs-3:1.3125rem;
  --fs-4:1.3125rem;
  --fs-6:1.3125rem;
  --fs-7:1.3125rem;
  --fs-9:1.1875rem;
  --fs-10:1.1875rem;
  --fs-11:1.1875rem;
  --fs-12:1.1875rem;
  --fs-14:1.1875rem;
  --num-size:1.1875rem;
  --num-pad-x:.7rem;
  --num-pad-y:.58rem;
}

@media (min-width:34.01rem) {

  .mdt-ev { table-layout:fixed; width:100%; }

  .mdt-ev thead th[style*="2.4rem"]     { width:auto !important;    min-width:0 !important; }

  .mdt-ev thead th[style*="6rem"]       { width:6.25rem !important; min-width:0 !important; }

  .mdt-ev thead th[style*="width:100%"] { width:4.5rem !important; }
}

.chips { display:flex; gap:.4rem; flex-wrap:wrap; }

.dates { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.dates > div > label { font-size:var(--fs-9); font-weight:400; color:var(--dim); margin-bottom:.2rem; }
.dates input { height:36px; padding:0 8px; border-radius:12px; }

.presets { display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem; }

.chips.wrap { display:flex; flex-wrap:wrap; gap:.4rem; }

.chips.wrap .chip { width:auto; padding:.5rem .7rem; font-size:var(--fs-9); white-space:nowrap; }
.presets .chip {
  width:100%;
  text-align:center; padding:.5rem .3rem; font-size:var(--fs-9); white-space:nowrap; }

.chip { -webkit-appearance:none; appearance:none; width:auto;
        font:inherit; font-size:var(--fs-9); cursor:pointer; padding:.3rem .7rem; border-radius:999px;
        background:transparent; color:var(--dim); border:1px solid var(--line-2); }

.chip.on { color:var(--on-acc); background:var(--acc); border-color:var(--acc);
           font-weight:800; box-shadow:0 0 0 1px var(--gold); }
#filt > summary, #note > summary { cursor:pointer; color:var(--gold); font-size:var(--fs-6);
                                   font-weight:700; margin:.6rem 0 0; }
#note .body p { font-size:var(--fs-6); color:var(--ink-2); margin:.5rem 0; }
#filt .field { margin:.8rem 0 0; }
#filt .field > label { display:block; font-size:var(--fs-9); color:var(--dim); margin:0 0 .35rem; }

.mdt tr.live td { background:var(--glow-2); }
.sec .tw { margin:.6rem 0 1rem; }

.pv { padding:.7rem 0; border-top:1px solid var(--line-2); }
.pv:first-of-type { border-top:0; }
.pvh { margin:0 0 .2rem; font-weight:700; color:var(--ink); font-size:var(--fs-4); }
.pvd { margin:0; color:var(--ink-2); font-size:var(--fs-3); }
.cnt { font-weight:400; font-size:var(--fs-9); color:var(--dim); margin-left:.3em; }

:root { --soft:#7ad2e6; --hard:#ff8f6b; }
.iw { width:100%; height:170px; display:block; }
.iwx { display:flex; justify-content:space-between; margin-top:.2rem; }
.iwx span { font-size:var(--fs-12); color:var(--dim); }
.iwx .s, b.s { color:var(--soft); }
.iwx .h, b.h { color:var(--hard); }

.iwm { position:relative; height:2.3rem; margin-top:.15rem; }
.iwm span { position:absolute; top:0; transform:translateX(-50%); font-size:var(--fs-14);
            color:var(--dim); white-space:nowrap; }
.iwm .now { top:1.15rem; color:var(--gold); font-weight:700; font-size:var(--fs-12); }
.pvd .pk { display:block; color:var(--dim); font-size:var(--fs-6); margin-top:.1rem; }

.iwb { margin:0 0 .35rem; }
.iwbr { position:relative; height:1.15rem; }
.iwbr i { position:absolute; top:.28rem; height:.6rem; border-radius:999px; display:block; }
.iwbr i.s { background:var(--soft); }
.iwbr i.h { background:var(--hard); }

.iwbr i.lc { border-top-left-radius:0; border-bottom-left-radius:0; }
.iwbr i.rc { border-top-right-radius:0; border-bottom-right-radius:0; }
.iwbr b { position:absolute; top:0; transform:translateX(-50%); font-size:var(--fs-14);
          font-weight:700; color:var(--bg-ink, var(--on-film)); line-height:1.15rem;
          white-space:nowrap; pointer-events:none; }

.iwbr u { position:absolute; top:.14rem; width:1px; height:.88rem; background:var(--ink);
          opacity:.75; transform:translateX(-50%); }

.iwl { margin:.5rem 0 .2rem; font-size:var(--fs-12); font-weight:700; }
.iwl.s { color:var(--soft); }

.iwl.h { color:var(--hard); margin:.2rem 0 .5rem; }

.iwl .iwn { color:var(--dim); font-weight:400; margin-left:.5em; }
.iwn { margin:.15rem 0 .35rem; font-size:var(--fs-6); color:var(--dim); }

#shift { grid-template-columns:repeat(5, 1fr); margin-top:.5rem; }
#shift .chip { padding:.45rem .1rem; font-size:var(--fs-12); }

.pvd2 { margin:0 0 .15rem; font-size:var(--fs-6); color:var(--ink); font-variant-numeric:tabular-nums; }
.pvd2 .rng { color:var(--dim); font-size:var(--fs-9); margin-left:.3em; }

textarea { width:100%; padding:11px 12px; font-size:16px; font-family:inherit; line-height:1.5;
           background:var(--field); color:var(--ink); border:1px solid var(--line);
           border-radius:18px; resize:vertical; }
textarea:focus { outline:2px solid var(--gold); outline-offset:1px; }
#out input { text-align:center; font-variant-numeric:tabular-nums; font-weight:700; }

.sec ul.cross { list-style:none; margin:.2rem 0 .9rem; padding:0; }
.cross li { margin:0; padding:.75rem 0; border-top:1px solid var(--line-2); }
.cross li:first-child { border-top:0; padding-top:.2rem; }
.cross a { text-decoration:none; }
.cross b { font-size:var(--fs-4); font-weight:700; color:var(--gold); }
.cross a:hover b { text-decoration:underline; }
.cross p { margin:.2rem 0 0; font-size:var(--fs-6); color:var(--dim); }

.cross li.now { background:var(--field); border-radius:12px; padding-left:.7rem; padding-right:.7rem; }
.cross li.now b { color:var(--ink-2); }
.cross li.now span { display:inline-block; margin-left:.6em; padding:.1rem .5rem; border-radius:8px;
                     font-size:var(--fs-12); font-weight:700; letter-spacing:.02em;
                     background:var(--here); color:var(--on-here); vertical-align:.08em; }

.pv1 { margin:0; padding:.5rem 0; border-top:1px solid var(--line-2);
       font-size:var(--fs-3); color:var(--ink); line-height:1.8; }
.pv1:first-of-type { border-top:0; }
.pv1 b.s { color:var(--s-soft); }
.pv1 b.h { color:var(--s-hard); }

.pvt { color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pvt > * { white-space:nowrap; }

.pvk { color:var(--ink); font-weight:700; font-size:var(--fs-9); margin-right:.15em; }
.pvk.kX { color:var(--gold); }

.pva { font-style:normal; color:var(--dim); margin:0 .5em; }
.pvt { margin-left:.7em; }

.tsub { display:inline-block; margin-top:.25rem; color:var(--dim);
          font-size:.92em; letter-spacing:.02em; }

.lead .tsub { font-size:var(--fs-3); }

.sec p > .tsub { font-size:var(--fs-9); }

#scdet { margin-top:.6rem; border:1px solid var(--line-2); border-radius:18px;
         padding:.7rem .9rem .9rem; background:var(--film-3); }
#scdet summary { font-size:var(--fs-9); color:var(--gold); cursor:pointer; }
#scdet[open] summary { margin-bottom:.2rem; }
#sctable { margin-top:.6rem; }

.scr { display:grid; grid-template-columns:3.4rem repeat(4, 1fr); gap:.3rem; align-items:center;

       line-height:1;
       margin-bottom:.3rem; }

.scr b { font-size:var(--fs-12); color:var(--ink-2); font-weight:400; line-height:1.3; }

.scr .chip { padding:.35rem .05rem; font-size:var(--fs-12); white-space:nowrap;

             margin:0; }

#adbox { margin:2rem 0 1.3rem; min-height:1px; overflow:hidden; }

#adbox ins { display:block; }

.foot { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line-2);
        font-size:var(--fs-9); line-height:1.75; color:var(--dim); max-width:47rem;
        margin-left:auto; margin-right:auto; padding-bottom:2rem; }
.foot p { margin:0 0 .5rem; }
.foot p:last-child { margin-bottom:0; }
.foot b { color:var(--ink-2); font-weight:700; }
.foot a { color:var(--ink-2); }

html:lang(ja) details .body p, html:lang(ja) .foot p, html:lang(ja) #coord { word-break:auto-phrase; }

.madeby { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line-2);
          text-align:center; color:var(--dim); }
.madeby a { color:var(--ink-2); }

#hero .md2 i, #hero-sign .md2 i { font-style:normal; color:var(--dim); font-size:.72em; font-weight:400; }
.herog { margin-top:.9rem; }
.hero { display:block; text-decoration:none; max-width:min(24rem, 100%); margin:0 auto; }
.hero img { width:100%; height:auto; border-radius:18px; display:block;
            border:1px solid var(--line-2); }
.hero .hn { display:block; margin-top:.6rem; text-align:center; color:var(--gold);
            font-size:var(--fs-3); letter-spacing:.04em; }
.hero:hover .hn { text-decoration:underline; }

.herog.multi { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:1rem; }
.herog.multi .hero { max-width:none; }

.one { margin:1rem 0 1.3rem; padding:1rem 0 0; border-top:1px solid var(--line-2); }

.lkl { margin:1.1rem 0 .4rem;
  font-size:var(--fs-12); letter-spacing:.18em; color:var(--dim); }
.lkl + .apxgo, .lkl + details.apx { margin-top:0; }

.one .ok1 { margin:0 0 .7rem; font-size:var(--fs-12); letter-spacing:.18em; color:var(--dim); }
.onea { display:block; position:relative; text-decoration:none; max-width:min(24rem, 100%); margin:0 auto; }

.onea .onem { position:absolute; right:.55rem; bottom:.55rem; z-index:1;
  padding:.15rem .45rem; border-radius:8px; pointer-events:none;
  font-size:var(--fs-10); font-weight:700; letter-spacing:.06em;
  color:rgba(255,255,255,.92); background:rgba(21,18,12,.62);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

.onea img { width:100%; height:auto; border-radius:18px; display:block;
            background:#eef2f8;
            border:1px solid var(--line-2); }
.one .ot { display:block; margin-top:.7rem; text-align:center; }
.one b { display:block; font-size:var(--fs-2); color:var(--gold); letter-spacing:.03em; }
.one .on1 { display:block; margin-top:.2rem; font-size:var(--fs-9); color:var(--dim); }
.onea:hover b { text-decoration:underline; }

.cslab { margin:.9rem 0 .4rem; font-size:var(--fs-9); letter-spacing:.14em; color:var(--dim); }
.csg { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:.9rem; }
.cs { display:block; text-decoration:none; color:var(--ink-2); }
.cs img { width:100%; height:auto; border-radius:12px; display:block;
          border:1px solid var(--line-2); }
.cs b { display:block; margin-top:.4rem; font-size:var(--fs-6); color:var(--gold); text-align:center; }
.cs:hover b { text-decoration:underline; }

.cs i { display:block; font-style:normal; font-size:var(--fs-9); color:var(--dim); text-align:center;
        letter-spacing:.04em; margin-top:.1rem; }

.nocard b { color:var(--dim); }

.cardlink { color:var(--gold); text-decoration:none; border-bottom:1px dotted var(--glow-5); }
.cardlink:hover { border-bottom-style:solid; }

.termlink { color:inherit; text-decoration:none; border-bottom:1px dotted var(--dim); }
.termlink:hover { color:var(--gold); border-bottom-color:var(--gold); }

.jg { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
      gap:1rem; margin-top:1rem; }
.jc { display:block; text-decoration:none; color:var(--ink-2); }
.jc img { width:100%; height:auto; border-radius:12px; display:block;
          border:1px solid var(--line-2); }
.jc b { display:block; margin-top:.45rem; font-size:var(--fs-6); color:var(--gold); }
.jc span { display:block; margin-top:.2rem; color:var(--dim); line-height:1.35; font-size:var(--fs-9); }

.zg { display:inline-block; vertical-align:-.12em; margin-right:.42em; }
.jc span .zg:last-child { margin-right:0; }
.jt .gl .zg { margin-right:0; color:var(--gold); }
.jc:hover b { text-decoration:underline; }

.jt { width:100%; border-collapse:collapse; margin-top:.6rem; }
.jt td { padding:.5rem .5rem; border-bottom:1px solid var(--line-2); vertical-align:top; }
.jt tr:last-child td { border-bottom:0; }
.jt .gl { color:var(--gold); font-size:var(--fs-2); width:2.2rem; text-align:center; }
.jt td:nth-child(2) { color:var(--dim); font-size:var(--fs-6); white-space:nowrap; }
.jt td:nth-child(4) { color:var(--dim); font-size:var(--fs-6); }

.tt td { padding:.5rem .5rem; }
.tt .tn { width:7.5rem; color:var(--ink-2); }
.tt .tn b { color:var(--gold); }
.tt .tc { color:var(--dim); font-size:var(--fs-9); white-space:nowrap; }
.tt td:nth-child(3) { color:var(--dim); font-size:var(--fs-6); }

.zl li { margin:.42rem 0; line-height:1.6; }
.zl a { color:var(--gold); }

.botnav { display:none; }

.ttabs { display:none; }

@media (max-width:63.99rem) {
  .botnav[hidden] { display:none; }

  .botstack { position:fixed; left:0; right:0; bottom:0; z-index:40; }
  .botstack .botnav, .botstack .ttabs { position:static; }

  .botnav { display:grid; grid-template-columns:repeat(5, 1fr);
            position:fixed; left:0; right:0; bottom:0; z-index:40;
            background:var(--bar); backdrop-filter:blur(8px);
            border-top:1px solid var(--card-line);

            padding-bottom:env(safe-area-inset-bottom, 0); }

  .ttabs[hidden] { display:none; }

  .ttabs { display:grid; grid-template-columns:repeat(3, 1fr);
           background:var(--bar); backdrop-filter:blur(8px);
           border-top:1px solid var(--card-line); }

  .ttabs .tt1 { margin:0; padding:.5rem .2rem; text-align:center; font-size:var(--fs-12);
                background:transparent; border:0; border-radius:0;
                font-family:inherit; line-height:1.3; cursor:pointer;
                color:var(--gold); }
  .ttabs .tt1.on { color:var(--on-bar, var(--ink-2)); background:var(--on-bar-bg, var(--field)); }
  .ttabs .tt1:active { background:var(--tint); }

  body:has(.ttabs:not([hidden])) { padding-bottom:8.2rem; }

  #tabs { display:none; }

  .botnav a, .botnav span, .botnav button {
                            display:flex; flex-direction:column; align-items:center;
                            justify-content:center; gap:.15rem;
                            margin:0; padding:.5rem .1rem; text-align:center;
                            font-size:var(--fs-14); text-decoration:none;
                            background:transparent; border:0; border-radius:0;
                            font-family:inherit; line-height:1.3; cursor:pointer; }

  .botnav svg { width:24px; height:24px; display:block; }

  .botnav a, .botnav button { color:var(--gold); }
  .botnav a:active, .botnav button:active { background:var(--tint); }

  body:has(#rail:not(.closed)) .botnav button { background:var(--tint); }

  .botnav span { color:var(--on-bar, var(--dim)); background:var(--on-bar-bg, transparent); }

  body:has(.botnav:not([hidden])) { padding-bottom:4rem; }
}

.pt1 { padding:1.1rem 1.5rem 1.3rem; }
.pt1 .pt { padding:0; border-top:0; }

#adbox2 { margin:1.3rem 0; min-height:1px; overflow:hidden; }
#adbox2 ins { display:block; }

.rail { display:block; position:fixed; top:50%; transform:translateY(-50%);
        right:max(1rem, calc(50% - 35rem)); width:11rem; z-index:50;
        background:var(--bar); backdrop-filter:blur(8px);
        border:1px solid var(--card-line); border-radius:18px; padding:.7rem .5rem; }

.railin { max-height:calc(100vh - 3.8rem); overflow-y:auto; overscroll-behavior:contain;
          scrollbar-width:thin; scrollbar-color:var(--thumb) transparent; }
.railin::-webkit-scrollbar { width:6px; }
.railin::-webkit-scrollbar-thumb { background:var(--thumb); border-radius:3px; }
.railin::-webkit-scrollbar-track { background:transparent; }
.rail a, .rail .on, .rail .grp {
        display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem;
        font-size:var(--fs-9); text-decoration:none; border-radius:12px; line-height:1.3; }
.rail a { color:var(--gold); }
.rail a:hover { background:var(--tint); }

.rail .on { color:var(--on-bar, var(--ink-2)); background:var(--on-bar-bg, var(--field)); }

.rail .grp { color:var(--dim); font-size:var(--fs-9); cursor:default; }
.rail a.grp { color:var(--gold); cursor:pointer; }
.rail a.grp:hover { background:var(--tint); }
.rail .grp.on { color:var(--on-bar, var(--ink-2)); background:var(--on-bar-bg, var(--field)); }

.rail .grp:not(:has(svg)) { padding-left:2.3rem; margin-top:.35rem; }

.rail details.rgrp, .rail details.rpre { margin:0; border:0; border-radius:0; background:transparent; }

.rail details.rgrp > summary.grp svg { margin-left:.35rem; margin-right:.15rem; }
.rail details.rgrp > summary.grp, .rail details.rpre > summary.grp {
  display:list-item; list-style-position:inside;
  margin:.35rem 0 0; padding:.45rem .6rem .45rem 1.7rem;
  font-size:var(--fs-9); font-weight:400; color:var(--dim); cursor:pointer; }
.rail details.rgrp > summary.grp::marker, .rail details.rpre > summary.grp::marker { font-size:.7em; color:var(--dim); }
.rail details.rgrp > summary.grp:hover, .rail details.rpre > summary.grp:hover { background:var(--tint); border-radius:12px; }
.rail svg { width:17px; height:17px; flex:0 0 auto; }

.rail .gsub { display:block; padding:.5rem .7rem .2rem 2.6rem; color:var(--dim);
              font-size:var(--fs-12); font-weight:400; }

.rail a, .rail .on, .rail .grp { align-items:center; overflow-wrap:anywhere; }

.rail .sub { padding-left:2.3rem; font-size:var(--fs-9); }

@media (min-width:70rem) {

}

.railtab { display:none; }

#rail.closed .rail { display:none; }
.railx { position:absolute; top:.3rem; right:.45rem; width:1.4rem; height:1.4rem;
         display:flex; align-items:center; justify-content:center;
         background:transparent; border:0; color:var(--dim); font-size:var(--fs-12);
         cursor:pointer; border-radius:8px; padding:0; margin:0; }
.railx:hover { background:var(--tint); color:var(--ink-2); }

.rail { padding-top:1.5rem; }

@media (min-width:64rem) {

  #rail.closed .railtab { display:flex; position:fixed; top:50%; right:0;
           transform:translateY(-50%); z-index:30;
           width:2.4rem; height:4.4rem; flex-direction:column; gap:.15rem;
           align-items:center; justify-content:center;
           background:var(--bar); backdrop-filter:blur(8px);
           border:1px solid var(--card-line); border-right:0;
           border-radius:18px 0 0 18px; color:var(--gold); font-size:var(--fs-12);
           cursor:pointer; padding:0; line-height:1; }
  #rail.closed .railtab svg { width:19px; height:19px; display:block; }
  #rail.closed .railtab .railtab-c { font-size:var(--fs-14); opacity:.8; }
  #rail.closed .railtab:hover { background:var(--glow-3); color:var(--ink-2); }
}

@media (max-width:63.99rem) {
  .rail {
    top:0; bottom:0; right:0; left:auto; width:min(20rem, 82%);
    transform:translateX(0); transition:transform .24s ease;
    border:0; border-radius:0; padding:3.4rem 1rem 1.4rem;

    background:var(--gold); background-image:none; backdrop-filter:none;
    box-shadow:-8px 0 24px rgba(0,0,0,.18);
    color:var(--on-gold); z-index:60;
  }

  :root[data-preset="ivory"] .rail { background:#257084; }

  #rail.closed .rail { display:block; transform:translateX(105%); box-shadow:none; }
  .railin { max-height:calc(100vh - 5rem); }

  .rail a, .rail .on, .rail .grp, .rail details.rgrp > summary.grp, .rail details.rpre > summary.grp {
    color:var(--on-gold); font-size:var(--fs-3); padding:.72rem .7rem; }

  .rail .grp, .rail details.rpre > summary.grp { opacity:.72; font-size:var(--fs-6); }
  .rail details.rgrp > summary.grp { opacity:1; font-weight:700; font-size:var(--fs-6); }
  .rail a:hover, .rail a:active { background:rgba(255,255,255,.16); }
  .rail .on { background:rgba(255,255,255,.22); font-weight:700; }

  :root[data-preset="ivory"] .rail .on { background:rgba(0,0,0,.18); }
  .rail svg { width:19px; height:19px; }
  .rail .sub { padding-left:2.6rem; font-size:var(--fs-6); }

  .rail .gsub { color:var(--on-gold); font-size:var(--fs-6); }
  .railx { top:.9rem; right:.9rem; width:2.2rem; height:2.2rem;
           color:var(--on-gold); font-size:var(--fs-3); opacity:.85; }
  .railx:hover { background:rgba(255,255,255,.16); color:var(--on-gold); }

  #rail:not(.closed)::before {
    content:""; position:fixed; inset:0; z-index:55;
    background:rgba(0,0,0,.38); backdrop-filter:blur(1px); }
}

.scl { margin:.8rem 0 .35rem; font-size:var(--fs-12); color:var(--gold); font-weight:700; }
.scl:first-child { margin-top:0; }
.scr2 { grid-template-columns:5.4rem repeat(2, 1fr); }

:root { --asc:#ff8f6b; --mc:#7ee0a8;

  --ry-asc:#df3600; --ry-mc:#21874d; --ry-fg:#fff; }

.ry { font-size:var(--fs-9); font-variant-numeric:tabular-nums; font-weight:700;
      padding:.15rem .5rem; border-radius:999px; cursor:default;
      border:1px solid transparent;

      background:var(--ry-bg, var(--ry-mc)); color:var(--ry-fg);

      text-align:center; line-height:var(--lh-ui); }

.ry.ry { color:var(--ry-fg); }
.ry.a { --ry-bg:var(--ry-asc); }
.ry.m { --ry-bg:var(--ry-mc); }
.rtleg { margin:.2rem 0 .4rem; }

.how { margin:.4rem 0 .6rem; padding-left:1.2rem; }
.how li { font-size:var(--fs-6); color:var(--ink-2); margin:.3rem 0; }

.rl { margin:.5rem 0 .2rem; }
.rlr { display:grid; grid-template-columns:4.4rem 2.6rem 1fr auto; gap:.5rem;
       align-items:center; padding:.42rem 0; border-top:1px solid var(--line-2); }
.rlr:first-child { border-top:0; }
.rla { font-size:var(--fs-9); color:var(--dim); font-variant-numeric:tabular-nums; }
.rlw { font-size:var(--fs-6); color:var(--ink-2); }
.rld { font-size:var(--fs-9); color:var(--dim); font-variant-numeric:tabular-nums; }
@media (max-width:26rem) {

  .rlr { grid-template-columns:4.4rem 2.6rem 1fr; }
  .rld { grid-column:2 / 4; margin-top:-.15rem; }
}

.rlr.ahead .rlw, .rlr.ahead .rla { color:var(--dim); }
.ah { display:inline-block; margin-left:.4rem; font-size:var(--fs-12); font-weight:700;
      color:var(--dim); border:1px solid var(--line-2); border-radius:999px; padding:.05rem .35rem; }

.tnow { margin-left:.5rem; font-weight:800; color:var(--gold);
        font-variant-numeric:tabular-nums; }

.evr { display:grid; grid-template-columns:1fr 5.4rem 2rem; gap:.4rem;
       align-items:center; margin:.4rem 0; }
.evr select, .evr input { height:40px; }
.evr input { padding:0 .5rem; font-variant-numeric:tabular-nums; }

.evr select { font-size:16px; }
.evx { -webkit-appearance:none; appearance:none; width:100%; height:40px; font:inherit;
       cursor:pointer; border-radius:12px; background:transparent;
       color:var(--dim); border:1px solid var(--line-2); }
.evx:hover { color:var(--ink-2); background:var(--tint); }
#evbtn { grid-template-columns:1fr 1fr; margin-top:.6rem; }

.rec { margin:.7rem 0 0; padding:.6rem .7rem; border-radius:18px;
       background:var(--field); border:1px solid var(--line-2); }
.rech { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem; }
.rect { font-size:var(--fs-2); font-weight:800; color:var(--gold);
        font-variant-numeric:tabular-nums; }
.recs { font-size:var(--fs-9); color:var(--dim); }
.recgo { margin-left:auto; font-size:var(--fs-12); padding:.25rem .6rem; }
.recr { display:grid; grid-template-columns:1.3rem 3.2rem 1fr; gap:.4rem;
        align-items:baseline; padding:.22rem 0; font-size:var(--fs-9); }
.recy { color:var(--dim); font-variant-numeric:tabular-nums; }
.recn { color:var(--ink-2); }
.recw { grid-column:2 / 4; color:var(--dim); font-size:var(--fs-9); margin-top:-.1rem; }
.recd { margin-left:.5rem; font-variant-numeric:tabular-nums; }

.recm { font-weight:800; text-align:center; }
.recm.a3 { color:var(--mc); }
.recm.a1 { color:var(--gold); }
.recm.a0 { color:var(--line); }
.warn { color:var(--warn); }

#placein input#zip { height:44px; padding:0 .6rem; font-size:16px;
                     font-variant-numeric:tabular-nums; margin-bottom:.4rem; }
.prow { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }

.prow button { -webkit-appearance:none; appearance:none; width:100%; font:inherit;
               font-size:var(--fs-9); min-height:48px; padding:.4rem .5rem; cursor:pointer;
               border-radius:18px; line-height:1.25;
               background:transparent; color:var(--gold); border:1px solid var(--line-2); }
.prow button small { display:block; font-size:var(--fs-12); color:var(--dim); margin-top:.1rem; }
.prow button:hover { background:var(--glow); }
.prow button:disabled { color:var(--dim); cursor:default; }

.zdet > summary { cursor:pointer; color:var(--gold); font-size:var(--fs-9);
                  font-weight:700; margin:.5rem 0 0; }
.zdet .body p { font-size:var(--fs-9); color:var(--ink-2); margin:.4rem 0; }
#placemsg { margin-top:.4rem; }

.chips.six { grid-template-columns:repeat(6, 1fr); }
.chips.six .chip { padding:.5rem .15rem; font-variant-numeric:tabular-nums; }

.go { margin:.6rem 0 .3rem; }
.go a { font-weight:700; font-size:var(--fs-6); }

#dec .chip { display:inline-flex; align-items:baseline; gap:.25rem; }
#dec .chip small { font-size:var(--fs-12); opacity:.75; font-variant-numeric:tabular-nums; }
#dec .chip i { font-style:normal; font-size:var(--fs-14); opacity:.8; }

.decs { margin:.5rem 0 .2rem; font-size:var(--fs-6); color:var(--ink-2);
        padding:.55rem .7rem; border-radius:12px;
        background:var(--field); border:1px solid var(--line-2); }
.decs .tsub { font-size:var(--fs-9); }

.rlx { grid-column:1 / -1; margin:.25rem 0 .1rem; font-size:var(--fs-9); color:var(--ink-2);
       padding:.45rem .6rem; border-radius:12px;
       background:var(--field); border:1px solid var(--line-2); }
.rlk { display:block; font-size:var(--fs-12); color:var(--gold); margin-bottom:.15rem; }

.decl { display:block; margin-bottom:.3rem; }
.decl b { display:inline-block; font-size:var(--fs-9); color:var(--gold);
          border:1px solid var(--line-2); border-radius:999px;
          padding:.1rem .5rem; margin:0 .3rem .25rem 0; }
.decl i { font-style:normal; font-size:var(--fs-12); color:var(--dim); margin-left:.25rem; }

.rlx.nod { background:transparent; border-style:dashed; padding:.3rem .6rem; }
.rlx.nod .rlk { margin-bottom:0; color:var(--dim); }

.golist { list-style:none; margin:.6rem 0 .2rem; padding:0; }
.golist li { padding:.5rem 0; border-top:1px solid var(--line-2); }
.golist li:first-child { border-top:0; }
.golist a { font-weight:700; font-size:var(--fs-6); }
.golist span { display:block; margin-top:.15rem; font-size:var(--fs-9); color:var(--dim); }

main { position:relative; }

#pset {
  display:flex; align-items:center; justify-content:flex-end;
  gap:.4rem; margin:0 0 .6rem;
}

#pset .lb {
  font-size:var(--fs-12); letter-spacing:.1em; font-weight:700; color:var(--dim);
  margin-right:.15rem;
}

:root[data-preset="ivory"] #pset .lb { color:var(--ink); }

#pset .sw {
  width:42px; height:22px; padding:0; cursor:pointer; border-radius:8px;
  border:1px solid var(--line); box-shadow:inset 0 0 0 1px var(--sw-ring);
}

#pset .sw.navy  { background:linear-gradient(90deg, var(--w-navy-bg) 0 66%, var(--w-navy-ac) 66%); }
#pset .sw.ivory { background:linear-gradient(90deg, var(--w-ivory-bg) 0 66%, var(--w-ivory-ac) 66%); }

#pset .sw.on { outline:2px solid var(--gold); outline-offset:2px; cursor:default; }
#pset .sw:hover:not(.on) { outline:2px solid var(--line); outline-offset:2px; }

#pset .fsep { width:1px; height:16px; background:var(--line-2); margin:0 .15rem; }
#pset .fsw {
  min-width:42px; height:22px; padding:0 .35rem; cursor:pointer; border-radius:8px;
  border:1px solid var(--line); background:var(--film-2); color:var(--ink-2);
  font-family:var(--f-ui); font-size:var(--fs-14); line-height:1; letter-spacing:.02em;
}
#pset .fsw.on { outline:2px solid var(--gold); outline-offset:2px; cursor:default; color:var(--ink); }
#pset .fsw:hover:not(.on) { outline:2px solid var(--line); outline-offset:2px; }
@media (max-width:34rem) {
  #pset .lb { display:none; }
  #pset .sw { width:34px; height:19px; }
  #pset .fsw { min-width:34px; height:19px; padding:0 .25rem; }
}
@media print { #pset { display:none; } }

#lset {
  position:absolute; top:0; right:0; display:flex; align-items:center; gap:.25rem; z-index:5;
}

#hset {
  display:flex; align-items:center; justify-content:flex-end;
  gap:.6rem; flex-wrap:wrap;

  background:var(--hset-bg);

  margin:-32px -16px .8rem;
  padding:.55rem 16px;
  border-radius:0 0 18px 18px;
  border-bottom:1px solid var(--line-2);
}
#hset #pset, #hset #lset { position:static; }

#lset { display:flex; align-items:center; gap:.3rem; }

#lset .lg {
  min-width:30px; height:24px; padding:0 .35rem; display:flex; align-items:center;
  justify-content:center; border-radius:8px; border:1px solid var(--line);
  font-size:var(--fs-14); font-weight:700; letter-spacing:.06em;
  color:var(--gold); text-decoration:none; cursor:pointer;
}

#lset .lg.on { outline:2px solid var(--gold); outline-offset:2px; cursor:default;
               color:var(--on-bar, var(--ink-2)); background:var(--on-bar-bg, var(--field)); }

:root[data-preset="ivory"] #lset .lg.on { color:var(--gold); }
#lset .lg:hover:not(.on) { background:var(--tint); }

@media (max-width:63.99rem) { #lset .lg, #pset .fsw, #zgo, #now, #placein > details.zdet > summary { font-size:var(--fs-3); } }
#lset .lgs {
  font-family:var(--f-form); font-size:var(--fs-14); font-weight:700;
  color:var(--gold); background:var(--field);
  border:1px solid var(--line); border-radius:8px;
  padding:.15rem 1.4rem .15rem .45rem; height:24px; cursor:pointer;

  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - .62rem) 55%, calc(100% - .38rem) 55%;
  background-size:.24rem .24rem, .24rem .24rem;
  background-repeat:no-repeat;
}
#lset .lgs:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:34rem) {
  #lset .lgs { font-size:var(--fs-14); height:22px; }

}
@media print { #lset { display:none; } }

button, input, select, textarea,
.tab, .chip, .evx, .prow button { font-family:var(--f-form); }

#basebox, #posbox, #posbox2 { padding:var(--num-card-pad); }

.cross .ctab, .sec .ctab {
  display:block; width:100%; box-sizing:border-box;
  margin:.5rem 0 .6rem; padding:12px;
  border:0; border-radius:18px; text-align:center; text-decoration:none;
  background-color:var(--btn-bg-c); background-image:var(--btn-bg); color:var(--on-btn);
  font-family:var(--f-btn); font-weight:var(--f-btn-w); letter-spacing:var(--f-btn-ls);
  font-size:var(--fs-2); line-height:1.4; cursor:pointer;
}
.cross .ctab:hover, .sec .ctab:hover { background-image:var(--btn-hi); }

body.tool #go { background-color:var(--sel-btn); background-image:none; color:var(--on-btn); }
body.tool #go:hover:not(:disabled) { background-image:none; }

.cross .ctab.off, .sec .ctab.off { opacity:.5; cursor:default; }

.cross .ctabs, .sec .ctabs { display:grid; gap:.4rem; margin:.5rem 0 .6rem; }

.paths { display:grid; gap:.4rem; margin:.5rem 0 1.2rem; }

.cross .ctabs .cnote, .sec .ctabs .cnote {
  margin:0 0 .5rem; font-size:var(--fs-9); color:var(--dim); line-height:1.6;
}
.cross .ctabs .cnote:last-child, .sec .ctabs .cnote:last-child { margin-bottom:0; }
.cross .ctabs .ctab, .sec .ctabs .ctab { margin:0; }

.jpn { font-size: var(--fs-12); color: var(--dim); margin-left: .35em; font-weight: 400; }

.jpnh { display:block; margin:-.6rem 0 .8rem; }

:root[data-tool="top"] { --sel-tone:var(--t-top-tone); --sel-btn:var(--t-top-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="character-build"] { --sel-tone:var(--t-character-build-tone); --sel-btn:var(--t-character-build-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="dynamic"] { --sel-tone:var(--t-dynamic-tone); --sel-btn:var(--t-dynamic-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="predictive"] { --sel-tone:var(--t-predictive-tone); --sel-btn:var(--t-predictive-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="inner-wave"] { --sel-tone:var(--t-inner-wave-tone); --sel-btn:var(--t-inner-wave-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="rectify"] { --sel-tone:var(--t-rectify-tone); --sel-btn:var(--t-rectify-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="life-arc"] { --sel-tone:var(--t-life-arc-tone); --sel-btn:var(--t-life-arc-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }

:root[data-tool="big-three"] { --sel-tone:var(--t-big-three-tone); --sel-btn:var(--t-big-three-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="house-rulers"] { --sel-tone:var(--t-house-rulers-tone); --sel-btn:var(--t-house-rulers-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }
:root[data-tool="horoscopes"] { --sel-tone:var(--t-horoscopes-tone); --sel-btn:var(--t-horoscopes-btn); --tone:var(--sel-tone); --tone-2:var(--sel-btn); }

:root[data-preset="ivory"][data-tool="top"] {
  --btn:#b68f30; --btn-2:#b68f30;
  --on-btn:#fff;
  --here:#5d4918; --scbar:rgba(93,73,24,.30); --mark:rgba(93,73,24,.30);
  --glow-2:rgba(93,73,24,.09); --glow-5:rgba(93,73,24,.45); --on-bar-bg:rgba(93,73,24,.13);
}
:root[data-preset="ivory"][data-tool="character-build"] {
  --btn:#34a1be; --btn-2:#35a1bd;
  --on-btn:#fff;
  --here:#175263; --scbar:rgba(23,82,99,.30); --mark:rgba(23,82,99,.30);
  --glow-2:rgba(23,82,99,.09); --glow-5:rgba(23,82,99,.45); --on-bar-bg:rgba(23,82,99,.13);

}
:root[data-preset="ivory"][data-tool="dynamic"] {
  --btn:#bc7cd2; --btn-2:#ac5bc6;
  --on-btn:#fff;
  --here:#702e86; --scbar:rgba(112,46,134,.30); --mark:rgba(112,46,134,.30);
  --glow-2:rgba(112,46,134,.09); --glow-5:rgba(112,46,134,.45); --on-bar-bg:rgba(112,46,134,.13);
}
:root[data-preset="ivory"][data-tool="predictive"] {
  --btn:#de776c; --btn-2:#d55143;
  --on-btn:#fff;
  --here:#8a291f; --scbar:rgba(138,41,31,.30); --mark:rgba(138,41,31,.30);
  --glow-2:rgba(138,41,31,.09); --glow-5:rgba(138,41,31,.45); --on-bar-bg:rgba(138,41,31,.13);
}
:root[data-preset="ivory"][data-tool="inner-wave"] {
  --btn:#6998cc; --btn-2:#4982c1;
  --on-btn:#fff;
  --here:#284d75; --scbar:rgba(40,77,117,.30); --mark:rgba(40,77,117,.30);
  --glow-2:rgba(40,77,117,.09); --glow-5:rgba(40,77,117,.45); --on-bar-bg:rgba(40,77,117,.13);
}
:root[data-preset="ivory"][data-tool="rectify"] {
  --btn:#cc844c; --btn-2:#c97c40;
  --on-btn:#fff;
  --here:#6d411f; --scbar:rgba(109,65,31,.30); --mark:rgba(109,65,31,.30);
  --glow-2:rgba(109,65,31,.09); --glow-5:rgba(109,65,31,.45); --on-bar-bg:rgba(109,65,31,.13);
}
:root[data-preset="ivory"][data-tool="life-arc"] {
  --btn:#8590d8; --btn-2:#6876cf;
  --on-btn:#fff;
  --here:#3342a0; --scbar:rgba(51,66,160,.30); --mark:rgba(51,66,160,.30);
  --glow-2:rgba(51,66,160,.09); --glow-5:rgba(51,66,160,.45); --on-bar-bg:rgba(51,66,160,.13);
}
:root[data-preset="ivory"][data-tool="big-three"] {
  --btn:#62a63f; --btn-2:#448623;
  --on-btn:#fff;
  --here:#356b19; --scbar:rgba(53,107,25,.30); --mark:rgba(53,107,25,.30);
  --glow-2:rgba(53,107,25,.09); --glow-5:rgba(53,107,25,.45); --on-bar-bg:rgba(53,107,25,.13);
}
:root[data-preset="ivory"][data-tool="house-rulers"] {
  --btn:#3fa665; --btn-2:#238647;
  --on-btn:#fff;
  --here:var(--sel-tone); --scbar:rgba(27,105,56,.30); --mark:rgba(27,105,56,.30);
  --glow-2:rgba(27,105,56,.09); --glow-5:rgba(27,105,56,.45); --on-bar-bg:rgba(27,105,56,.13);
}
:root[data-preset="ivory"][data-tool="horoscopes"] {
  --btn:#c93673; --btn-2:#b4225f;
  --on-btn:#fff;
  --here:#6b193b; --scbar:rgba(107,25,59,.30); --mark:rgba(107,25,59,.30);
  --glow-2:rgba(107,25,59,.09); --glow-5:rgba(107,25,59,.45); --on-bar-bg:rgba(107,25,59,.13);
}

.pbanner {
  margin:0 0 1.2rem; border-radius:18px; overflow:hidden;

  border-bottom:3px solid var(--tone);
  background:var(--tone);
}
.pbanner img {
  display:block; width:100%; height:clamp(120px, 24vw, 240px);
  object-fit:cover; object-position:center 42%;
}
@media (max-width:34rem) { .pbanner img { height:clamp(96px, 30vw, 150px); } }

:root[data-tool="rectify"] .pbanner img { object-position:center 50%; }

#go, #wgo, button[type="submit"],
.cross .ctab, .sec .ctab {
  box-shadow:

    0 0 0 1px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 0 var(--btn-edge, rgba(0,0,0,.28)),
    0 4px 10px rgba(0,0,0,.22);
  transition:box-shadow .12s ease, transform .12s ease;
}
#go:hover:not(:disabled), #wgo:hover:not(:disabled), button[type="submit"]:hover:not(:disabled),
.cross .ctab:hover, .sec .ctab:hover {
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 3px 0 var(--btn-edge, rgba(0,0,0,.28)),
    0 7px 16px rgba(0,0,0,.26);
}
#go:active:not(:disabled), #wgo:active:not(:disabled), button[type="submit"]:active:not(:disabled),
.cross .ctab:active, .sec .ctab:active {
  transform:translateY(2px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 2px 5px rgba(0,0,0,.28),
    0 0 0 var(--btn-edge, rgba(0,0,0,.28)),
    0 1px 3px rgba(0,0,0,.20);
}

.cross .ctab.off, .sec .ctab.off {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.10);
  transform:none;
}
@media (prefers-reduced-motion:reduce) {
  #go, #wgo, button[type="submit"], .cross .ctab, .sec .ctab { transition:none; }
  #go:hover, #wgo:hover, button[type="submit"]:hover, .cross .ctab:hover, .sec .ctab:hover,
  #go:active, #wgo:active, button[type="submit"]:active, .cross .ctab:active, .sec .ctab:active {
    transform:none;
  }
}

:root { --btn-edge:rgba(0,0,0,.34); }
:root[data-preset="ivory"] { --btn-edge:rgba(0,0,0,.22); }

.sharewrap { margin:1.1rem 0 .2rem; text-align:center;
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center; }

.sharelab { width:100%; font-size:var(--fs-11); font-weight:800; letter-spacing:.06em; color:var(--dim); }
.sharex {

  display:inline-block; padding:.55rem 1.15rem; border-radius:18px;
  font-size:var(--fs-10); font-weight:800; letter-spacing:.04em; text-decoration:none;
  color:var(--on-btn); background:var(--sel-btn);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 0 var(--btn-edge, rgba(0,0,0,.28)), 0 4px 10px rgba(0,0,0,.22);
  transition:box-shadow .12s ease, transform .12s ease;
}
.sharex:hover { transform:translateY(-1px); text-decoration:none; }
.sharex:active { transform:translateY(2px);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.2); }
@media (prefers-reduced-motion:reduce) { .sharex { transition:none; } .sharex:hover,.sharex:active { transform:none; } }

.sharex.s-x  { background:var(--sns-x);    color:var(--on-sns-x); }
.sharex.s-ln { background:var(--sns-line); color:var(--on-sns-line); }

.sharex.s-nv { background:var(--sel-btn); }

.sharex.s-hb { background:var(--sns-hatena); color:var(--on-sns-hatena); }
.sharex.s-hb .hbn { margin-left:.35rem; opacity:.85; font-variant-numeric:tabular-nums; }

.sharemore { flex-basis:100%; display:flex; flex-wrap:wrap; gap:.5rem;
             justify-content:center; margin-top:.15rem; }

.sharemore[hidden] { display:none; }
.sharex.s-md { background:var(--tint); color:var(--ink-2);
               border:1px solid var(--line-2); font-size:var(--fs-9); }
.sharex.s-md:hover { background:var(--glow-3); }

.sharex.s-sms { display:none; background:var(--tint); color:var(--ink-2);
                border:1px solid var(--line-2); font-size:var(--fs-9); }
@media (hover: none) and (pointer: coarse) {
  .sharex.s-sms { display:inline-flex; }
}
.sharex.s-sms:hover { background:var(--glow-3); }

.jc { position:relative; }
.jhb { position:absolute; top:.35rem; right:.35rem;
       background:var(--sns-hatena); color:var(--on-sns-hatena); border-radius:18px;
       padding:.05rem .4rem; font-size:var(--fs-10);
       font-variant-numeric:tabular-nums; line-height:1.5;
       box-shadow:0 1px 3px rgba(0,0,0,.3); }

.sharex.s-cp, .sharex.s-dl {
  background:var(--sel-btn); color:var(--on-btn);
  font-family:inherit; border:0; cursor:pointer; }
.sharex.s-cp.done { background:var(--t-home-btn); color:var(--on-btn); }

.jhero { margin:0 0 1.1rem; }
.jhero img { display:block; width:100%; height:auto; border-radius:18px;
  box-shadow:0 0 0 1px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.16); }

.one.ogpshot { border-top:1px solid var(--line-2); }
.ogpshot .onea { max-width:min(40rem, 100%); }
.ogpshot .onea img { border-radius:12px; }

.ogpshow { margin:1.2rem 0 1.4rem; }
.ogpshow img { display:block; width:100%; height:auto; border-radius:18px;
  box-shadow:0 0 0 1px rgba(0,0,0,.24), 0 3px 12px rgba(0,0,0,.16); }

.jt.tt { width:auto; min-width:100%; }

@media (max-width:34rem) {
  .jt.tt td:nth-child(2), .jt.tt .tc { white-space:normal; }
}

.gnav { display:none; }
@media (min-width:64rem) {
  .gnav { display:block; margin:0 0 1rem; border-top:1px solid var(--card-line);
          border-bottom:1px solid var(--card-line); }

  .gnavin { display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; }

  .gnav .gt { display:flex; align-items:center; justify-content:center; gap:.3rem;
              padding:.55rem .6rem; text-decoration:none; font-size:var(--fs-9);
              border-radius:12px 12px 0 0; white-space:nowrap; text-align:center;
              border-bottom:3px solid transparent; }

  .gnav .g-cb   { --sel-btn:var(--t-character-build-btn); }
  .gnav .g-horo { --sel-btn:var(--t-horoscopes-btn); }
  .gnav .g-tool { --sel-btn:var(--t-dynamic-btn); }
  .gnav .g-home { --sel-btn:var(--t-home-btn); }
  .gnav :is(.g-cb, .g-horo, .g-tool, .g-home) { background:var(--sel-btn); background-image:none; color:var(--on-btn); }

  .gnav .gt:hover { filter:brightness(1.06); }

  :root[data-preset="ivory"] .gnav .gt i { color:inherit; }

  .gnav .gt.on { border-bottom-color:currentColor; font-weight:700; }

  .gnav .gt i { font-style:normal; font-size:1em; color:var(--dim); }
  .gnav .gh svg { width:17px; height:17px; display:block; }
  .gnav .gi { position:relative; }

  .gnav .gi:has(.g-cb)   { --gdrop:var(--drop-cb); }
  .gnav .gi:has(.g-horo) { --gdrop:var(--drop-horo); }
  .gnav .gi:has(.g-tool) { --gdrop:var(--drop-tool); }
  .gnav .gdrop { display:none; position:absolute; left:0; top:100%; z-index:60; min-width:12rem;
                 background-color:var(--bar);
                 background-image:linear-gradient(var(--gdrop, transparent), var(--gdrop, transparent));
                 backdrop-filter:blur(8px);
                 border:1px solid var(--card-line); border-radius:0 12px 12px 12px;
                 padding:.4rem; box-shadow:0 8px 24px rgba(0,0,0,.18); }
  .gnav .gi.has:hover .gdrop, .gnav .gi.has:focus-within .gdrop { display:block; }
  .gnav .gdrop a { display:block; padding:.4rem .6rem; border-radius:8px;
                   color:var(--gold); text-decoration:none; font-size:var(--fs-9); white-space:nowrap; }
  .gnav .gdrop a:hover { background:var(--tint); }

  .gnav .gdrop .gsub { display:block; padding:.5rem .6rem .2rem; color:var(--dim);
                       font-size:var(--fs-12); font-weight:400;
                       border-top:1px solid var(--card-line); margin-top:.3rem; }

  .rail, .railtab { display:none !important; }
  body.rail-open { }
}

.sumtxt { margin:.6rem 0 .9rem; }
.sumtxt p { margin:.2rem 0; font-size:var(--fs-6); color:var(--ink-2); line-height:1.6; }

.gl { margin:1.4rem 0 0; }
.gl dt { margin:1.5rem 0 .35rem; font-weight:700; font-size:var(--fs-4);
  letter-spacing:.02em; color:var(--gold); }
.gl dd { margin:0; padding:0 0 0 .1rem; }
.gl dd span { display:block; line-height:var(--lh-body); }

.gl dd span:first-child { color:var(--ink); }

.gl dd span + span { color:var(--ink-2); font-size:var(--fs-6); margin-top:.15rem; }

.gl dd .gto { margin-top:.4rem; font-size:var(--fs-6); }
.gl dd .gto a { color:var(--gold); }

.pdiagram { margin:.9rem 0 1.1rem; border-radius:18px; overflow:hidden;
  background:#eef2f8; }
.pdiagram img { display:block; width:100%; height:auto; }

:root:not([data-preset]) {
  --ink-2:var(--ink); --hset-bg:var(--field); --bar:rgba(17,21,33,.94); --line-2:var(--line);
}

:is(.botnav, .ttabs, .rail, .railtab, .gnav .gdrop) { backdrop-filter:none; -webkit-backdrop-filter:none; }
:root:not([data-preset]) #lset .lgs { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23d8b86a'/%3E%3C/svg%3E"); background-position:calc(100% - .45rem) 55%; background-size:.5rem .3rem; }
:root:not([data-preset]) #pset .sw.navy  { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Crect width='66' height='10' fill='%230d1220'/%3E%3Crect x='66' width='34' height='10' fill='%23d8b86a'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
:root:not([data-preset]) #pset .sw.ivory { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Crect width='66' height='10' fill='%23f5eee9'/%3E%3Crect x='66' width='34' height='10' fill='%232F8FA8'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

:root {
  --t-top-tone:#d8b86a;             --t-top-btn:#a17f2a;
  --t-character-build-tone:#6cc1d6; --t-character-build-btn:#2e8ea6;
  --t-dynamic-tone:#b873cf;         --t-dynamic-btn:#b164ca;
  --t-predictive-tone:#dd7065;      --t-predictive-btn:#d85c4f;
  --t-inner-wave-tone:#73a0cf;      --t-inner-wave-btn:#4e87c2;
  --t-rectify-tone:#d69a6c;         --t-rectify-btn:#be7035;
  --t-life-arc-tone:#707dd2;        --t-life-arc-btn:#707dd2;
  --t-big-three-tone:#90d270;       --t-big-three-btn:#5ebc2f;
  --t-house-rulers-tone:#70d294;    --t-house-rulers-btn:#2fbc63;
  --t-horoscopes-tone:#d76a98;      --t-horoscopes-btn:#d76a98;
  --t-home-btn:#43b173; --t-guide-btn:#8770ce;
}
:root[data-preset="ivory"] {
  --t-top-tone:#5d4918;             --t-top-btn:#8f7126;
  --t-character-build-tone:#175263; --t-character-build-btn:#257084;
  --t-dynamic-tone:#702e86;         --t-dynamic-btn:#9f38c2;
  --t-predictive-tone:#8a291f;      --t-predictive-btn:#d14233;
  --t-inner-wave-tone:#284d75;      --t-inner-wave-btn:#3e77b6;
  --t-rectify-tone:#6d411f;         --t-rectify-btn:#a8642f;
  --t-life-arc-tone:#3342a0;        --t-life-arc-btn:#5e6dcc;
  --t-big-three-tone:#356b19;       --t-big-three-btn:#356b19;
  --t-house-rulers-tone:#1b6938;    --t-house-rulers-btn:#1b6938;
  --t-horoscopes-tone:#6b193b;      --t-horoscopes-btn:#c23871;
  --t-home-btn:#23864f; --t-guide-btn:#5b38c2;
}

:root { --sns-x:#15120c; --on-sns-x:#fff; --sns-line:#06b64a; --on-sns-line:#15120c; --sns-hatena:#00a4de; --on-sns-hatena:#15120c; }
[data-to="top"] { --sel-tone:var(--t-top-tone); --sel-btn:var(--t-top-btn); }
[data-to="character-build"] { --sel-tone:var(--t-character-build-tone); --sel-btn:var(--t-character-build-btn); }
[data-to="dynamic"] { --sel-tone:var(--t-dynamic-tone); --sel-btn:var(--t-dynamic-btn); }
[data-to="predictive"] { --sel-tone:var(--t-predictive-tone); --sel-btn:var(--t-predictive-btn); }
[data-to="inner-wave"] { --sel-tone:var(--t-inner-wave-tone); --sel-btn:var(--t-inner-wave-btn); }
[data-to="rectify"] { --sel-tone:var(--t-rectify-tone); --sel-btn:var(--t-rectify-btn); }
[data-to="life-arc"] { --sel-tone:var(--t-life-arc-tone); --sel-btn:var(--t-life-arc-btn); }
[data-to="big-three"] { --sel-tone:var(--t-big-three-tone); --sel-btn:var(--t-big-three-btn); }
[data-to="house-rulers"] { --sel-tone:var(--t-house-rulers-tone); --sel-btn:var(--t-house-rulers-btn); }
[data-to="horoscopes"] { --sel-tone:var(--t-horoscopes-tone); --sel-btn:var(--t-horoscopes-btn); }
[data-to="home"]  { --sel-btn:var(--t-home-btn); }
[data-to="guide"], :is(.cross, .sec) .ctab.guide { --sel-btn:var(--t-guide-btn); }
:is(.cross, .sec) :is(.ctab[data-to], .ctab.guide), .apxgo[data-to] { background:var(--sel-btn); background-image:none; color:var(--on-btn); }
:is(.cross, .sec) :is(.ctab[data-to], .ctab.guide):hover, .apxgo[data-to]:hover { background-image:none; }
:root[data-preset="ivory"] :is(:is(.cross, .sec) :is(.ctab[data-to], .ctab.guide), .apxgo[data-to]):hover { filter:brightness(1.06); }