Something went wrong. Try again.
a playable wind chime, rung by new records across atproto chimes.waow.tech
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582/* the sky is the interface. everything here is small lowercase text floating on it — no boxes, no cards; the two sheets are the only surfaces. */
:root { --accent: #6e8a48; /* set from the scene each frame */ --ink: #2b3138; --ink-soft: rgba(43, 49, 56, 0.6); --sheet: #fbfaf7; --raise: rgba(43, 49, 56, 0.05); --line: rgba(43, 49, 56, 0.14); --pad: 18px;}
:root[data-dark="true"] { --ink: #e9ecef; --ink-soft: rgba(233, 236, 239, 0.66); --sheet: #232834; --raise: rgba(233, 236, 239, 0.06); --line: rgba(233, 236, 239, 0.18);}
* { box-sizing: border-box;}
html,body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #eeeade; color: var(--ink); font: 14px/1.6 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased;}
button,select,input { font: inherit; color: inherit; touch-action: manipulation;}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;}
/* a breath of grain so the gradients read as air, not vector fill */body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
/* ---- corners: four small pieces of text, nothing else ---- */
#bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: baseline; gap: 14px; padding: calc(env(safe-area-inset-top) + 16px) var(--pad) 0; pointer-events: none;}
#bar > * { pointer-events: auto;}
.brand { font-weight: 600; letter-spacing: 0.01em;}
#wind { margin-right: auto; display: inline-flex; align-items: baseline; gap: 7px; color: var(--ink-soft);}
#status { transition: opacity 0.8s ease;}
#rate { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.75;}
#status.swap { opacity: 0;}
.pill { border: none; background: none; padding: 8px 2px; color: var(--ink-soft); transition: color 0.25s ease;}
.pill:hover,.pill:focus-visible { color: var(--ink);}
/* ---- the door: words in the lower third, under the set, never over it ---- */
#overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; justify-items: center; gap: 10px; padding: 0 28px calc(env(safe-area-inset-bottom) + 9vh); text-align: center; pointer-events: none;}
#overlay > * { pointer-events: auto;}
#overlay[hidden] { display: none;}
.card { display: contents;}
.card h1 { display: none; /* the wordmark already lives in the corner */}
.card p { margin: 0; max-width: 30rem; color: var(--ink-soft);}
#door-phase { display: none;}
#hang { margin-top: 8px; border: none; background: none; padding: 10px 6px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--accent);}
.fine { margin: 0; font-size: 12px; color: var(--ink-soft);}
/* ---- sheets: the only two surfaces ---- */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 13px; max-height: 84dvh; overflow-y: auto; padding: 22px var(--pad) calc(env(safe-area-inset-bottom) + 20px); background: var(--sheet); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(103%); transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);}
.sheet.open { transform: none;}
.handle-bar { display: none;}
.sheet-head { display: flex; align-items: baseline; justify-content: space-between;}
hr { border: none; border-top: 1px solid var(--line); margin: 0; width: 100%;}
/* ---- controls: text first, hairlines only where a boundary is needed ---- */
.segmented { display: flex; gap: 2px;}
.segmented { padding: 3px; border-radius: 11px; background: var(--raise);}
.segmented button { flex: 1; min-height: 38px; border: none; background: none; border-radius: 8px; color: var(--ink-soft); transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;}
.segmented button[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 3px rgba(0, 0, 0, 0.12);}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
label { display: grid; gap: 4px; font-size: 13px;}
label > span { color: var(--ink-soft);}
label.row { grid-template-columns: 58px 1fr; align-items: center; gap: 12px;}
select,input[type="text"] { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); font-size: 14px; color: var(--ink);}
select:focus,input[type="text"]:focus { outline: none; border-bottom-color: var(--accent);}
.slider { grid-template-columns: 58px 1fr; align-items: center; gap: 12px;}
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent;}
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient( to right, var(--accent) var(--fill, 50%), var(--line) var(--fill, 50%) );}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--sheet); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);}
input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: linear-gradient( to right, var(--accent) var(--fill, 50%), var(--line) var(--fill, 50%) );}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--sheet); border-radius: 50%; background: var(--accent);}
.link { border: none; background: none; padding: 6px 2px; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px;}
.link:hover { color: var(--ink);}
.account { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;}
.publish-row { display: grid; gap: 4px; justify-items: center;}
.pill.wide,.pill.primary { padding: 10px 6px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent);}
.note { margin: 0; font-size: 12px; text-align: center; color: var(--ink-soft); min-height: 1em;}
.handle { font-size: 13px; color: var(--ink-soft);}
/* ---- sign in: type your name, tap your face ---- */
.signin { position: relative; width: 100%;}
.signin input { width: 100%;}
.ta-results { display: grid; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);}
.ta-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: none; background: none; text-align: left;}
.ta-row:hover,.ta-row.active { background: var(--raise);}
.ta-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--raise);}
.ta-who { display: grid; min-width: 0; font-size: 13px;}
.ta-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ta-handle { font-size: 12px; color: var(--ink-soft);}
/* ---- the garden ---- */
.garden { display: grid;}
.card-chime { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 2px; text-align: left; border: none; border-bottom: 1px solid var(--line); background: none;}
.card-chime.in-season .who strong { color: var(--accent);}
.swatch { width: 4px; height: 30px; border-radius: 999px; flex: none;}
.swatch.wood { background: #e8b184;}.swatch.bamboo { background: #c8e096;}.swatch.metal { background: #b3c4d4;}.swatch.glass { background: #96d4cd;}
.who { display: grid; flex: 1; min-width: 0;}
.who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.meta { font-size: 12px; color: var(--ink-soft);}
.mood { flex: none; font-size: 14px; color: var(--ink-soft);}
/* ---- desktop: sheets become a quiet column on the right ---- */
@media (min-width: 760px) { .sheet { left: auto; right: 0; top: 0; bottom: 0; width: 340px; max-height: none; border-radius: 0; border-top: none; border-left: 1px solid var(--line); transform: translateX(103%); } .sheet.open { transform: none; }}
@media (prefers-reduced-motion: reduce) { .sheet, #status { transition: none; }}
#scene:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }#playback[hidden] { display: none; }#overlay .fine { max-width: 290px; }
.activity { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 14px); left: 18px; z-index: 3; font-size: 12px; color: var(--ink-soft); }.activity summary { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }.activity summary::-webkit-details-marker { display: none; }.activity svg { overflow: hidden; }#activity-trace { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }#activity-baseline { stroke: var(--ink-soft); stroke-width: 0.6; stroke-dasharray: 2 4; opacity: .45; visibility: hidden; }.activity-detail { position: absolute; bottom: 46px; left: 0; width: min(360px, calc(100vw - 36px)); max-height: 65dvh; overflow: auto; padding: 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px #0002; }.activity-detail h2 { margin: 0; font-size: 14px; color: var(--ink); }.activity-detail p { margin: 12px 0; }.activity-detail a { color: var(--ink); text-underline-offset: 3px; }.activity[open] .activity-chevron { transform: rotate(180deg); }#overlay { padding-bottom: calc(env(safe-area-inset-bottom) + max(85px, 10vh)); }