:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#f7f7f5;--center:#fff;--ink:#27292d;--muted:#67696e;--subtle:#6e7075;--line:#d5d6d6;--hover:#25282d08;--metal-a:#8a9095;--metal-b:#fafafa;color:var(--ink);background:var(--bg);color-scheme:light;font-synthesis:none;font-weight:400;-webkit-font-smoothing:antialiased}
:root[data-theme=dark]{--bg:#101113;--center:#1b1c20;--ink:#e6e6e8;--muted:#a0a2a8;--subtle:#858890;--line:#3b3e44;--hover:#ffffff08;--metal-a:#474d57;--metal-b:#d1d5df;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%}
body{background:radial-gradient(ellipse at 50% 42%,var(--center),var(--bg) 68%);transition:background-color .35s,color .35s}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.page{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:110px 1fr 96px;position:relative;overflow:hidden}
.masthead{display:flex;align-items:center;justify-content:center;z-index:2;position:relative}
.masthead h1{font:inherit;margin:0}
.wordmark{display:inline-flex;align-items:baseline;font-size:16px;letter-spacing:-.55px;font-weight:580;padding:12px}
.wordmark>span:first-child{font-weight:380}
.brand-dot{display:block;width:4px;height:4px;border-radius:50%;background:var(--subtle);margin-left:5px;align-self:center;margin-top:2px}
main{display:grid;place-items:center;min-height:0}
.exhibit{width:100%;display:flex;align-items:center;flex-direction:column;position:relative;margin-top:-18px}
.halo{position:absolute;top:13%;left:50%;width:min(65vw,700px);height:60%;transform:translateX(-50%);background:radial-gradient(ellipse,#9099a008,transparent 65%);pointer-events:none}
.sculpture{width:min(690px,86vw);height:min(55vh,580px);min-height:260px;position:relative;touch-action:none;user-select:none}
#art{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .65s ease;cursor:grab;touch-action:none}
#art.ready{opacity:1}
#art:active{cursor:grabbing}
#art.morphing{cursor:crosshair}
#art:focus-visible{outline:none}
.sculpture:has(#art:focus-visible)+.interaction-hint{text-decoration:underline;text-underline-offset:5px;color:var(--ink)}
.fallback{position:absolute;left:50%;top:50%;width:53%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-25deg);pointer-events:none}
.fallback div{position:absolute;inset:8%;border-radius:46% 54% 47% 53%;background:conic-gradient(from 25deg,var(--metal-a),var(--metal-b) 17%,#b9bec2 27%,#707780 42%,#e1e3e4 55%,#90969c 69%,var(--metal-b) 84%,var(--metal-a));box-shadow:inset 0 0 14px 3px #ffffff26;mask:radial-gradient(ellipse at 48% 52%,transparent 28%,#000 30%,#000 69%,transparent 71%)}
.sculpture.rendered .fallback,.sculpture.booting .fallback{opacity:0;visibility:hidden}
.loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.loader span{width:20px;height:20px;border:1px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .9s linear infinite,appear .3s .15s both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes appear{from{opacity:0}to{opacity:1}}
.interaction-hint{font-size:10px;letter-spacing:.035em;color:var(--subtle);margin:0;line-height:20px;user-select:none;position:relative;z-index:2;pointer-events:none;text-align:center;max-width:94vw}
.interaction-hint.morphing .morph-hint{display:none}
.touch-hint{display:none}
.contact{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:18px;position:relative;z-index:2;font-size:12px;letter-spacing:.015em;color:var(--muted)}
.contact a{padding:14px 0;transition:color .2s;white-space:nowrap;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.contact a:hover{color:var(--ink)}
.contact a>span[aria-hidden]{display:inline-block;margin-left:6px;color:var(--subtle);font-size:14px;transition:transform .2s,color .2s}
.contact a:hover>span[aria-hidden]{transform:translate(2px,-2px);color:var(--ink)}
.contact-divider{height:11px;width:1px;background:var(--line)}
.contact:has(#email-link[hidden]) .contact-divider{display:none}
.footer{position:relative;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.footer button{pointer-events:auto}
.forms{display:flex;gap:1px}
.scene-picker{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-width:82px;height:44px;color:var(--subtle);font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em;pointer-events:auto;border-radius:22px}
.scene-picker:hover{background:var(--hover);color:var(--ink)}
.scene-picker svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1}
.scene-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit}
.scene-picker:has(select:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.forms button:disabled,.scene-picker:has(select:disabled){opacity:.4;cursor:wait}
.form,.icon-button{border:0;background:transparent;color:var(--subtle);display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:50%;transition:color .2s,background .2s}
.form:hover,.icon-button:hover{background:var(--hover);color:var(--ink)}
.morph{font-size:10px;letter-spacing:.015em}
.morph[aria-pressed=true]{background:var(--hover);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.form span{width:4px;height:4px;background:var(--subtle);border-radius:50%;position:relative;transition:background .5s}
.form span:after{content:"";position:absolute;inset:-5px;border:1px solid var(--subtle);border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s}
.form.active span{background:var(--ink)}
.form.active span:after{opacity:.7;transform:scale(1)}
.art-actions{position:absolute;right:28px;display:flex;gap:2px}
.theme{position:absolute;right:28px}
.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.play-icon,.sun-icon{display:none}
.pause[aria-pressed=true] .pause-icon{display:none}
.pause[aria-pressed=true] .play-icon{display:block}
[data-theme=dark] .sun-icon{display:block}
[data-theme=dark] .moon-icon{display:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.sculpture{width:780px;height:610px}.contact{margin-top:24px}}
@media(max-width:600px){.page{grid-template-rows:88px 1fr 80px}.wordmark{font-size:15px}.exhibit{margin-top:-22px}.sculpture{width:100vw;height:min(52svh,500px);min-height:235px}.contact{flex-direction:column;gap:0;font-size:11px;margin-top:12px}.contact-divider{display:none}.contact a{padding:10px 0;min-height:36px}.theme,.art-actions{right:12px}.footer .forms{position:absolute;left:12px}.morph-hint{display:none}}
@media(max-width:340px){.theme,.art-actions{right:8px}.footer .forms{left:8px}.forms,.art-actions{gap:0}}
@media(pointer:coarse){.mouse-hint,.morph-hint{display:none}.touch-hint{display:inline}}
@media(max-height:620px) and (min-width:601px){.page{grid-template-rows:68px 1fr 64px}.sculpture{height:55svh;min-height:200px}.exhibit{margin:0}.contact{margin-top:0}.footer{height:64px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Pattern exhibit: an unframed, feathered field of living micro-geometry. */
.scene-caption{display:flex;gap:18px;align-items:center;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);position:relative;z-index:2;pointer-events:none;margin-bottom:8px}
#scene-number{font-size:8px;opacity:.65;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sculpture{width:min(920px,90vw);height:min(57vh,620px);min-height:260px}
.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;aspect-ratio:auto;transform:none;mask:radial-gradient(ellipse,#000 30%,transparent 72%);mix-blend-mode:multiply;pointer-events:none}
[data-theme=dark] .fallback{filter:invert(1);mix-blend-mode:screen}
#art.scattering{cursor:crosshair}
.text-button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:var(--subtle);height:44px;padding:0 12px;font:inherit;font-size:10px;cursor:pointer;border-radius:22px;transition:color .2s,background .2s}
.text-button:hover,.text-button[aria-pressed=true]{color:var(--ink);background:var(--hover)}
.text-button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}
.text-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1}
.footer{justify-content:space-between;padding:0 36px}
.art-actions{position:static}
@media(min-width:1600px){.sculpture{width:1000px;height:650px}}
@media(max-width:600px){.sculpture{width:100vw;height:min(48svh,430px);min-height:235px}.scene-caption{margin-bottom:0;font-size:8px}.footer{padding:0 10px}.footer .forms{position:static}.art-actions{gap:0}.text-button{padding:0 9px}.icon-button{width:38px}.form{width:34px}.interaction-hint{font-size:9px}.scene-caption{gap:12px}}
@media(max-width:340px){.footer{padding:0 6px}.text-button{padding:0 7px}.form{width:30px}.icon-button{width:34px}#pattern svg{display:none}}
@media(max-width:600px){.form,.icon-button{width:44px;min-width:44px}.text-button{min-width:54px;padding:0 10px}.footer{gap:8px}}
@media(max-width:370px){.page{grid-template-rows:80px 1fr 100px}.footer{flex-direction:column;justify-content:center;gap:0;padding:0 8px}.footer .forms{position:static}.art-actions{gap:2px}#pattern svg{display:block}.sculpture{height:42svh}.exhibit{margin-top:0}.scene-caption{margin-bottom:4px}}
@media(max-width:600px){.page{grid-template-rows:80px 1fr 100px}.footer{flex-direction:column;justify-content:center;gap:0}.footer .forms{position:static}.art-actions{gap:2px}}