/* One illustrated cabinet for Fin's two live views. */
#brain-panel{width:270px;top:83px;right:28px;padding:11px;background:#f5e7c4;border:2px solid #30252a;border-radius:22px 12px 21px 13px;box-shadow:3px 5px 0 #30252a85,inset 0 0 0 3px #fff4d9;overflow:visible;color:#392c2c}
.mind-heading{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 10px}
.mind-heading h2{font:27px/1 var(--title);margin:0;letter-spacing:-.5px}
.mind-live{display:flex;align-items:center;gap:4px;font:10px/1 Georgia,serif;letter-spacing:1px}
.mind-live i{width:5px;height:5px;background:#b84e44;border-radius:50%;box-shadow:0 0 0 2px #b84e4420}
.mind-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:3px 0 10px}
.mind-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:65px;padding:5px 7px;background:#e4d3ae;color:#675248;border:2px solid #b09a7d;border-radius:13px 9px 5px 5px;box-shadow:0 2px 0 #a48c70;font:21px/1 var(--title);transition:background .15s,transform .15s,border-color .15s}
.mind-tab img{display:block;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 0 #30252a35);transition:transform .15s}
.mind-tab:hover img{transform:rotate(-6deg) scale(1.07)}
.mind-tab[aria-selected=true]{background:#f9d6cd;border-color:#563432;color:#442d2c;box-shadow:0 3px 0 #563432;transform:translateY(-2px)}
.mind-tab[aria-selected=true]::after{content:'';width:4px;height:4px;background:#a24d46;border-radius:50%;flex:none}
.mind-tab:focus-visible{outline:3px solid #b95458;outline-offset:3px}
#brain-viewport,#brain-panel .vision-window{height:211px;border:2px solid #493733;border-radius:12px 8px 13px 8px;background:radial-gradient(ellipse at 50% 35%,#403137,#252126 75%);box-shadow:inset 0 0 0 1px #e5bea34a}
#brain-reset{position:absolute;right:7px;top:7px;z-index:2;width:28px;min-width:28px;height:28px;min-height:28px;border:1px solid #eed9b64d;border-radius:50%;background:#f1debd14;color:#e1ccad;font:20px/1 Georgia,serif;padding:0}
#brain-reset:hover{background:#f1debd36}
#brain-live,#vision-status{margin:9px 0 0;font:italic 12px/1.3 Georgia,serif;text-align:center;color:#5b443d;min-height:16px}
#brain-panel .mind-hint,#vision-caption{margin:4px 0 0;text-align:center;color:#846b59;font:10px/1.3 Georgia,serif;min-height:13px}
#brain-panel #vision-panel{position:static;width:auto;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:inherit}
#brain-panel .vision-window{justify-content:center;gap:7px}
#brain-panel .vision-eye-labels{font:italic 12px Georgia,serif;margin:0;padding:0 3px;color:#e7d4b6}
#brain-panel #fin-vision{width:100%;height:auto;aspect-ratio:16/9;image-rendering:auto}
@media(max-width:600px){#brain-panel{top:73px;right:15px;width:206px;padding:8px;border-radius:18px 10px 18px 10px}.mind-heading{padding:3px 2px 8px}.mind-heading h2{font-size:23px}.mind-live{font-size:8px;gap:3px}.mind-tabs{gap:5px;padding-bottom:9px}.mind-tab{font-size:18px;gap:4px;padding:4px;min-height:53px}.mind-tab img{width:34px;height:36px}#brain-viewport,#brain-panel .vision-window{height:159px}#brain-live,#vision-status{font-size:11px}#brain-panel .mind-hint,#vision-caption{font-size:9px}}
@media(max-height:600px){#brain-panel{top:66px;width:206px}#brain-viewport,#brain-panel .vision-window{height:120px}.mind-tab{min-height:45px}.mind-tab img{height:32px;width:32px}.mind-heading h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.mind-tab,.mind-tab img{transition:none}}

/* Folder tabs rise from the top of the viewing card. */
#brain-panel{margin-top:55px;border-top-left-radius:0;border-top-right-radius:9px;padding-top:11px}
.mind-tabs{position:absolute;left:-2px;right:10px;bottom:calc(100% - 1px);display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:4px;padding:0;z-index:2}
.mind-tab{position:relative;min-height:53px;border:2px solid #30252a;border-bottom:0;border-radius:13px 15px 0 0;box-shadow:none;background:#d9c8a4;transform:none;padding:5px 8px;color:#705847}
.mind-tab[aria-selected=true]{min-height:59px;background:#f5e7c4;border-color:#30252a;color:#392c2c;box-shadow:none;transform:none}
.mind-tab[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:-3px;width:auto;height:5px;border-radius:0;background:#f5e7c4}
.mind-tab img{width:40px;height:40px}
@media(max-width:600px){#brain-panel{margin-top:48px;padding-top:9px}.mind-tabs{right:7px;gap:3px}.mind-tab{min-height:46px;padding:4px;gap:4px}.mind-tab[aria-selected=true]{min-height:51px}.mind-tab img{width:32px;height:33px}}
@media(max-height:600px){#brain-panel{margin-top:43px}.mind-tab{min-height:40px}.mind-tab[aria-selected=true]{min-height:45px}.mind-tab img{width:30px;height:30px}}

/* Align the header with the footer and clear the raised viewing tabs. */
header{left:28px;right:30px}
header .wordmark .bittorture-logo{object-position:left center}
#brain-panel{top:132px}
@media(max-width:600px){header{left:15px;right:15px}#brain-panel{top:100px}}
@media(max-width:359px){header{left:12px;right:12px}}
@media(max-height:600px) and (min-width:601px){header{left:23px;right:30px}#brain-panel{top:94px}}

/* Mobile folders launch the live views in a native modal. */
.mind-launchers{display:none}
#mind-modal{padding:14px;width:min(360px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);overflow:auto;border:2px solid #30252a;border-radius:18px 10px 18px 10px;background:#f5e7c4;color:#392c2c;box-shadow:4px 6px 0 #30252a80;text-align:left}
#mind-modal::backdrop{background:#171316b8;backdrop-filter:blur(4px)}
.mind-modal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#mind-modal-title{font:30px/1 var(--title);text-transform:none;letter-spacing:0;margin:0 0 0 4px}
.mind-modal-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #30252a40;border-radius:50%;padding:0;background:#e4d3ae;color:#392c2c;font:30px/1 Georgia,serif}
#mind-modal #brain-panel{display:block;position:static;width:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;border-radius:0;box-shadow:none;overflow:visible}
#mind-modal .mind-tabs{display:grid;position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr 1fr;gap:4px;align-items:end;margin:0;padding:0;z-index:2}
#mind-modal .mind-tab{min-height:48px;padding:5px 8px;font-size:19px}
#mind-modal .mind-tab[aria-selected=true]{min-height:53px}
#mind-modal .mind-tab img{width:32px;height:32px}
#mind-modal #brain-viewport,#mind-modal .vision-window{border-top-left-radius:0}
#mind-modal #brain-viewport,#mind-modal .vision-window{height:clamp(150px,36dvh,280px);margin:0;border-radius:12px 8px 13px 8px}
#mind-modal #brain-live,#mind-modal #vision-status{font-size:13px;margin-top:12px}
#mind-modal .mind-hint,#mind-modal #vision-caption{font-size:11px;margin:7px 0 3px}
@media(max-width:600px), (max-height:500px) and (pointer:coarse){
 #brain-panel{display:none}
 .mind-launchers{display:flex;position:absolute;top:106px;left:16px;right:auto;gap:10px;z-index:15}
 .mind-folder{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:4px;width:84px;min-height:48px;padding:5px;border:2px solid #30252a;border-radius:0 8px 8px 8px;background:#f5e7c4;color:#392c2c;box-shadow:2px 3px 0 #30252a80;font:18px/1 var(--title)}
 .mind-folder::before{content:'';position:absolute;z-index:-1;left:-2px;top:-8px;width:37px;height:10px;background:#f5e7c4;border:2px solid #30252a;border-bottom:0;border-radius:7px 9px 0 0}
 .mind-folder img{display:block;width:27px;height:29px;object-fit:contain}
 .mind-folder:active{transform:translateY(1px)}
 .mind-folder:focus-visible,.mind-modal-close:focus-visible{outline:3px solid #b95458;outline-offset:4px}
}
@media(max-height:500px) and (pointer:coarse){.mind-launchers{top:91px}#mind-modal{max-height:calc(100dvh - 20px);padding:10px}#mind-modal .mind-modal-heading{margin-bottom:5px}#mind-modal #brain-viewport,#mind-modal .vision-window{height:150px}}

/* Plain mobile buttons open the shared tabbed modal. */
@media(max-width:600px), (max-height:500px) and (pointer:coarse){
 .mind-folder{border-radius:8px;min-height:44px;box-shadow:1px 2px 0 #30252a80}
 .mind-folder::before{display:none}
}

/* The tabs rise outside the modal card, exactly as on the desktop card. */
#mind-modal{position:fixed;inset:65px 0 15px;margin:auto;height:fit-content;max-height:calc(100dvh - 80px);padding:0;overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
#mind-modal .mind-modal-body{padding:14px;max-height:calc(100dvh - 80px);overflow:auto;border:2px solid #30252a;border-radius:0 10px 18px 10px;background:#f5e7c4;box-shadow:4px 6px 0 #30252a80}
#mind-modal>.mind-tabs{position:absolute;left:0;right:24px;bottom:calc(100% - 2px);top:auto;margin:0;padding:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:4px}
#mind-modal>.mind-tabs .mind-tab{min-height:48px;border-radius:13px 15px 0 0}
#mind-modal>.mind-tabs .mind-tab[aria-selected=true]{min-height:54px}
#mind-modal #brain-viewport,#mind-modal .vision-window{border-top-left-radius:12px}
@media(max-height:500px) and (pointer:coarse){#mind-modal{padding:0;max-height:calc(100dvh - 80px)}#mind-modal .mind-modal-body{padding:10px}}