/* Real interfaces give the projects their own visual character without changing Ailyre's palette. */
.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.work-feature{grid-row:auto}.work-small{display:block}.work-small .work-copy,.work-copy{padding:23px}.work-art,.work-mini-art{height:254px;min-height:0;border:0;border-bottom:1px solid #d7e1e6;display:block}.work-small h3,.work-copy h3{font-size:28px}.work-small .work-tagline,.work-tagline{font-size:15px}.work-small .work-description,.work-description{font-size:13px}
.project-gallery{position:relative;padding:14px;background:linear-gradient(135deg,#e7edf4,#f2f6fa);overflow:hidden}.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font:9px/1.4 ui-monospace,monospace;letter-spacing:.8px;color:#7a8da3}.gallery-play{border:0;border-radius:99px;background:#ffffff77;padding:5px 9px;font-size:10px;color:#73899e;cursor:pointer}.gallery-screen{display:block;width:100%;height:176px;position:relative;padding:0;border:1px solid #cfdce6;border-radius:8px;overflow:hidden;background:#f6f9fc;cursor:zoom-in}.gallery-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .3s}.gallery-expand{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ffffffdd;color:#637c94;font-size:14px}.gallery-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.gallery-tabs button{padding:4px 8px;background:transparent;border:1px solid transparent;border-radius:99px;color:#8295a5;font-size:10px;cursor:pointer}.gallery-tabs button[aria-pressed=true]{border-color:#c9d6df;background:#f9fbfd;color:#3d5c78}
.projects-list .project-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);gap:35px;align-items:center}.projects-list .project-gallery{border:1px solid #dae3e9;border-radius:13px;padding:16px}.projects-list .gallery-screen{height:300px}.project-gallery[data-project=tokenclock]{background:linear-gradient(135deg,#e4eee7,#f2f5ef)}.project-gallery[data-project=tokenclock] .gallery-screen img{object-fit:contain}.projects-list .project-card[data-repo=TokenClock]{background:linear-gradient(110deg,#fff,#f5f8f2)}.projects-list .project-card[data-repo=MuxLM]{background:linear-gradient(110deg,#fff,#f8f4ed)}
.demo-eyebrow{font:9px/1.5 ui-monospace,monospace;letter-spacing:1px;color:#7b9384}.demo-note{font-size:10px;line-height:1.6;color:#819586;margin:8px 0 0}.token-demo{padding:13px 16px;background:radial-gradient(circle at 50% 25%,#f5faf5,#e2ede5);overflow:hidden}.token-demo-layout{height:187px;display:flex;align-items:center;justify-content:center;gap:9px}.demo-clock{position:relative;width:178px;height:178px;flex:none;padding:0;border:1px solid #c5d8cb;background:linear-gradient(145deg,#ffffff90,#c6dacb55);box-shadow:inset 0 0 25px #ffffff55,0 5px 13px #40634d0e;border-radius:50%;cursor:pointer;color:#365c4b}.demo-clock svg{position:absolute;inset:0;width:100%;height:100%}.clock-token-number{position:absolute;top:108px;left:0;width:100%;text-align:center;font:600 21px/1.3 ui-monospace,monospace;color:#40634d}.clock-token-label{position:absolute;top:137px;left:20px;right:20px;font-size:7px;line-height:1.5;color:#668773}.clock-usage{font-size:9px;color:#557662;min-width:91px;max-width:110px}.clock-usage[hidden]{display:none}.clock-usage>div{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid #cbdad0}.clock-usage b{font-weight:500}.clock-usage span{font:12px ui-monospace,monospace}.clock-usage p{font-size:8px;line-height:1.6}.token-demo-layout:has(.clock-usage:not([hidden])) .demo-clock{width:143px;height:143px}.token-demo-layout:has(.clock-usage:not([hidden])) .clock-token-number{top:88px;font-size:17px}.token-demo-layout:has(.clock-usage:not([hidden])) .clock-token-label{top:110px;font-size:6px}
.mux-demo{background:linear-gradient(135deg,#f3eee3,#ebe6dc);padding:17px 16px;display:block;color:#826a44}.mux-demo .demo-eyebrow{color:#9b8766}.mux-choices{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.mux-choices button{border:1px solid #d7cdbb;background:transparent;color:#9b8663;border-radius:6px;padding:5px 7px;font:10px/1.5 ui-monospace,monospace;cursor:pointer}.mux-choices button[aria-pressed=true]{background:#faf7ef;color:#755d34;border-color:#bda579}.demo-terminal{font:15px/1.8 ui-monospace,monospace;min-height:111px;border:1px solid #ddd4c4;border-radius:9px;padding:13px 10px;background:#fffcf566;overflow-wrap:anywhere}.terminal-prompt{color:#ac9774}.terminal-caret{color:#b08846}.terminal-result{font:10px/1.7 ui-monospace,monospace;color:#8c7f65;margin:12px 0 0;min-height:32px}.mux-demo .demo-note{color:#99876c;font-size:9px}.projects-list .mux-demo{border:1px solid #e0d8c9;border-radius:12px;min-height:240px;padding:22px}.projects-list .demo-terminal{min-height:140px;font-size:20px}
.project-image-dialog{padding:15px;border:1px solid #d6e2e8;border-radius:15px;background:#f4f7f9;width:min(1120px,94vw);max-height:94svh;box-shadow:0 20px 80px #1a334b44;color:#647e96}.project-image-dialog::backdrop{background:#223a5166;backdrop-filter:blur(5px)}.project-image-dialog>img{display:block;max-width:100%;max-height:none;width:auto;height:auto;margin:auto;object-fit:contain}.project-image-dialog>button{position:sticky;top:0;float:right;width:34px;height:34px;margin-bottom:-34px;border:1px solid #ccd9e3;border-radius:50%;background:#fff;color:#657e94;font-size:23px;cursor:pointer;z-index:2}.project-image-dialog>p{text-align:center;font-size:12px;margin:10px 0 0}
@media(max-width:1100px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-feature{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.work-feature .work-art{height:100%;min-height:300px;border-bottom:0;border-right:1px solid #d6e1e9}.work-feature .gallery-screen{height:230px}.projects-list .project-body{grid-template-columns:minmax(0,1fr);gap:25px}.projects-list .gallery-screen{height:320px}}
@media(max-width:650px){.work-grid{grid-template-columns:minmax(0,1fr)}.work-feature{display:block;grid-column:auto}.work-feature .work-art{height:254px;min-height:0;border-right:0;border-bottom:1px solid #d6e1e9}.work-feature .gallery-screen{height:176px}.work-art,.work-mini-art{height:254px}.projects-list .project-body{gap:20px}.projects-list .gallery-screen{height:240px}.projects-list .project-gallery{padding:10px}.projects-list .project-card{padding-right:20px}.project-image-dialog{padding:10px}}
@media(prefers-reduced-motion:reduce){.gallery-screen img{transition:none}}
@media(max-width:360px){.token-demo-layout:has(.clock-usage:not([hidden])) .demo-clock{width:124px;height:124px}.token-demo-layout:has(.clock-usage:not([hidden])) .clock-token-number{top:75px;font-size:15px}.token-demo-layout:has(.clock-usage:not([hidden])) .clock-token-label{top:96px;font-size:6px}.clock-usage{min-width:80px;max-width:90px}}

.token-demo{position:relative}.clock-menu-preview{position:absolute;right:13px;top:7px;border:0;background:transparent;color:#648471;font-size:22px;line-height:1;cursor:pointer;padding:4px}