@font-face{font-family:"Cinzel";src:url(cinzel-var.e3007b72.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(barlow-500.fe2f6553.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(barlow-600.0a7db401.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(barlow-700.05ba48a1.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(inter-var.f11d729b.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root,
:root[data-theme="dark"],
:root[data-theme="light"]{--bg: #0c0b0a;
  --bg-rail: #100e0c;
  --panel: #161310;
  --panel-2: #1c1814;
  --panel-hi: #221d18;
  --line: #2c2621;
  --line-2: #42382f;
  --ink: #ecdcbc;
  --ink-2: #c9b898;
  --ink-3: #9a8b74;
  --crest: #a8221b;
  --crest-hi: #c42c22;
  --crest-ink: #ec6a5c;
  --shift: #dcaa48;
  --alt: #a2c35f;
  --ctrl: #8fbad4;
  --focus: #f0c470;
  --cap-top: #2d2722;
  --cap-bot: #1a1612;
  --cap-edge: #3e352d;
  --select: rgba(196, 44, 34, .45);
  --shadow: 0 1px 0 rgba(255, 236, 205, .04) inset, 0 10px 24px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;}
:root{--strip: #0a0908;
  --strip-line: #2a2420;
  --code: #f1e4c8;
  --code-dim: #8d7f69;
  --c-cmd: #ef7b6b;
  --c-meta: #c9a35f;
  --c-unit: #b9c9d6;
  --c-cond: #a99c86;
  --c-shift: #e2b252;
  --c-alt: #aacb67;
  --c-ctrl: #96c2dc;
  --rail-w: 292px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --f-display: "Cinzel", Georgia, serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Cascadia Mono", Menlo, monospace;}
:root{--mk-prof: #c6a0d8; --dock-w: 1040px;}
.dbh{position: relative; z-index: 60; background: rgba(12, 11, 10, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 154, 69, .28); box-shadow: 0 10px 32px rgba(0, 0, 0, .34);}
.dbh-nav{width: min(1200px, calc(100% - 42px)); margin: auto; height: 82px; display: flex; align-items: center; gap: 28px;}
.dbh-brand{display: block; width: 238px; flex: 0 0 auto; position: relative;}
.dbh-brand img{display: block; width: 100%; max-width: none; height: 62px; object-fit: contain; object-position: left center;
  mix-blend-mode: screen; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .25));}
.dbh-links{display: flex; align-items: center; gap: 25px; margin-left: auto; line-height: 1.55;
  font: 700 .77rem/1.55 "Barlow Condensed", "Arial Narrow", Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase;}
.dbh-links a{color: #decfb3; position: relative; text-decoration: none;}
.dbh-links a::after{content: ""; position: absolute; left: 0; right: 100%; height: 2px; bottom: -9px; background: #8f201b; transition: .2s;}
.dbh-links a:hover::after, .dbh-links a.active::after{right: 0;}
.dbh-discord{display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px;
  border: 1px solid #a33a31; border-radius: 4px; background: linear-gradient(#a62b24, #791b17); color: #f3e4c6; text-decoration: none;
  font: 700 .78rem "Barlow Condensed", "Arial Narrow", Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 7px 20px rgba(0, 0, 0, .25); transition: .2s;}
.dbh-discord:hover{transform: translateY(-1px); filter: brightness(1.12);}
.dbh-menu{display: none; margin-left: auto; background: transparent; color: #e8d7b6; border: 1px solid #53362f; border-radius: 4px; padding: 8px 10px; cursor: pointer; font-family: inherit;}
.dbh a:focus-visible, .dbh-menu:focus-visible{outline: 2px solid #c99a45; outline-offset: 4px;}
@media (min-width: 1100px){.dbh-nav{ height: 96px; gap: 34px; }.dbh-brand{ width: 250px; }.dbh-brand img{ height: 66px; }.dbh-links{ gap: 28px; font-size: 1.36rem; letter-spacing: .075em; }.dbh-links a::after{ bottom: -11px; height: 3px; }.dbh-discord{ min-height: 52px; padding: 0 22px; font-size: .9rem; }}
@media (min-width: 901px) and (max-width: 1099px){.dbh-nav{ gap: 18px; }.dbh-brand{ width: 205px; }.dbh-links{ gap: 15px; font-size: .9rem; letter-spacing: .075em; }.dbh-discord{ padding: 0 14px; font-size: .72rem; }}
@media (max-width: 900px){.dbh-links{ display: none; position: absolute; top: 82px; left: 0; right: 0; z-index: 61; background: #090909; border-bottom: 1px solid #33231e;
    gap: 0; padding: 12px 20px 20px; flex-direction: column; align-items: flex-start; font-size: 1.05rem; letter-spacing: .09em; }.dbh-links.open{ display: flex; }.dbh-links a{ display: block; width: 100%; padding: 13px 2px; border-bottom: 1px solid rgba(184, 154, 104, .1); }.dbh-links a:last-child{ border-bottom: 0; }.dbh-links a::after{ bottom: 7px; }.dbh-discord{ display: none; }.dbh-menu{ display: block; min-width: 46px; min-height: 44px; font-size: 1.05rem; }.dbh-brand{ width: 210px; }}
@media (max-width: 760px){.dbh-brand{ width: 190px; }.dbh-brand img{ height: 54px; }}
@media (max-width: 620px){.dbh{ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }.dbh-nav{ width: min(100% - 28px, 1200px); height: 72px; gap: 12px; }.dbh-links{ top: 72px; }}
@media print{.dbh{ display: none !important; }}
:root{--q0: #9d9d9d; --q1: var(--ink); --q2: #4fd75a; --q3: #4aa8ff; --q4: #c387ff; --q5: #ff9a3c;}
:root{--value: #c9a35f; --line-ctl: #7a6a58;}
.dbh-links{margin-left: 0; flex: 1 1 auto; justify-content: center;}
.dbh-drop{position: relative;}
.dbh-drop-btn{display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #decfb3; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; position: relative;}
.dbh-drop-btn::after{content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s;}
.dbh-drop-btn[aria-expanded="true"]::after{transform: translateY(1px) rotate(-135deg);}
.dbh-drop-btn:hover, .dbh-drop-btn[aria-expanded="true"]{color: #f3e4c6;}
.dbh-drop-btn:focus-visible{outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px;}
.dbh-drop-menu{position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 62; min-width: 190px; padding: 8px;
  display: grid; gap: 2px; background: #0d0c0b; border: 1px solid #33231e; border-radius: 8px; box-shadow: 0 18px 36px rgba(0, 0, 0, .6);}
.dbh-drop-menu[hidden]{display: none;}
.dbh-links .dbh-drop-menu a{display: block; padding: 10px 14px; border-radius: 5px; white-space: nowrap;}
.dbh-links .dbh-drop-menu a::after{display: none;}
.dbh-links .dbh-drop-menu a:hover, .dbh-links .dbh-drop-menu a:focus-visible{background: #1d1612; color: #f3e4c6;}
.dbh-links .dbh-drop-menu a[aria-current="page"]{color: #f3e4c6; box-shadow: inset 3px 0 0 #8f201b;}
@media (max-width: 900px){.dbh-links{ justify-content: flex-start; }.dbh-drop{ width: 100%; }.dbh-drop-btn{ width: 100%; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid rgba(184, 154, 104, .1); }.dbh-drop-menu{ position: static; transform: none; min-width: 0; padding: 4px 0 8px 14px; border: 0; box-shadow: none; background: transparent; }}
[hidden]{display:none!important}
/* Pathfinder: a full-screen map under the Dad Bods site header. The guides' tokens and header rules come first
   (copied in by the build); this file is the page itself. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.pf-page { margin: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
body.pf-page a { color: #e8b267; }
button, input, select { font: inherit; color: inherit; }
.pf-skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--crest); color: #f5ead7; padding: 10px 14px; border-radius: 8px; font: 700 14px var(--f-label); letter-spacing: .06em; text-transform: uppercase; }
.pf-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main.pf { position: relative; flex: 1 1 auto; min-height: 0; }
.pf-map { position: absolute; inset: 0; overflow: hidden; background: #0b0a09; touch-action: none; cursor: grab; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pf-map.is-drag { cursor: grabbing; }
.pf-map.is-poi { cursor: pointer; }
.pf-map:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pf-map:focus-visible::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 5; pointer-events: none;
  background: linear-gradient(var(--focus), var(--focus)) center / 2px 100% no-repeat, linear-gradient(var(--focus), var(--focus)) center / 100% 2px no-repeat; }
.pf-tiles, .pf-markers { position: absolute; inset: 0; }
.pf-level { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pf-level.is-top { z-index: 1; }
.pf-clip { position: absolute; overflow: hidden; }
.pf-tile { position: absolute; width: 512.6px; height: 512.6px; max-width: none; opacity: 0; transition: opacity .22s ease-out; pointer-events: none; }
.pf-tile.is-ok { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pf-tile { transition: none; } }
svg.pf-route { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
canvas.pf-poi { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pf-markers { z-index: 4; pointer-events: none; }

/* route legs: ground solid with a dark casing, swimming dotted, flights and ships dashed */
.pf-leg-case { fill: none; stroke: rgba(10, 9, 8, .82); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.pf-leg-walk { fill: none; stroke: #f0c470; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pf-leg-swim { fill: none; stroke: #7fb8e6; stroke-width: 4; stroke-dasharray: 1 7; stroke-linecap: round; stroke-linejoin: round; }
.pf-leg-taxi { fill: none; stroke: #8fd0ff; stroke-width: 3; stroke-dasharray: 10 7; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.pf-leg-boat { fill: none; stroke: #7fd0c4; stroke-width: 3; stroke-dasharray: 14 8; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.pf-leg-link { fill: none; stroke: #7fd0c4; stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .85; }
.pf-leg-lift { fill: none; stroke: #dcaa48; stroke-width: 4; stroke-dasharray: 2 4; }

/* markers: A green, numbered stops gold, B crest red */
.pf-mk { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -36px 0 0 -15px; padding: 0; border: 0; pointer-events: auto; cursor: grab;
  background: none; touch-action: none; font: 700 14px/30px var(--f-label); color: #120f0c; text-align: center; }
.pf-mk::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c, #a2c35f);
  border: 2px solid rgba(12, 11, 10, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.pf-mk span { position: relative; }
.pf-mk-start { --c: #a2c35f; }
.pf-mk-stop { --c: #dcaa48; }
.pf-mk-end { --c: #ec6a5c; }

/* popup over a picked spot */
.pf-pop { position: absolute; left: 0; top: 0; z-index: 6; min-width: 200px; max-width: min(300px, calc(100vw - 32px)); padding: 12px 14px 12px; border-radius: 10px;
  background: rgba(20, 17, 14, .97); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); max-height: calc(100% - 16px); overflow-y: auto; }
.pf-pop b { display: block; padding-right: 22px; font: 700 15px/1.25 var(--f-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pf-pop span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.pf-pop-b { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pf-pop-b button, .pf-btn { min-height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-ctl, #7a6a58); background: var(--panel-2); cursor: pointer;
  font: 700 12.5px var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pf-pop-b button:hover, .pf-btn:hover:not(:disabled) { border-color: var(--shift); color: var(--ink); }
.pf-pop-b button[data-set="end"] { background: var(--crest); border-color: var(--crest-hi); color: #f5ead7; }
.pf-pop-x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
.pf-pop-x:hover { color: var(--ink); background: var(--panel-hi); }

/* map controls: zoom, scale, the zone under the pointer */
.pf-hud { position: absolute; right: 14px; bottom: 16px; z-index: 5; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.pf-hud > * { pointer-events: auto; }
.pf-zoom { display: grid; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.pf-zoom button { width: 42px; height: 42px; border: 0; background: rgba(20, 17, 14, .95); color: var(--ink); font: 500 22px/1 var(--f-body); cursor: pointer; }
.pf-zoom button + button { border-top: 1px solid var(--line-2); }
.pf-zoom button:hover { background: var(--panel-hi); }
.pf-scale { height: 22px; border: 2px solid rgba(236, 220, 188, .85); border-top: 0; color: var(--ink); font: 600 12px/18px var(--f-label); letter-spacing: .06em;
  text-align: center; text-shadow: 0 1px 2px #000; pointer-events: none; transition: width .15s; }
.pf-readout { position: absolute; right: 14px; top: 12px; z-index: 5; max-width: calc(100% - 28px); padding: 5px 10px; border-radius: 8px; background: rgba(12, 11, 10, .78);
  font: 600 13px var(--f-label); letter-spacing: .06em; color: var(--ink-2); pointer-events: none; }
.pf-readout:empty { display: none; }

/* the panel: floating on the left; a folding bottom sheet on phones */
.pf-panel { position: absolute; left: 14px; top: 14px; z-index: 7; width: 372px; max-height: calc(100% - 28px); display: flex; flex-direction: column;
  background: rgba(17, 15, 12, .95); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.pf-head h1 { margin: 0; font: 700 22px/1.1 var(--f-display); letter-spacing: .04em; color: var(--ink); }
.pf-head p { margin: 2px 0 0; font: 600 12px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pf-fold { display: none; margin-left: auto; width: 40px; height: 36px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--ink-2); cursor: pointer; }
.pf-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 14px; display: grid; gap: 14px; min-height: 0; }
.pf-cont { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-cont button { flex: 1 1 auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); cursor: pointer;
  font: 700 12px var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.pf-cont button:hover { border-color: var(--shift); color: var(--ink); }
.pf-search { position: relative; }
.pf-search input { width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--line-ctl, #7a6a58); background: var(--strip, #0a0908); color: var(--ink); }
.pf-search svg { position: absolute; left: 12px; top: 13px; color: var(--ink-3); pointer-events: none; }
.pf-search ul { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 3; margin: 0; padding: 4px; list-style: none; border-radius: 10px; background: #15120f;
  border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); max-height: 320px; overflow-y: auto; }
.pf-search li { padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.pf-search li[aria-selected="true"], .pf-search li:hover { background: var(--panel-hi); }
.pf-search li b { display: block; font-weight: 600; }
.pf-search li span { display: block; font-size: 12.5px; color: var(--ink-3); }
.pf-sec { display: grid; gap: 8px; }
.pf-sec h2 { margin: 0; font: 700 12.5px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.pf-sec h2 .pf-total { margin-left: auto; letter-spacing: .06em; color: var(--shift); font-size: 13px; text-transform: none; }
.pf-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pf-pt { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 6px 4px 8px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.pf-pt-k { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-label); color: #120f0c; background: #dcaa48; }
.pf-pt-start .pf-pt-k { background: #a2c35f; }
.pf-pt-end .pf-pt-k { background: #ec6a5c; }
.pf-pt-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pt-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); font-size: 19px; cursor: pointer; }
.pf-pt-x:hover { color: var(--ink); background: var(--panel-hi); }
.pf-pt-hint { color: var(--ink-3); font-size: 13.5px; background: none; border-style: dashed; padding: 8px 10px; }
.pf-acts { display: flex; gap: 6px; }
.pf-acts .pf-btn { flex: 1; }
.pf-btn:disabled { opacity: .45; cursor: default; }
.pf-prof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-prof button { padding: 7px 6px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; text-align: center; min-width: 0; }
.pf-prof button b { display: block; font: 700 11.5px var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pf-prof button span { display: block; font: 600 15px var(--f-label); color: var(--ink); white-space: nowrap; }
.pf-prof button[aria-selected="true"] { border-color: var(--shift); background: color-mix(in srgb, var(--shift) 12%, var(--panel)); }
.pf-prof button[aria-selected="true"] b { color: var(--shift); }
.pf-legs { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pf-leg { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pf-leg-i { width: 14px; height: 4px; margin-top: 9px; border-radius: 2px; background: #f0c470; }
.pf-leg-swim .pf-leg-i { background: repeating-linear-gradient(90deg, #7fb8e6 0 3px, transparent 3px 6px); }
.pf-leg-taxi .pf-leg-i { background: repeating-linear-gradient(90deg, #8fd0ff 0 6px, transparent 6px 9px); }
.pf-leg-lift .pf-leg-i { background: repeating-linear-gradient(90deg, #dcaa48 0 2px, transparent 2px 4px); }
.pf-leg-boat .pf-leg-i, .pf-leg-zeppelin .pf-leg-i { background: repeating-linear-gradient(90deg, #7fd0c4 0 6px, transparent 6px 9px); }
.pf-leg-t em { display: block; font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.pf-leg-s { font: 600 14px var(--f-label); color: var(--ink-2); white-space: nowrap; }
.pf-leg-note, .pf-leg-err { display: block; color: var(--ink-3); font-size: 13px; border: 0; }
.pf-leg-err { color: var(--crest-ink); }
.pf-busy { font: 600 13px var(--f-label); letter-spacing: .06em; color: var(--shift); }
.pf-opts { display: grid; gap: 4px; }
.pf-opt, .pf-f { display: flex; align-items: center; gap: 9px; min-height: 30px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.pf-opt input, .pf-f input { width: 16px; height: 16px; accent-color: var(--shift); margin: 0; }
.pf-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.pf-f { font-size: 13px; min-width: 0; }
.pf-f-i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #120f0c; font: 700 11px var(--f-label);
  border: 2px solid rgba(12, 11, 10, .9); }
.pf-f-z { background: none; color: var(--ink); border-color: var(--line-2); font-size: 10px; }
.pf-f-n { background: none; border: 0; border-radius: 0; height: 2px; background: repeating-linear-gradient(90deg, #8fbad4 0 5px, transparent 5px 9px); }
.pf-class { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.pf-class select { flex: 1; height: 32px; border-radius: 8px; border: 1px solid var(--line-ctl, #7a6a58); background: var(--panel); color: var(--ink); padding: 0 8px; }
details.pf-sec > summary { cursor: pointer; list-style: none; font: 700 12.5px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
details.pf-sec > summary::-webkit-details-marker { display: none; }
details.pf-sec > summary::after { content: "+"; float: right; color: var(--ink-3); letter-spacing: 0; }
details.pf-sec[open] > summary::after { content: "\2212"; }
.pf-note { margin: 0; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 760px) {
  .pf-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 46%; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .pf-panel.is-min { max-height: 64px; overflow: hidden; }
  .pf-head { padding: 10px 14px 8px; }
  .pf-head h1 { font-size: 19px; }
  .pf-fold { display: block; }
  .pf-hud { bottom: calc(46% + 12px); }
  .pf-panel.is-min ~ .pf-hud { bottom: 78px; }
  .pf-readout { top: 8px; right: 8px; }
}