/* Figtree (OFL), Latin only: Chinese falls through to the system's Traditional Chinese face. */
@font-face{font-family:Figtree;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/figtree-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* The planning board: a warm cream board, white cards floating on it with soft navy shadows, one blue action.
   Yellow = position A, red = position B; tier hues: lower violet, upper green, floor slate. Colour carries state, never decoration. */
:root{color-scheme:light;
  --canvas:#f6f3ec;--canvas-dot:#ddd5c3;--surface:#fff;--surface-2:#f8f6f1;--surface-3:#efebe2;
  --line:#e7e2d7;--line-strong:#d2cab8;--line-control:#8a8699;
  --ink:#050038;--ink-2:#3b3858;--ink-3:#64627f;
  --primary:#4262ff;--primary-hover:#2c4bf0;--primary-soft:#e9edff;--primary-ink:#2a3fcf;
  --a:#ffd400;--a-soft:#fff5bf;--a-ink:#050038;
  --b:#d42a26;--b-soft:#fde4e2;--b-ink:#a31f1c;
  --warn:#9a4a05;
  --tier-L1:#7048e8;--tier-L4:#0c7d41;--tier-F:#4f5573;
  --r-xl:22px;--r-lg:16px;--r:12px;--r-sm:8px;--r-xs:6px;
  --shadow-1:0 1px 2px rgba(5,0,56,.06),0 1px 4px rgba(5,0,56,.05);
  --shadow-2:0 1px 2px rgba(5,0,56,.06),0 6px 18px rgba(5,0,56,.10);
  --shadow-3:0 2px 6px rgba(5,0,56,.08),0 18px 44px rgba(5,0,56,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:Figtree,"Noto Sans TC","Microsoft JhengHei","PingFang TC","Segoe UI",system-ui,-apple-system,sans-serif;
  font-family:var(--sans);font-size:16px;line-height:1.5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--primary-soft);color:var(--ink)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
svg{display:block}[hidden]{display:none!important}
small{font-size:12px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-xs);background:var(--surface-3);box-shadow:inset 0 -1px 0 var(--line-strong);color:var(--ink-2);font:600 12px/1 var(--sans)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* A page whose stored language is not the default waits for its text (at most 1.5 s) instead of flashing the other language. */
html.lang-pending body{visibility:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;z-index:200;left:16px;top:16px;padding:10px 16px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transform:translateY(-200%)}.skip-link:focus{transform:none}
/* A board ground: cream with a faint dot grid, as on a whiteboard. */
.dotted{background:radial-gradient(circle,var(--canvas-dot) 1.1px,transparent 1.4px) 0 0/24px 24px,var(--canvas)}

/* Icons: one 24px line set, round joins. */
.ico{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:18px;height:18px}

/* Brand: a yellow tile with the eye mark. */
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 4px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font:800 21px/1 var(--sans);letter-spacing:.06em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--a)}
.brand-mark svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.9}
.brand-mark svg circle:last-child{fill:var(--ink);stroke:none}

/* Floating surfaces */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.pill{display:flex;align-items:center;gap:2px;padding:4px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-2)}
.bar-divider{align-self:stretch;width:1px;margin:8px 6px;background:var(--line)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink);font:600 15px/1.1 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}
.btn:hover{background:#e6e1d5}
.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-hover)}
.btn.quiet{background:transparent}.btn.quiet:hover{background:var(--surface-3)}
.btn.outline{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-control)}.btn.outline:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.btn.lg{min-height:52px;padding:0 22px;border-radius:var(--r);font-size:17px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){transform:translateY(1px)}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .12s ease,color .12s ease}
.icon-btn:hover{background:var(--surface-3)}
.icon-btn[aria-pressed=true],.icon-btn[aria-expanded=true],.icon-btn.active{background:var(--primary-soft);color:var(--primary-ink)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn:disabled:hover{background:transparent}
.text-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.text-link:hover{color:var(--primary-ink)}

/* Segmented switch: a recessed track with a raised white thumb. */
.segmented{display:flex;gap:2px;padding:2px;border-radius:var(--r-sm);background:var(--surface-3)}
.segmented button{min-height:40px;padding:0 14px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink-2);font:600 15px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}
.segmented button:hover{color:var(--ink)}
.segmented button.active,.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* Tooltips: the visible label of an icon button is also its accessible name, so it stays in the tree (opacity, not display). */
.tip{position:absolute;z-index:30;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-xs);background:var(--ink);color:#fff;font:600 13px/1.2 var(--sans);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s ease}
.tip kbd{min-width:18px;height:18px;padding:0 4px;background:rgba(255,255,255,.16);box-shadow:none;color:#fff;font-size:12px}
.icon-btn:hover>.tip,.icon-btn:focus-visible>.tip{opacity:1;transition-delay:.25s}
.icon-btn:focus-visible>.tip{transition-delay:0s}
body.tips-off .tip{opacity:0!important}
.tip-right .tip{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}
.tip-below .tip{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.tip-above .tip{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}

/* Popovers and menus */
.pop-wrap{position:relative}
.popover{position:absolute;z-index:60;min-width:260px;padding:8px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-3);animation:pop-in .14s var(--ease)}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}}
.pop-title{padding:8px 10px 6px;color:var(--ink-2);font-size:13px;font-weight:700}
.pop-link{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm);color:var(--primary-ink);font-weight:600;font-size:14px;text-decoration:none}.pop-link:hover{background:var(--primary-soft)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:500 15px/1.2 var(--sans);text-align:left;cursor:pointer}
.menu-item:hover{background:var(--surface-3)}.menu-item:disabled{opacity:.45;cursor:not-allowed}.menu-item:disabled:hover{background:transparent}
.menu-item .ico{color:var(--ink-2)}
.menu-sep{height:1px;margin:6px 4px;background:var(--line)}

