dialog.work-display{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));box-sizing:border-box;background:transparent;color:#fff;box-shadow:none;overflow:auto;outline:none}
dialog.work-display[open]{display:grid;place-items:center}
dialog.work-display:not([open]){display:none}
dialog.work-display::backdrop{background:transparent;backdrop-filter:blur(9px) grayscale(1);-webkit-backdrop-filter:blur(9px) grayscale(1)}
.work-display .work-content{display:grid;justify-items:center;align-content:center;gap:24px;width:min(100%,620px);text-align:center;padding:12px 0}
.work-display .work-brand{max-width:100%;font-size:22px;font-weight:700}
.work-display .work-brand img{display:block;max-width:min(220px,65vw);max-height:100px;width:auto;height:auto;object-fit:contain;filter:none;opacity:1}
.work-display h2{margin:0;color:#8bf4d2;font:600 clamp(28px,6vw,44px)/1.15 system-ui,sans-serif;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.work-display p{max-width:38ch;margin:16px auto 0;color:#f2f6f7;font:400 clamp(16px,3.8vw,19px)/1.55 system-ui,sans-serif;text-wrap:balance;overflow-wrap:anywhere}
.work-orbit{position:relative;width:76px;height:76px}
.work-orbit span{position:absolute;inset:0;border:2px solid transparent;border-top-color:#8bf4d2;border-right-color:#8bf4d240;border-radius:50%;animation:work-orbit 1.6s linear infinite}
.work-orbit span:nth-child(2){inset:10px;border-top-color:#c8adff;border-right-color:#c8adff40;animation-direction:reverse;animation-duration:2.2s}
.work-orbit span:nth-child(3){inset:22px;background:#f7cc79;border:0;animation:work-breathe 1.8s ease-in-out infinite}
.work-activity{width:70px;height:3px;border-radius:3px;background:linear-gradient(90deg,#8bf4d2,#c8adff,#f7cc79);animation:work-breathe 1.8s ease-in-out infinite}
.work-display[data-tone="light"] h2{color:#14664f}
.work-display[data-tone="light"] p,.work-display[data-tone="light"] .work-brand{color:#203d34}
.work-display[data-tone="light"] .work-orbit span{border-top-color:#16856d;border-right-color:#16856d40}
.work-display[data-tone="light"] .work-orbit span:nth-child(2){border-top-color:#8652bf;border-right-color:#8652bf40}
.work-display[data-tone="light"] .work-orbit span:nth-child(3){background:#c88c26}
.work-display[data-tone="light"] .work-activity{background:linear-gradient(90deg,#16856d,#8652bf,#c88c26)}
/* Opposing light/dark edges keep colorful text legible even when artwork
   crosses behind a line. They affect the lettering, never wash out the page. */
.work-display h2{paint-order:stroke fill;-webkit-text-stroke:3px #10231d;text-shadow:0 0 3px #10231d,0 2px 7px #10231d}
.work-display p,.work-display .work-brand:not(:has(img)){paint-order:stroke fill;-webkit-text-stroke:2px #10231d;text-shadow:0 1px 4px #10231d}
.work-display[data-tone="light"] h2{color:#07553f;-webkit-text-stroke:3px #fff;text-shadow:0 0 3px #fff,0 2px 7px #fff}
.work-display[data-tone="light"] p,.work-display[data-tone="light"] .work-brand:not(:has(img)){color:#142b22;-webkit-text-stroke:2px #fff;text-shadow:0 1px 4px #fff}
@keyframes work-orbit{to{transform:rotate(360deg)}}
@keyframes work-breathe{50%{transform:scale(.8);opacity:.55}}
@media(prefers-reduced-motion:reduce){.work-orbit span,.work-activity{animation:none}}
@media(max-height:520px){.work-display .work-content{gap:14px}.work-display .work-brand img{max-height:65px}.work-orbit{width:52px;height:52px}.work-orbit span:nth-child(3){inset:18px}}