/* A small composition workshop using the school's own palette. */
.design-playground{padding:12px 0 88px;background:#fff;color:#080051}
.playground-layout{display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:80px}
.playground-copy .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:21px}
.playground-copy h2{font-size:clamp(32px,3.3vw,46px);font-weight:600;line-height:1.1;letter-spacing:-1.7px}
.playground-copy h2>span{color:#F97113}
.playground-intro{color:#656566;max-width:395px;margin-top:21px;font-size:16px;line-height:1.7}
.playground-controls{margin-top:26px}
.playground-controls[hidden]{display:none}
.playground-modes{display:flex;flex-wrap:wrap;gap:8px}
.playground-mode{appearance:none;border:1px solid #deddda;color:#080051;background:white;border-radius:999px;padding:10px 17px;font:600 14px/1.3 Arial,"Helvetica Neue",sans-serif;min-height:42px;transition:background .2s,border-color .2s,color .2s}
.playground-mode:hover{border-color:#080051}
.playground-mode[aria-pressed="true"]{background:#080051;border-color:#080051;color:white}
.playground-mode:focus-visible,.playground-shuffle:focus-visible{outline:3px solid #F97113;outline-offset:4px}
.playground-note{font-size:14px;line-height:1.6;color:#656566;max-width:355px;min-height:68px;margin-top:18px}
.playground-shuffle{display:inline-flex;align-items:center;gap:9px;border:0;border-bottom:1px solid #080051;background:transparent;color:#080051;font-size:14px;font-weight:600;line-height:1.4;padding:4px 0 7px}
.playground-shuffle>span{font-size:24px;font-weight:400;line-height:1;display:inline-block;transition:transform .3s}
.playground-shuffle:hover>span{transform:rotate(75deg)}
.composition-poster{margin:0;border:1px solid #deddda;border-radius:16px;overflow:hidden;background:#f4f3fb;box-shadow:0 12px 28px #08005108;min-width:0;position:relative;isolation:isolate}
.poster-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 27px;padding:22px 0 17px;border-bottom:1px solid #08005122;font-size:9px;font-weight:600;letter-spacing:1.3px;line-height:1.3}
.poster-art{display:block;width:100%;height:auto;overflow:visible}
.poster-form{transform-origin:0 0;transition:transform .75s cubic-bezier(.22,.8,.2,1)}
.poster-form:nth-child(2){transition-delay:.025s}.poster-form:nth-child(3){transition-delay:.05s}.poster-form:nth-child(4){transition-delay:.075s}.poster-form:nth-child(5){transition-delay:.1s}.poster-form:nth-child(6){transition-delay:.125s}
.poster-footer{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 27px 25px}
.poster-word{font-size:clamp(34px,4.6vw,64px);font-weight:600;line-height:1;letter-spacing:-3px}
.poster-signature{font-size:8px;font-weight:600;letter-spacing:1px;line-height:1.5;position:relative;padding-right:21px;margin-bottom:2px}
.poster-signature>span{position:absolute;right:0;top:-3px;font-size:23px;font-weight:400;letter-spacing:0}
@media(max-width:1050px){.playground-layout{gap:40px}.playground-copy h2{font-size:35px}.playground-mode{padding:10px 13px}.poster-meta{margin:0 20px;font-size:8px}.poster-footer{padding:0 20px 22px}.poster-word{font-size:46px}.poster-signature{font-size:7px;letter-spacing:.5px}}
@media(max-width:760px){.design-playground{padding:0 0 58px}.playground-layout{grid-template-columns:1fr;gap:30px}.playground-copy{max-width:560px}.playground-copy .eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:16px}.playground-copy h2{font-size:34px;letter-spacing:-1.2px}.playground-copy h2 br{display:none}.playground-intro{margin-top:17px;max-width:500px;font-size:15px}.playground-controls{margin-top:22px}.playground-note{min-height:0;margin-bottom:15px;max-width:420px}.playground-mode{padding:10px 17px}.composition-poster{width:100%;max-width:520px;justify-self:center}.poster-meta{padding-top:18px;padding-bottom:14px;font-size:8px}.poster-footer{padding-bottom:23px}.poster-word{font-size:clamp(37px,10vw,56px);letter-spacing:-2px}.poster-signature{font-size:7px}.poster-form{transition-duration:.6s}}
@media(prefers-reduced-motion:reduce){.poster-form,.playground-mode,.playground-shuffle>span{transition:none!important}}