html{color:#ebe9f7;background:#080914}body{background:radial-gradient(ellipse at 35% 28%,#14102a 0,#080914 75%)}header,footer{border-color:#37304c}.study-name,footer,#live-mode{color:#b4aecb}button{background:#100f20;color:#ddd5fa;border-color:#655b83}button:hover,button[aria-pressed=true]{background:#bdb0e7;color:#100c1d}a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#c7b0ff}h1{color:#f0edff}nav a{color:#dbd1ff}.consumed{visibility:hidden!important}.identity{display:flex;align-items:center;gap:30px;margin-bottom:58px}.identity img{width:82px;height:110px;object-fit:cover;object-position:center;border-radius:4px;filter:saturate(.75);border:1px solid #655b8355}.identity h1{margin:0;font-size:clamp(60px,8.4vw,120px)}main{padding-top:70px}.intro{grid-template-columns:1.2fr 1fr;gap:10%}.lead{font-size:clamp(30px,3.2vw,44px)}#loop{border-top:1px solid #37304c;padding:22px 0 30px;color:#bcb4d0;position:relative;z-index:7}summary{cursor:pointer;font-size:13px;width:max-content}.loop-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:24px 0}#loop h2{font-size:22px;color:#ebe9f7;font-weight:500;letter-spacing:-.03em}#loop p{font-size:14px;line-height:1.6;max-width:570px}#numbers{font:11px monospace}figure{margin:0;min-width:0}#closeup{position:static;width:100%;height:230px;border:1px solid #37304c;border-radius:8px;background:#0b0916}figcaption,.footnote{font-size:11px!important;color:#9890ad;margin-top:12px}.page{min-height:100svh}#loop:not([open]){padding-bottom:22px}@media(max-width:650px){header{gap:12px}.controls{flex-basis:auto;margin-left:auto}.study-name{font-size:10px}.identity{gap:17px;align-items:center;margin-bottom:42px}.identity img{width:56px;height:79px}.identity h1{font-size:clamp(43px,10vw,62px);letter-spacing:-.06em}.intro{grid-template-columns:1fr;gap:30px}.lead{font-size:33px}main{padding-top:48px;padding-bottom:90px}.loop-grid{grid-template-columns:1fr}.page{padding:0 6vw}footer{gap:12px}}


/* The fish crosses both live views without intercepting their controls. */
body > canvas{z-index:20!important;pointer-events:none}.page{position:relative;z-index:0}
#loop{z-index:auto;padding:28px 0 36px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr);gap:30px;align-items:start}
#loop h2{margin:0 0 14px;font-size:23px;font-weight:500;letter-spacing:-.035em;color:#e4dcf7}
#eye-camera,#letter-camera{position:static;inset:auto;display:block;width:100%;height:150px;background:transparent}
.eye-view,.school-view{min-width:0}#loop #eyes{font:11px/1.7 monospace;margin:9px 0 0;color:#b4a4cc;min-height:19px}
.school-heading{display:flex;flex-wrap:wrap;gap:0 15px;align-items:baseline;margin-bottom:12px}.school-heading h2{margin-bottom:5px!important}#school-count{font:10px/1.7 monospace;color:#b4a4cc}
#roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;max-height:220px;overflow:auto;padding:3px;scrollbar-color:#514260 transparent}
.letter-card{padding:3px 2px;min-width:0;height:63px;border-radius:5px;border:1px solid #332b4455;background:#121020;font:8px monospace;color:#afa3c5}
.letter-card canvas{position:static;inset:auto;display:block;width:100%;height:40px}.letter-card span{display:block;line-height:12px}.letter-card span:nth-child(2){display:none}
.letter-card[data-state=fleeing]{border-color:#8b609d}.letter-card[data-state=returning]{border-color:#547a87}.letter-card[data-state=eaten]{opacity:.45}.letter-card[aria-pressed=true]{background:#282035!important;color:#f1e9ff!important;border-color:#cbb1f5}.letter-card:hover{background:#211a30;color:#f1e9ff}
.letter-detail{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;border-top:1px solid #37304c;margin-top:14px;padding-top:10px}#letter-camera{height:72px}#loop .letter-detail h3{margin:0;font:11px/1.5 monospace;color:#d2c0ef}#loop #letter-decision{font-size:12px;line-height:1.5;margin:4px 0;color:#a89cbb}
.all-typography #loop button{position:relative}main{flex:none;padding-bottom:58px}.identity{margin-bottom:36px}footer{padding:18px 0}
@media(min-width:1120px){.page{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:90px 1fr auto;grid-template-areas:'header header' 'main live' 'footer live';column-gap:42px}header{grid-area:header}main{grid-area:main;padding:54px 0 40px;align-self:start}footer{grid-area:footer;align-self:end}#loop{grid-area:live;display:block;align-self:start;margin:28px 0 18px;padding:0 0 0 24px;border:0;border-left:1px solid #37304c}.school-view{border-top:1px solid #37304c;margin-top:20px;padding-top:20px}.identity{gap:20px;margin-bottom:40px}.identity img{width:65px;height:91px}.identity h1{font-size:clamp(52px,5.7vw,92px)}.intro{grid-template-columns:1fr;gap:30px}.lead{font-size:36px}.bio{font-size:19px}#roster{grid-template-columns:repeat(6,minmax(0,1fr));max-height:200px}}
@media(max-width:650px){#loop{grid-template-columns:1fr;gap:24px}#eye-camera{height:150px}.school-view{border-top:1px solid #37304c;padding-top:22px}#loop h2{font-size:23px}#roster{max-height:220px}main{padding-bottom:52px}.identity{margin-bottom:35px}}

/* A slotted boundary shares its exact geometry with the water simulation. */
#loop{position:relative;padding:20px;border:0;background:rgba(12,10,25,.4)}#refuge-border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#refuge-border line{stroke:#655b83;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}.eye-view,.school-view{position:relative}
@media(min-width:1120px){#loop{padding:20px;margin-top:28px;border-left:0}.school-view{margin-top:18px;padding-top:18px}#eye-camera{height:130px}#roster{max-height:180px}}
@media(max-width:650px){#loop{width:calc(100% - 122px);margin-left:122px;padding:14px;gap:18px}#loop h2{font-size:21px}#eye-camera{height:115px}#loop #eyes{font-size:9px}#roster{grid-template-columns:repeat(4,minmax(0,1fr));max-height:205px}.letter-detail{grid-template-columns:46px 1fr;gap:7px}#letter-camera{height:60px}#loop .letter-detail h3{font-size:9px}#loop #letter-decision{font-size:11px}.school-view{padding-top:18px}}

html,body{overflow-x:clip}

@media(max-width:350px){#roster{grid-template-columns:repeat(3,minmax(0,1fr))}#loop h2{font-size:19px}#school-count{font-size:9px}.letter-detail{grid-template-columns:38px 1fr}}