/* Two small games in the existing seasonal academic exhibition. */
.principle-game{max-width:1200px;margin:auto;border-bottom:1px solid var(--line);color:var(--ink);scroll-margin-top:85px}
.principle-game,.principle-game *{box-sizing:border-box}.principle-game [hidden]{display:none!important}
.principle-game>details,.pe-playfield,.pe-side,.pe-flow-board{scroll-margin-top:85px}.principle-game svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.principle-game button,.principle-game select{font:inherit;color:var(--ink)}.principle-game button,.principle-game select,.principle-game summary{cursor:pointer}.principle-game :focus-visible{outline:3px solid var(--accent);outline-offset:4px}.principle-game ::selection{background:var(--accent);color:var(--button-ink)}
.pe-entry{display:grid;grid-template-columns:1fr 72px auto;align-items:center;gap:36px;padding:30px 40px;list-style:none}.pe-entry::-webkit-details-marker{display:none}.pe-entry h2{margin:0;border:0;font:600 clamp(25px,3vw,34px)/1.4 "Research Display","Songti SC",serif;letter-spacing:-.02em}.pe-entry p{margin:8px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}.pe-entry-mark{width:72px;height:48px;color:var(--accent)}.pe-entry-action{font-size:13px;color:var(--accent);min-width:92px}
.pe-app{padding:0 40px 28px;font-size:14px;line-height:1.7}.pe-app p{margin:0}.pe-app h3{margin:0 0 12px;border:0;font:600 26px/1.4 "Research Display","Songti SC",serif;letter-spacing:-.02em}.pe-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 22px;border-bottom:1px solid var(--line)}.pe-toolbar label{display:flex;align-items:center;gap:14px;font-size:13px}.pe-toolbar p{font-size:12px;color:var(--muted)}.pe-app select{min-height:44px;max-width:100%;padding:8px 32px 8px 12px;border:1px solid var(--line);border-radius:6px;background-color:var(--panel);font-size:13px}.pe-app select option{background:var(--panel);color:var(--ink)}
.pe-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;padding:30px 0}.pe-side,.pe-playfield{min-width:0}.pe-side>p{font-size:14px;max-width:65ch}.pe-side .pe-status{margin:18px 0;min-height:54px;font-size:14px}.pe-actions{display:flex;gap:8px;flex-wrap:wrap}.pe-actions button{min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:13px}.pe-actions .pe-primary{background:var(--accent);color:var(--button-ink);border-color:var(--accent)}.principle-game button:hover:not(:disabled){background:var(--field)}.pe-actions .pe-primary:hover:not(:disabled){background:var(--ink);color:var(--panel);border-color:var(--ink)}.principle-game button:disabled,.principle-game select:disabled{opacity:.55;cursor:default}
.pe-flow-board{display:grid;grid-template-columns:repeat(var(--pe-size,3),minmax(0,1fr));gap:5px;max-width:520px;margin:0 auto 16px;padding:6px;background:var(--field);border:1px solid var(--line);border-radius:6px}.pe-tile{position:relative;min-width:0;aspect-ratio:1;border:0;border-radius:4px;background:var(--panel);padding:0;color:var(--muted)!important;touch-action:manipulation}.pe-tile svg{display:block;width:100%;height:100%;stroke-width:3}.pe-tile .pe-conduit{stroke-dasharray:4 4;transform-origin:50% 50%;transition:transform .18s cubic-bezier(.16,1,.3,1)}.pe-tile.is-connected{color:var(--accent)!important}.pe-tile.is-connected .pe-conduit{stroke-dasharray:none}.pe-tile .pe-port{fill:var(--panel);stroke-width:2}.pe-tile.is-connected .pe-port{fill:currentColor}.pe-tile.is-source{background:var(--panel)}.pe-tile .pe-source-ring{stroke-width:2}.pe-tile.is-hinted{outline:2px solid var(--accent);outline-offset:0}.pe-tile:focus-visible{z-index:1;outline-offset:1px}
.pe-board-key{font-size:12px!important;line-height:1.8;color:var(--muted);max-width:65ch;margin-top:12px!important}.pe-readings{display:flex;gap:12px 24px;flex-wrap:wrap;margin:20px 0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent)}.pe-side .pe-note{font-size:12px;color:var(--muted);margin-top:14px}.pe-about{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.pe-about summary{padding:6px 0;text-decoration:underline;text-underline-offset:4px}.pe-about p{margin:10px 0;line-height:1.8}.pe-about a{color:var(--accent);display:inline-block;padding:8px 0;min-height:44px;text-underline-offset:4px}
.pe-records{border-top:1px solid var(--line);padding-top:16px;font-size:13px}.pe-records>summary{padding:8px 0}.pe-records>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.pe-records button{min-width:0;min-height:52px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:8px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;overflow-wrap:anywhere}.pe-records button[aria-current=true]{border-color:var(--accent)}.pe-award{display:flex;gap:2px;flex:none;color:var(--accent)}.pe-award svg{width:10px;height:10px;stroke-width:1.5}.pe-award .is-earned{fill:currentColor}.pe-save{font-size:12px;color:var(--muted);margin-top:18px!important}
.pe-water-scene{max-width:390px;margin:-12px auto 0}.pe-reservoir{display:block;width:100%;color:var(--accent)}.pe-water-fill{fill:var(--field);stroke:none;transform:translateY(100px);transition:transform .3s cubic-bezier(.16,1,.3,1)}.pe-water-outline{stroke-width:1.5}.pe-safe-band{fill:var(--accent);stroke:none;opacity:.09}.pe-waterline{stroke-width:1.5}.pe-water-limit{stroke-dasharray:2 6;stroke:var(--muted)!important;stroke-width:1!important;opacity:.6}.pe-petal{stroke-width:1;opacity:.3}.pe-petal.is-earned{opacity:1;fill:var(--field);stroke:var(--accent)}.pe-reservoir text{stroke:none;fill:var(--ink);font-family:inherit}.pe-water-number{font-size:36px;font-weight:600;font-variant-numeric:tabular-nums}.pe-water-caption{font-size:12px}.pe-weather-caption{font-size:13px}.pe-timeline-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin:6px 0}.pe-history{display:block;width:100%;height:auto;color:var(--accent)}.pe-chart-band{fill:var(--field);stroke:none}.pe-chart-mid{stroke:var(--line)!important;stroke-dasharray:2 5;stroke-width:1!important}.pe-chart-base{stroke:var(--muted)!important;stroke-dasharray:4 5;stroke-width:1.5!important}.pe-chart-actual{stroke-width:2.5!important}.pe-legend{display:flex;gap:12px 20px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.pe-legend>span{display:flex;align-items:center;gap:6px}.pe-legend svg{width:24px;height:6px}.pe-legend>span:first-child svg{color:var(--accent)}
.pe-rulebook{border:0;margin:20px 0 16px;padding:0}.pe-rulebook legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:8px}.pe-rulebook label{display:grid;grid-template-columns:1fr 150px;align-items:center;gap:12px;margin:7px 0;font-size:13px}.pe-rulebook label>span{line-height:1.5}.pe-rulebook select{width:100%}.pe-goal{font-size:13px!important;color:var(--accent);margin-top:10px!important}.pe-rescue{margin-top:18px}.pe-rescue p{font-size:12px;color:var(--muted);margin-bottom:8px}.pe-rescue button{font-size:12px}.pe-garden-layout .pe-side .pe-status{min-height:58px;margin:12px 0}
html[data-focus=on] .principle-game{display:none}@media(max-width:900px){.pe-layout{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pe-app{padding-left:28px;padding-right:28px}.pe-rulebook label{grid-template-columns:1fr 130px}}
@media(max-width:650px){.pe-entry{padding:24px 22px;grid-template-columns:1fr 50px;gap:14px}.pe-entry-mark{width:50px;height:40px}.pe-entry-action{grid-column:1/-1;min-width:0}.pe-entry p{font-size:12px}.pe-app{padding:0 18px 26px}.pe-toolbar{align-items:flex-start;gap:10px;flex-direction:column;padding-top:12px}.pe-toolbar label{width:100%;justify-content:space-between;gap:10px}.pe-toolbar select{max-width:70%;min-width:0}.pe-layout{grid-template-columns:1fr;gap:26px;padding:24px 0}.pe-side h3{font-size:24px}.pe-flow-board{gap:3px;padding:4px}.pe-records>div{grid-template-columns:repeat(2,minmax(0,1fr))}.pe-water-scene{max-width:340px;margin:-8px auto 0}.pe-rulebook label{grid-template-columns:1fr 145px}.pe-garden-layout .pe-playfield{border-bottom:1px solid var(--line);padding-bottom:24px}.pe-garden-layout{gap:22px}}
@media(max-width:360px){.pe-entry h2{font-size:24px}.pe-entry-mark{width:40px}.pe-entry{grid-template-columns:1fr 40px;column-gap:10px}.pe-rulebook label{grid-template-columns:1fr 128px}.pe-actions button{padding:8px 12px}.pe-flow-board{gap:2px;padding:3px}.pe-tile{min-height:0}}
@media(prefers-reduced-motion:reduce){.principle-game *{animation:none!important;transition:none!important}}html[data-motion=off] .principle-game *{animation:none!important;transition:none!important}@media print{.principle-game{display:none!important}}

.pe-preview{display:none}.pe-garden-layout .pe-playfield>.pe-status{font-size:13px;min-height:50px;margin:8px 0}.pe-garden-layout .pe-playfield>.pe-actions{justify-content:center;margin:8px 0 22px}.pe-garden-layout .pe-playfield>.pe-status{text-align:center}@media(max-width:650px){.pe-preview{display:inline-block;min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--accent)!important;text-decoration:underline;text-underline-offset:4px;font-size:13px!important}}

