/* Type system: the animated hero's fonts, used site-wide. Fonts load from app/layout.jsx. */
:root{--font-display:Archivo,system-ui,sans-serif;--font-body:Archivo,system-ui,sans-serif;--font-mono:'Space Mono',monospace;--font-hand:'Permanent Marker',cursive}
:root{color-scheme:dark;--bg:#101111;--panel:#171818;--text:#efeee8;--muted:#858780;--line:#30312e;--accent:#e9a867}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:none;border:0}button:hover{color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit}header{height:106px;margin:0 5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:30px}.brand{text-decoration:none;display:flex;align-items:center;gap:13px}.brand-mark{font:600 49px var(--font-display);letter-spacing:-5px;line-height:1}.brand-mark>span{color:var(--accent);font-size:32px;vertical-align:top;position:relative;top:1px}.brand strong{font:750 22px var(--font-display);letter-spacing:-1px}.brand strong>span{display:block;font:8px var(--font-body);letter-spacing:2.3px;margin-top:5px;color:var(--muted)}nav{display:flex;gap:32px;margin:auto}.nav{padding:12px 0;font-size:12px;color:#92958e}.nav.active{color:var(--text)}.nav.active:after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin:8px auto -12px}.nav span{color:var(--accent);padding-left:5px}.about-btn{font-size:12px}.about-btn span{margin-left:15px;color:var(--accent)}main{max-width:1600px;padding:0 5%;margin:auto}.intro{padding:64px 0 37px;text-align:center}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--muted)}.intro .eyebrow{color:#c5b19a;display:flex;justify-content:center;gap:9px;align-items:center}.eyebrow i{width:5px;height:5px;background:var(--accent);border-radius:50%}h1{font:500 clamp(38px,4.2vw,67px)/1.09 var(--font-display);letter-spacing:-2.8px;margin:22px 0 20px}h1 em{font-style:normal;color:var(--accent)}.intro p{color:#93958f;line-height:1.8;font-size:12px}.search-section{max-width:880px;margin:0 auto 43px}form{position:relative;display:flex;align-items:center;border:1px solid #3b3d36;background:#1b1c1a;border-radius:9px;padding:9px;gap:15px;box-shadow:0 8px 40px #0002}.field{position:relative;flex:1;min-width:0;padding:7px 12px}.field label{display:block;font-size:8px;letter-spacing:1.6px;color:#93988b;margin-bottom:9px}.input-row{display:flex;align-items:center;gap:10px}.tiny-dot{height:7px;width:7px;background:var(--accent);border-radius:50%;flex-shrink:0}input{border:0;background:none;color:var(--text);width:100%;min-width:0;font-size:14px;outline:0}input::placeholder{color:#777d72}.clear{font-size:16px;color:#8b8e85}.search-icon{font-size:22px;line-height:12px;color:var(--accent)}#swap{border:1px solid #45473c;border-radius:50%;width:30px;height:30px;font-size:18px;color:#aaad9f;flex-shrink:0}.primary{background:var(--accent);color:#20180f;border-radius:5px;font-weight:650;padding:21px 23px;white-space:nowrap}.primary:hover{background:#ffc78c;color:#20180f}.primary span{margin-left:22px;font-size:18px}.search-below{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:20px}.try{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1px;color:#767b70}.try button{font-size:10px;letter-spacing:0;border-bottom:1px solid #343730;margin-left:8px;padding:3px 0;color:#b2b4ab}.text-btn{font-size:11px;color:#b0b4a8}.text-btn span{margin-left:12px;color:var(--accent)}#error{color:#ffc39e;font-size:12px;min-height:0;margin:8px 0 0}.suggestions{position:absolute;top:70px;left:0;right:0;z-index:12;background:#242620;border:1px solid #45473d;border-radius:6px;overflow:hidden;box-shadow:0 10px 40px #0008}.suggestions:empty{display:none}.suggestions button{display:flex;width:100%;padding:10px 14px;text-align:left;align-items:center;gap:10px}.suggestions button:hover,.suggestions button:focus{background:#393a31}.suggestions img{width:25px;height:25px;object-fit:cover;border-radius:50%}.suggestions small{padding:12px;display:block}.suggestions .live-tag{margin-left:auto;color:var(--accent);font-size:8px;letter-spacing:1px}.connection{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#141515}.connection-top{display:flex;align-items:center;justify-content:space-between;padding:22px 29px;border-bottom:1px solid #2d2e29;gap:20px}.result-heading{display:flex;align-items:center;gap:20px}.degree{font:500 48px var(--font-display);color:var(--accent);letter-spacing:-3px}.result-heading h2{font-size:15px;font-weight:500;margin:0 0 8px}.result-heading p{font-size:10px;color:#96998f;margin:0}.result-heading p span{padding:0 10px;color:var(--accent)}.view-tabs{background:#0f100f;padding:4px;border:1px solid #2d3028;border-radius:6px;display:flex}.view-tabs button{font-size:10px;color:#85897b;padding:9px 12px;border-radius:4px}.view-tabs button.selected{background:#2d3029;color:#e1e3d9}.graph-wrap{position:relative;background:radial-gradient(ellipse at 48% 48%,#54432b15,transparent 65%),radial-gradient(#71756829 .7px,transparent .7px);background-size:auto,19px 19px}.graph-caption{position:absolute;top:22px;left:28px;display:flex;gap:8px;align-items:center;font-size:8px;color:#7f8976;letter-spacing:1.5px;z-index:1;pointer-events:none}.live-dot{width:5px;height:5px;background:#909b7b;border-radius:50%}#viewport{height:325px;overflow:hidden;touch-action:none;cursor:grab;position:relative}#viewport:active{cursor:grabbing}#graph{position:absolute;inset:0;transform-origin:0 0}#graph svg{position:absolute;inset:0;overflow:visible;pointer-events:none}.edge{stroke:#b38b55;stroke-width:1;stroke-dasharray:4 4;opacity:.72}.edge.explore{stroke:#6c7760;opacity:.5}.node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;padding:0;text-align:center;width:122px;transition:filter .2s}.node:hover{z-index:2}.portrait{width:88px;height:88px;padding:4px;border:1px solid #716146;border-radius:50%;background:#141611;position:relative;display:grid;place-items:center}.portrait img{height:100%;width:100%;object-fit:cover;border-radius:50%;filter:grayscale(.8) sepia(.12);transition:filter .25s}.node:hover img{filter:none}.node.endpoint .portrait{border-color:var(--accent);box-shadow:0 0 30px #edb27513}.initials{color:var(--accent);font:30px var(--font-display)}.node .name{position:absolute;top:100%;margin-top:12px;font-size:11px;white-space:nowrap;font-weight:500}.node .sub{position:absolute;top:100%;margin-top:32px;font-size:8px;letter-spacing:1.4px;color:#858e79}.film-node{width:92px}.poster{width:59px;height:85px;border-radius:3px;overflow:hidden;border:1px solid #b4996a66;position:relative;background:linear-gradient(160deg,#7e7455,#1c2728);display:flex;align-items:center;justify-content:center;font:10px var(--font-display)}.poster img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.82)}.film-node .name{white-space:normal;width:128px;font-size:9px;color:#d3d3c8;line-height:1.45;margin-top:13px}.film-node .sub{margin-top:42px;font-size:8px}.node.small .portrait{width:57px;height:57px}.node.small .name{font-size:9px;margin-top:7px}.node.small .sub{display:none}.node.small .poster{width:38px;height:53px}.node.small.film-node .name{width:96px;font-size:8px}.graph-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 24px 20px;gap:15px}.legend{display:flex;gap:16px;align-items:center;font-size:9px;color:#969d89}.legend span{display:flex;gap:7px;align-items:center}.actor-key{height:6px;width:6px;border:1px solid #b9ac8e;border-radius:50%}.film-key{height:7px;width:5px;background:#b9ac8e}.legend b{font-weight:400;color:#67725e;margin-left:5px}.zoom{display:flex;align-items:center;border:1px solid #373d31;border-radius:4px;background:#191e16}.zoom button{padding:5px 10px;font-size:14px}.zoom button:nth-child(2){font-size:9px;color:#9ba58f;padding:8px;border-left:1px solid #303829;border-right:1px solid #303829}.story-bar{border-top:1px solid #30342b;display:flex;align-items:center;gap:17px;padding:21px 27px;background:#1b1e17}.story-icon{font-size:25px;color:var(--accent)}.story-bar .eyebrow{font-size:8px;color:#aaa78f}.story-bar p{font-size:11px;line-height:1.7;color:#b6baa9;margin:7px 0 0}.story-bar button{margin-left:auto;font-size:22px;color:var(--accent)}.discovery{padding:35px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.discovery .eyebrow{font-size:8px}.discovery h2{font:450 19px var(--font-display);margin:10px 0 0;letter-spacing:-.5px}footer{display:flex;align-items:center;border-top:1px solid var(--line);padding:25px 0 30px;gap:20px;color:#747c6d;font-size:9px}.footer-brand{font:bold 15px var(--font-display);color:#b6bbae;letter-spacing:-.6px}.footer-brand span{color:var(--accent);padding-left:3px}footer button{margin-left:auto;color:#818a75;font-size:9px}#tooltip{display:none;position:absolute;left:50%;bottom:62px;transform:translateX(-50%);background:#ece5d5;color:#28281f;padding:12px 18px;border-radius:6px;font-size:11px;max-width:420px;pointer-events:none;z-index:4;box-shadow:0 6px 30px #0006}#tooltip.show{display:block}#panel{position:fixed;right:0;top:0;bottom:0;width:395px;max-width:100%;background:#191c17;border-left:1px solid #424635;z-index:30;overflow:auto;padding:45px 30px;box-shadow:-20px 0 90px #0007}#close-panel,#close-info{position:absolute;right:19px;top:14px;font-size:25px;color:#aeb69f}#panel .detail-image{width:125px;height:125px;object-fit:cover;border-radius:50%;filter:grayscale(.6);margin:15px 0 10px}#panel .detail-image.film{border-radius:5px;height:190px;width:128px}#panel h2{font:500 30px/1.2 var(--font-display);letter-spacing:-1px;margin:12px 0}#panel p{color:#aeb6a3;font-size:12px;line-height:1.8}#panel .stats{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid #343d2b;margin:22px 0;padding:16px 0;gap:20px}.stats strong{font:24px var(--font-display);color:var(--accent);display:block}.stats span{font-size:10px;color:#a9b29b}.panel-action{width:100%;margin-top:10px;border:1px solid #565d47;border-radius:5px;padding:14px;text-align:left}.panel-action:first-of-type{background:var(--accent);color:#1e2017}.panel-action span{float:right}.credit-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #343b2d;padding:12px 0;font-size:11px;width:100%;text-align:left;gap:10px}.credit-row span{color:#9eaa8b;font-size:10px}.source-link{display:block;margin-top:20px;font-size:10px;color:#b6beab}.catalog-note{font-size:10px!important;color:#819174!important}#scrim{position:fixed;inset:0;background:#0004;backdrop-filter:blur(2px);z-index:25}dialog{background:#20251b;color:var(--text);border:1px solid #4b5540;border-radius:10px;max-width:600px;width:90%;padding:40px;max-height:80vh}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}dialog h2{font:500 29px var(--font-display);letter-spacing:-1px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#bdc4b2}dialog a{color:var(--accent)}[hidden]{display:none!important}.section-title{display:flex;justify-content:space-between;align-items:end}.section-title h2{font:400 27px var(--font-display);margin:10px 0 20px}.section-title p{font-size:11px;color:var(--muted);margin-bottom:24px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:35px}.preset{padding:24px;text-align:left;border:1px solid #3b4132;border-radius:8px;background:#191d16}.preset .eyebrow{color:var(--accent)}.preset h3{font-size:14px;font-weight:400;line-height:1.8;margin:15px 0}.preset p{font-size:11px;color:#889578}.preset .pair-images{display:flex;margin:16px 0}.pair-images img{width:48px;height:48px;border:3px solid #191d16;object-fit:cover;border-radius:50%;filter:grayscale(.8)}.pair-images img+img{margin-left:-8px}@media(min-width:1500px){.intro{padding-top:78px}#viewport{height:370px}}@media(max-width:900px){header{height:85px}.brand strong{font-size:18px}nav{gap:18px;margin-left:auto;margin-right:0}.nav{font-size:10px}.about-btn{display:none}.intro{padding-top:43px}.connection-top{padding:18px}.legend b{display:none}.search-below{gap:8px}.try button{margin-left:5px}.try{font-size:7px}.primary{padding:21px 14px}.primary span{margin-left:8px}.discovery h2{font-size:16px}}@media(max-width:600px){header{margin:0 5%;gap:10px;height:77px}.brand-mark{font-size:38px}.brand-mark>span{font-size:25px}.brand strong{font-size:16px}.brand strong>span{font-size:6px;letter-spacing:1.5px}.brand{gap:9px}nav{gap:16px}.nav{font-size:10px}.nav:first-child{display:none}.nav:nth-child(2){max-width:55px;line-height:1.5}.nav:nth-child(3){max-width:60px;line-height:1.5}.intro{padding:40px 0 25px}.intro .eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:38px;letter-spacing:-1.8px;margin-top:19px}.intro p{font-size:11px;padding:0 10px}.intro p br{display:none}form{flex-wrap:wrap;gap:0;padding:7px}.field{padding:9px;flex-basis:40%}.primary{flex-basis:100%;padding:13px;margin-top:9px}.search-below{align-items:flex-start}.try{flex-wrap:wrap;gap:5px;max-width:235px;line-height:1.8}.try button{font-size:9px}#random{font-size:10px;white-space:nowrap;padding-top:4px}.search-section{margin-bottom:25px}.connection-top{align-items:flex-start;gap:10px;flex-wrap:wrap}.result-heading{gap:14px}.degree{font-size:41px}.result-heading h2{font-size:12px}.result-heading p{font-size:9px}.view-tabs{margin-left:auto}.view-tabs button{padding:6px 10px;font-size:9px}.graph-caption{left:18px;font-size:7px}#viewport{height:325px}.graph-bottom{padding:0 15px 15px}.legend{gap:12px;font-size:8px}.zoom button{padding:4px 8px}.story-bar{padding:18px 15px;gap:12px}.story-bar p{font-size:10px}.story-bar .eyebrow{font-size:7px}.discovery{align-items:flex-start;flex-direction:column;padding:25px 0;gap:15px}.discovery h2{font-size:15px}.discovery button{padding:0}footer{flex-wrap:wrap;gap:8px;padding:20px 0}.footer-brand{font-size:13px}footer p{margin-left:auto}footer button{margin-left:0;flex-basis:100%;text-align:left;padding:7px 0}.presets{grid-template-columns:1fr}.section-title{display:block}.section-title p{margin:0 0 20px}.preset{padding:18px}.preset h3{margin:8px 0}.preset .pair-images{float:right;margin:0}.node .name{font-size:10px}.node .sub{font-size:7px}dialog{padding:27px}#tooltip{max-width:90%;width:300px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.intro:after{content:'';display:block;max-width:980px;height:218px;margin:36px auto 0;border:1px solid #f4d83d66;border-radius:10px;background:linear-gradient(180deg,transparent 35%,#101111 100%),url('assets/kb-hero.png') center 45%/cover;box-shadow:0 18px 65px #0008,8px 8px 0 #ff3f7f44;filter:saturate(.88);transition:transform .35s ease,filter .35s ease}.intro:hover:after{transform:translateY(-3px) rotate(-.2deg);filter:saturate(1)}
:root{--accent:#f4d83d;--hot:#ff3f7f;--cyan:#15c9d6}.brand-mark>span{color:var(--hot)}.intro em{color:var(--accent)}.live-dot{background:var(--cyan)}.story-icon{color:var(--hot)}
@media(max-width:600px){.intro:after{height:140px;margin-top:27px;border-radius:7px;box-shadow:0 12px 35px #0008,5px 5px 0 #ff3f7f44}}
:root{--bg:#f7f1e7;--panel:#fffdf8;--text:#151615;--muted:#5e625c;--line:#171817;--accent:#e7ff29;--hot:#f52f72;--cyan:#16c6cf}
body{background:var(--bg);color:var(--text);background-image:radial-gradient(#15161512 .7px,transparent .7px);background-size:17px 17px}body:before{content:'ARCHIVE / 1995 → 2026';position:fixed;right:22px;top:118px;z-index:5;padding:8px 11px;background:var(--hot);color:#fffdf8;border:2px solid var(--text);font:700 9px var(--font-mono);letter-spacing:1px;transform:rotate(4deg);box-shadow:4px 4px 0 var(--text);pointer-events:none}header{border-bottom:2px solid var(--text)}.brand strong{font-family:var(--font-display);letter-spacing:-1.5px}.brand strong>span{font-family:var(--font-mono);color:var(--text)}.brand-mark{font-family:var(--font-display);color:var(--text)}.brand-mark>span{color:var(--hot)}.nav,.about-btn{color:#4d504b}.nav.active{color:var(--text)}.nav.active:after{background:var(--hot)}
.intro{padding-top:55px}.intro .eyebrow{color:var(--text);background:var(--accent);border:2px solid var(--text);padding:7px 11px;display:inline-flex;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--text)}h1{font-family:var(--font-display);font-weight:900;letter-spacing:-2px;color:var(--text);text-transform:uppercase;text-shadow:3px 3px 0 #fffdf8}h1 em{font-style:normal;color:var(--hot)}.intro p{color:#343633;font-family:var(--font-mono);font-size:12px}.intro:after{width:100%;max-width:1140px;height:auto;aspect-ratio:1672/941;margin:45px auto 0;background-image:url('assets/kb-hero.png');background-position:center;background-size:100% 100%;border:2px solid var(--text);border-radius:2px;box-shadow:9px 9px 0 var(--cyan),-9px 10px 0 var(--hot);filter:none;transform:rotate(-.35deg)}.intro:hover:after{transform:rotate(.2deg) translateY(-3px);filter:none}
.search-section{max-width:980px;margin-top:54px}.field label,.eyebrow{font-family:var(--font-mono);font-weight:700}.field label{color:#3d403b}.field input,input{color:var(--text)}form{background:var(--panel);border:2px solid var(--text);border-radius:2px;box-shadow:8px 8px 0 var(--cyan)}#swap{border:2px solid var(--text);color:var(--text);background:var(--accent)}.tiny-dot{background:var(--hot)}.primary{background:var(--accent);color:var(--text);border:2px solid var(--text);border-radius:2px;box-shadow:4px 4px 0 var(--hot);font-family:var(--font-display);text-transform:uppercase;font-size:11px}.primary:hover{background:var(--hot);color:#fffdf8}.search-below{font-family:var(--font-mono)}.try button{color:var(--text);border-color:var(--text)}.text-btn{color:var(--text)}
.connection{background:var(--panel);border:2px solid var(--text);border-radius:2px;box-shadow:9px 9px 0 var(--hot)}.connection-top{border-bottom:2px solid var(--text)}.degree{font-family:var(--font-display);color:var(--hot);text-shadow:3px 3px 0 var(--accent)}.result-heading h2{font-family:var(--font-display);color:var(--text);text-transform:uppercase}.result-heading p{color:#484c46;font-family:var(--font-mono)}.view-tabs{background:var(--text);border:2px solid var(--text);border-radius:2px}.view-tabs button{color:#fffdf8}.view-tabs button.selected{background:var(--accent);color:var(--text)}.graph-wrap{background-color:#f1eadf;background-image:radial-gradient(#15161535 1px,transparent 1px),linear-gradient(115deg,#16c6cf15,transparent 38%),linear-gradient(245deg,#f52f7212,transparent 34%);background-size:18px 18px,auto,auto}.edge{stroke:var(--text);stroke-width:1.5;stroke-dasharray:2 7;opacity:.85}.edge.explore{stroke:var(--hot);stroke-width:1.2;opacity:.75}.graph-caption{color:#454943;font-family:var(--font-mono);font-weight:700}.portrait{background:#fffdf8;border:2px solid var(--text);box-shadow:4px 4px 0 #15161533}.portrait img{filter:grayscale(.7) contrast(1.08)}.node:hover .portrait img{filter:grayscale(0) contrast(1.05)}.node .name{color:var(--text);font-family:var(--font-display);text-transform:uppercase;font-size:10px}.node .sub{color:#454943;font-family:var(--font-mono);font-weight:700}.film-node .poster{background:#151615;border:3px solid #fffdf8;box-shadow:5px 5px 0 var(--hot),-4px -4px 0 var(--cyan);transform:rotate(-2deg)}.film-node .poster img{opacity:.16;filter:grayscale(1)}.poster-label{position:absolute;inset:8px 5px;z-index:1;display:grid;place-items:center;color:#fffdf8;font:700 13px/1.05 var(--font-hand);letter-spacing:.2px;text-align:center;text-transform:uppercase;transform:rotate(-3deg);text-shadow:1px 1px 0 #000}.film-node .name{font-family:var(--font-hand);color:var(--text);font-size:11px;transform:rotate(-2deg)}.node.bacon .portrait{border:3px solid var(--accent);box-shadow:8px 8px 0 var(--hot),-7px -6px 0 var(--cyan);transform:rotate(-4deg)}.node.bacon .name{background:var(--accent);border:2px solid var(--text);padding:4px 7px;box-shadow:3px 3px 0 var(--text);transform:rotate(-3deg)}.node.bacon:after{content:'THE HOOK';position:absolute;top:-28px;right:-9px;color:var(--hot);font:700 8px var(--font-mono);letter-spacing:1px;transform:rotate(7deg)}.graph-bottom{border-top:0}.legend{color:#3f443d;font-family:var(--font-mono)}.actor-key{border-color:var(--text)}.film-key{background:var(--text)}.legend b{color:var(--hot)}.zoom{background:var(--panel);border:2px solid var(--text)}.zoom button{color:var(--text)}.story-bar{background:var(--text);border-top:2px solid var(--text);color:#fffdf8}.story-bar .eyebrow{color:var(--accent)}.story-bar p{color:#fffdf8;font-family:var(--font-mono)}.story-icon{color:var(--hot)}
.discovery{position:relative}.discovery:after{content:'✳  ✳  ✳';position:absolute;right:4%;bottom:25px;color:var(--cyan);font-size:24px;letter-spacing:6px;transform:rotate(-8deg)}.discovery h2{font-family:var(--font-display);text-transform:uppercase}.section-title h2{font-family:var(--font-display);text-transform:uppercase}.preset{background:var(--panel);border:2px solid var(--text);border-radius:2px;box-shadow:5px 5px 0 var(--cyan)}.preset .eyebrow{color:var(--hot)}.preset h3{font-family:var(--font-hand)}.footer-brand{font-family:var(--font-display);color:var(--text)}footer{border-top:2px solid var(--text);font-family:var(--font-mono);color:#454943}footer button{color:var(--text)}#panel{background:var(--panel);color:var(--text);border-left:2px solid var(--text)}#panel h2{font-family:var(--font-display);text-transform:uppercase}#panel p{color:#454943;font-family:var(--font-mono)}.panel-action{border:2px solid var(--text);border-radius:2px;color:var(--text)}.panel-action:first-of-type{background:var(--accent)}.credit-row{border-bottom:1px solid #85887e;color:var(--text)}dialog{background:var(--panel);color:var(--text);border:2px solid var(--text);border-radius:2px;box-shadow:8px 8px 0 var(--hot)}dialog h2{font-family:var(--font-display);text-transform:uppercase}dialog p,dialog li{color:#454943;font-family:var(--font-mono)}
@media(max-width:600px){body:before{right:9px;top:94px;font-size:7px}.intro{padding-top:38px}.intro:after{height:auto;aspect-ratio:1672/941;margin-top:30px;box-shadow:5px 5px 0 var(--cyan),-5px 6px 0 var(--hot)}form{box-shadow:5px 5px 0 var(--cyan)}.connection{box-shadow:5px 5px 0 var(--hot)}.discovery:after{display:none}}
.brand{width:146px;height:72px;position:relative;display:block;perspective:500px}.brand:before{content:'';position:absolute;left:0;top:2px;width:132px;aspect-ratio:1672/941;background:url('assets/kb-hero.png') center/100% 100% no-repeat;border:2px solid var(--text);box-shadow:5px 5px 0 var(--hot),-4px 4px 0 var(--cyan);transform-origin:50% 0;animation:brand-swing 4.8s ease-in-out infinite;z-index:1}.brand:after{content:'SDOKB';position:absolute;right:-2px;bottom:-1px;padding:3px 5px;background:var(--accent);border:2px solid var(--text);font:700 8px var(--font-mono);letter-spacing:1px;transform:rotate(-5deg);z-index:2}.brand-mark,.brand strong{display:none}@keyframes brand-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(max-width:600px){.brand{width:105px;height:58px}.brand:before{width:98px}.brand:after{font-size:6px;right:-3px;bottom:-2px;padding:2px 3px}}
@media(prefers-reduced-motion:reduce){.brand:before{animation:none}}
.brand{width:93px;height:83px}.brand:before{left:3px;top:-5px;width:72px;aspect-ratio:394/534;background-image:url('assets/kb-portrait.png');background-size:100% 100%;box-shadow:5px 5px 0 var(--hot),-4px 4px 0 var(--cyan)}.brand:after{right:-4px;bottom:-2px}.brand:before{animation:brand-swing 4.8s ease-in-out infinite}@media(max-width:600px){.brand{width:73px;height:65px}.brand:before{left:2px;top:-2px;width:58px}.brand:after{right:-5px;bottom:-2px}}
.intro h1 em,.intro h1 br{display:none}
.intro{padding:58px 0 34px;text-align:left}.intro:after{display:none}.hero-callout{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(265px,.85fr);gap:35px;min-height:385px;padding:46px 52px 39px;overflow:hidden;background:#171817;color:#fffdf8;border:2px solid var(--text);box-shadow:10px 10px 0 var(--hot),-8px 8px 0 var(--cyan);isolation:isolate}.hero-callout:before{content:'';position:absolute;inset:-60px 45% -90px -90px;z-index:-1;background:radial-gradient(circle at 35% 40%,#16c6cf66 0 4%,transparent 24%),radial-gradient(circle at 74% 70%,#f52f7266 0 3%,transparent 19%),radial-gradient(circle at 49% 22%,#e7ff294d 0 2%,transparent 13%);transform:rotate(-12deg)}.hero-callout:after{content:'A FILM IS A MEETING PLACE';position:absolute;right:28px;top:21px;color:#fffdf855;font:700 9px var(--font-mono);letter-spacing:2px;transform:rotate(3deg)}.callout-kicker{display:inline-block;color:var(--accent);font-size:9px;letter-spacing:2px;border-bottom:2px solid var(--hot);padding-bottom:7px}.hero-copy h1{display:block;margin:25px 0 21px;color:#fffdf8;font-family:var(--font-display);font-size:clamp(44px,5.1vw,79px);line-height:.92;letter-spacing:-2px;text-transform:none;text-shadow:none}.hero-copy h1 span,.hero-copy h1 b,.hero-copy h1 em{display:block}.hero-copy h1 span{color:var(--accent);font-size:.92em;transform:rotate(-2deg);transform-origin:left}.hero-copy h1 b{font-weight:900}.hero-copy h1 em{font-style:normal;color:#fffdf8;font-size:.72em;text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:7px;text-underline-offset:4px}.hero-copy p{max-width:560px;margin:0;color:#f7f0e5;font:13px/1.65 var(--font-mono)}.callout-stamp{display:inline-flex;align-items:center;gap:14px;margin-top:23px;padding:7px 13px;color:var(--hot);border:2px solid var(--hot);font:700 18px var(--font-display);transform:rotate(-4deg);box-shadow:4px 4px 0 var(--accent)}.callout-stamp small{color:var(--accent);font:700 8px var(--font-mono);letter-spacing:1px}.hero-character{position:relative;min-height:300px;align-self:center}.hero-character:before{content:'';position:absolute;inset:10% 8% 4%;background:repeating-linear-gradient(135deg,#16c6cf22 0 8px,transparent 8px 22px),radial-gradient(circle,#f52f724d 0 2px,transparent 3px);transform:rotate(6deg);opacity:.8}.portrait-stage{position:relative;width:min(265px,86%);margin:8px auto 0;padding:9px 9px 28px;background:#f3ece0;border:2px solid #111;box-shadow:8px 8px 0 var(--accent),-7px 6px 0 var(--cyan);transform:rotate(3deg)}.portrait-stage img{display:block;width:100%;height:250px;object-fit:cover;object-position:center top}.portrait-stage span{position:absolute;bottom:8px;left:13px;color:#171817;font:700 8px var(--font-mono);letter-spacing:1px;transform:rotate(-2deg)}.film-strip{position:absolute;z-index:2;left:-7px;bottom:17px;display:flex;flex-direction:column;gap:4px;transform:rotate(-7deg)}.film-strip i{display:block;width:max-content;padding:5px 10px;background:#f3ece0;color:#171817;border:2px solid #171817;box-shadow:3px 3px 0 var(--hot);font:700 10px var(--font-hand);font-style:normal}.film-strip i:nth-child(2){transform:translateX(18px)}.film-strip i:nth-child(3){transform:translateX(6px)}.intro-bridge{padding:53px 0 18px;text-align:center}.intro-bridge .eyebrow{color:var(--hot)}.intro-bridge h2{margin:12px 0 13px;color:var(--text);font:900 clamp(25px,3vw,42px)/1.02 var(--font-display);letter-spacing:-1.3px;text-transform:uppercase}.intro-bridge p{margin:0;color:#4b5049;font:12px/1.8 var(--font-mono)}
@media(max-width:700px){body:before{display:none}.intro{padding-top:35px}.hero-callout{grid-template-columns:1fr;gap:22px;padding:32px 25px 28px;min-height:0}.hero-callout:after{right:16px;top:13px;font-size:7px}.hero-copy h1{font-size:clamp(42px,12vw,63px);margin-top:20px}.hero-copy p{font-size:11px;line-height:1.6}.callout-stamp{font-size:15px;margin-top:18px}.hero-character{min-height:270px}.portrait-stage{width:205px;margin-right:17%;}.portrait-stage img{height:210px}.film-strip{left:5px;bottom:10px}.intro-bridge{padding:37px 5px 12px}.intro-bridge h2{font-size:25px}}
.portrait-stage img{height:auto;aspect-ratio:394/534;object-fit:contain}.portrait-stage{overflow:visible}@media(max-width:700px){.portrait-stage img{height:auto}}
#viewport .node{cursor:grab}#viewport .node:active{cursor:grabbing}.edge{stroke-linecap:round;filter:drop-shadow(0 0 1px #f52f7255)}
.portrait-stage img{display:none}.portrait-stage:before{content:'';display:block;width:100%;aspect-ratio:1374/1145;background:url('assets/kb-jeep.png') center/contain no-repeat}
.nav,.about-btn{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:-.15px}.hero-copy p{font-size:14px;font-weight:600;line-height:1.7}.intro-bridge p{font-size:14px;font-weight:600}.result-heading p{font-size:11px;font-weight:600}.story-bar p{font-size:12px;font-weight:600}
@media(max-width:900px){.nav,.about-btn{font-size:12px}}@media(max-width:600px){.nav,.about-btn{font-size:10px}.hero-copy p{font-size:12px}.intro-bridge p{font-size:12px}}
#viewport .portrait{box-sizing:border-box;border:2px solid var(--text);border-radius:50%;overflow:hidden;isolation:isolate}#viewport .portrait img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}#viewport .node.endpoint .portrait{border-color:var(--accent)}#viewport .node.bacon .portrait{border:3px solid var(--accent);border-radius:50%;overflow:hidden}
.portrait-stage{width:min(345px,100%)}.hero-character{min-height:350px}@media(max-width:700px){.portrait-stage{width:267px}.hero-character{min-height:350px}}
body{background-color:#111;background-image:url('assets/connection-pattern.png');background-size:768px 512px;background-attachment:fixed}header{border-bottom-color:#fffdf855}.nav,.about-btn{color:#fffdf8cc}.nav.active{color:#fffdf8}.brand:before{border-color:#fffdf8}.brand:after{border-color:#fffdf8}body:before{border-color:#fffdf8}.hero-callout{border-color:#fffdf8}.intro-bridge h2{color:#fffdf8}.intro-bridge p{color:#fffdf8b8}.search-below{color:#fffdf8}.try{color:#fffdf899}.try button,.text-btn{color:#fffdf8}.section-title h2,.discovery h2{color:#fffdf8}.section-title p,.discovery .eyebrow{color:#fffdf8b8}.discovery .text-btn{color:#fffdf8}footer{border-top-color:#fffdf855;color:#fffdf8b8}.footer-brand{color:#fffdf8}.footer-brand span{color:var(--accent)}
#graph .path-film{z-index:1}#graph .path-actor{z-index:3}#graph .path-film .name,#graph .path-film .sub{display:none}#graph .path-film .poster{transform:rotate(-4deg);box-shadow:6px 6px 0 var(--hot),-5px -5px 0 var(--cyan)}#graph .path-actor .portrait{box-shadow:5px 5px 0 #15161533}.story-bar{border:2px solid var(--text);box-shadow:8px 8px 0 var(--hot);padding:27px 30px}.story-bar .eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--accent)}.story-bar p{max-width:1050px;margin:10px 42px 0 0;font-family:var(--font-body);font-size:15px;line-height:1.65;color:#fffdf8}.thread-step strong{color:var(--accent);font-weight:800}.thread-word{color:#fffdf8b8}.thread-step em{color:#fffdf8;font-style:normal;font-family:var(--font-hand);font-size:1.08em}.thread-step small{color:var(--hot);font:700 .72em var(--font-mono)}.thread-arrow{display:inline-block;color:var(--hot);font-weight:900;padding:0 9px}.story-icon{color:var(--hot);font-size:30px}@media(max-width:600px){.story-bar{padding:22px 17px;box-shadow:5px 5px 0 var(--hot)}.story-bar p{font-size:12px;line-height:1.6;margin-right:0}.story-bar .eyebrow{font-size:8px}.thread-arrow{padding:0 4px}}

/* Videocassette packaging: cream stock, precise type, printed color bands. */
:root{--accent:#efb331;--hot:#cf5344;--cyan:#80b5b0;--panel:#f6efdf;--text:#202321;--bg:#e8dfce}
body{background:#e8dfce;color:#202321;background-image:none;font-family:var(--font-body)}body:before{display:none}header{border-bottom:3px solid #202321;height:100px}.about-btn{color:#202321}.brand:before{animation:none;box-shadow:none;border:1px solid #202321;transform:none}.brand:after{border:1px solid #202321;background:#efb331;box-shadow:none}main{max-width:1400px}.intro{padding-top:32px;padding-bottom:0}.hero-callout{background:#202321;border:0;box-shadow:none;min-height:0;padding:38px 44px;gap:32px}.hero-callout:before{background:linear-gradient(135deg,transparent 55%,#cf5344 55% 62%,#efb331 62% 69%,#80b5b0 69% 76%,transparent 76%);inset:0;transform:none;opacity:.35}.hero-callout:after{display:none}.hero-copy h1{font-family:var(--font-body);font-weight:900;font-size:clamp(34px,4.5vw,62px);letter-spacing:-2px;line-height:1}.hero-copy h1 span{color:#efb331;transform:none}.hero-copy h1 em{text-decoration:none;font-size:.72em}.intro .eyebrow{background:transparent;color:#80b5b0;border:0;border-bottom:1px solid #80b5b0;box-shadow:none;transform:none;padding:0 0 8px;font:700 10px var(--font-body)}.hero-copy p{font:400 15px/1.65 var(--font-body);color:#f6efdf}.callout-stamp{border:0;box-shadow:none;transform:none;padding:0;font:800 17px var(--font-body)}.hero-character{min-height:260px}.hero-character:before{display:none}.portrait-stage{width:min(300px,100%);transform:none;box-shadow:none;border:0}.film-strip{display:none}.intro-bridge{display:none}
.search-section{position:relative;max-width:none;margin:32px auto 42px;background:#f6efdf;border:2px solid #202321;padding:30px 32px 26px;box-shadow:0 7px 0 #202321}.search-section:before{content:'';position:absolute;top:0;left:0;right:0;height:9px;background:linear-gradient(90deg,#80b5b0 0 34%,#efb331 34% 67%,#cf5344 67%)}.tape-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px}.tape-series{font:700 10px/1.3 var(--font-body);letter-spacing:2px}.tape-heading h2{font:800 clamp(26px,3.2vw,42px)/1.05 var(--font-body);letter-spacing:-1.5px;margin:12px 0}.tape-heading p{font:14px/1.6 var(--font-body);margin:0;max-width:520px;color:#55594f}.tape-format{align-self:flex-start;border:3px solid #202321;padding:8px 12px;font:900 34px/1 var(--font-body);letter-spacing:-2px}.tape-format span{display:block;font:700 8px/1.5 var(--font-body);letter-spacing:1px;margin-top:5px}
#search{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:16px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}.field{padding:18px;background:#fffdf6;border:1px solid #777b70;border-top:5px solid #80b5b0;min-width:0}.field:focus-within{outline:2px solid #202321;outline-offset:2px}.field:nth-of-type(2){border-top-color:#cf5344}.field label{font:800 11px var(--font-body);letter-spacing:1.4px;color:#202321;margin-bottom:15px}.field input{font:500 19px/1.4 var(--font-body);color:#202321}.field input::placeholder{color:#707469;opacity:1}.tiny-dot,.search-icon{display:none}.clear{color:#50564d}#swap{width:36px;height:36px;background:transparent;border:1px solid #202321;color:#202321}.primary{grid-column:1/-1;justify-self:stretch;border-radius:0;box-shadow:none;background:#202321;color:#f6efdf;border:2px solid #202321;padding:17px;font:800 14px var(--font-body);letter-spacing:1px}.primary:hover{background:#cf5344;color:#fff;border-color:#cf5344}.primary span{font-size:19px}.search-below{color:#202321;gap:12px}.try{color:#55594f;font:700 10px var(--font-body);flex-wrap:wrap}.try button{color:#202321;font:12px var(--font-body);border-color:#9a9b8d}.search-below .text-btn{color:#202321;font:700 12px var(--font-body)}#error{color:#a03227;font:14px/1.5 var(--font-body)}
.suggestions{top:100%;left:-1px;right:-1px;margin-top:5px;background:#fffdf6;color:#202321;border:2px solid #202321;border-radius:0;box-shadow:0 8px 18px #20232122;z-index:20}.suggestions button{background:#fffdf6;color:#202321;font:14px var(--font-body);padding:12px;text-align:left}.suggestions button:hover,.suggestions button:focus{background:#202321;color:#fffdf6;outline:0}.suggestions .initials{font:700 15px var(--font-body);color:inherit}.suggestions .live-tag{color:inherit}.suggestions small{color:#50564d}.suggestions button:focus small,.suggestions button:hover small{color:#fffdf6}
.connection{box-shadow:none;border:2px solid #202321}.degree{text-shadow:none;color:#cf5344}.graph-wrap{background:#eee6d5;background-image:radial-gradient(#20232120 .8px,transparent .8px);background-size:20px 20px}.story-bar{box-shadow:none}.discovery h2,.section-title h2,.footer-brand,footer button{color:#202321}.discovery .eyebrow,.section-title p,footer{color:#55594f}.discovery .text-btn{color:#202321}.discovery:after{display:none}footer{border-top:3px solid #202321}.story-bar .thread-step strong{color:#efb331}#playground{display:none!important}
@media(max-width:700px){.hero-callout{padding:28px;grid-template-columns:1fr}.hero-character{display:none}.search-section{padding:26px 18px 22px}.tape-format{font-size:24px;padding:7px}.tape-format span{font-size:6px}.tape-heading h2{font-size:29px}.tape-heading p{font-size:13px}#search{grid-template-columns:1fr;gap:12px}#swap{justify-self:center;transform:rotate(90deg)}.field{padding:16px}.field input{font-size:17px}.primary{margin:0}.search-below{align-items:flex-start;flex-direction:column}.try{max-width:none;gap:8px}.hero-copy h1{font-size:40px}.hero-copy p{font-size:14px}}
/* A staged reveal of verified credits. */
.connection{scroll-margin-top:20px}.graph-wrap{background-color:#eee6d5;background-image:radial-gradient(ellipse at center,#fffdf5 0%,transparent 70%),radial-gradient(#20232120 .8px,transparent .8px);background-size:auto,20px 20px}#graph{transition:transform .7s cubic-bezier(.22,1,.36,1)}#graph .waiting,#story .waiting{opacity:0;pointer-events:none}#graph .arriving{animation:credit-arrive .7s cubic-bezier(.16,1,.3,1) both}#graph .drawing{animation:credit-line .65s ease-out both;stroke-dasharray:300;stroke-dashoffset:0}.degree{transition:opacity .6s}.searching #viewport:after{content:'READING THE CREDITS';position:absolute;inset:0;display:grid;place-items:center;font:700 11px var(--font-body);letter-spacing:4px;color:#656b60;animation:credit-pulse 1.6s ease-in-out infinite}.story-bar>div{flex:1}.story-bar #story{display:grid;gap:15px;margin-right:0}.thread-step{display:block;position:relative;padding-left:34px;transition:opacity .6s ease}.step-number{position:absolute;left:0;top:1px;width:23px;height:23px;display:grid;place-items:center;border:1px solid #80b5b0;color:#80b5b0;font:700 11px var(--font-body)}.story-bar .thread-step em{font-family:var(--font-body);font-style:italic}.story-bar{padding:30px}.story-bar .eyebrow{font:800 12px var(--font-body);letter-spacing:2px}.searching .view-tabs{visibility:hidden}@keyframes credit-arrive{from{opacity:0;filter:blur(7px);translate:0 16px;scale:.9}to{opacity:1;filter:blur(0);translate:0 0;scale:1}}@keyframes credit-line{from{stroke-dashoffset:300;opacity:0}to{stroke-dashoffset:0;opacity:.85}}@keyframes credit-pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){#graph{transition:none}#graph .arriving,#graph .drawing,.searching #viewport:after{animation:none}}
/* Compact typographic home mark. */
header .brand{display:flex;align-items:center;width:264px;height:auto;flex-shrink:0;perspective:none}header .brand:before,header .brand:after{content:none;display:none;animation:none}header .brand img{display:block;width:100%;height:auto}header .brand:focus-visible{outline:2px solid #cf5344;outline-offset:6px}@media(max-width:600px){header .brand{width:205px}}
/* Soft, handled-paper surfaces and a restrained analog display accent. */
body,button,input,h1,h2,h3,p,label,small,strong,em,.eyebrow,.nav,.about-btn,.primary,.text-btn,.clear,.tape-series,.tape-heading h2,.tape-heading p,.field label,.field input,.try,.try button,.search-below .text-btn,.suggestions button,.suggestions .initials,.hero-copy h1,.hero-copy p,.callout-stamp,.callout-stamp small,.intro .eyebrow,.intro-bridge h2,.intro-bridge p,.result-heading h2,.result-heading p,.node .name,.node .sub,.film-node .name,.poster-label,.graph-caption,.legend,.story-bar p,.story-bar .eyebrow,.story-bar .thread-step em,.thread-step small,.step-number,.discovery h2,.section-title h2,.footer-brand,footer,#panel h2,#panel p,.stats strong,dialog h2,dialog p,dialog li{font-family:var(--font-body)}
body{font-weight:400}.hero-copy h1,.tape-heading h2{font-weight:800}.hero-copy p,.tape-heading p,.intro-bridge p{font-weight:400}.field label,.tape-series,.eyebrow{font-weight:600}.field input{font-weight:500}.primary,.result-heading h2,.node .name{font-weight:700}.result-heading p,.node .sub,.graph-caption{font-weight:500}.story-bar p{font-weight:400}.thread-step strong{font-weight:700}.hero-copy h1{letter-spacing:-2px}.node .name{letter-spacing:-.2px}.result-heading h2{letter-spacing:-.4px}.result-heading p{line-height:1.6}.poster-label{font-weight:800;font-size:11px;letter-spacing:-.4px}.story-bar .thread-step em{font-weight:600}
.search-section,.connection{position:relative;border-radius:24px;border:1px solid #34382fe0;box-shadow:0 4px 0 #383b32,0 12px 30px #3c302313,inset 0 0 0 3px #fff9e54d}.connection{overflow:hidden}.search-section:before{top:1px;left:1px;right:1px;height:10px;border-radius:23px 23px 0 0;opacity:.82}.search-section:after,.connection:after{content:'';position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;background-image:url('assets/paper-wear.svg');background-size:480px 340px;opacity:.22;box-shadow:inset 0 0 18px #765a2722,inset 2px 2px 1px #fff8e788,inset -2px -2px 1px #72582b22}.search-section{background-color:#f3ebd9}.connection-top{background:#f1e9d7;border-bottom:1px solid #625c4d55;padding-top:26px;padding-bottom:26px}.hero-callout{border-radius:20px}.portrait-stage{border-radius:12px}.field{border-radius:10px;background:#faf5e9}.primary{border-radius:10px}.suggestions{border-radius:12px;overflow:hidden}.view-tabs{border-radius:12px;padding:5px}.view-tabs button{border-radius:8px}.zoom{border-radius:9px}.story-bar{border:0;border-top:1px solid #fff5da24;background:#252c29}.graph-wrap{background-color:#eee6d5}.connection-top .degree{font-family:var(--font-display);font-size:clamp(54px,6vw,82px);font-weight:400;line-height:1.1;letter-spacing:-5px;flex-shrink:0;padding:4px 6px 5px 0;color:#bd4b3a;background:linear-gradient(to bottom,#b59658 0 34%,#d4a128 34% 49%,#c86b35 49% 64%,#b94d49 64% 79%,#aa777e 79%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(1px 2px 0 #fff8e5);text-shadow:none}.search-section .suggestions{z-index:20}.hero-callout:before{opacity:.27}.graph-caption{letter-spacing:1.6px}.thread-step small{font-weight:600}.story-bar .eyebrow{color:#e3b65b}@media(max-width:600px){.search-section,.connection{border-radius:18px}.search-section:before{border-radius:17px 17px 0 0}.connection-top .degree{font-size:57px;letter-spacing:-4px}.hero-callout{border-radius:16px}.connection-top{padding:20px 16px}}
header{height:132px}header .brand{width:322px;max-width:75%;height:auto}header .brand img{width:100%;height:auto}@media(max-width:600px){header{height:110px}header .brand{width:275px}}
header{height:106px}header .brand{width:225px}@media(max-width:600px){header{height:90px}header .brand{width:193px}}#graph.force-path .node{transition:opacity .45s;animation:none}#graph.force-path .edge{stroke-dasharray:none;stroke-width:2;stroke:#9d7951;opacity:.65}#graph.force-path .path-film{z-index:1}#graph.force-path .node .name{max-width:130px;white-space:normal;font-size:10px;line-height:1.2}#graph.force-path .node .sub{display:none}#graph.force-path .path-film .name{display:block;font-size:9px}#graph.force-path .path-film .poster{transform:rotate(-3deg)}
/* Black backdrop, white paper, supplied title artwork. */
:root{--bg:#000;--panel:#fff;--text:#202321}body{background:#000;color:#fff}header{height:auto;min-height:180px;border-bottom-color:#ffffff45;padding:12px 0}header .brand{width:200px;max-width:60%}header .brand img{width:100%;height:auto;mix-blend-mode:screen}.about-btn{color:#fff}.search-section,.connection,.connection-top,.field,.suggestions,.suggestions button,.portrait-stage,.portrait,.zoom,.preset,#panel,dialog{background-color:#fff;color:#202321}.search-section{box-shadow:0 4px 0 #6c706b,0 12px 30px #0003,inset 0 0 0 3px #ffffff4d}.search-section:after,.connection:after{box-shadow:inset 0 0 18px #0000000d,inset 2px 2px 1px #ffffff88,inset -2px -2px 1px #00000018;opacity:.13}.graph-wrap{background-color:#fff;background-image:radial-gradient(#20232120 .8px,transparent .8px);background-size:20px 20px}.hero-copy p,.hero-copy h1,.hero-copy h1 em,.story-bar p{color:#fff}.suggestions button:hover,.suggestions button:focus{background:#202321;color:#fff}.primary{color:#fff}.discovery h2,.discovery .text-btn,.footer-brand,footer button,.section-title h2{color:#fff}.discovery .eyebrow,.section-title p,footer{color:#c4c7c5}footer{border-top-color:#ffffff45}.hero-callout{background-color:#161b19}.connection-top .degree{filter:drop-shadow(1px 2px 0 #fff)}@media(max-width:600px){header{min-height:150px;padding:8px 0}header .brand{width:165px}}
/* One fixed crop, independent of each source photograph's proportions. */
#viewport .node .portrait{display:block;padding:0;flex:none;position:relative;overflow:hidden;border-radius:50%;width:88px;height:88px;isolation:isolate;background:#fff}#viewport .node.small .portrait{width:57px;height:57px}#viewport .node .portrait img{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;object-fit:cover;object-position:50% 35%;border-radius:0;display:block}#viewport .portrait .initials{position:absolute;inset:0;display:grid;place-items:center;color:#345953;font-size:25px}.revealing .graph-wrap{background-color:#101817;background-image:radial-gradient(ellipse at center,#33423a,transparent 72%);transition:background-color 1s}.revealing #graph .node .name,.revealing .graph-caption,.revealing .legend{color:#fff}.revealing #graph.force-path .edge{stroke:#e4b65b;filter:drop-shadow(0 0 5px #e4b65b66)}#graph .spotlight .portrait{box-shadow:0 0 0 5px #80b5b044,0 0 35px #efb33155}.revealing .graph-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 22px 0 #0008,inset 0 -22px 0 #0008,inset 0 0 90px #0005}.revealing .graph-bottom{position:relative;z-index:5}@media(prefers-reduced-motion:reduce){.revealing .graph-wrap{transition:none}}
/* Theatrical credit-search interstitial; no fabricated progress counts. */
.searching #viewport{min-height:420px;background:#080d0d}.searching #viewport:after{display:none}.credit-interstitial{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#24534b66,transparent 60%),#080d0d;color:#fff;text-align:center;padding:24px}.credit-interstitial:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px);box-shadow:inset 0 0 90px #000}.credit-interstitial h3{font:700 clamp(25px,4vw,38px)/1.1 var(--font-body);letter-spacing:-1px;margin:14px 0 20px;color:#fff}.scan-kicker{font-size:9px;font-weight:600;letter-spacing:3px;color:#80b5b0}.scan-orbit{position:relative;width:94px;height:76px;margin-bottom:15px}.scan-orbit i{position:absolute;inset:5px;border:1px solid #80b5b080;border-radius:50%;animation:scan-spin 3s linear infinite}.scan-orbit i:nth-child(2){inset:13px -6px;transform:rotate(60deg);border-color:#efb33188;animation-direction:reverse}.scan-orbit i:nth-child(3){inset:0 20px;border-color:#cf5344aa;animation-duration:2s}.scan-orbit i:after{content:'';position:absolute;top:5px;left:8px;width:6px;height:6px;background:#efb331;border-radius:50%;box-shadow:0 0 12px #efb331}.scan-orbit span{position:absolute;inset:0;display:grid;place-items:center;color:#efb331;font-size:36px}.credit-reel{width:min(430px,90%);overflow:hidden;border-block:1px solid #80b5b044;padding:9px 0;mask-image:linear-gradient(90deg,transparent,#000 15% 85%,transparent)}.credit-reel>div{width:max-content;animation:credit-scroll 8s linear infinite;font-size:10px;font-weight:600;letter-spacing:3px;color:#cbd8d1}.scan-pair{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:23px;font-size:13px;font-weight:600}.scan-pair b{color:#efb331}.credit-interstitial p{font-size:11px;color:#a3b6af;margin:12px 0}.scan-dots{animation:credit-pulse 1.2s ease-in-out infinite}@keyframes scan-spin{to{rotate:360deg}}@keyframes credit-scroll{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.scan-orbit i,.credit-reel>div,.scan-dots{animation:none}}
.share-connection{border:1px solid #202321;border-radius:8px;padding:12px 16px;font:600 12px var(--font-body);color:#202321;background:#fff;white-space:nowrap}.share-connection:hover{background:#202321;color:#fff}.connection-top{flex-wrap:wrap}.searching .share-connection{display:none}.share-dialog{width:min(600px,92vw);border-radius:20px;background:#fff;color:#202321;max-height:90vh}.share-close{position:absolute;right:15px;top:10px;font-size:28px}.share-preview{display:block;width:100%;max-height:360px;object-fit:contain;margin:18px auto;background:#0c1312;border-radius:10px}.share-dialog label{display:block;font-size:12px;font-weight:600;margin:15px 0 8px}.share-dialog textarea{width:100%;box-sizing:border-box;background:#f5f6f5;color:#202321;border:1px solid #aab4ae;border-radius:8px;padding:12px;font:14px/1.5 var(--font-body)}.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.share-actions button{padding:12px 16px;border-radius:8px;background:#202321;color:white;font-size:13px}.share-actions button:hover{background:#347d79}.share-dialog .share-status{font-size:12px;color:#4a5d52}
/* Navy / vermilion / orange / gold / warm beige palette. */
:root{--bg:#052f43;--panel:#e5e0b5;--text:#052f43;--muted:#52605b;--line:#052f43;--accent:#ffbf43;--hot:#d92327;--cyan:#fb8500}body{background:#052f43;color:#e5e0b5}header,footer{border-color:#e5e0b560}.about-btn,.discovery h2,.discovery .text-btn,.footer-brand,footer button,.section-title h2{color:#e5e0b5}footer,.discovery .eyebrow,.section-title p{color:#cccba9}.search-section,.connection,.connection-top,.field,.suggestions,.suggestions button,.portrait-stage,.portrait,.zoom,.preset,#panel,dialog,.share-dialog{background-color:#e5e0b5;color:#052f43}.search-section,.connection{border-color:#032535;box-shadow:0 4px 0 #032535,0 12px 30px #00172533}.search-section:before{background:linear-gradient(90deg,#d92327 0 34%,#fb8500 34% 67%,#ffbf43 67%)}.field{border-color:#7c8977;border-top-color:#fb8500}.field:nth-of-type(2){border-top-color:#d92327}.field input,.field label,.tape-heading h2,.tape-series,.result-heading h2,.node .name,.film-node .name,.search-below .text-btn,.try button{color:#052f43}.field input::placeholder,.tape-heading p,.try,.result-heading p,.legend,.graph-caption,.node .sub{color:#52605b}.primary,.view-tabs,.story-bar,.hero-callout{background-color:#032535;color:#e5e0b5}.primary{border-color:#032535}.primary:hover{background:#d92327;border-color:#d92327;color:#e5e0b5}.suggestions button:hover,.suggestions button:focus{background:#052f43;color:#e5e0b5}.suggestions small,.share-dialog .share-status{color:#52605b}.hero-copy p,.hero-copy h1,.hero-copy h1 em,.story-bar p,.view-tabs button{color:#e5e0b5}.hero-copy h1 span,.story-bar .eyebrow{color:#ffbf43}.intro .eyebrow{color:#ffbf43;border-color:#ffbf43}.hero-callout:before{background:linear-gradient(135deg,transparent 55%,#d92327 55% 62%,#fb8500 62% 69%,#ffbf43 69% 76%,transparent 76%);opacity:.32}.graph-wrap{background-color:#e5e0b5;background-image:radial-gradient(#052f4320 .8px,transparent .8px)}.connection-top .degree{background-image:linear-gradient(to bottom,#052f43 0 34%,#d92327 34% 49%,#fb8500 49% 64%,#ffbf43 64% 82%,#b78027 82%);filter:none}.thread-step strong,.story-bar .thread-step strong{color:#ffbf43}.thread-step small{color:#fb8500}.step-number{border-color:#fb8500;color:#ffbf43}#viewport .node .portrait{background:#e5e0b5}#viewport .portrait .initials{color:#052f43}.zoom button{color:#052f43}.share-connection{background:#e5e0b5;color:#052f43;border-color:#052f43}.share-connection:hover,.share-actions button{background:#052f43;color:#e5e0b5}.share-actions button:hover{background:#b83b22}.share-dialog textarea{background:#eee9cb;color:#052f43;border-color:#869184}.share-preview{background:#052f43}.credit-interstitial,.searching #viewport{background:radial-gradient(ellipse at 50% 35%,#17607866,transparent 60%),#032535}.credit-interstitial h3,.scan-pair,.revealing #graph .node .name,.revealing .legend{color:#e5e0b5}.scan-kicker,.scan-orbit span{color:#ffbf43}.credit-reel>div,.credit-interstitial p{color:#e5e0b5}.credit-reel{border-color:#e5e0b550}.scan-orbit i{border-color:#fb850088}.scan-orbit i:nth-child(2){border-color:#ffbf4388}.scan-orbit i:nth-child(3){border-color:#d92327aa}.revealing .graph-wrap{background-color:#032535;background-image:radial-gradient(ellipse at center,#17607877,transparent 72%)}.revealing .graph-caption{color:#e5e0b5}
.intro .hero-artwork{display:block;width:100%;height:auto;border-radius:20px;object-fit:contain}.intro:after{display:none}@media(max-width:600px){.intro .hero-artwork{border-radius:14px}}
/* Black and white base, curved seventies bands inside the finder. */
:root{--bg:#000;--panel:#fff;--text:#202321;--muted:#52605b;--line:#202321}body{background:#000;color:#fff}header,footer{border-color:#ffffff45}.about-btn,.discovery h2,.discovery .text-btn,.footer-brand,footer button,.section-title h2{color:#fff}footer,.discovery .eyebrow,.section-title p{color:#c4c7c5}.search-section,.connection,.connection-top,.field,.suggestions,.suggestions button,.portrait-stage,.portrait,.zoom,.preset,#panel,dialog,.share-dialog{background-color:#fff;color:#202321}.search-section{background-image:linear-gradient(#ffffffdf,#ffffffdf),url('assets/retro-form-bands.svg');background-size:cover;background-position:center;box-shadow:0 4px 0 #555,0 12px 30px #0003;border-color:#444}.search-section:before{display:none}.search-section:after,.connection:after{box-shadow:inset 0 0 18px #0000000a,inset 2px 2px 1px #ffffff88,inset -2px -2px 1px #00000018}.field{background:#fff;border-color:#aaa;border-top-width:1px;border-top-color:#aaa}.field:nth-of-type(2){border-top-color:#aaa}.field input,.field label,.tape-heading h2,.tape-series,.result-heading h2,.node .name,.film-node .name,.search-below .text-btn,.try button,.zoom button{color:#202321}.primary,.view-tabs,.story-bar{background-color:#202321;color:#fff}.primary{border-color:#202321}.suggestions button:hover,.suggestions button:focus{background:#202321;color:#fff}.graph-wrap{background-color:#fff;background-image:radial-gradient(#20232120 .8px,transparent .8px)}.story-bar p,.view-tabs button{color:#fff}#viewport .node .portrait{background:#fff}#viewport .portrait .initials{color:#345953}.share-connection{background:#fff;color:#202321;border-color:#202321}.share-connection:hover,.share-actions button{background:#202321;color:#fff}.share-dialog textarea{background:#f5f6f5;color:#202321;border-color:#aab4ae}.credit-interstitial,.searching #viewport{background:radial-gradient(ellipse at 50% 35%,#24534b66,transparent 60%),#080d0d}.credit-interstitial h3,.scan-pair,.credit-reel>div,.credit-interstitial p,.revealing #graph .node .name,.revealing .legend,.revealing .graph-caption{color:#fff}.revealing .graph-wrap{background-color:#101817;background-image:radial-gradient(ellipse at center,#33423a,transparent 72%)}
header{min-height:0;padding:12px 0}header .brand{width:100px}@media(max-width:600px){header{min-height:0;padding:8px 0}header .brand{width:82.5px}}
.search-section{background-image:linear-gradient(#ffffff55,#ffffff55),url('assets/retro-form-bands.svg')}.hero-callout{background-color:#161b19;color:#fff}.hero-copy h1,.hero-copy h1 em,.hero-copy p{color:#fff}.hero-copy h1 span{color:#ffbf43}.portrait-stage{background:#fff}.hero-character .portrait-stage img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}.hero-character .portrait-stage:before{display:none}@media(max-width:700px){.hero-character{display:block;min-height:0}.portrait-stage{width:min(300px,90%);margin:0 auto}}
/* Readable credits, with room between the film and actor. */
#graph .film-node{width:108px}#graph .film-node .poster{width:92px;height:110px}#graph .film-node.small .poster{width:72px;height:90px}#graph .poster-label{inset:8px 5px;font-size:11px;line-height:1.15;overflow-wrap:anywhere;transform:none;display:flex;align-items:center;justify-content:center}#graph .film-node .name,#graph .path-film .name,#graph.force-path .path-film .name{display:block;width:120px;max-width:120px;white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:1.3;margin-top:12px;transform:none;background:#ffffffeb;padding:3px;border-radius:3px;color:#202321}#graph .film-node .sub{display:none}
.vcr-interstitial{background:#101415!important;isolation:isolate;gap:20px}.tracking-snow{position:absolute;inset:-30%;z-index:-2;opacity:.55;background-image:url('assets/paper-wear.svg'),repeating-linear-gradient(0deg,#b4bfc429 0 1px,#080b0e 1px 3px);background-size:170px 130px,100% 4px;animation:vcr-noise .16s steps(3) infinite}.tracking-roll{position:absolute;inset:-60% 0 auto;height:35%;z-index:-1;background:linear-gradient(transparent,#d6e9e366 35%,#090b0cdd 42%,#ffffff44 45%,transparent);animation:vcr-roll 2.7s linear infinite}.vcr-osd{position:absolute;left:25px;right:25px;top:28px;display:flex;justify-content:space-between;font:700 13px var(--font-mono);color:#d8e5df;text-shadow:2px 0 #498e80,-1px 0 #ab4567;letter-spacing:2px}.vcr-display{padding:25px 30px;background:#07110eee;border:1px solid #485b50;border-radius:8px;box-shadow:inset 0 0 25px #000,0 4px 20px #0008;color:#9bf1bb}.vcr-label,.vcr-caption{display:block;font:11px var(--font-mono);letter-spacing:2px;color:#8ab59b}.vcr-time{font:400 clamp(37px,7vw,66px)/1.4 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:5px;text-shadow:0 0 8px #7fffaa88}.vcr-caption{font-size:9px;color:#719780}.vcr-interstitial .scan-pair{margin-top:0;z-index:2;color:#fff;background:#101415bb;padding:8px 14px;border-radius:5px}.vcr-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes vcr-noise{0%{transform:translate(0,0)}33%{transform:translate(7px,-11px)}66%{transform:translate(-9px,4px)}}@keyframes vcr-roll{to{transform:translateY(700%)}}@media(prefers-reduced-motion:reduce){.tracking-snow,.tracking-roll{animation:none}.tracking-roll{display:none}}
.connection .connection-top{background:#052f43;color:#fff;border-bottom:1px solid #ffffff30;gap:18px}.connection-top .result-heading h2{color:#fff}.connection-top .result-heading p{color:#cbd6da}.connection-top .degree{background-image:linear-gradient(to bottom,#e5e0b5 0 34%,#d92327 34% 49%,#fb8500 49% 64%,#ffbf43 64%);filter:none}.connection-top .view-tabs{background:#021d2a;border:1px solid #6c858b;border-radius:7px;padding:6px;box-shadow:inset 0 2px 5px #0009}.view-tabs button{font-family:var(--font-body);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;border:1px solid #50656a;border-bottom:4px solid #0009;background:linear-gradient(#3c4b4d,#263438);color:#e5e0b5;border-radius:4px;min-width:94px;padding:12px}.view-tabs button+button{margin-left:6px}.view-tabs button.selected{background:linear-gradient(#ffcd68,#efaa32);border-color:#f6c466;border-bottom-color:#a66b1c;color:#052f43}.view-help{flex-basis:100%;margin:0;font:300 16px/1.6 var(--font-body);color:#cad5d9;max-width:660px}.connection-top .share-connection{background:transparent;color:#fff;border-color:#879ca5}.connection-top .share-connection:hover{background:#ffffff18}.movie-imdb{color:#fff;text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:4px}.movie-imdb:hover{color:#ffbf43;text-decoration-color:currentColor}.movie-imdb:focus-visible{outline:2px solid #ffbf43;outline-offset:4px}
/* Kinetic numbers give way to a persistent CRT stage. */
.number-interstitial{background:#000!important;gap:30px}.number-interstitial:after{box-shadow:none;background:none}.number-machine{display:flex;gap:clamp(6px,2vw,20px);color:#e9e9df;font-family:var(--font-body);font-weight:500;letter-spacing:-3px}.number-window{height:1em;line-height:1em;font-size:clamp(42px,9vw,85px);overflow:hidden;display:block;width:.7em;mask-image:linear-gradient(transparent,#000 20% 80%,transparent)}.number-reel{display:block;line-height:1em;animation:number-roll var(--reel-speed) linear infinite;animation-delay:var(--reel-delay)}.number-interstitial .number-caption{color:#efeee8;font:500 15px var(--font-body);letter-spacing:.5px;margin:0}.number-caption span{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#797f7b;margin-top:12px}.number-interstitial.tv-switch-on .number-machine,.number-interstitial.tv-switch-on .number-caption{opacity:0;transition:opacity .18s}.number-interstitial.tv-switch-on:before{content:'';position:absolute;inset:8% 4%;border-radius:50% / 8%;background:#b2c2b8;box-shadow:0 0 40px #d6f2e099;animation:tv-open 1.1s cubic-bezier(.19,1,.22,1) both}.connection .graph-wrap,.connection.revealing .graph-wrap{background-color:#101916;background-image:radial-gradient(ellipse at center,#35463b 0%,#1c2a23 48%,#080e0c 100%);background-size:100% 100%;color:#e7eae4}.graph-wrap:before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px);box-shadow:inset 0 0 65px #0009}.connection .graph-caption,.connection .legend,.connection .node .name,.connection .node .sub{color:#e7eae4}.connection #graph .film-node .name{background:#101916e8;color:#e7eae4}.connection .legend b{color:#e5b866}.connection #graph .edge{stroke:#c2ba93}.connection .graph-bottom{position:relative;z-index:5}.connection .actor-key{border-color:#e7eae4}.connection .film-key{background:#e7eae4}.connection .graph-wrap:after{box-shadow:none}.connection #graph .node.bacon .name{color:#202321}@keyframes number-roll{to{transform:translateY(-10em)}}@keyframes tv-open{0%{transform:scale(.01,.003);filter:brightness(4);opacity:0}12%{opacity:1;transform:scale(.95,.006);filter:brightness(3)}40%{transform:scale(1,.015);filter:brightness(2)}75%{transform:scale(1,1);filter:brightness(1.1)}100%{transform:scale(1.1,1.3);filter:brightness(.25)}}@media(prefers-reduced-motion:reduce){.number-reel{animation:none}.number-interstitial.tv-switch-on:before{animation:none}}
.hero-character .portrait-stage{background:transparent;border:0;padding:0;border-radius:0;box-shadow:0 12px 28px #0005;transform:rotate(8deg) scale(1.05);width:min(364px,100%);margin:40px auto}.hero-character .portrait-stage img{border-radius:3px;display:block;width:100%;height:auto}.hero-character{min-height:0}.discovery{justify-content:flex-end}@media(max-width:700px){.hero-character .portrait-stage{width:min(364px,97.5%);margin:40px auto}}

/* Simple monochrome graph view switch. */
.connection-top .view-tabs{background:#000;border:1px solid #fff;border-radius:9px;padding:4px;box-shadow:none}
.connection-top .view-tabs button{background:#000;color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:none;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;padding:11px 15px;min-width:94px}
.connection-top .view-tabs button+button{margin-left:4px}
.connection-top .view-tabs button.selected{background:#fff;color:#000;border-color:#fff;box-shadow:none}
.connection-top .view-tabs button:not(.selected):hover{background:#222;border-color:#fff}
.connection-top .view-tabs button:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Warm amber tint for the original textured title artwork. */
header .brand img{filter:grayscale(1) sepia(1) saturate(3.2) hue-rotate(350deg)}
/* Three corner bands, clear of the finder copy and controls. */
.search-section{background-image:none;background-color:#fff}
.search-section:before{content:'';display:block;position:absolute;inset:0 0 auto auto;width:clamp(90px,19%,190px);height:100px;border-top-right-radius:24px;background:linear-gradient(135deg,transparent 0 36%,#a84430 36% 49%,#e68a28 49% 62%,#edb944 62% 75%,transparent 75%);pointer-events:none;z-index:0}
@media(max-width:600px){.search-section:before{width:75px;height:40px}}
/* Mirror the hero photo within its tilted frame. */
.hero-character .portrait-stage img{transform:none}
/* Transparent retro loop lives only beside the heading. */
.search-section{background-image:none}
.search-section:before{display:none}
.search-section .tape-heading{position:relative;padding-right:190px}
.search-section .tape-heading:after{content:'';position:absolute;right:-12px;top:0;width:180px;height:100px;background:url('assets/retro-loop-corner.svg') center/contain no-repeat;pointer-events:none}
@media(max-width:600px){.search-section .tape-heading{padding-right:0;padding-top:70px}.search-section .tape-heading:after{top:-10px;right:-8px;width:140px;height:74px}}
/* A handful of playful, illustrated corner stickers. */
.sticker-host{position:relative}
.retro-sticker{position:absolute;display:block;width:68px;height:68px;z-index:6;filter:drop-shadow(2px 4px 2px #0003);transform:rotate(var(--sticker-angle,-9deg));transform-origin:50% 75%}
.retro-sticker img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.retro-sticker:hover{animation:sticker-wiggle .65s ease-in-out}
.sticker-tv{bottom:9px;right:12px;--sticker-angle:8deg}
.search-section.sticker-host{padding-bottom:70px}
.sticker-soda{bottom:4px;right:18px;--sticker-angle:14deg}
.story-bar.sticker-host{padding-bottom:72px}
.sticker-lollipop{bottom:4px;right:16px;--sticker-angle:-22deg}
footer.sticker-host{padding-right:90px;min-height:90px}
.sticker-rainbow{right:12px;bottom:8px;--sticker-angle:-8deg}
@keyframes sticker-wiggle{0%,100%{transform:rotate(var(--sticker-angle)) scale(1)}20%{transform:rotate(calc(var(--sticker-angle) - 14deg)) scale(1.09)}40%{transform:rotate(calc(var(--sticker-angle) + 12deg)) scale(1.09)}60%{transform:rotate(calc(var(--sticker-angle) - 8deg)) scale(1.05)}80%{transform:rotate(calc(var(--sticker-angle) + 5deg)) scale(1.02)}}
@media(max-width:600px){.retro-sticker{width:54px;height:54px}.hero-callout.sticker-host{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.retro-sticker:hover{animation:none}}

/* Centered title mark. */
body > header{justify-content:center}header .brand{width:110px;margin-inline:auto}
@media(max-width:600px){header .brand{width:90.75px}}
/* Reposition the TV and soda corner stickers. */
.sticker-tv{left:12px;right:auto;width:85px;height:85px}
.sticker-soda{top:8px;bottom:auto;right:150px;width:85px;height:85px}
.search-section .tape-heading{padding-right:250px}
@media(max-width:600px){
 .sticker-tv,.sticker-soda{width:67.5px;height:67.5px}
 .hero-callout.sticker-host{padding-bottom:85px}
 .sticker-soda{top:8px;right:150px}
 .search-section .tape-heading{padding-right:0;padding-top:85px}
}
/* Fine-tune soda sticker placement. */
.sticker-soda{right:230px;top:-17px}
.sticker-soda{--sticker-angle:-6deg}

/* Sticker and copy refinements. */
.sticker-tv{width:102px;height:102px}
.sticker-tv img{transform:scaleX(-1)}
.search-section .tape-heading{padding-right:190px}
.search-section .tape-heading p{font-size:calc(14px + 2pt)}
@media(max-width:600px){.sticker-tv{width:81px;height:81px}.hero-callout.sticker-host{padding-bottom:100px}.search-section .tape-heading{padding-right:0}.search-section .tape-heading p{font-size:calc(13px + 2pt)}}

/* Finder wordmark and TV positioning. */
.sticker-tv{left:-18px;bottom:-11px;--sticker-angle:-12deg}
.search-section .finder-brand,.search-section .finder-brand span{color:#000}
.search-section .finder-brand{display:inline-block;font-size:15px;letter-spacing:-.6px;text-transform:none}

.dot-machine{width:min(440px,90%);height:230px;overflow:visible}.dot-machine circle{fill:#fff}.number-interstitial .number-caption{font-family:var(--font-body);font-weight:800;font-size:clamp(16px,2vw,22px);text-align:center;padding:0 20px}.tv-switch-on .dot-machine{opacity:0;transition:opacity .18s}

/* Readable footer copy at all screen sizes. */
main > footer{font-size:12px}
/* Scattered icons over black; panel surfaces remain opaque. */
body{background:#000;position:relative;isolation:isolate}
body:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/retro-icon-background.png') repeat;background-size:900px 900px;opacity:.2}
.sticker-tv{display:none!important}
#panel-content .credit-row{font-size:13px}
/* White irregular dots replace the straight page dividers. */
body > header{border-bottom:0;position:relative;padding-bottom:24px}
body > header:after{content:'';position:absolute;bottom:0;left:0;right:0;height:14px;background:url('assets/dotted-divider.svg') repeat-x center}
main > footer{border-top:0;position:relative}
main > footer:before{content:'';position:absolute;top:0;left:0;right:0;height:14px;background:url('assets/dotted-divider.svg') repeat-x center;opacity:.5}

/* Result banner typography and view switch. */
.connection-top #result-title{color:#9EDCF3;font-size:24px;font-weight:600;border-color:#FFFFFF;line-height:1.2}
.connection-top #result-subtitle{font-size:14px;font-weight:300;line-height:1.5}
.connection-top .result-heading{min-width:0}
.connection-top .view-tabs{border:1px solid #FFFFFF;border-radius:8px;padding:4px;justify-content:flex-start;align-items:center;row-gap:0;column-gap:0;max-width:100%}
.connection-top .view-tabs button+button{margin-left:0}

/* Charcoal result banner and simpler view labels. */
.connection .connection-top{background-color:#1C1F20}
.connection-top .view-tabs button{font-weight:500}

/* Larger centered logo and softer header divider. */
header .brand{width:178.2px}
body > header:after{opacity:.5}
@media(max-width:600px){header .brand{width:147.015px}}

/* Fredoka is the headline family; Geist remains the reading face. */
h1,h2,h3,.hero-copy h1,.tape-heading h2,.intro-bridge h2,.result-heading h2,.discovery h2,.section-title h2,.preset h3,#panel h2,dialog h2,.credit-interstitial h3{font-family:var(--font-display)}
.hero-copy h1,.hero-copy h1 b,.tape-heading h2,.intro-bridge h2{font-weight:600}

/* Connection colors: edit these values to try another palette. */
:root{
  --connection-banner-bg:#212321;
  --connection-canvas-bg:#030303;
  --connection-scanline-color:#ffffff18;
  --connection-screen-glow:#ffffff0c;
}
.connection .connection-top{background:var(--connection-banner-bg)}
.connection:after{display:none}
.connection .graph-wrap,.connection.revealing .graph-wrap{
  background-color:var(--connection-canvas-bg);
  background-image:repeating-linear-gradient(to bottom,transparent 0 2px,var(--connection-scanline-color) 2px 3px,transparent 3px 4px),radial-gradient(ellipse at center,var(--connection-screen-glow),transparent 75%);
  background-size:100% 100%;
}
.connection .graph-wrap:before{
  background:radial-gradient(ellipse at center,transparent 30%,#000b 100%);
  box-shadow:none;
  z-index:0;
}
.connection .graph-wrap:after{display:none}

/* Hero headline sizing and neutral black surface. */
.hero-callout{background-color:#000}
.hero-copy h1>span,.hero-copy h1>b{font-size:45px;line-height:1.05}
.hero-copy h1>em{font-weight:400;padding-top:5px}
@media(max-width:380px){.hero-copy h1>span,.hero-copy h1>b{font-size:clamp(34px,10.5vw,45px)}}

/* Consistent, larger swap control in both finder layouts. */
.search-section #swap{width:44px;height:44px;border-width:3px;flex-shrink:0}

/* Fresh striped degree badge with a springy result entrance. */
.connection-top #degree{display:inline-block;color:#f97b67;transform-origin:50% 65%;background-image:linear-gradient(to bottom,#9edcf3 0 34%,#f97b67 34% 49%,#fb8500 49% 64%,#ffbf43 64%)}


/* Graph text increased by two typographic points (2pt). */
#graph .node .name,#graph.force-path .node .name{font-size:calc(10px + 2pt)}
#graph .node.small .name{font-size:calc(9px + 2pt)}
#graph .film-node .name,#graph .path-film .name,#graph.force-path .path-film .name{font-size:calc(10px + 2pt)}
#graph .node.small.film-node .name{font-size:calc(8px + 2pt)}
#graph .node .sub{font-size:calc(8px + 2pt);margin-top:38px}
#graph .poster-label{font-size:calc(11px + 2pt)}
.graph-bottom .legend{font-size:calc(9px + 2pt)}
.graph-bottom .zoom button{font-size:calc(14px + 2pt)}
.graph-bottom .zoom button:nth-child(2){font-size:calc(9px + 2pt)}
@media(max-width:600px){#graph .node .sub{font-size:calc(7px + 2pt)}.graph-bottom .legend{font-size:calc(8px + 2pt)}}

/* Opening credits, gentle drift, and tactile controls. */
.motion-spark{position:fixed;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:1000}
@media(prefers-reduced-motion:no-preference){
 .hero-character .portrait-stage img{animation:polaroid-drift 7s ease-in-out infinite;transform-origin:50% 60%}
 header .brand img{animation:logo-breathe 6s ease-in-out infinite}
 .primary,.share-connection,.view-tabs button,#swap,.try button{transition:background-color .22s,color .22s,box-shadow .22s,translate .22s}
 .primary:hover{translate:0 -3px;box-shadow:0 7px 0 #f97b67,0 12px 28px #0003}
 .primary:active{translate:0 0;box-shadow:none}
 #swap:hover{rotate:180deg;transition:rotate .5s cubic-bezier(.2,.8,.2,1)}
 .share-connection:hover{translate:0 -2px;box-shadow:0 4px 0 #9edcf340}
 .try button:hover{translate:0 -3px}
 .node .portrait{transition:box-shadow .25s}
 .node:hover .portrait{box-shadow:0 0 0 4px #9edcf330,0 0 25px #9edcf325}
 .movie-imdb{transition:color .2s,text-decoration-color .2s}
}
@keyframes polaroid-drift{0%,100%{translate:0 0;rotate:-.5deg}50%{translate:0 -9px;rotate:.5deg}}
@keyframes logo-breathe{0%,100%{opacity:1}50%{opacity:.87}}
@media(prefers-reduced-motion:reduce){.motion-spark{display:none}}

/* Clean finder heading and softer person-picker highlights. */
.search-section .tape-heading{padding-right:0;padding-top:0}
.search-section .tape-heading:after{display:none}
.search-section .suggestions button:hover,.search-section .suggestions button:focus{background:rgba(0,0,0,.2);color:#202321}
.search-section .suggestions button:hover small,.search-section .suggestions button:focus small{color:#202321}
@media(prefers-reduced-motion:no-preference){
 header .brand:hover img,header .brand:focus-visible img{animation:brand-hover-wiggle .7s ease-in-out both}
}
@keyframes brand-hover-wiggle{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.18) rotate(-7deg)}40%{transform:scale(1.18) rotate(6deg)}60%{transform:scale(1.18) rotate(-4deg)}80%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1.15) rotate(0)}}

/* A small source note for the movie-night origin story. */
.hero-copy .origin-link{display:inline-block;color:#9edcf3;font:400 12px/1.5 var(--font-body);text-underline-offset:4px;margin:0 0 12px}
.hero-copy p em{font-style:italic}

/* Decorative finder particles occupy their own corner, never the text. */
.search-section .tape-heading{position:relative}
.finder-particles{position:absolute;right:0;top:0;width:140px;height:90px;pointer-events:none}
.search-section .tape-heading>div{padding-right:145px}
.search-section #random{font-size:14px}
.search-section #swap{display:flex;align-items:center;justify-content:center;font-size:21px}
@media(max-width:700px){.finder-particles{width:100px;height:65px}.search-section .tape-heading>div{padding-right:0}.search-section .finder-brand{margin-right:110px}.search-section .tape-heading h2{padding-top:28px}}
@media(prefers-reduced-motion:no-preference){.particle-drift circle{animation:particle-bob 3s ease-in-out infinite alternate}.particle-drift circle:nth-child(even){animation-delay:-1.5s}}
@keyframes particle-bob{to{translate:0 -5px}}

/* Plain black film sleeves, with only the movie title on their face. */
#discovery-random{font-size:14px}
#graph .film-node .poster{background:#000;background-image:none}
#graph .film-node .poster>img,#graph .film-node .poster>.initials{display:none}

/* Anchor the details action beneath the story, alongside its own content. */
.story-bar{flex-direction:column;align-items:stretch;gap:22px}
.story-bar>div{width:100%;min-width:0}

.share-actions a{display:inline-flex;align-items:center;border:1px solid #202321;border-radius:8px;padding:12px 16px;font:600 12px var(--font-body);text-decoration:none;background:#202321;color:#fff}.share-actions a:hover{background:#444}.share-actions [hidden]{display:none!important}

/* The paired Polaroids already include their own angles and paper edges. */
.hero-character .portrait-stage{width:min(470px,100%);transform:none;box-shadow:none}
.hero-character .portrait-stage img{border-radius:0;object-fit:contain}
@media(max-width:600px){.hero-character .portrait-stage{width:min(470px,100%)}}

/* Hero finishing adjustments. */
.hero-copy .callout-stamp{padding-left:10px}
.hero-character .portrait-stage{transform:scale(1.44);transform-origin:center}

/* Keep the result actions together, immediately above the graph. */
.connection .connection-top{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.connection-top .view-help{flex-basis:auto;max-width:none}
.connection-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.connection-actions .share-connection{margin:0}
.connection-actions .view-tabs{margin:0;flex-shrink:0}
@media(max-width:600px){
 .connection .connection-top{padding:20px 16px;gap:16px}
 .connection-top .result-heading{gap:12px;align-items:flex-start}
 .connection-top .view-help{font-size:14px;line-height:1.55}
 .connection-actions{gap:8px;flex-wrap:nowrap}
 .connection-actions .share-connection{padding:11px 10px;font-size:12px;min-height:44px;white-space:nowrap}
 .connection-actions .view-tabs{padding:3px;flex:1;min-width:0}
 .connection-actions .view-tabs button{min-width:0;flex:1;padding:10px 8px;font-size:12px;min-height:44px}
}
@media(max-width:360px){.connection-actions{flex-wrap:wrap}.connection-actions .view-tabs{flex:0 0 100%}}

/* Lighter, smaller titles on the movie sleeves. */
#graph .poster-label{font-size:11px;font-weight:400;letter-spacing:0;line-height:1.2}

/* Selection feels like a card clicking into its slot. */
.search-section .field.person-picked{border-color:#345953;box-shadow:inset 0 0 0 1px #345953}
.search-section .field.person-picked label:after{content:' ✓';color:#345953;letter-spacing:0}
@media(prefers-reduced-motion:no-preference){
 .suggestions:not(:empty){animation:picker-unfold .22s cubic-bezier(.16,1,.3,1);transform-origin:50% 0}
 .suggestions button{transition:background-color .15s,padding-left .2s}
 .suggestions button:hover{padding-left:20px}
 .field:focus-within{transition:box-shadow .2s;box-shadow:0 5px 0 #f97b6733}
 .hero-copy h1>span,.hero-copy h1>b{animation:headline-print .85s cubic-bezier(.16,1,.3,1) both}
 .hero-copy h1>b{animation-delay:.12s}
}
@keyframes picker-unfold{from{opacity:0;transform:scaleY(.85) rotateX(-10deg)}to{opacity:1;transform:scaleY(1) rotateX(0)}}
@keyframes headline-print{from{clip-path:inset(0 100% 0 0);translate:-12px 0}to{clip-path:inset(0);translate:0 0}}

.search-section .finder-brand{display:inline-block;max-width:calc(100% - 110px);line-height:1.25}

/* A phosphor point becomes a beam, then opens the connection screen. */
.number-interstitial .number-caption{font-family:var(--font-body);font-weight:300}
.number-interstitial.tv-switch-on{isolation:isolate;overflow:hidden;background:#000!important}
.number-interstitial.tv-switch-on:before{
 content:'';position:absolute;inset:auto;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
 background:#f5fbff;box-shadow:0 0 8px #fff9,0 0 24px #9edcf366;
 z-index:3;animation:phosphor-beam 1.4s linear both;
}
.number-interstitial.tv-switch-on:after{
 content:'';position:absolute;inset:0;z-index:2;border-radius:0;box-shadow:none;
 background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,#ffffff0b,transparent 75%),#000;
 animation:phosphor-screen 1.4s cubic-bezier(.22,.7,.2,1) both;
}
@keyframes phosphor-beam{
 0%{width:6px;height:6px;transform:translate(-50%,-50%);opacity:0}
 10%{width:6px;height:6px;opacity:1}
 25%{width:20%;height:2px;border-radius:1px}
 45%{width:100%;height:2px;top:50%;opacity:1}
 55%{width:100%;height:2px;top:50%;opacity:1}
 95%{width:100%;height:1px;top:0;opacity:.45}
 100%{width:100%;height:1px;top:0;transform:translate(-50%,-50%);opacity:0}
}
@keyframes phosphor-screen{
 0%,50%{clip-path:inset(50% 0 50% 0);opacity:0}
 52%{opacity:1;clip-path:inset(50% 0 50% 0)}
 100%{opacity:1;clip-path:inset(0)}
}
@media(prefers-reduced-motion:reduce){.number-interstitial.tv-switch-on:before,.number-interstitial.tv-switch-on:after{animation:none;display:none}}
/* Titles outside the hero: Archivo ExtraBold, the same face as the hero's buttons. The hero keeps Bowlby One in hero.css. */
h1,h2,h3,.hero-copy h1,.tape-heading h2,.intro-bridge h2,.result-heading h2,.discovery h2,.section-title h2,.preset h3,#panel h2,dialog h2,.credit-interstitial h3,.degree,.connection-top .degree,.footer-brand,.stats strong{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
/* Retro buttons, matching the hero's "Find a connection" CTA: hard black outline, flat offset shadow, lift on hover, press on click. */
/* --retro-lilac: 90s lavender fill for secondary buttons and chips (was cream, which blended into the page). */
:root{--retro-yellow:#ffd400;--retro-pink:#ff2d8a;--retro-cyan:#19c3d6;--retro-cream:#f6ecd6;--retro-lilac:#c6b3ff;--retro-ink:#000}
body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share],.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button){display:inline-flex;align-items:center;justify-content:center;gap:8px;border:3px solid var(--retro-ink);border-radius:0;color:var(--retro-ink);font-family:var(--font-body);font-weight:800;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s}
body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share]){min-height:48px;padding:0 20px;font-size:15px;line-height:1}
/* Primary: yellow with a pink shadow */
body :is(button.primary,#connect-bacon,[data-share="download"]){background:var(--retro-yellow);box-shadow:5px 5px 0 var(--retro-pink)}
body button.primary{min-height:56px;font-size:17px}
/* Secondary: cream with a cyan shadow */
body :is(.text-btn,.share-connection,.panel-action:not(#connect-bacon),[data-share]:not([data-share="download"])){background:var(--retro-lilac);box-shadow:4px 4px 0 var(--retro-cyan)}
/* Chips: actor suggestions, path/explore toggle, zoom */
body :is(.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button){min-height:32px;padding:0 12px;font-size:12px;background:var(--retro-lilac);border-width:2px;box-shadow:3px 3px 0 var(--retro-ink)}
body .connection-top .view-tabs button.selected{background:var(--retro-yellow);box-shadow:3px 3px 0 var(--retro-pink)}
body :is(.connection-top .view-tabs,.view-tabs,.zoom){display:inline-flex;gap:8px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
body .zoom button{min-width:34px;padding:0 8px}
@media(hover:hover){
 body :is(button.primary,#connect-bacon,[data-share="download"]):hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--retro-pink)}
 body :is(.text-btn,.share-connection,.panel-action:not(#connect-bacon),[data-share]:not([data-share="download"])):hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--retro-cyan)}
 body :is(.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--retro-ink)}
 body .connection-top .view-tabs button.selected:hover{box-shadow:4px 4px 0 var(--retro-pink)}
}
body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share],.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button):active{transform:translate(3px,3px);box-shadow:0 0 0 var(--retro-ink)}
body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share],.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button):focus-visible{outline:3px solid var(--retro-cyan);outline-offset:4px}
body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share]):disabled{opacity:.55;cursor:not-allowed;transform:none}
@media(prefers-reduced-motion:reduce){body :is(button.primary,.text-btn,.share-connection,.panel-action,[data-share],.try button,.connection-top .view-tabs button,.view-tabs button,.zoom button){transition:none}}
/* Degree badge: the number slams in hero-yellow with a stamped label underneath. */
body .connection-top .result-heading{align-items:center;gap:clamp(16px,2.4vw,30px)}
.degree-badge{position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:1.6em;isolation:isolate}
body .connection-top #degree{display:block;padding:0 .08em 0 0;margin:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--retro-yellow);font-family:var(--font-display);font-weight:800;font-size:clamp(76px,9vw,128px);line-height:.95;letter-spacing:-.04em;text-shadow:5px 5px 0 #000,9px 9px 0 var(--retro-pink);transform-origin:50% 60%}
.degree-label{display:inline-block;margin-top:8px;padding:6px 10px;background:var(--retro-cyan);color:#000;font:700 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transform:rotate(-3deg);box-shadow:3px 3px 0 #000}
.degree-badge.slammed:before,.degree-badge.slammed:after{content:'';position:absolute;left:50%;top:42%;z-index:-1;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:5px solid var(--retro-yellow);opacity:0;pointer-events:none;animation:degree-ring .7s .28s ease-out both}
.degree-badge.slammed:after{border-color:var(--retro-pink);animation-delay:.4s}
@keyframes degree-ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(7);opacity:0}}
@media(prefers-reduced-motion:reduce){.degree-badge:before,.degree-badge:after{display:none}}
.searching .degree-label,.degree-badge:has(#degree:empty) .degree-label{visibility:hidden}
@media(max-width:600px){body .connection-top .result-heading{flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-width:0}body .connection-top .result-heading>div{min-width:0;max-width:100%}.degree-badge{align-items:flex-start}body .connection-top .connection-actions{flex-wrap:wrap;width:100%;max-width:100%;gap:14px}}
@media(max-width:600px){body .connection-top>*{min-width:0;max-width:100%}body .connection-top #result-title{overflow-wrap:anywhere}}
body .connection-top .view-tabs button{white-space:nowrap}
/* Site background: flat cream, replacing the black icon-pattern backdrop. */
:root{--site-bg:#F7ECD5}
html,body{background:var(--site-bg)!important;background-image:none!important}
body:after{content:none!important;display:none!important}
body footer,body footer .footer-brand{color:#202321}body footer .footer-brand span{color:var(--retro-pink)}body footer p{color:#4a4640}
body footer:before{filter:brightness(0);opacity:.35}
body .connection-top #result-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
/* Footer dot divider: 10% smaller, 80% opacity, dots filled with the retro gradient via an SVG mask. */
/* Footer divider as a string of lights: 10% smaller dots, muted bulb colors, 80% opacity. */
body footer:before{height:12.6px;background:url('assets/string-lights.svg') repeat-x left center/64.8px 12.6px;-webkit-mask:none;mask:none;filter:none;opacity:.8}
/* Play section headline: bigger now that the brand line above it is gone. */
body .search-section .tape-heading h2{font-size:clamp(32px,4.2vw,46px);line-height:1.02;margin-top:0;padding-top:0}
/* Swap button: square retro key with pixel-art swap arrows instead of the emoji. */
body .search-section #swap{width:48px;height:48px;padding:0;border:3px solid #000;border-radius:0;background:var(--retro-lilac);box-shadow:4px 4px 0 var(--retro-cyan);align-self:center}
body .search-section #swap:hover{background:var(--retro-yellow);box-shadow:4px 4px 0 var(--retro-pink)}
body .search-section #swap:active{translate:3px 3px;box-shadow:1px 1px 0 var(--retro-pink)}
#swap .swap-icon{display:block;image-rendering:pixelated}
/* Actor fields: square corners and the same heavy black stroke as the retro buttons. */
body .search-section .field,body .search-section .field:nth-of-type(2){border:3px solid #000;border-radius:0}
body .search-section .field:focus-within,body .search-section .field.person-picked{border-color:#000;box-shadow:4px 4px 0 var(--retro-cyan)}
/* Play heading: the corner dot constellation is gone, so the copy can use the full width. */
body .search-section .tape-heading>div{padding-right:0}

/* ==== Four-step flow (from the Figma Make prototype): Intro → Pick → Trace → Path ====
   main[data-step] puts one full-screen scene on stage at a time. */
:root{--retro-orange:#ffae19;--flow-ease:cubic-bezier(.16,1,.3,1)}
body{margin:0}
main{max-width:none!important;width:100%;margin:0!important;padding:0!important;overflow:visible}
main>.discovery,main>footer,main>#playground{display:none!important}
main:not([data-step=intro])>.hero,main:not([data-step=pick])>#play,main:not([data-step=trace])>#trace,main:not([data-step=path])>.connection{display:none!important}
main>section{animation:scene-in .7s var(--flow-ease) both}
main.scene-exit{pointer-events:none;animation:scene-out .3s ease-in both}
@keyframes scene-in{0%{opacity:0;transform:translateY(24px) scale(.99)}to{opacity:1;transform:none}}
@keyframes scene-out{to{opacity:0;transform:translateY(-16px) scale(1.01)}}

/* Step rail */
.step-rail{position:fixed;z-index:40;top:30px;right:38px;display:flex;gap:8px;margin:0;padding:0;list-style:none;color:#202321;pointer-events:none}
.step-rail li{display:flex;flex-direction:column;width:58px;padding-top:8px;border-top:2px solid currentColor;opacity:.25;font-family:var(--font-body)}
.step-rail li.active{opacity:1}
.step-rail span{font-size:11px;font-weight:800}
.step-rail b{font-size:10px;letter-spacing:1px;text-transform:uppercase}
.step-rail[data-on=intro],.step-rail[data-on=trace],.step-rail[data-on=path]{color:#fff}

/* 01 Intro: the existing hero, centered on stage */
main[data-step=intro]{min-height:100dvh;display:grid;align-items:center}

/* 02 Pick */
body main>#play{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;grid-template-rows:auto auto 1fr;grid-template-areas:'copy form' 'copy below' 'copy error';column-gap:clamp(40px,8vw,140px);align-content:center;width:100%;max-width:none;min-height:100dvh;margin:0;padding:88px clamp(28px,6vw,92px) 48px;background:linear-gradient(90deg,rgb(247 236 210/85%),transparent 20% 80%,rgb(247 236 210/85%)),#fff;border:0;border-radius:0;box-shadow:none}
body main>#play:before,body main>#play:after{content:none}
.flow-back{position:absolute;top:30px;left:clamp(28px,6vw,92px);padding:6px;background:none;border:0;color:#000;font-family:var(--font-body);font-size:14px;font-weight:800;cursor:pointer}
#play .tape-heading{grid-area:copy;align-self:center;display:block;margin:0;padding:0;border:0}
.flow-kicker{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#202321}
body .search-section .tape-heading h2{font-size:clamp(44px,5vw,78px);line-height:1.02;letter-spacing:-.03em;margin:0}
body .search-section .tape-heading p#how-it-works{max-width:610px;margin:26px 0 0;font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:#555f5c}
#play #search{grid-area:form;grid-template-columns:minmax(0,1fr);gap:0;justify-items:stretch}
body .search-section .field,body .search-section .field:nth-of-type(2){border-width:5px}
body .search-section #swap{justify-self:center;width:68px;height:52px;margin:12px 0;box-shadow:-6px 6px 0 var(--retro-cyan)}
#play #search .primary{width:100%;margin-top:18px}
#play .search-below{grid-area:below;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px}
#play #error{grid-area:error;min-height:22px;margin:10px 0 0;color:#a10040;font-weight:700}

/* 03 Trace */
.trace-scene{position:relative;display:grid;place-items:center;width:100%;min-height:100dvh;overflow:hidden;color:#f7edda;background:radial-gradient(circle at center,rgb(21 195 211/11%),transparent 35%),repeating-linear-gradient(0deg,transparent 0 8px,rgb(255 255 255/4%) 9px 10px),#111412}
.search-orbit{position:absolute;top:50%;left:50%;width:min(52vw,74vh,640px);aspect-ratio:1;transform:translate(-50%,-58%)}
.orbit{position:absolute;inset:0;border:2px solid rgb(247 236 210/18%);border-radius:50%;animation:orbit-spin 2.4s linear infinite}
.orbit-two{inset:18%;animation-direction:reverse;animation-duration:1.7s}
.orbit i{position:absolute;top:12%;left:12%;width:18px;height:18px;background:var(--retro-pink);border:4px solid #111;border-radius:50%;box-shadow:0 0 0 7px var(--retro-yellow)}
.orbit-two i{top:auto;right:6%;bottom:20%;left:auto;background:var(--retro-cyan)}
.orbit-center{position:absolute;inset:34%;display:grid;place-items:center;color:var(--retro-yellow);font-family:var(--font-display);font-weight:800;font-size:clamp(44px,8vw,104px);letter-spacing:-.04em;background:#111412;border:5px solid var(--retro-yellow);border-radius:50%;box-shadow:10px 10px 0 var(--retro-pink)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.trace-copy{position:absolute;z-index:3;bottom:8vh;left:50%;width:min(90%,820px);transform:translateX(-50%);text-align:center}
.trace-copy>p:first-child,.trace-status{margin:0 0 10px;letter-spacing:4px;text-transform:uppercase;font-size:13px;color:#f7edda}
.trace-copy h2{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 0 24px;color:#f7edda;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3.5vw,48px);letter-spacing:-.02em}
.trace-copy h2 i{color:var(--retro-orange);font-style:normal}
.trace-status{margin:12px 0 0;font-size:12px}

/* 04 Path */
body main>.connection{display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;min-height:620px;margin:0;padding:0;overflow:hidden;background:#1d211f;color:#d9dddb;border:0;border-radius:0;box-shadow:none}
body main>.connection .connection-top{position:relative;display:flex;flex:none;align-items:center;gap:14px;flex-wrap:wrap;min-height:170px;padding:28px clamp(32px,5vw,76px);background:#1d211f;border:0;border-bottom:2px solid #59605c;border-radius:0}
body .connection-top .result-heading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:26px;padding-right:470px;background:none}
body .connection-top #result-title{color:#8cdbff;font-size:clamp(26px,3vw,48px);text-transform:uppercase}
body .connection-top #result-subtitle,body .connection-top #result-subtitle span{color:#d9dddb}
body .connection-top .view-help{display:none}
body .connection-top .connection-actions{position:absolute;top:84px;right:calc(clamp(32px,5vw,76px) + 136px);display:flex;align-items:center;gap:14px;margin:0;width:auto}
body .connection-top .view-tabs{margin:0}
#new-path{height:44px;padding:0 16px;font-size:14px;font-weight:800;color:#000;border:4px solid #000;border-radius:0;cursor:pointer}
#new-path{position:absolute;top:84px;right:clamp(32px,5vw,76px);background:var(--retro-yellow);box-shadow:5px 5px 0 var(--retro-pink)}
body .connection .graph-wrap{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;margin:0;padding:0;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 7px,rgb(255 255 255/7%) 8px 9px),#050606;border:0;border-radius:0}
body .connection .graph-caption{flex:none;padding:18px 4vw;color:#d9dddb;font-size:13px;font-weight:800;letter-spacing:3px;background:none;border:0}
body .connection .live-dot{background:#ff710f}
body .connection #viewport{flex:1;height:auto!important;min-height:0;background:none;border:0}
body .connection .edge{stroke:var(--retro-orange);stroke-width:3;filter:drop-shadow(0 0 8px var(--retro-orange))}
body .connection .graph-bottom{flex:none;padding:14px 4vw;background:none;border:0;color:#d9dddb}
body .connection .graph-bottom b,body .connection .legend span{color:#d9dddb}
body .connection .story-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 4vw;background:#050606;color:#d9dddb;border:0;border-top:2px solid #2a2e2c}
body .connection .story-bar .eyebrow{color:var(--retro-orange)}
body .connection .story-bar p,body .connection #story{color:#e9e9e0}

@media(max-width:900px){
 .step-rail{top:16px;right:18px}.step-rail li{width:36px}.step-rail b{display:none}
 body main>#play{display:block;padding:72px 22px 34px}
 .flow-back{top:14px;left:18px}
 body .search-section .tape-heading h2{font-size:clamp(34px,8vw,56px)}
 body .search-section .tape-heading p#how-it-works{margin:16px 0 24px}
 body .connection-top .result-heading{padding-right:0;gap:14px}
 body main>.connection .connection-top{min-height:0;padding:54px 22px 18px}
 body .connection-top .connection-actions,#new-path{position:static;height:auto}
 body .connection-top .connection-actions{flex-wrap:wrap}
 body .connection .story-bar{flex-wrap:wrap}
}
@media(max-width:620px){
 .trace-copy{bottom:9vh}.trace-copy h2{flex-direction:column;gap:4px}.search-orbit{width:82vw}
 body .connection-top #result-title{font-size:21px}
 body .connection .graph-bottom b{display:none}
}
@media(prefers-reduced-motion:reduce){main>section,main.scene-exit,.orbit,.vhs-tag,.retro-bar i{animation:none!important}}
body .connection .connection-top>.view-help{display:none!important}
body .connection #graph .edge{stroke:var(--retro-orange)!important;stroke-width:3px!important;opacity:1!important;filter:drop-shadow(0 0 8px var(--retro-orange))!important}
body .connection .story-bar{flex-direction:row;flex-wrap:nowrap}
body .connection .story-bar>div{min-width:0}
@media(max-width:900px){body .connection .story-bar{flex-wrap:wrap}}
/* Path on phones: compact header, a graph with real room, and the page scrolls past it to the story. */
@media(max-width:700px){
 body main>.connection{height:auto;min-height:100dvh;overflow:visible}
 body main>.connection .connection-top{display:grid;grid-template-columns:1fr auto;gap:12px;padding:52px 18px 16px}
 body .connection-top .result-heading{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;padding:0}
 body .connection-top .degree-badge{flex:none;align-items:flex-start}
 body .connection-top #degree{font-size:64px}
 body .connection-top #result-title{font-size:20px;line-height:1.1}
 body .connection-top #result-subtitle{font-size:13px}
 body .connection-top .connection-actions{grid-column:1;justify-content:flex-start;gap:8px}
 #new-path{grid-column:2;justify-self:end;align-self:start;height:38px;padding:0 10px;font-size:13px}
 body .connection-top .view-tabs button{padding:0 8px}
 body .connection .graph-wrap{flex:none}
 body .connection .graph-caption{padding:14px 18px;font-size:11px;letter-spacing:2px}
 body .connection #viewport{flex:none;height:340px!important}
 body .connection .story-bar{flex-direction:column;align-items:flex-start;padding:16px 18px 76px}
}
/* Actor fields stack in the Pick step, so the swap arrows point up and down. */
#play #swap .swap-icon{rotate:90deg}
@media(max-width:700px){
 body main>.connection .connection-top .view-tabs button{width:auto;min-width:0;height:34px;padding:0 9px;font-size:12px;white-space:nowrap}
 body main>.connection .connection-top .connection-actions{grid-column:1/-1}
 body main>.connection .connection-top #new-path{position:static;grid-column:1/-1;grid-row:3;justify-self:stretch;width:100%;height:38px;font-size:13px}
 body main>.connection .connection-top .connection-actions .share-connection{height:34px;padding:0 10px;font-size:12px}
}

/* App-style hero: edge to edge, no card, no cream showing around it. */
main[data-step=intro]{display:block;min-height:0}
body main>.hero{width:100%;min-height:100dvh;margin:0;border-radius:0;display:flex;flex-direction:column;justify-content:center}
body main>.hero .wrap{width:100%}

/* Real TMDB posters on film cards. The title stays underneath; the label only shows if a film has no poster. */
#graph .film-node .poster{width:96px;height:144px}
#graph .film-node .poster>img{display:block;width:100%;height:100%;object-fit:cover}
#graph .film-node .poster:has(>img) .poster-label{display:none}
#graph .film-node.small .poster{width:72px;height:108px}
/* Dark stage behind the scenes, so no cream flashes during step transitions. */
html,body{background:#111412!important}
#graph .film-node .poster>img{filter:none;opacity:1}
/* Panel stats: deep retro pink, readable on the white panel (yellow was not). */
body #panel .stats strong{color:#c8006a}

/* Retro loader: chunky block bar and a VCR on-screen tag on the Trace step. */
.vhs-tag{position:absolute;top:30px;left:38px;z-index:3;color:#7dff8a;font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:2px;text-shadow:2px 0 0 var(--retro-pink),-2px 0 0 var(--retro-cyan);animation:vhs-blink 1.1s steps(2,jump-none) infinite}
.retro-bar{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;height:30px;padding:5px;background:#000;border:4px solid #f7edda;box-shadow:6px 6px 0 var(--retro-pink)}
.retro-bar i{background:#fff;opacity:.08}
.retro-bar i:nth-child(-n+8){background:var(--retro-pink)}
.retro-bar i:nth-child(n+9):nth-child(-n+16){background:var(--retro-yellow)}
.retro-bar i:nth-child(n+17){background:var(--retro-cyan)}
.retro-bar i.on{opacity:1}
.retro-bar i.head{animation:block-blink .4s steps(2,jump-none) infinite}
@keyframes vhs-blink{from{opacity:1}to{opacity:.35}}
@keyframes block-blink{from{opacity:1}to{opacity:.3}}
@media(max-width:900px){.vhs-tag{top:14px;left:18px;font-size:16px}}
/* Actor name suggestions: plain italic text links instead of buttons. */
body #play .try button,body #play .try button:hover,body #play .try button:active{display:inline;width:auto;min-height:0;height:auto;margin:0;padding:0;color:#000;background:none;border:0;border-radius:0;box-shadow:none;transform:none;translate:none;font-family:var(--font-body);font-size:12pt;font-style:italic;font-weight:400;letter-spacing:0;line-height:1.3;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
body #play .try button:hover{text-decoration-thickness:2px}
body #play .try button:focus-visible{outline:2px solid #000;outline-offset:4px}
body #play .try{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
/* Film hover note: a retro sticker, matching the buttons. */
body #tooltip{width:max-content;max-width:min(360px,90%);padding:10px 14px;color:#000;background:var(--retro-yellow);border:4px solid #000;border-radius:0;box-shadow:6px 6px 0 var(--retro-pink);font-family:var(--font-body);font-size:14px;font-weight:800;line-height:1.3;transform:translateX(-50%) rotate(-1deg)}
body #tooltip.show{animation:sticker-pop .18s var(--flow-ease) both}
@keyframes sticker-pop{from{opacity:0;transform:translateX(-50%) rotate(-4deg) scale(.9)}to{opacity:1;transform:translateX(-50%) rotate(-1deg) scale(1)}}
@media(prefers-reduced-motion:reduce){body #tooltip.show{animation:none}}
/* The path / Explore: one chunky retro switch with a yellow thumb that slides between the two. */
body main>.connection .connection-top .view-tabs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;width:auto;height:44px;margin:0;padding:0;overflow:hidden;background:var(--retro-lilac);border:4px solid #000;border-radius:0;box-shadow:5px 5px 0 var(--retro-cyan)}
body main>.connection .connection-top .view-tabs:before{content:'';position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--retro-yellow);border-right:4px solid #000;transition:transform .22s var(--flow-ease)}
body main>.connection .connection-top .view-tabs:has(#universe-view.selected):before{transform:translateX(100%);border-right:0;border-left:4px solid #000}
body main>.connection .connection-top .view-tabs button,body main>.connection .connection-top .view-tabs button:hover,body main>.connection .connection-top .view-tabs button:active,body main>.connection .connection-top .view-tabs button.selected{position:relative;z-index:1;width:auto;min-width:0;height:100%;min-height:0;margin:0;padding:0 14px;color:#000;background:none;border:0;border-radius:0;box-shadow:none;transform:none;translate:none;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}
body main>.connection .connection-top .view-tabs button:focus-visible{outline:3px solid var(--retro-pink);outline-offset:-5px}
@media(prefers-reduced-motion:reduce){body main>.connection .connection-top .view-tabs:before{transition:none}}
body main>.connection .connection-top .view-tabs{gap:0}
body main>.connection .connection-top .view-tabs{padding:0!important}
body main>.connection .connection-top .view-tabs button{border:0!important}
/* Longer button copy: the buttons sit beside the headline on wide screens and above it on mid-size ones. */
@media(min-width:1200px){
 body .connection-top .result-heading{padding-right:450px}
 body .connection-top .connection-actions{right:calc(clamp(32px,5vw,76px) + 158px)}
}
@media(min-width:901px) and (max-width:1199px){
 body .connection-top .result-heading{padding-right:0}
 body main>.connection .connection-top{padding-top:96px}
 body .connection-top .connection-actions,#new-path{top:24px}
 body .connection-top .connection-actions{right:auto;left:clamp(32px,5vw,76px)}
 #new-path{right:auto;left:calc(clamp(32px,5vw,76px) + 196px)}
}

/* Share lives in the story bar now, at the bottom of the Path step. */
body .connection .story-bar .share-connection{flex:none;width:auto;height:44px;min-height:0;margin:0;padding:0 16px;font-size:14px}
.hit-counter b{margin-left:4px;padding:2px 6px;color:#7dff8a;background:#000;border:2px solid #000;font-weight:700;letter-spacing:2px}
/* Detail panel: image on its own line, left-aligned with the copy, 10px above the label. */
#panel-content .detail-image{display:block;margin:15px 0 10px}
#panel-content>.eyebrow{display:block;margin:0;line-height:1}
/* On phones the step rail scrolls away with the page instead of sitting on top of the headline. */
@media(max-width:900px){.step-rail{position:absolute}}
/* Graph entrance fallback at the same 1.5x pace as the main reveal. */
.arriving{animation-duration:.47s}
#graph .drawing{animation-duration:.43s}
/* Pick step kicker, 10% smaller. */
body .search-section .tape-heading p.flow-kicker{font-size:9px;letter-spacing:2px;line-height:1.3}
/* Bacon number countdown: white digits tick down, then the real number slams in with the rings. */
.degree-badge{isolation:isolate}
.degree-badge.counting #degree{color:#efeee8;text-shadow:4px 4px 0 #000}
.degree-badge.counting .degree-label{visibility:hidden}
.connection-top:has(.degree-badge.counting) .sub-degrees{visibility:hidden}

/* Guestbook: a 1996 homepage in a dialog, using the site's retro palette. */
.guestbook-link{padding:0;color:var(--retro-cyan);background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}
.guestbook-link:hover{color:var(--retro-yellow)}
dialog.guestbook{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:24px;overflow:auto;color:#7dff8a;background:#000 radial-gradient(circle,#ffffff30 1px,transparent 1.5px) 0 0/28px 28px;border:5px solid var(--retro-yellow);border-radius:0;box-shadow:9px 9px 0 var(--retro-pink);font-family:var(--font-mono);font-size:14px}
dialog.guestbook::backdrop{background:rgb(0 0 0/70%)}
dialog.guestbook h2{margin:0;color:var(--retro-yellow);font-family:var(--font-mono);font-size:28px;font-weight:700;letter-spacing:0;text-align:center}
.guestbook-intro{margin:8px 0 14px;color:#fff;text-align:center}
dialog.guestbook hr{height:6px;margin:16px 0;background:linear-gradient(90deg,var(--retro-pink),var(--retro-yellow),var(--retro-cyan));border:0}
.guestbook-close{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;color:#000;background:var(--retro-yellow);border:3px solid #000;font-size:20px;font-weight:700;cursor:pointer}
#guestbook-form{display:grid;gap:10px;margin:0;padding:0;background:none;border:0;box-shadow:none}
#guestbook-form label{display:grid;gap:4px;color:var(--retro-cyan);font-size:12px}
#guestbook-form input,#guestbook-form textarea{width:100%;padding:7px;color:#000;background:#fff;border:2px inset #c0c0c0;border-radius:0;font:14px var(--font-mono);resize:vertical}
#guestbook-form .guestbook-trap{position:absolute;left:-9999px}
#guestbook-form button{justify-self:start;min-height:40px;padding:0 16px;color:#000;background:var(--retro-lilac);border:3px solid #000;box-shadow:4px 4px 0 var(--retro-cyan);font-family:var(--font-body);font-weight:800;cursor:pointer}
#guestbook-status{min-height:18px;margin:0;color:var(--retro-yellow)}
#guestbook-entries article{padding:10px 0;border-bottom:1px dashed #7dff8a66}
#guestbook-entries article:last-child{border-bottom:0}
#guestbook-entries p{margin:0 0 4px;color:#fff;overflow-wrap:anywhere}
#guestbook-entries .guestbook-meta{color:var(--retro-yellow)}
#guestbook-entries .guestbook-fave{color:var(--retro-cyan);font-size:12px}
/* Starfield: the guestbook's black and white dots, shared by the Trace step and the graph canvas. */
:root{--starfield:#000 radial-gradient(circle,#ffffff30 1px,transparent 1.5px) 0 0/28px 28px}
body main>.trace-scene,body .connection .graph-wrap{background:var(--starfield)}
dialog.guestbook{background:var(--starfield)}

/* Universal footer: always on screen, with the way home. Every step sizes itself to the space above it. */
:root{--footer-h:52px}
body{padding-bottom:var(--footer-h)}
body .site-footer{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:14px;width:auto;max-width:none;height:var(--footer-h);margin:0;padding:0 20px;color:#f7edda;background:#000;border:0;border-top:4px solid var(--retro-yellow);font-family:var(--font-mono);font-size:12px}
body .site-footer:before{content:none}
#go-home{display:grid;flex:none;place-items:center;width:36px;height:34px;padding:0;background:var(--retro-yellow);border:0;box-shadow:3px 3px 0 var(--retro-pink);cursor:pointer}
#go-home:hover{background:#fff}
#go-home img,.btn-icon{display:inline-block;image-rendering:pixelated}
.btn-icon{margin-left:6px;vertical-align:-5px}
body .site-footer .guestbook-link{margin-left:auto;font-size:12px;white-space:nowrap}
body main>.hero,body main>#play,body main>.trace-scene{min-height:calc(100dvh - var(--footer-h))}
body main>.connection{height:calc(100dvh - var(--footer-h))}
@media(max-width:700px){
 body .site-footer{gap:10px;padding:0 12px}
 body main>.connection{height:auto;min-height:calc(100dvh - var(--footer-h))}
}
@media(max-width:620px){.site-footer-note{display:none}}
/* Footer keeps one row: on phones the counter shrinks to just the number so the guestbook link fits. */
body .site-footer{flex-wrap:nowrap}
body .site-footer .guestbook-link{flex:none;width:auto;min-width:0;height:auto;min-height:0;margin:0 0 0 auto}
@media(max-width:620px){body .site-footer .hit-counter{font-size:0}body .site-footer .hit-counter b{margin:0;font-size:12px}}
body .connection-top #result-subtitle a{color:inherit;text-decoration:underline;text-underline-offset:3px}
body .connection-top #result-subtitle a:hover{color:var(--retro-yellow)}
/* Touch: vertical swipes on the canvas scroll the page, sideways swipes pan it, and portraits still drag. */
body .connection #viewport{touch-action:pan-y}
body .connection #graph .node{touch-action:none}

body .site-footer{justify-content:flex-start}
body .site-footer #go-home{margin:0}
/* About popup and its footer link. */
body .site-footer #guestbook-open{margin-left:0}
body .site-footer #about-open{margin-left:auto}
dialog.about h3{margin:0 0 10px;color:var(--retro-yellow);font-family:var(--font-mono);font-size:16px;font-weight:700}
dialog.about p{margin:0 0 10px;color:#fff;line-height:1.5}
dialog.about b{color:var(--retro-cyan)}
.about-tmdb{display:inline-block;margin-bottom:10px}
.about-tmdb img{display:block;width:150px;height:auto}
dialog.about p a{color:var(--retro-yellow);text-decoration:underline;text-underline-offset:3px}
dialog.about p a:hover{color:var(--retro-cyan)}