Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280/* Full-viewport edition: a dark rocky shore under the site's hairline, square-cornered instruments. */body:has(.tide-pool) { margin: 0; background: #0a0a0a; }.page-container:has(.tide-pool) { max-width: none; padding: 0; }body:has(.tide-pool) .theme-toggle, body:has(.tide-pool) .theme-preferences { display: none; }.tide-pool { --ink: #e5e5e5; --muted: #9a949e; --line: #3a373d; --panel: #0c0b0dee; --accent: #d4b9df; position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--ink); --site-text: #e5e5e5; --site-border: #48444b; --site-link: #d4b9df; font-size: 14px; --ring: clamp(104px, 15vmin, 148px); --title-size: clamp(2.4rem, 5vw, 5.2rem); --mark-scale: .7; }.tide-pool a { color: #d3cbd6; text-underline-offset: .3em; text-decoration-color: #a58aad; }.tide-pool :is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }.tide-pool button { font: inherit; border-radius: 0; cursor: pointer; }.tide-pool button:disabled { opacity: .45; cursor: default; }.tide-kicker, .tide-hud dt, .tide-census summary, .tide-facts dt { margin: 0; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tide-heading { position: absolute; z-index: 2; top: max(20px, env(safe-area-inset-top)); left: clamp(16px, 3.4vw, 56px); pointer-events: none; }.tide-exit { pointer-events: auto; display: inline-flex; min-height: 44px; align-items: center; font-size: .8rem; }.tide-heading h1, .tide-mark { margin: .3rem 0 .4rem; font: 400 var(--title-size)/1 var(--site-font-display); letter-spacing: -.01em; text-transform: uppercase; }.tide-heading p { margin: 0; color: #b0a9b5; font-size: .82rem; }
.tide-figure { position: absolute; inset: 0; margin: 0; }.tide-stage { width: 100%; height: 100%; background: #0a0a0a; }.tide-stage canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; cursor: grab; }.tide-stage canvas.is-dragging { cursor: grabbing; }.tide-stage canvas.is-dropping { cursor: crosshair; }.tide-stage [hidden] { display: none; }.tide-label { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; white-space: nowrap; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #cfc8c0; text-shadow: 0 1px 4px #000; transition: opacity .3s; }.tide-label b { font: 400 1.5rem/1 var(--site-font-display); letter-spacing: 0; margin-right: .45rem; vertical-align: -.2rem; color: #ece6df; }.tide-stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
/* The veil: the site's ring mark over the dark while the pool loads, filling like a pool, with the title beneath it. When the pool is ready the view opens out of the ring's middle and the title glides up to its place. */.tide-veil { position: absolute; inset: 0; z-index: 1; background: #0a0a0a; pointer-events: none; transition: opacity .6s ease; }.tide-pool:not([data-veiled]) .tide-veil { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }/* Opening through the ring, the scene draws the dark and the ring itself, so the veil keeps only the water to fade. */.tide-pool .tide-veil[data-iris] { background: none; opacity: 1; visibility: visible; transition: none; }.tide-pool .tide-veil[data-iris="done"] { visibility: hidden; }.tide-veil-ring { position: absolute; left: 50%; top: 50%; width: var(--ring); height: var(--ring); margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2); animation: tide-veil-in 1.2s ease both; }.tide-veil-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #e5e5e5; }.tide-veil:is([data-iris="open"], [data-iris="done"]) .tide-veil-ring > svg { visibility: hidden; }.tide-veil-water { position: absolute; inset: 18.5%; border-radius: 50%; overflow: hidden; transition: opacity .5s ease; }.tide-veil[data-iris] .tide-veil-water { opacity: 0; }.tide-pool:is(:not([data-veiled]), [data-veiled="failed"]) :is(.tide-veil-bob, .tide-veil-swell) { animation-play-state: paused; }.tide-veil-level { position: absolute; inset: 0; transform: translateY(calc((1 - var(--level, .2)) * 100%)); transition: transform 1.8s cubic-bezier(.4, 0, .2, 1); }.tide-veil-bob { position: absolute; left: 0; top: -10%; width: 200%; height: 120%; animation: tide-bob 4.6s ease-in-out infinite alternate; }.tide-veil-swell { width: 100%; height: 100%; animation: tide-swell 7s linear infinite; }.tide-veil-swell svg { display: block; width: 100%; height: 100%; }.tide-veil-sea { fill: #7b62c9; fill-opacity: .24; }.tide-veil-crest { fill: none; stroke: #cdbcf0; stroke-width: 1.25px; vector-effect: non-scaling-stroke; }.tide-veil-note { position: absolute; left: 16px; right: 16px; top: calc(50% + var(--ring) / 2 + 2.6rem + var(--title-size) * var(--mark-scale)); margin: 0; text-align: center; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: opacity .4s ease; animation: tide-veil-in 1.2s .3s ease both; }.tide-veil[data-iris] .tide-veil-note { opacity: 0; }.tide-mark { position: absolute; z-index: 2; left: 50%; top: calc(50% + var(--ring) / 2 + 1.5rem); margin: 0; white-space: nowrap; pointer-events: none; transform: translateX(-50%) scale(var(--mark-scale)); transform-origin: 50% 0; animation: tide-veil-in 1.2s .15s ease both; }.tide-pool[data-titled] .tide-mark { visibility: hidden; }.tide-pool:not([data-titled]) .tide-heading h1 { opacity: 0; }/* Under the veil the instruments wait; they come in as the view opens. */.tide-pool[data-veiled] :is(.tide-heading p, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker, .tide-status, .tide-inspect, .tide-settings) { opacity: 0; pointer-events: none; }.tide-pool[data-arriving] :is(.tide-heading p, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker) { transition: opacity 1s ease 1.8s; }@keyframes tide-veil-in { from { opacity: 0; } }@keyframes tide-bob { from { transform: translateY(-3%); } to { transform: translateY(3%); } }@keyframes tide-swell { to { transform: translateX(-50%); } }
/* Readout: clock, tide and census, set as a hairline table. */.tide-hud { position: absolute; z-index: 3; top: 76px; right: clamp(16px, 3.4vw, 56px); width: 244px; }.tide-clock { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }.tide-clock div { padding: .5rem 0 .55rem; }.tide-clock div + div { padding-left: .7rem; border-left: 1px solid var(--line); }.tide-clock dd { margin: .2rem 0 0; font-variant-numeric: tabular-nums; font-size: .92rem; }/* The map: the whole shelf, set under the clock like another row of the table. */.tide-map { display: block; width: 100%; aspect-ratio: 128 / 88; border-top: 1px solid var(--line); cursor: crosshair; touch-action: none; }.tide-pool[data-map="off"] .tide-map { display: none; }.tide-census { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.tide-census summary { display: flex; justify-content: space-between; align-items: center; min-height: 36px; cursor: pointer; list-style: none; }.tide-census summary::-webkit-details-marker { display: none; }.tide-census summary::after { content: '+'; font-size: .8rem; letter-spacing: 0; }.tide-census[open] summary::after { content: '−'; }.tide-census[open] { padding-bottom: .4rem; background: #0b0a0cc8; }#tide-chart { display: block; width: 100%; height: 56px; border-bottom: 1px solid var(--line); }.tide-census ul { list-style: none; margin: 0; padding: 0; }.tide-census button { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; width: 100%; min-height: 30px; padding: 0; background: none; border: 0; border-bottom: 1px solid #1f1d21; color: #cfc8d3; text-align: left; font-size: .78rem; }.tide-census button:hover:not(:disabled), .tide-census button[aria-current="true"] { color: #fff; }.tide-census button[aria-current="true"] .tide-code { color: var(--accent); }.tide-code { font-size: .66rem; letter-spacing: .12em; color: var(--muted); }.tide-count { font-variant-numeric: tabular-nums; }
/* The specimen sheet for a followed machine. */.tide-inspect { position: absolute; z-index: 3; right: clamp(16px, 3.4vw, 56px); bottom: 150px; width: 244px; padding: .9rem 1rem 1rem; background: var(--panel); border: 1px solid var(--line); }.tide-inspect[hidden] { display: none; }.tide-inspect h2 { margin: .25rem 0 .7rem; font: 400 1.9rem/1 var(--site-font-display); letter-spacing: .02em; }/* A quiet cross in the corner, with a full-size touch target; the heading keeps clear of it. */.tide-inspect header { padding-right: 2rem; }#tide-inspect-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; color: var(--muted); background: none; border: 0; font-size: 1.15rem; line-height: 1; }#tide-inspect-close:hover { color: #e5e0e8; }#tide-inspect-close:focus-visible { outline-offset: -4px; }.tide-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .8rem; margin: 0 0 .8rem; }.tide-facts dd { margin: .15rem 0 0; font-size: .82rem; font-variant-numeric: tabular-nums; }.tide-meter { height: 6px; background: #1e1c20; }.tide-meter span { display: block; height: 100%; width: 50%; background: var(--accent); }.tide-energy { margin: .35rem 0 .7rem; font-size: .7rem; color: var(--muted); }.tide-goal { margin: 0; font-size: .9rem; line-height: 1.45; }.tide-carrying { margin: .3rem 0 0; font-size: .75rem; color: var(--muted); }.tide-carrying:empty { display: none; }.tide-log { list-style: none; margin: .75rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); font-size: .72rem; line-height: 1.5; color: #b9b1bd; max-height: 5.5em; overflow: hidden; }.tide-log:empty { display: none; }.tide-log time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .45rem; }.tide-inspect-actions { display: flex; gap: 0; margin-top: .9rem; }.tide-inspect-actions button { flex: 1; min-height: 40px; padding: .4rem .6rem; color: #ddd6e1; background: none; border: 1px solid var(--line); font-size: .76rem; }.tide-inspect-actions button + button { border-left: 0; }.tide-inspect-actions button[aria-pressed="true"] { color: #161019; background: var(--accent); border-color: var(--accent); }.tide-inspect.is-ended h2 { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Controls: a row of specimen tokens on dark glass. Navigation and playback sit quietly in the corners. */.tide-controls { position: absolute; z-index: 3; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }.tide-hint { margin: 0 0 .7rem; font-size: .74rem; color: #b3aab8; text-align: center; transition: opacity .8s; pointer-events: none; }.tide-hint span { color: #7d7582; }.tide-pool[data-engaged] .tide-hint, .tide-pool:has(.tide-status[data-news]) .tide-hint { opacity: 0; }.tide-tools { display: flex; gap: 2px; padding: 3px; background: #0a090cb3; border: 1px solid #262329; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }.tide-tools button { --glow: #d9d2dd; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem; color: #948b99; background: none; border: 0; font-size: .74rem; letter-spacing: .05em; transition: color .3s, box-shadow .3s, background .3s; }.tide-tools button:hover:not(:disabled) { color: #ddd6e1; }.tide-tools button[aria-pressed="true"] { color: var(--glow); background: #16131a; box-shadow: inset 0 -1px var(--glow), 0 10px 22px -16px var(--glow); }.tide-tools [data-tool="brass"] { --glow: #d6b980; }.tide-tools [data-tool="shell"] { --glow: #ebe2d2; }.tide-tools [data-tool="pebble"] { --glow: #b4b9b6; }.tide-tools [data-tool="feed"] { --glow: #b3a6c6; }.tide-token { width: 10px; height: 10px; flex-shrink: 0; opacity: .75; transition: opacity .3s, transform .3s; }.tide-tools button[aria-pressed="true"] .tide-token { opacity: 1; transform: scale(1.2); }.tide-look { border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; }.tide-brass { background: linear-gradient(135deg, #e6cc92, #8f774c); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }.tide-shell { background: linear-gradient(#f0e8da, #b9ad98); border-radius: 50% 50% 15% 15%; height: 7px; }.tide-pebble { background: #8a8f8c; border-radius: 45% 55% 50% 40%; height: 8px; }.tide-feed { background: radial-gradient(circle, #cbbfdc 0 1.2px, transparent 1.6px) 0 0 / 5px 5px; }
.tide-nav, .tide-utility { position: absolute; z-index: 3; bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .6rem; }.tide-nav { right: clamp(16px, 3.4vw, 56px); }.tide-utility { left: clamp(16px, 3.4vw, 56px); gap: 0; }.tide-nav button, .tide-utility button { min-height: 44px; background: none; border: 0; color: #7f7784; }.tide-nav button:hover:not(:disabled), .tide-utility button:hover:not(:disabled) { color: #e5e0e8; }.tide-basins, .tide-zoom, .tide-machines { display: flex; align-items: center; }.tide-machines { padding-right: .3rem; border-right: 1px solid #2a272d; }.tide-machines span { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #5f5963; }.tide-machines button { min-width: 30px; padding: 0 .3rem; font-family: var(--site-font-display); font-size: 1.1rem; }.tide-compass { display: grid; place-items: center; width: 44px; padding: 0; }.tide-compass svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; transition: none; }.tide-compass path { fill: var(--accent); stroke: none; }.tide-compass .tide-compass-tail { fill: currentColor; opacity: .5; }.tide-basins button, .tide-zoom button { min-width: 30px; padding: 0 .3rem; font-family: var(--site-font-display); font-size: .95rem; }.tide-basins button[aria-current="true"] { color: #fff; box-shadow: inset 0 -1px var(--accent); }.tide-zoom { border-left: 1px solid #2a272d; padding-left: .3rem; }.tide-utility button { padding: 0 .7rem 0 0; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }.tide-utility button + button { padding-left: .7rem; border-left: 1px solid #2a272d; }.tide-utility button:is([aria-pressed="true"], [aria-expanded="true"]) { color: #e5e0e8; }
/* Settings: a small sheet over the playback corner, with the keys beneath the choices. */.tide-settings { position: absolute; z-index: 4; left: clamp(16px, 3.4vw, 56px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 54px); width: 300px; max-height: calc(100svh - 150px); overflow-y: auto; box-sizing: border-box; padding: .9rem 1rem 1rem; background: #0c0b0d; border: 1px solid var(--line); }.tide-settings[hidden] { display: none; }.tide-settings header { position: relative; padding-right: 2rem; margin-bottom: .5rem; }#tide-settings-close { position: absolute; top: -.9rem; right: -1rem; width: 44px; height: 44px; padding: 0; color: var(--muted); background: none; border: 0; font-size: 1.15rem; line-height: 1; }#tide-settings-close:hover { color: #e5e0e8; }.tide-option { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .55rem 0; border-top: 1px solid #1f1d21; cursor: pointer; font-size: .74rem; line-height: 1.45; color: #9a949e; }.tide-option b { display: block; font-weight: 600; font-size: .8rem; color: #e5e0e8; }.tide-option input { width: 16px; height: 16px; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }.tide-option input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }.tide-keys { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); }.tide-keys dl { margin: .5rem 0 0; }.tide-keys div { display: grid; grid-template-columns: 4.4rem 1fr; gap: .6rem; padding: .28rem 0; font-size: .72rem; line-height: 1.4; }.tide-keys dt { color: #e5e0e8; font-variant-numeric: tabular-nums; white-space: nowrap; }.tide-keys dd { margin: 0; color: #9a949e; }.tide-keys p { margin: .6rem 0 0; font-size: .72rem; line-height: 1.45; color: #9a949e; }/* Wide screens set the keys beside the choices, so the sheet stays low. */@media (min-width: 900px) and (pointer: fine) { .tide-settings { display: grid; grid-template-columns: 250px 1fr; column-gap: 1.4rem; width: 620px; } .tide-settings header { grid-column: 1 / -1; } .tide-option { grid-column: 1; } .tide-keys { grid-column: 2; grid-row: 2 / span 4; margin-top: 0; padding-top: .55rem; border-top: 1px solid #1f1d21; }}/* A touch screen has no keys or resting mouse to set up. */@media (pointer: coarse) { .tide-keys, .tide-option:has([data-option="edge"]) { display: none; } }
.tide-status { position: absolute; left: 16px; right: 16px; bottom: 100px; text-align: center; margin: 0; font-size: .72rem; color: #b8aabf; pointer-events: none; transition: opacity .6s; }.tide-pool[data-ready]:not([data-engaged]) .tide-status:not([data-news]) { opacity: 0; }.tide-ticker { position: absolute; z-index: 2; left: clamp(16px, 3.4vw, 56px); bottom: 76px; width: min(300px, calc(50% - 300px)); margin: 0; padding: 0; list-style: none; font-size: .7rem; line-height: 1.55; color: #8d8592; pointer-events: none; }.tide-ticker li { transition: opacity 1s; }.tide-caption { position: absolute; z-index: 2; left: 50%; bottom: clamp(28px, 7svh, 72px); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); margin: 0; text-align: center; font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.5; color: #eee7f1; text-shadow: 0 1px 12px #000c, 0 0 2px #000; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }.tide-pool[data-idle] .tide-caption.is-shown { opacity: .92; }.tide-caption.is-changing { opacity: 0 !important; transition-duration: .6s; }.tide-ticker time { font-variant-numeric: tabular-nums; color: #5f5963; margin-right: .5rem; }
.tide-notes { position: absolute; z-index: 5; top: 20px; right: clamp(16px, 3.4vw, 56px); max-width: min(400px, calc(100% - 32px)); font-size: .8rem; color: #c7bdce; }.tide-notes summary { display: block; min-height: 44px; padding: .7rem 0; box-sizing: border-box; cursor: pointer; text-align: right; }.tide-notes[open] { padding: 0 1rem 1rem; background: #111013f7; border: 1px solid var(--line); max-height: calc(100svh - 60px); overflow-y: auto; }.tide-notes[open] summary { margin-bottom: .6rem; }.tide-notes p, .tide-notes li { line-height: 1.65; margin: .6rem 0; }.tide-species { padding: 0; list-style: none; border-top: 1px solid var(--line); }.tide-species li { margin: 0; padding: .45rem 0; border-bottom: 1px solid #1f1d21; }.tide-species b { font-weight: 600; color: #eee7f1; }.tide-notes summary::after { content: ' +'; }.tide-notes[open] summary::after { content: ' −'; }#tide-describe { min-height: 44px; padding: .5rem .9rem; color: #ddd6e1; background: #0d0b10; border: 1px solid var(--line); font-size: .8rem; }#tide-description:empty { display: none; }
/* When nobody is touching it, the instruments fade and the shelf has the screen to itself. */.tide-heading, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker, .tide-inspect, .tide-notes, .tide-settings { transition: opacity .5s ease; }.tide-pool[data-idle] :is(.tide-heading, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker, .tide-status, .tide-inspect, .tide-notes, .tide-settings) { opacity: 0; pointer-events: none; transition-duration: 2.2s; }@media (prefers-reduced-motion: reduce) { .tide-heading, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker, .tide-inspect, .tide-notes { transition: none; } .tide-veil-bob, .tide-veil-swell { animation: none; } .tide-veil-level { transition: none; } .tide-pool[data-arriving] :is(.tide-heading p, .tide-hud, .tide-controls, .tide-nav, .tide-utility, .tide-ticker) { transition: none; }}
@media (max-width: 1100px) { .tide-ticker { display: none; }}@media (max-height: 860px) and (min-width: 721px) { .tide-pool:has(.tide-inspect:not([hidden])) .tide-map { display: none; }}/* Mid widths: the corner strips sit above the token strip instead of beside it. */@media (max-width: 1080px) and (min-width: 721px) { .tide-nav, .tide-utility { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 58px); } .tide-settings { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 112px); } .tide-hint { margin-bottom: 3.9rem; } .tide-status { bottom: 136px; }}@media (max-width: 720px) { .tide-heading { top: max(8px, env(safe-area-inset-top)); } .tide-pool { --title-size: 2.3rem; --mark-scale: 1; } .tide-heading h1 { margin-top: .1rem; } .tide-heading p { display: none; } .tide-notes { top: 8px; right: 16px; } .tide-hud { top: calc(max(8px, env(safe-area-inset-top)) + 92px); left: 16px; right: auto; width: auto; } .tide-clock { grid-template-columns: repeat(3, auto); justify-content: start; border: 0; } .tide-clock div { padding: 0 .9rem 0 0; } .tide-clock div + div { padding-left: .9rem; } .tide-census, .tide-map, .tide-option:has([data-option="map"]) { display: none; } .tide-settings { left: 12px; right: 12px; width: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 104px); } .tide-inspect { left: 16px; right: 16px; width: auto; bottom: 150px; padding: .7rem .8rem .8rem; } .tide-inspect h2 { font-size: 1.5rem; margin-bottom: .45rem; } .tide-facts { grid-template-columns: repeat(4, auto); gap: .3rem .9rem; margin-bottom: .6rem; } .tide-log { display: none; } .tide-inspect-actions { margin-top: .6rem; } .tide-controls { left: 12px; right: 12px; transform: none; bottom: max(12px, env(safe-area-inset-bottom)); } .tide-tools { width: 100%; box-sizing: border-box; } .tide-tools button { flex: 1; justify-content: center; padding: .4rem .2rem; font-size: .68rem; gap: .35rem; } .tide-nav, .tide-utility { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px); } .tide-nav { right: auto; left: 8px; bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 128px); gap: .2rem; } .tide-utility { left: 12px; } .tide-zoom { display: none; } .tide-basins button { min-width: 30px; font-size: .85rem; } .tide-utility button { font-size: .58rem; letter-spacing: .1em; padding-right: .45rem; } .tide-utility button + button { padding-left: .45rem; } .tide-hint { margin-bottom: 3.6rem; font-size: .7rem; } .tide-hint span { display: none; } .tide-status { bottom: 112px; font-size: .66rem; } .tide-pool:has(.tide-inspect:not([hidden])) .tide-status { display: none; }}@media (max-width: 360px) { #tide-reset { display: none; }}@media (max-height: 620px) and (min-width: 721px) { .tide-pool { min-height: 420px; --title-size: 2.2rem; --mark-scale: .9; } .tide-heading p { display: none; } .tide-hud { top: 60px; } .tide-inspect { bottom: 90px; } .tide-log { display: none; } .tide-status { bottom: 84px; }}/* Short windows at mid widths: the sheet stays above the raised corner strips too, where there is room for it. */@media (max-height: 620px) and (min-height: 540px) and (max-width: 1080px) and (min-width: 721px) { .tide-inspect { bottom: 136px; }}
/* Each kind's colour, as its eyes show it on the shelf. */.tide-census [data-species] .tide-code::before { content: ''; display: inline-block; width: .45em; height: .45em; margin-right: .45em; border-radius: 50%; vertical-align: .1em; background: var(--kind); }[data-species="scraper"] { --kind: #a8e0d0; } [data-species="tab"] { --kind: #bfe6f2; } [data-species="pylon"] { --kind: #f2dcae; } [data-species="collector"] { --kind: #f0cf86; }[data-species="mason"] { --kind: #f0b49a; } [data-species="breaker"] { --kind: #f08c98; } [data-species="borer"] { --kind: #e0bd86; } [data-species="artificer"] { --kind: #cdb9ff; }