@font-face{font-family:Outfit;src:url('/assets/outfit-regular.ttf');font-weight:400;font-display:swap}@font-face{font-family:Outfit;src:url('/assets/outfit-semibold.ttf');font-weight:500 700;font-display:swap}@font-face{font-family:Outfit;src:url('/assets/outfit-black.ttf');font-weight:800 900;font-display:swap}
:root{font-family:Outfit,Arial,sans-serif;color:#202426;background:#f6f3eb;--ink:#202426;--blue:#2855f7;--muted:#60636b;--line:#d6d4ce;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:4px}[hidden]{display:none!important}.page{max-width:1540px;margin:auto;padding:0 48px}.skip{position:absolute;top:-100px;left:20px;background:var(--blue);color:white;padding:10px}.skip:focus{top:10px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}.brand{display:flex;align-items:center;gap:8px;font-size:29px;font-weight:700;text-decoration:none;letter-spacing:-1px}.brand img{display:block}nav{display:flex;gap:30px;align-items:center}nav a,nav button{font-size:15px;text-decoration:none}nav button{background:none;border:0;padding:0}nav a:hover,nav button:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}.intro{padding:24px 0 34px}h1{font-size:48px;line-height:1.1;letter-spacing:-1.8px;font-weight:700;margin:0}.intro p{font-size:21px;line-height:1.45;margin:10px 0 0}h2{font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.7px;margin:0}h3{font-size:17px;font-weight:600;line-height:1.3;margin:0 0 12px}.quiet{font-size:13px;line-height:1.45;color:var(--muted);margin:7px 0 0}
.finder{display:grid;grid-template-columns:250px minmax(0,1fr);gap:25px}.passport{padding-right:20px}.passport>.quiet{margin-top:7px}.passport fieldset{margin:23px 0 0;padding:0;border:0;min-width:0}legend{font-size:15px;font-weight:600;margin-bottom:13px;padding:0}legend span{font-size:11px;font-weight:400;color:var(--muted)}.project-types label,.requirements label{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;cursor:pointer}.passport input{flex:none;width:18px;height:18px;accent-color:var(--blue);margin:2px 0 0;cursor:pointer}.passport strong{display:block;font-size:15px;font-weight:400;line-height:1.35}.passport small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:2px}.passport .requirements{border-top:1px solid var(--line);padding-top:17px}.requirements legend{float:left;width:100%;margin-bottom:14px}.passport-summary{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.passport-summary h3{font-size:14px;margin-bottom:0}.passport-summary .quiet{display:none}#summary{list-style:none;padding:0;margin:7px 0 12px;color:var(--muted);font-size:12px;line-height:1.55}.reset{background:transparent;border:1px solid #9d9ea3;border-radius:4px;padding:8px 15px;font-size:13px}.reset:hover{background:white}.explore-jump{display:none}.explore{display:grid;grid-template-columns:310px minmax(0,1fr);gap:25px;min-width:0}.candidates{border-left:1px solid var(--line);padding-left:23px;min-width:0}.map-heading .quiet{font-size:13px;margin:7px 0 17px}.host-option{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 14px 14px 17px;text-align:left;min-height:75px;border-left:3px solid transparent}.host-option strong{display:block;font-size:18px;font-weight:600;line-height:1.3}.host-option small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:3px}.host-option>span:last-child{font-size:25px;font-weight:400}.host-option.selected{background:#e5eaff;border-left-color:var(--blue)}.host-option:hover{background:#ecebe7}.host-option.selected:hover{background:#dce4ff}.host-option .check-note{font-size:11px;color:#776325}.excluded{font-size:13px;margin-top:15px}.excluded summary{cursor:pointer;padding:4px 0;color:var(--muted)}.excluded .host-option{padding-left:10px}.excluded .host-option strong{font-size:15px}.no-matches{font-size:13px;line-height:1.6;padding:12px;border:1px solid #d4c98c;background:#fff5ca;border-radius:4px}
.inspector{border-left:1px solid var(--line);padding-left:28px;min-width:0}.inspector h2{font-size:38px;letter-spacing:-1px;font-weight:700}.inspector-identity>p{font-size:17px;line-height:1.5;margin:9px 0 0}.inspector-identity .fit-status{font-size:14px;color:var(--blue);margin-top:8px}.inspector-content>div{margin-top:26px}.fit-reasons ul{list-style:none;padding:0;margin:0}.fit-reasons li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;margin-bottom:10px}.fit-reasons li:before{position:absolute;left:0}.yes:before{content:'✓';color:var(--blue);font-weight:600}.no:before{content:'×';color:#9d4826;font-weight:600}.unknown:before{content:'?';color:#776325;font-weight:600}.limits dl{margin:0 0 20px}.limits dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.5;padding:6px 0}dt{font-weight:600}dd{margin:0;color:#4f535c}.limits>h3:not(:first-child){border-top:1px solid var(--line);padding-top:18px}.limits>p{font-size:13px;line-height:1.6;color:#4f535c;margin:0}.handoff{border-top:1px solid var(--line);padding-top:18px}.sources{display:flex;flex-wrap:wrap;gap:9px 18px}.sources a{font-size:12px;color:var(--blue);text-underline-offset:3px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:23px}.primary{background:var(--blue);color:white;border:1px solid var(--blue);border-radius:4px;font-size:13px;font-weight:600;padding:12px 16px}.primary:hover{background:#1942d7}.visit{display:inline-block;background:transparent;border:1px solid #777b83;border-radius:4px;padding:12px 16px;font-size:13px;text-decoration:none}.visit:hover{background:white}footer{border-top:1px solid var(--line);margin-top:30px;padding:20px 0 26px;display:flex;justify-content:space-between;gap:20px;font-size:11px;line-height:1.6;color:var(--muted)}footer a{text-decoration:none}
dialog{border:1px solid #797b81;border-radius:8px;background:#f6f3eb;color:var(--ink);width:min(700px,calc(100% - 28px));max-height:calc(100% - 40px);padding:30px}dialog::backdrop{background:#20242670}.close{position:absolute;top:14px;right:14px;background:white;border:1px solid var(--line);border-radius:4px;width:30px;height:30px;font-size:23px}dialog h2{font-size:28px;margin:0 25px 15px 0}dialog p{font-size:14px;color:var(--muted);line-height:1.65}textarea{width:100%;height:320px;display:block;resize:vertical;padding:12px;font-size:12px;line-height:1.6;border:1px solid #acadb2;border-radius:4px;background:white}.brief-actions{display:flex;align-items:center;gap:13px;margin-top:15px}#copy-status{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#host-dialog{padding-top:45px}#host-dialog .inspector-identity h2{margin:0}
@media(max-width:1200px){.page{padding:0 28px}.finder{grid-template-columns:215px minmax(0,1fr);gap:18px}.explore{grid-template-columns:250px minmax(0,1fr);gap:18px}.candidates{padding-left:18px}.inspector{padding-left:20px}.limits dl>div{grid-template-columns:110px 1fr}.passport strong{font-size:14px}.host-option strong{font-size:17px}.inspector h2{font-size:33px}}
@media(max-width:980px){.finder{display:block}.passport{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:25px}.passport>h2,.passport>.quiet{grid-column:1 / -1}.passport fieldset{margin-top:20px}.project-types label,.requirements label{margin-bottom:13px}.passport .requirements{border-top:0;padding-top:0}.requirements legend{float:none}.passport-summary{grid-column:1 / -1;display:flex;gap:15px;align-items:center;margin-top:10px;padding-top:12px}.passport-summary h3{font-size:12px}#summary{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:11px}.reset{grid-column:1 / -1;margin:12px 0 0 auto;justify-self:end}.candidates{border-left:0;padding-left:0}.explore{grid-template-columns:280px minmax(0,1fr);gap:24px}.intro{padding:22px 0 28px}h1{font-size:42px}}
@media(max-width:720px){.page{padding:0 20px}header{padding:16px 0}.brand{font-size:25px}.brand img{width:28px;height:30px}nav{gap:16px}nav a,nav button{font-size:12px}.intro{padding:17px 0 26px}h1{font-size:38px;letter-spacing:-1.3px}.intro p{font-size:17px;line-height:1.5}.explore{display:block}.inspector{border-left:0;border-top:1px solid var(--line);padding:24px 0 0;margin-top:26px}.map-heading h2{font-size:25px}.passport{gap:0 18px}.passport strong{font-size:13px}.passport small{font-size:11px}.passport input{width:16px;height:16px}.project-types label,.requirements label{gap:8px}.passport legend{font-size:13px}.passport-summary{display:block}.passport-summary h3{margin-bottom:7px}.explore-jump{display:block;grid-column:1 / -1;text-align:center;text-decoration:none;background:var(--blue);color:white;padding:11px;border-radius:4px;font-size:13px;font-weight:600;margin-top:12px}.limits dl>div{grid-template-columns:115px minmax(0,1fr)}footer{display:block}footer a{display:block;margin-top:8px}.inspector h2{font-size:32px}.host-option{min-height:74px}.host-option strong{font-size:18px}dialog{padding:24px 20px}.brief-actions{align-items:flex-start}#host-dialog .actions{display:block}#host-dialog .visit{margin-top:10px}}
@media(max-width:360px){.page{padding:0 16px}.brand{font-size:23px}nav{gap:11px}nav a,nav button{font-size:10px}h1{font-size:34px}.passport{column-gap:12px}.passport strong{font-size:12px}.passport small{font-size:10px}}
html{scroll-padding-top:18px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.requirements legend{float:none;width:auto}.requirements label{clear:both}
/* Phone dialogs use the entire visible viewport, including when Safari's bars resize. */
@media (max-width:640px), (max-height:500px) and (pointer:coarse){
  dialog,#host-dialog{
    position:fixed;
    inset:0;
    margin:0;
    width:100vw;
    max-width:none;
    height:100vh;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    padding:calc(68px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  dialog .close{
    position:fixed;
    top:calc(12px + env(safe-area-inset-top));
    right:calc(16px + env(safe-area-inset-right));
    width:44px;
    height:44px;
    z-index:1;
  }
}

@media(max-width:980px){.passport .project-types{grid-column:1;grid-row:3}.passport .requirements{grid-column:2;grid-row:3}}
.passport .runtime-question{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.runtime-question legend{font-size:13px;margin-bottom:10px}.runtime-pills{display:flex;flex-wrap:wrap;gap:8px}.runtime-pills label{position:relative;cursor:pointer}.runtime-pills input{position:absolute;width:1px;height:1px;opacity:0;margin:0}.runtime-pills span{display:block;padding:8px 12px;border:1px solid #9d9ea3;border-radius:24px;font-size:12px;line-height:1.4;background:transparent}.runtime-pills label:has(input:checked) span{color:white;background:var(--blue);border-color:var(--blue)}.runtime-pills label:hover span{border-color:var(--blue)}.runtime-pills input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.runtime-question .quiet{font-size:11px;line-height:1.5;margin-top:10px}
@media(max-width:980px){.passport .runtime-question{grid-column:1 / -1;grid-row:auto}}
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:150ms;--motion-fast:250ms;--motion-panel:520ms;--motion-stagger:40ms}
.motion-panel{position:relative;transform-origin:left 20%;backface-visibility:hidden}.motion-word{display:inline-block;transform-origin:center bottom}.motion-ghost{position:fixed;pointer-events:none;z-index:4;background:#f6f3eb;contain:layout paint;overflow:hidden}
.host-option{transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}.host-option>span:last-child{transition:transform var(--motion-fast) var(--motion-ease)}.host-option:hover>span:last-child{transform:translateX(3px)}.runtime-pills span{transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}nav .replay-opening{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}nav .replay-opening span{font-size:19px;line-height:1}nav .replay-opening:hover{color:var(--blue)}
@media(max-width:640px){nav{gap:15px}nav .replay-opening{font-size:10px;gap:4px}nav .replay-opening span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.replay-opening{display:none!important}.host-option,.host-option>span:last-child,.runtime-pills span{transition:none!important}.host-option:hover>span:last-child{transform:none}}

.motion-selection{position:absolute;pointer-events:none;background:#e5eaff;border-left:3px solid var(--blue);transform-origin:left top;z-index:0}.motion-selection-ready #houses{position:relative;z-index:1}.motion-selection-ready .host-option.selected{background:transparent;border-left-color:transparent}.motion-selection-ready .host-option.selected:hover{background:#2855f708}

/* The final, distinct readout of the choices above. */
.passport-summary{border-top:0;border-left:3px solid var(--blue);background:#e9edff;padding:14px 15px;margin-top:24px;border-radius:0 6px 6px 0}.passport-summary h3{font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--blue);margin:0 0 8px}#summary{color:var(--ink);font-size:13px;line-height:1.55;margin:0;list-style:none}#summary li+li{margin-top:5px}
@media(max-width:980px){.passport-summary{grid-column:1 / -1;display:block;padding:14px 15px;margin-top:22px;grid-row:auto}.passport-summary h3{font-size:11px;margin-bottom:8px}#summary{display:block;font-size:13px;margin:0}}

/* A linear conversation: thing, delivery, optional needs, quiet recap. */
.passport-summary{background:#eeeee8;border-left:2px solid #a5b2de;padding:16px 15px}
.passport-summary h3{color:#687497;letter-spacing:.5px}
#summary{color:#565d6b;line-height:1.75}
@media(max-width:980px){
 .passport{display:block}
 .passport .project-types,.passport .requirements,.passport .runtime-question{grid-column:auto;grid-row:auto}
 .passport .project-types{display:flex;flex-wrap:wrap;gap:12px 24px}
 .passport .project-types legend{margin-bottom:13px}
 .passport .project-types label{flex:1;min-width:140px}
 .passport .requirements{display:block}
 .passport-summary{display:block}
}

/* Keep section dividers above headings instead of through native legends. */
.runtime-question legend{float:left;width:100%;margin-bottom:12px}
.runtime-question .runtime-pills{clear:both}
.passport .runtime-question,.passport .requirements{position:relative;border-top:0}
.passport .runtime-question::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}

/* Every question uses the same native fieldset and legend treatment. */
.passport .project-types,.passport .requirements,.passport .runtime-question{border:0;padding:0;margin:23px 0 0}
.passport .runtime-question::before{content:none}
.passport fieldset legend{float:none;width:auto;font-size:15px;font-weight:600;line-height:1.4;margin:0 0 13px;padding:0}

/* A small echo of the mascot's soft, slightly uneven corners. */
:root{--friendly-corners:8px 12px 10px 8px}
.project-types input,.requirements input{appearance:none;-webkit-appearance:none;position:relative;display:grid;place-content:center;border:1.5px solid #95999e;background:#fffdf8;transition:border-color 150ms,background-color 150ms}
.project-types input{border-radius:50%}
.project-types input::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue);transform:scale(0)}
.project-types input:checked{border-color:var(--blue)}
.project-types input:checked::before{transform:scale(1)}
.requirements input{border-radius:4px 6px 5px 4px}
.requirements input:checked{background:var(--blue);border-color:var(--blue)}
.requirements input:checked::before{content:"";width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.project-types label:hover input,.requirements label:hover input{border-color:var(--blue)}
.runtime-pills span{border-radius:var(--friendly-corners)}
.host-option,.motion-selection{border-radius:var(--friendly-corners)}
.host-option{border-bottom-color:transparent;position:relative}
.host-option::after{content:"";position:absolute;bottom:0;left:14px;right:14px;height:1px;background:var(--line)}
.host-option.selected::after{background:transparent}
.host-option .check-note{display:table;width:fit-content;background:#fff0b9;padding:2px 6px;border-radius:4px 7px 6px 4px;margin-top:5px;color:#69551e}
.inspector-identity .fit-status{display:table;background:#e9edff;padding:5px 9px;border-radius:var(--friendly-corners);font-size:12px}
.reset,.primary,.visit,.explore-jump{border-radius:var(--friendly-corners)}
.passport-summary{border-radius:var(--friendly-corners)}
@media(forced-colors:active){.project-types input,.requirements input{appearance:auto;-webkit-appearance:auto}.project-types input::before,.requirements input::before{display:none}.motion-selection{border:2px solid Highlight}.host-option.selected{outline:2px solid Highlight}.host-option .check-note,.fit-status{border:1px solid CanvasText}}
@media(prefers-reduced-motion:reduce){.project-types input,.requirements input{transition:none}}

/* Brand promise becomes a quiet signature; the tool gets the space. */
.brand{gap:10px;align-items:center}
.brand-copy{display:flex;flex-direction:column;gap:3px}
.brand-name{line-height:1;letter-spacing:-1px}
.brand-tagline{font-size:12px;font-weight:400;letter-spacing:0;line-height:1.35;color:var(--muted)}
header{padding:24px 0 30px}
main{padding-top:8px}
.thing-helper{max-width:220px}
@media(max-width:720px){header{padding:18px 0 25px}.brand-tagline{font-size:10px}.brand-copy{gap:4px}.thing-helper{max-width:290px}}

/* Tiny organic radio shapes, echoing the mascot without changing their meaning. */
.project-types input{border-radius:46% 54% 49% 51% / 54% 47% 53% 46%;transform:rotate(-7deg)}
.project-types label:nth-of-type(even) input{border-radius:53% 47% 55% 45% / 46% 55% 45% 54%;transform:rotate(6deg)}
.project-types input::before{border-radius:45% 55% 49% 51% / 52% 46% 54% 48%}
@media(forced-colors:active){.project-types input{transform:none}}

/* The mascot's yellow lives inside selected cobalt controls. */
:root{--logo-yellow:#fcd562}
.project-types input:checked{background:var(--logo-yellow);border-color:var(--blue)}
.requirements input:checked{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--logo-yellow)}
.requirements input:checked::before{border-color:var(--logo-yellow);width:4px;height:7px}
@media(forced-colors:active){.requirements input:checked{box-shadow:none}}

.project-types input:checked,.project-types label:hover input:checked,.requirements input:checked,.requirements label:hover input:checked{border-color:var(--logo-yellow)}

/* Match the mascot: a cobalt shape around a yellow center. */
.project-types input:checked,.project-types label:hover input:checked{background:var(--blue);border-color:var(--blue)}
.project-types input::before{background:var(--logo-yellow)}
.requirements input:checked,.requirements label:hover input:checked{border-color:var(--blue);background:var(--blue);box-shadow:none}

/* A low arch: approximately the upper sixty percent of a circle. */
.project-types input,.project-types label:nth-of-type(even) input{height:12px;margin-top:5px;border-radius:10px 11px 3px 3px / 10px 10px 3px 3px;transform:none}
.project-types input::before{width:10px;height:7px;border-radius:7px 8px 2px 2px / 7px 7px 2px 2px}
@media(max-width:720px){.project-types input,.project-types label:nth-of-type(even) input{height:11px;margin-top:4px}.project-types input::before{width:8px;height:6px}}
@media(forced-colors:active){.project-types input,.project-types label:nth-of-type(even) input{height:18px;border-radius:50%}}

/* Crop a full circular control; never draw a closing bottom edge. */
.project-types input,.project-types label:nth-of-type(even) input{width:18px;height:18px;margin-top:2px;border-radius:50%;transform:none;clip-path:inset(0 0 35% 0)}
.project-types input::before{width:10px;height:10px;border-radius:50%}
.project-types input:focus-visible{outline:none}
.project-types label:has(input:focus-visible)>span{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
@media(max-width:720px){.project-types input,.project-types label:nth-of-type(even) input{width:16px;height:16px;margin-top:2px}.project-types input::before{width:9px;height:9px}}
@media(forced-colors:active){.project-types input,.project-types label:nth-of-type(even) input{clip-path:none}}

/* Open mascot arch with a separate little yellow file underneath. */
.project-types input,.project-types label:nth-of-type(even) input,.project-types input:checked,.project-types label:hover input:checked{width:18px;height:18px;clip-path:none;border:0;background:transparent;border-radius:0;margin-top:2px;transform:none}
.project-types input::after{content:"";position:absolute;inset:0;border-radius:48% 52% 50% 50%;background:radial-gradient(circle at 50% 50%,transparent 0 7px,#95999e 7px);clip-path:inset(0 0 23% 0)}
.project-types label:hover input::after{background:radial-gradient(circle at 50% 50%,transparent 0 7px,var(--blue) 7px)}
.project-types input:checked::after,.project-types label:hover input:checked::after{background:radial-gradient(circle at 50% 50%,transparent 0 5.5px,var(--blue) 5.5px)}
.project-types input::before{position:absolute;left:5px;top:9px;width:8px;height:8px;border-radius:2px 3px 2px 2px;background:var(--logo-yellow);z-index:1}
@media(max-width:720px){.project-types input,.project-types label:nth-of-type(even) input,.project-types input:checked{width:18px;height:18px}.project-types input::before{width:8px;height:8px}}
@media(forced-colors:active){.project-types input,.project-types label:nth-of-type(even) input,.project-types input:checked{appearance:auto;background:Canvas;border:revert}.project-types input::after{display:none}}

.project-types input::before{width:6px;height:6px;left:6px;top:7px;border-radius:2px}
@media(max-width:720px){.project-types input::before{width:6px;height:6px;left:6px;top:7px}}

.project-types input::before{width:7px;height:7px;left:5.5px;top:6.5px;border-radius:3px}
@media(max-width:720px){.project-types input::before{width:7px;height:7px;left:5.5px;top:6.5px;border-radius:3px}}

/* Full organic circles, with no cropped bottom. */
.project-types input::after{clip-path:none;border-radius:45% 55% 48% 52% / 53% 46% 54% 47%;transform:rotate(-6deg)}
.project-types label:nth-of-type(even) input::after{border-radius:54% 46% 52% 48% / 47% 55% 45% 53%;transform:rotate(5deg)}

/* Option buttons borrow the radio's soft asymmetry and cobalt/yellow pairing. */
.runtime-pills span{border-radius:11px 15px 12px 10px / 12px 11px 14px 10px;background:#fffdf830;border-color:#95999e}
.runtime-pills label:nth-child(even) span{border-radius:14px 10px 15px 12px / 11px 14px 10px 13px}
.runtime-pills label:has(input:checked) span{background:var(--blue);border-color:var(--blue);color:var(--logo-yellow)}

.runtime-pills label:has(input:checked) span{color:white;border-color:var(--logo-yellow)}

.runtime-pills span{border-width:2px;padding:7px 11px}

.runtime-pills label:has(input:checked) span{border-color:var(--blue)}
.runtime-pills label:hover span,.runtime-pills label:has(input:checked):hover span{border-color:var(--logo-yellow)}

.runtime-pills label:hover span,.runtime-pills label:has(input:checked):hover span{background:var(--logo-yellow);color:var(--ink);border-color:var(--logo-yellow)}

.runtime-pills label:has(input:checked) span,.runtime-pills label:has(input:checked):hover span{background:var(--blue);color:white;border-color:var(--blue)}

/* A bold plus keeps the checkbox's friendly square and yellow accent. */
.requirements input:checked::before{width:10px;height:10px;border:0;transform:none;background:linear-gradient(var(--logo-yellow),var(--logo-yellow)) center / 3px 10px no-repeat,linear-gradient(var(--logo-yellow),var(--logo-yellow)) center / 10px 3px no-repeat}

.requirements input:checked::before{width:5px;height:9px;background:none;border:solid var(--logo-yellow);border-width:0 4px 4px 0;transform:translateY(-1px) rotate(45deg)}

.runtime-pills label:has(input:checked):hover span{color:var(--logo-yellow)}

.project-types label:has(input:checked) strong,.project-types label:has(input:checked) small,.requirements label:has(input:checked) strong,.requirements label:has(input:checked) small{color:var(--blue)}

.requirements input:checked::before{filter:drop-shadow(1px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -2px 0 #fff)}
@media(forced-colors:active){.requirements input:checked::before{filter:none}}

/* Match option-button hover: yellow when available, selected blue takes priority. */
.project-types label:hover input:not(:checked)::after{background:radial-gradient(circle at 50% 50%,var(--logo-yellow) 0 7px,#95999e 7px)}
.requirements label:hover input:not(:checked){background:var(--logo-yellow);border-color:var(--logo-yellow)}
.project-types label:has(input:checked):hover strong,.project-types label:has(input:checked):hover small,.requirements label:has(input:checked):hover strong,.requirements label:has(input:checked):hover small{color:var(--blue)}

/* A viewport-sized workbench, with scrolling owned by its columns. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header,footer{flex:none}
main{flex:1;min-height:0;overflow:hidden;padding-bottom:8px}
.finder,.explore{height:100%;min-height:0}
.passport,.candidates,.inspector{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#c4c7d0 transparent;scroll-padding-block:12px;padding-bottom:22px}
.passport{padding-left:5px;margin-left:-5px}
.candidates{padding-right:10px}
.inspector{padding-right:8px}
footer{margin-top:0;padding:12px 0 14px}
@media(max-width:980px){
 main{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
 .finder,.explore{height:auto}
 .passport,.candidates,.inspector{overflow:visible;scrollbar-gutter:auto}
 .passport{margin-bottom:22px}
 footer{font-size:10px;padding:8px 0 10px}
}

/* A small spark inside the square: same weight and inset rhythm as the radios. */
.requirements input{position:relative;border-width:2px;border-radius:5px 7px 6px 5px / 6px 5px 7px 5px}
.requirements input:checked{border-color:var(--blue);background:var(--blue)}
.requirements input:checked::before,.requirements input:checked::after{content:"";position:absolute;left:50%;top:50%;border:0;transform:translate(-50%,-50%);filter:none;clip-path:polygon(50% 0,64% 34%,100% 50%,64% 66%,50% 100%,36% 66%,0 50%,36% 34%)}
.requirements input:checked::before{width:12px;height:12px;background:white}
.requirements input:checked::after{width:8px;height:8px;background:var(--logo-yellow)}
@media(forced-colors:active){.requirements input:checked::before,.requirements input:checked::after{display:none}}

.runtime-pills label:has(input:checked):hover span{color:white}

/* The checkbox gets the mascot's eyes; the radio keeps its yellow dot. */
.requirements input:checked::before,.requirements input:checked::after{width:3px;height:3px;top:50%;clip-path:none;filter:none;border:0;border-radius:50%;background:#202426;transform:translate(-50%,-50%)}
.requirements input:checked::before{left:32%}
.requirements input:checked::after{left:68%}

/* Two white eyes carry the mascot into the radio control. */
.brand-mark{position:relative;display:block;flex:none;width:40px;height:40px}
.brand-mark img{width:100%;height:100%}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;top:48.34%;width:6.1%;height:6.6%;background:white;border-radius:50%;transform:translate(-50%,-50%)}
.brand-mark::before{left:50.92%}.brand-mark::after{left:59.91%}
.project-types input::before{left:0;top:0;width:100%;height:100%;border-radius:0;background:radial-gradient(circle at 32% 50%,white 0 1.5px,transparent 1.7px),radial-gradient(circle at 68% 50%,white 0 1.5px,transparent 1.7px)}
.project-types input:checked::after,.project-types label:hover input:checked::after{background:var(--blue)}
@media(max-width:720px){.brand-mark{width:28px;height:30px}.project-types input::before{left:0;top:0;width:100%;height:100%;border-radius:0}}

.host-option .check-note{background:var(--logo-yellow);color:var(--ink)}

/* Radio: yellow inset. Checkbox: the mascot's two white eyes. */
.project-types input::before{left:5.5px;top:6.5px;width:7px;height:7px;border-radius:3px;background:var(--logo-yellow)}
.project-types input:checked::after,.project-types label:hover input:checked::after{background:radial-gradient(circle at 50% 50%,transparent 0 5.5px,var(--blue) 5.5px)}
.requirements input:checked::before,.requirements input:checked::after{background:white}
@media(max-width:720px){.project-types input::before{left:5.5px;top:6.5px;width:7px;height:7px;border-radius:3px}}

.brand-mark{width:48px;height:48px}
.brand-copy{gap:1px}
.brand-tagline{font-size:13px;line-height:1.2}
@media(max-width:720px){.brand-mark{width:36px;height:38px}.brand-copy{gap:1px}.brand-tagline{font-size:11px;line-height:1.2}}

/* A quiet recap, with a little of the mascot's character. */
.passport-summary{border:1px solid #d8d8d0;border-radius:13px 18px 15px 12px / 15px 13px 18px 12px;background:#fffdf84d;padding:17px 16px 16px;margin-top:22px}
.passport-summary h3{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 13px}
.passport-summary h3::before{content:"";flex:none;width:7px;height:7px;background:var(--logo-yellow);border-radius:3px 4px 3px 2px}
#summary{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;font-size:11px;line-height:1.4}
#summary li,#summary li+li{margin:0}
#summary li:first-child{flex-basis:100%;font-size:17px;font-weight:600;letter-spacing:-.25px;color:var(--ink);padding:0;background:none}
#summary li:nth-child(2){flex-basis:100%;font-size:12px;color:var(--muted);padding:0;margin-bottom:7px;background:none}
#summary li:nth-child(n+3){color:#3a5394;background:#e9edfa;padding:5px 7px;border-radius:5px 8px 6px 5px}
@media(max-width:980px){.passport-summary{max-width:360px;padding:17px 16px 16px}.passport-summary h3{font-size:12px;margin-bottom:13px}#summary{display:flex;font-size:11px}}

/* Keep keyboard focus visible inside the viewport's scroll boundaries. */
.passport:focus-visible,.candidates:focus-visible,.inspector:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
.requirements input:focus-visible{outline-width:2px;outline-offset:2px}
.runtime-pills input:focus-visible+span{outline-width:2px;outline-offset:2px}
.passport button:focus-visible,.host-option:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* Finder-style search status, always visible beneath the workspace. */
.status-bar{display:block;margin:0;padding:12px 0 14px;border-top:1px solid var(--line);min-height:43px;color:var(--muted)}
.status-bar .passport-summary{display:flex;align-items:baseline;gap:12px;max-width:none;border:0;border-radius:0;background:none;padding:0;margin:0}
.status-bar .passport-summary h3{flex:none;display:flex;align-items:center;gap:7px;margin:0;font-size:11px;font-weight:400;color:var(--muted);line-height:1.5}
.status-bar #summary{display:flex;flex-wrap:wrap;gap:3px 0;align-items:baseline;line-height:1.5;margin:0}
.status-bar #summary li,.status-bar #summary li:first-child,.status-bar #summary li:nth-child(2),.status-bar #summary li:nth-child(n+3){flex-basis:auto;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);background:none;border-radius:0;padding:0;margin:0}
.status-bar #summary li:first-child{color:var(--ink);font-weight:500}
.status-bar #summary li+li::before{content:"·";display:inline-block;padding:0 8px;color:#9a9da4}
.status-idle{font-size:12px;line-height:1.5}
.status-idle::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--logo-yellow);border-radius:3px 4px 3px 2px}
@media(max-width:720px){.status-bar{padding:10px 0 12px}.status-bar .passport-summary{display:block}.status-bar .passport-summary h3{margin-bottom:4px;font-size:10px}.status-bar #summary li,.status-bar #summary li:first-child,.status-bar #summary li:nth-child(2),.status-bar #summary li:nth-child(n+3){font-size:11px}}

/* Mobile has two clear screens, rather than three stacked desktop columns. */
.mobile-steps,.mobile-needs-toggle,.mobile-action{display:none}
@media(max-width:720px){
 .page{padding-inline:18px}
 header{padding:14px 0 17px;gap:12px}
 nav .replay-opening{display:none}
 #how-button{min-height:44px;font-size:12px}
 .mobile-steps{display:flex;flex:none;gap:4px;padding:4px;background:#eae9e3;border-radius:12px 16px 13px 11px;margin-bottom:16px}
 .mobile-steps button{flex:1;min-height:40px;border:0;background:transparent;border-radius:9px 12px 10px 8px;font-size:14px;color:var(--muted)}
 .mobile-steps button[aria-pressed=true]{background:#fffdf8;color:var(--ink);font-weight:600}
 .mobile-steps button:disabled{opacity:.45;cursor:default}
 #mobile-count{font-size:11px;margin-left:4px}
 main{padding-top:0;padding-bottom:12px}
 .finder,.explore{display:block;height:auto}
 body[data-mobile-view=thing] .explore,body[data-mobile-view=hosts] .passport{display:none}
 body[data-mobile-view=hosts] .inspector{display:none!important}
 .passport{border:0;padding:0 4px 14px;margin:0}
 .passport h2{font-size:25px}
 .thing-helper{max-width:none;font-size:13px;margin-bottom:4px}
 .passport .project-types{display:block;margin-top:22px}
 .project-types label{align-items:flex-start;min-height:64px;border:1px solid #d4d5ce;padding:12px;margin-bottom:10px;border-radius:10px 15px 12px 9px;gap:11px}
 .project-types label:has(input:checked){border-color:var(--blue);background:#e9edff66}
 .passport strong{font-size:15px}
 .passport small{font-size:12px;line-height:1.45}
 .passport fieldset legend{font-size:14px;margin-bottom:11px}
 .runtime-pills{gap:9px}
 .runtime-pills span{min-height:44px;padding:10px 14px;font-size:13px}
 .runtime-question .quiet{font-size:12px;line-height:1.5}
 .mobile-needs-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:48px;margin-top:20px;padding:0;background:none;border:0;border-top:1px solid var(--line);font-size:14px;font-weight:600;text-align:left}
 .mobile-needs-toggle span{font-size:12px;font-weight:400;color:var(--muted)}
 .passport .requirements{margin-top:8px}
 .requirements legend{display:none}
 .requirements label{min-height:48px;margin-bottom:10px;gap:11px}
 .requirements input{width:18px;height:18px}
 .explore-jump{display:none!important}
 .reset{min-height:40px;padding:8px 12px;font-size:12px;margin-top:16px;color:var(--muted)}
 .candidates{padding:0 4px 18px;border:0}
 .map-heading .quiet{margin-bottom:12px}
 .host-option{min-height:80px;padding:14px 14px 14px 15px}
 .status-bar{padding:10px 0 max(12px,env(safe-area-inset-bottom));min-height:0}
 .status-bar .passport-summary,.status-bar .status-idle{display:none!important}
 .mobile-action{display:flex;flex-direction:column;gap:7px}
 #mobile-action-context{font-size:11px;color:var(--muted);text-align:center;line-height:1.4}
 #mobile-action{width:100%;min-height:48px;font-size:14px;border-radius:11px 16px 13px 10px}
 #mobile-action:disabled{background:#e4e5df;border-color:#e4e5df;color:#777c80;cursor:default}
}

@media(min-width:641px) and (max-width:720px){dialog,#host-dialog{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:calc(68px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));overscroll-behavior:contain}.close{position:fixed;top:calc(12px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));width:44px;height:44px}}

@media(max-width:720px){.host-option,.host-option>span:last-child,.runtime-pills span,.project-types input,.requirements input{transition:none}.host-option:hover>span:last-child{transform:none}}

@media(max-width:720px){button,a,label,input,summary{-webkit-tap-highlight-color:transparent}}

/* Host details stay inside the same mobile navigation shell. */
@media(max-width:720px){
 body[data-mobile-view=detail] .passport,body[data-mobile-view=detail] .candidates{display:none!important}
 body[data-mobile-view=detail] .inspector{display:block!important;border:0;margin:0;padding:0 4px 20px;overflow:visible}
 body[data-mobile-view=detail] .inspector h2{font-size:30px}
 body[data-mobile-view=detail] .inspector h2:focus{outline:none}
 .inspector .actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .inspector .actions .primary,.inspector .actions .visit{min-height:48px;text-align:center;font-size:14px;display:flex;align-items:center;justify-content:center}
}

/* One readable mobile type rhythm across choices, results, and details. */
@media(max-width:720px){
 #passport-title{display:none}
 .thing-helper{font-size:14px;line-height:1.5;margin:2px 0 0}
 .passport fieldset legend,.mobile-needs-toggle,.host-option strong{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.2px}
 .passport .project-types{margin-top:20px}
 .passport strong{font-size:16px;line-height:1.35}
 .passport small{font-size:13px;line-height:1.5}
 .passport fieldset legend span,.mobile-needs-toggle span{font-size:12px;letter-spacing:0}
 .runtime-pills span{font-size:14px}
 .runtime-question .quiet,.map-heading .quiet{font-size:13px;line-height:1.5}
 .mobile-steps button{font-size:15px}
 .host-option small{font-size:14px;line-height:1.5}
 .host-option .check-note{font-size:12px}
 .map-heading h2{font-size:24px;line-height:1.25}
 body[data-mobile-view=detail] .inspector h2{font-size:26px;line-height:1.25}
 .inspector-identity>p{font-size:15px;line-height:1.5}
 .inspector-content h3{font-size:18px;line-height:1.3}
 .fit-reasons li,.limits dl>div,.limits>p{font-size:14px;line-height:1.55}
 .sources a{font-size:13px;line-height:1.5}
 .brand-tagline{font-size:12px}
}

.mobile-question-helper{display:none}
@media(max-width:720px){
 .thing-helper{display:none}
 .passport .project-types{margin-top:0}
 .passport .project-types legend{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.7px;margin-bottom:0}
 .mobile-question-helper{display:block;font-size:13px;line-height:1.5;margin:7px 0 18px;color:var(--muted)}
}

/* One mobile card language for project choices and hosting results. */
@media(max-width:720px){
 .project-types label,.host-option{min-height:76px;border:1px solid #d4d5ce;border-radius:10px 15px 12px 9px;padding:14px;margin:0 0 10px;background:transparent;gap:11px}
 .project-types label:has(input:checked),.host-option.selected,.motion-selection-ready .host-option.selected{border-color:var(--blue);background:#e9edff66}
 .project-types label strong,.host-option strong,.excluded .host-option strong{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.2px}
 .project-types label small,.host-option small{font-size:13px;line-height:1.5;margin-top:3px}
 .host-option.selected strong,.host-option.selected small:not(.check-note){color:var(--blue)}
 .host-option::after{display:none}
 .motion-selection{display:none!important}
 .host-option:hover,.host-option.selected:hover,.motion-selection-ready .host-option.selected:hover{background:#e9edff66}
 .host-option .check-note{font-size:12px;margin-top:7px}
 .excluded .host-option{padding:14px}
 .host-option:focus-visible{outline-offset:2px}
}

@media(min-width:721px){.passport fieldset legend{font-size:18px;font-weight:600;line-height:1.3}.host-option strong{font-size:18px;font-weight:600;line-height:1.3}}

/* Shared header navigation treatment for links and buttons, present and future. */
header .main-navigation{display:flex;align-items:center;justify-content:flex-end;gap:24px}
header .main-navigation>a,header .main-navigation>button,header .main-navigation .replay-opening{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0;font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink);white-space:nowrap;text-decoration:none}
header .main-navigation .replay-opening span{font-size:17px;line-height:1}
header .main-navigation>a:hover,header .main-navigation>button:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@media(max-width:720px){header .main-navigation{flex-direction:column;align-items:flex-end;gap:2px}header .main-navigation>a,header .main-navigation>button{font-size:12px;line-height:1.4;min-height:24px}header .main-navigation .replay-opening{display:none}header .main-navigation #how-button{font-size:12px;min-height:24px}}
@media(prefers-reduced-motion:reduce){header .main-navigation .replay-opening{display:none}}

/* Host hover and selection share one geometry and color treatment. */
:root{--host-highlight:var(--logo-yellow);--host-corners:12px 23px 17px 11px / 19px 12px 22px 13px}
.host-option{width:100%;border-left-color:transparent;border-radius:var(--host-corners)}
.motion-selection{background:var(--host-highlight);border:0;border-radius:var(--host-corners);box-shadow:none}
.host-option:hover,.host-option.selected:hover,.motion-selection-ready .host-option.selected:hover{background:var(--host-highlight);border-left-color:transparent;box-shadow:none}
.host-option.selected{background:var(--host-highlight);border-left-color:transparent;box-shadow:none}
.motion-selection-ready .host-option.selected{background:transparent;border-left-color:transparent}
.host-option:hover::after,.host-option.selected::after{background:transparent}
.host-option>span:last-child,.host-option.selected>span:last-child{display:flex;align-items:center;justify-content:center;flex:none;width:25px;height:25px;font-size:23px;line-height:1;border-radius:10px 13px 11px 9px;box-shadow:none;transform:none}
.host-option:hover>span:last-child,.host-option.selected>span:last-child{background:var(--blue);color:white;transform:none}
.host-option:hover small:not(.check-note),.host-option.selected small:not(.check-note){color:#4c483c}
@media(max-width:720px){
 .host-option,.host-option.selected,.motion-selection-ready .host-option.selected{border:1px solid #d4d5ce;border-radius:10px 15px 12px 9px}
 .host-option:hover,.host-option.selected,.host-option.selected:hover,.motion-selection-ready .host-option.selected,.motion-selection-ready .host-option.selected:hover{background:var(--host-highlight);border-color:#d4d5ce}
 .host-option.selected strong{color:var(--ink)}
}

@media(min-width:721px){
 .explore{gap:10px}
 .candidates{padding-left:6px;padding-right:6px}
 .candidates .map-heading{padding-left:17px;padding-right:8px}
 .candidates .no-matches,.candidates #load-error{margin-left:8px;margin-right:8px}
}

/* Host rows are real bookmarkable links. */
a.host-option{font-family:inherit;text-decoration:none;color:inherit}
.review-date,#link-status{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}

/* Reset is a quiet footer action, shown only for an active search. */
.status-bar{display:flex;align-items:baseline;gap:8px 16px}
.status-bar .passport-summary,.status-bar .status-idle{flex:1;min-width:0}
.status-bar .reset{flex:none;margin:0 0 0 auto;min-height:0;padding:0;background:none;border:0;border-radius:0;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.status-bar .reset:hover{color:var(--blue);background:none}
.status-bar .reset:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:720px){
 .status-bar{flex-wrap:wrap;gap:4px 12px;align-items:center}
 .status-bar .mobile-action{flex:0 0 100%}
 .status-bar .reset{font-size:11px;min-height:32px;display:inline-flex;align-items:center}
}

/* The search status reads naturally, rather than as separate filter chips. */
.status-bar #summary{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.status-bar #summary::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--logo-yellow);border-radius:3px 4px 3px 2px}
@media(max-width:720px){.status-bar #summary{font-size:11px}}