/* Dialogs */
.dialog{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3)}
.dialog::backdrop{background:rgba(5,0,56,.28)}
.dialog[open]{animation:pop-in .16s var(--ease)}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 12px 24px;background:var(--surface)}
.dialog-head h2{font:700 22px/1.2 var(--sans)}

/* Fields */
label{display:grid;gap:6px;color:var(--ink-2);font-size:13px;font-weight:600;min-width:0}
select,input[type=text],input[type=search],input:not([type]){width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);color:var(--ink);font-weight:500;transition:box-shadow .12s ease}
select{cursor:pointer;appearance:none;padding-right:34px;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
select:hover,input:not([type=range]):not([type=checkbox]):hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
select:focus-visible,input:not([type=range]):not([type=checkbox]):focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--primary);cursor:pointer}
input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--primary);cursor:pointer}
.check{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.check:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}

/* Tags */
.tier-tag{display:inline-grid;place-items:center;min-width:34px;height:22px;margin:0 6px 2px 0;padding:0 6px;border-radius:var(--r-xs);background:var(--tier,var(--tier-L1));color:#fff;font:700 13px/1 var(--sans);font-style:normal;vertical-align:middle}
.tier-tag[data-tier=L1]{--tier:var(--tier-L1)}.tier-tag[data-tier=L4]{--tier:var(--tier-L4)}.tier-tag[data-tier=F]{--tier:var(--tier-F)}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font:600 12px/1 var(--sans);white-space:nowrap}
.badge.live{background:#ddf3e6;color:#0a5e31}.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#12a150}
.slot-chip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-xs);background:var(--a);color:var(--a-ink);font:800 14px/1 var(--sans)}.slot-chip.b{background:var(--b);color:#fff}

/* The still plan (shared/plan.js planShapes): thumbnails and the landing picture. */
.plan-still .plan-deck{fill:var(--ink)}.plan-still .plan-wing{fill:#2b2852}
.plan-still .plan-plate{fill:var(--tier);stroke:var(--surface);stroke-width:.5;stroke-linejoin:round}
.plan-still.soft .plan-plate.tier-L1{fill:#b9a6f5}.plan-still.soft .plan-plate.tier-L4{fill:#95d5ae}.plan-still.soft .plan-plate.tier-F{fill:#c3c7d6}
.plan-still .plan-cone{stroke:var(--ink);stroke-width:.35;stroke-dasharray:1.6 1.2}
.plan-still .plan-cone.a{fill:rgba(255,212,0,.42)}.plan-still .plan-cone.b{fill:rgba(212,42,38,.3)}
.plan-still .plan-pin{stroke:var(--ink);stroke-width:.9}.plan-still .plan-pin.a{fill:var(--a)}.plan-still .plan-pin.b{fill:var(--b)}

/* Toast */
.toast{position:fixed;z-index:120;left:50%;bottom:24px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-3);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:transform .16s var(--ease),opacity .16s ease}
.toast.visible{transform:translate(-50%,0);opacity:1}
.error{padding:12px 16px;border-radius:var(--r);background:var(--b-soft);color:var(--b-ink);font-weight:600;box-shadow:inset 0 0 0 1.5px #f3b4b0}

/* Content pages: a floating header pill over a dotted board, cards in a centred column. */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 20px;background:linear-gradient(rgba(246,243,236,.96) 62%,rgba(246,243,236,0));pointer-events:none}
.site-header>*{pointer-events:auto}
.site-nav a:not(.brand){display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.site-nav a:not(.brand):hover{background:var(--surface-3);color:var(--ink)}
.site-nav a[aria-current=page]{background:var(--primary-soft);color:var(--primary-ink)}
.page{width:min(1120px,100% - 32px);margin:0 auto;padding:24px 0 64px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:24px 0 28px}
.page-head h1{font:800 clamp(30px,4.4vw,44px)/1.1 var(--sans);letter-spacing:-.01em}
.page-head p{max-width:62ch;margin-top:10px;color:var(--ink-2);font-size:17px}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:min(1120px,100% - 32px);margin:0 auto;padding:24px 0 40px;border-top:1px solid var(--line-strong);color:var(--ink-3);font-size:13px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;color:var(--ink-2)}
/* A link on its own line is a touch target: 44 px tall on touch screens. */
@media (pointer:coarse){.honesty .text-link,.help-foot .text-link{display:inline-flex;align-items:center;min-height:44px}}
.site-nav{margin-right:auto}
/* Same logo spot as the simulator: 16px from the edge, mark 8px inside the pill. */
.pill.brand{gap:10px;min-height:52px;padding:4px 12px 4px 8px}
@media (max-width:860px){.pill.brand>span:last-child{display:none}}
.site-actions .short{display:none}
@media (max-width:760px){
  .site-header{position:static;flex-wrap:wrap;padding:16px 16px 10px}
  .site-nav{order:3;flex:1 0 100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .site-nav a:not(.brand){flex:1 0 auto;justify-content:center;padding:0 10px}
  .site-actions .long{display:none}.site-actions .short{display:inline}
  .page-head{margin:12px 0 20px}
}
@media (max-width:640px){.site-header{padding:8px 8px 10px}.pill.brand{align-self:flex-start;justify-content:center;min-width:48px;min-height:48px;padding:2px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}