:root{--zc-bg:#f3f1e7;--zc-fg:#243f3c;--zc-muted:#57706a;--zc-surface:#fffdf5;--zc-line:#c4ccc0;--zc-accent:#285e58;color-scheme:light dark}*{box-sizing:border-box}body{margin:0;background:var(--zc-bg);color:var(--zc-fg);font:15px/1.6 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px}header{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font:clamp(36px,5vw,56px)/1.1 Georgia,serif;margin:8px 0 12px;font-weight:400}h2{font:26px/1.3 Georgia,serif;margin:6px 0 10px}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:700;margin:0;color:var(--zc-muted)}.intro{margin:0 0 22px;max-width:530px}#connection{font-size:11px;color:var(--zc-muted)}.garden{height:470px;position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--zc-line)}canvas{width:100%;height:100%;display:block}.caption{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;color:#173e3c;font-size:12px}.caption span{background:#f8fae6db;border-radius:20px;padding:5px 12px}button{font:inherit;border:1px solid var(--zc-line);background:var(--zc-surface);color:var(--zc-fg);min-height:44px;padding:8px 18px;border-radius:24px;cursor:pointer}button:focus-visible,summary:focus-visible{outline:3px solid #c87536;outline-offset:4px}button:disabled{opacity:.5;cursor:default}#watch{background:var(--zc-accent);color:#fff}#markers button{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;background:var(--zc-creature);color:#163a35;border:2px solid #fff4d8;box-shadow:0 3px 12px #19382c35;font-weight:700}#markers button.found::after{content:'✓';font-size:11px;position:absolute;right:-4px;top:-5px;border-radius:10px;background:#f7f2df;padding:0 4px}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0}#clock{font-size:12px;color:var(--zc-muted);margin-left:auto}.notes{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;border-top:1px solid var(--zc-line);padding-top:22px}#fact{margin:0;min-height:74px}#notebook{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}#notebook button{text-align:left;font-size:12px;border-radius:10px;padding:7px 10px}#status{font-size:12px;color:var(--zc-muted)}details{font-size:12px;color:var(--zc-muted);border-top:1px solid var(--zc-line);padding-top:12px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center}@media(max-width:600px){main{padding:20px 16px}header{display:block}#connection{display:block;margin:-10px 0 12px}.garden{height:390px;border-radius:15px}.notes{grid-template-columns:1fr;gap:20px}.controls{margin:14px 0}#clock{width:100%;margin:0}.caption{left:10px;right:10px;bottom:12px;font-size:10px}.caption span{padding:5px 9px}.intro{font-size:14px}}@media(prefers-color-scheme:dark){:root{--zc-bg:#172a29;--zc-fg:#e4e8d8;--zc-muted:#a9bcb1;--zc-surface:#263b36;--zc-line:#496058;--zc-accent:#356b60}}
#markers svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#markers small{position:absolute;left:-5px;bottom:-5px;border-radius:10px;background:#fcf5de;padding:0 5px;font-size:10px}
/* A field station at the water's edge: the coast is the plate, notes are the logbook. */
body{background:radial-gradient(ellipse at 70% 0%,var(--zc-surface),transparent 60%),var(--zc-bg)}
main{max-width:1190px}
header{align-items:end;border-bottom:1px solid var(--zc-line);padding-bottom:13px;margin-bottom:19px}
header h1{font-size:clamp(42px,5vw,64px)}
header .intro{margin-bottom:0}
.garden{height:clamp(480px,55vw,610px);border-radius:4px;border:8px solid var(--zc-surface);outline:1px solid var(--zc-line);box-shadow:0 22px 48px color-mix(in srgb,var(--zc-fg) 14%,transparent)}
.garden::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--zc-fg) 5%,transparent),transparent 30%,transparent 68%,color-mix(in srgb,var(--zc-fg) 19%,transparent))}
.caption{z-index:2;bottom:21px;left:24px;right:24px;color:var(--zc-fg)}
.caption span{background:color-mix(in srgb,var(--zc-surface) 89%,transparent);border:1px solid var(--zc-line);border-radius:2px;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
#markers button{background:var(--zc-creature);color:var(--zc-fg);border:2px solid var(--zc-surface);box-shadow:0 4px 15px color-mix(in srgb,var(--zc-fg) 27%,transparent);transition:transform .18s,box-shadow .18s}
#markers button:hover,#markers button:focus-visible{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 6px 24px color-mix(in srgb,var(--zc-fg) 32%,transparent)}
#markers button.found::after{background:var(--zc-surface);color:var(--zc-accent)}
#markers small{background:var(--zc-surface);color:var(--zc-fg)}
button:focus-visible,summary:focus-visible{outline-color:var(--zc-accent)}
.controls{border-bottom:1px solid var(--zc-line);padding-bottom:18px}
.controls button{border-radius:999px}
#watch{color:var(--zc-surface)}
.notes{border:0;gap:clamp(32px,5vw,75px);padding-top:8px}
.notes>div{padding-left:clamp(18px,3vw,45px);border-left:1px solid var(--zc-line)}
.notes article{position:relative;padding-top:13px}
.notes article::before{content:"01 / OBSERVE";position:absolute;top:-14px;left:0;letter-spacing:.16em;font-size:9px;color:var(--zc-muted)}
#fact{font:17px/1.65 Georgia,serif;max-width:51ch}
#notebook button{border-radius:2px;background:color-mix(in srgb,var(--zc-surface) 68%,transparent);text-align:left;min-height:51px}
@media(max-width:600px){main{padding:17px 16px 25px}header{margin-bottom:16px}header h1{font-size:43px}.garden{height:440px;border-width:5px;border-radius:3px}.caption{left:10px;right:10px;bottom:11px;flex-wrap:wrap}.notes{gap:23px}.notes>div{padding:20px 0 0;border-left:0;border-top:1px solid var(--zc-line)}#fact{font-size:16px}.controls{padding-bottom:15px}#markers button:hover{transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){#markers button{transition:none!important}}
.garden{height:clamp(400px,48vh,500px)}
@media(max-width:600px){#connection{display:block;margin:8px 0 0;line-height:1.35}.garden{height:400px}}
:root{--zc-marker-ink:#163a35}
#markers button{color:var(--zc-marker-ink)}
[data-motion=reduced] #markers button{transition:none!important}

/* Round two: a coastal specimen plate with its notebook at the edge. */
:root{--zc-coast-paper:#ece9d5;--zc-coast-ink:#315452;--zc-coast-rule:#9aa99d;--zc-coast-marker:#f2e7c7}
body{background:repeating-linear-gradient(0deg,transparent 0 28px,color-mix(in srgb,var(--zc-coast-rule) 7%,transparent) 29px 30px),var(--zc-coast-paper)}
main{max-width:1350px;display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,300px);grid-template-rows:auto auto auto auto auto;gap:0 27px;padding:19px 25px 26px}
header{grid-column:1/-1;grid-row:1;margin:0 0 16px;padding:6px 0 14px;border-color:var(--zc-coast-rule)}
header h1{font:600 clamp(39px,4vw,55px)/1.05 "Segoe UI",Arial,sans-serif;letter-spacing:-.065em}
header .intro{font-size:13px;margin:0}
.garden{grid-column:1;grid-row:2;height:clamp(460px,59vh,610px);border:0;outline:1px solid var(--zc-coast-rule);border-radius:0;box-shadow:0 17px 34px color-mix(in srgb,var(--zc-coast-ink) 17%,transparent)}
.garden::before{content:"PLATE 01 / INTERTIDAL ZONE  ·  HIGH WATER → LOW WATER";position:absolute;z-index:2;left:18px;top:17px;padding:5px 8px;background:color-mix(in srgb,var(--zc-coast-paper) 84%,transparent);color:var(--zc-coast-ink);font:9px Arial,sans-serif;letter-spacing:.13em;pointer-events:none}
.garden::after{background:linear-gradient(180deg,color-mix(in srgb,var(--zc-coast-paper) 11%,transparent),transparent 24%,transparent 66%,color-mix(in srgb,var(--zc-coast-ink) 22%,transparent))}
.caption{left:17px;right:17px;bottom:15px}
.caption span{background:var(--zc-coast-paper);color:var(--zc-coast-ink);border-color:var(--zc-coast-rule);border-radius:0}
#markers button{z-index:2;box-shadow:0 2px 0 var(--zc-coast-ink),0 6px 13px color-mix(in srgb,var(--zc-coast-ink) 23%,transparent)}
.controls{grid-column:1;grid-row:3;align-items:center;margin:0;padding:12px 0;border-color:var(--zc-coast-rule)}
.controls button{border-radius:2px}
.controls #watch{background:var(--zc-coast-ink);color:var(--zc-coast-paper)}
.notes{grid-column:2;grid-row:2/4;display:block;border:0;border-left:1px solid var(--zc-coast-rule);padding:3px 0 0 23px}
.notes article{padding:0 0 22px}
.notes article::before{content:"SPECIMEN / 01";top:-17px;color:var(--zc-coast-ink)}
.notes h2{font-size:clamp(24px,2.4vw,31px);line-height:1.1}
#fact{font:14px/1.6 Georgia,serif;min-height:0}
.notes>div{padding:18px 0 0!important;border:0!important;border-top:1px solid var(--zc-coast-rule)!important}
#notebook{grid-template-columns:1fr;gap:0;border-top:1px solid var(--zc-coast-rule)}
#notebook button{min-height:37px;border:0;border-bottom:1px solid var(--zc-coast-rule);border-radius:0;background:transparent;padding:4px 6px}
#status{grid-column:1/-1;grid-row:4}
details{grid-column:1/-1;grid-row:5;border-color:var(--zc-coast-rule)}
@media(max-width:760px){main{display:block;padding:12px 14px 22px}header{margin:0 0 11px;padding:3px 0 8px}header h1{font-size:37px;margin:3px 0}.garden{height:383px}.garden::before{font-size:7px;left:8px;top:7px;max-width:90%}.caption{left:8px;right:8px;bottom:8px}.controls{margin:0;padding:10px 0}.notes{border-left:0;border-top:1px solid var(--zc-coast-rule);padding:15px 0 0}.notes article{padding:0 0 12px}.notes>div{padding:11px 0 0!important}#notebook{grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--zc-coast-rule)}#notebook button{border-right:1px solid var(--zc-coast-rule)}}
body,header .eyebrow,#connection,.notes .eyebrow,.notes h2,#fact,#status,details,#clock{color:var(--zc-coast-ink)}
.controls button:not(#watch),#notebook button{background:var(--zc-coast-paper);color:var(--zc-coast-ink);border-color:var(--zc-coast-rule)}

/* The tide plate scales; specimen and reference prose scroll in bounded areas. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:hidden;padding-bottom:7px}
.garden{height:100%;min-height:0}
.notes{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.notes:focus-visible,details:focus-visible{outline:2px solid var(--zc-coast-ink);outline-offset:-2px}
details{max-height:64px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#status{margin:2px 0}
@media(max-width:760px){main{display:flex;flex-direction:column;padding:6px 10px 5px}header{flex:none;margin:0 0 5px;padding:1px 0 3px}header h1{font-size:clamp(29px,8vw,36px)}header .intro{font-size:11px;line-height:1.25}.garden{flex:1 1 0;height:auto;min-height:0}.controls{flex:none;padding:5px 0;gap:5px}.controls button{min-height:38px;padding:5px 9px}.notes{flex:0 1 132px;min-height:52px;padding:5px 0 0}.notes article{padding:0 0 5px}.notes h2{font-size:20px;margin:2px 0}.notes #fact{font-size:12px;line-height:1.3}.notes>div{padding:5px 0 0!important}#status{flex:none;max-height:26px;overflow:auto}details{flex:0 1 48px;min-height:40px;max-height:48px}}