.pe-reset-trigger{min-height:44px;border:0;padding:8px 0;background:transparent;color:var(--muted)!important;text-decoration:underline;text-underline-offset:4px;font-size:12px!important}.pe-reset-box{padding:16px;background:var(--panel);font-size:13px}.pe-reset-box .pe-actions{margin-top:12px}@media(max-width:650px){[data-principle=flow] .pe-side>h3,[data-principle=flow] .pe-side>[data-pe-instruction]{display:none}[data-principle=flow] .pe-readings{margin-top:0}}

/* The network is the focal surface; direction and diagnosis stay beside it. */
[data-principle=flow] .pe-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:60px;padding:32px 0}
[data-principle=flow] .pe-flow-board{max-width:460px;background:var(--line);gap:2px;padding:2px;border:0;border-radius:6px;overflow:hidden}
[data-principle=flow] .pe-tile{border-radius:0;background:var(--panel)}[data-principle=flow] .pe-tile.is-connected{background:var(--canvas)}[data-principle=flow] .pe-tile svg{stroke-width:2.5}[data-principle=flow] .pe-conduit{stroke-dasharray:3 3}.pe-open-ports{color:var(--ink);stroke-width:1.5}
.pe-modes{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.pe-modes button{min-height:44px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:8px 12px;font-size:12px}.pe-modes button[aria-pressed=true]{background:var(--field);border-color:var(--accent)}
[data-principle=flow] .pe-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0}[data-principle=flow] .pe-readings>span{display:flex;flex-direction:column;gap:2px}[data-principle=flow] .pe-readings strong{font-weight:600;font-size:28px;line-height:1.3;color:var(--ink);white-space:nowrap}[data-principle=flow] .pe-readings small{font-size:12px;color:var(--muted)}
[data-principle=flow] .pe-status{border-top:1px solid var(--line);padding-top:18px;min-height:76px}
@media(max-width:650px){[data-principle=flow] .pe-layout{grid-template-columns:1fr;gap:18px;padding-top:24px}.pe-modes{margin:0 0 18px}[data-principle=flow] .pe-readings{margin:18px 0}[data-principle=flow] .pe-readings strong{font-size:24px}[data-principle=flow] .pe-status{min-height:65px}}