.color-layout{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(420px,1.3fr);gap:3%;height:73%;align-items:start}.wheel-side{display:flex;flex-direction:column;align-items:center}.color-schemes,.color-worlds{display:flex;gap:8px;flex-wrap:wrap}.color-schemes button,.color-worlds button{font-size:clamp(14px,1.1vw,20px);padding:9px 16px}.color-schemes button[aria-pressed=true],.color-worlds button[aria-pressed=true]{background:var(--petrol,#24666A);color:white;border-color:var(--petrol,#24666A)}#colorWheel{width:min(100%,380px);height:auto;margin:4px 0;aspect-ratio:1}.hue-control{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.15vw,20px);flex-wrap:wrap;justify-content:center}.hue-control input{width:160px}.hue-control output{min-width:3em}.palette-side h2{font-size:clamp(24px,2.25vw,38px);margin:0 0 10px}.palette-side>p{font-size:clamp(16px,1.35vw,23px);margin:8px 0 16px}.color-swatches{display:flex;gap:12px;margin:10px 0 14px}.color-swatch{flex:1;display:grid;grid-template-columns:48px 1fr;gap:3px 8px;align-items:center}.color-swatch>span{grid-row:span 2;width:48px;height:48px;border-radius:10px;border:1px solid #809090}.color-swatch b{font-size:clamp(12px,1.05vw,18px)}.color-swatch small{font-size:clamp(11px,.9vw,15px)}.color-scene{margin:0;max-width:610px}.color-scene img{display:block;width:100%;height:auto;max-height:255px;object-fit:contain;border-radius:16px}.color-scene figcaption{font-size:clamp(12px,1vw,17px);margin-top:7px}.palette-side>a{font-size:clamp(15px,1.2vw,21px)}.color-use-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:5%;height:75%;align-items:start}.color-app-side{display:flex;flex-direction:column;align-items:center}.color-app{background:var(--c-bg);color:var(--c-ink);border:1px solid #A5B1AC;border-radius:28px;padding:24px 30px;width:min(100%,390px);margin-top:14px;box-shadow:0 10px 24px #182C3310}.color-app .color-app-brand{font-size:12px;letter-spacing:.08em;color:var(--c-primary);font-weight:750;margin:0}.color-app h2{font-size:34px;line-height:1.1;margin:20px 0 12px}.color-app p{font-size:18px;line-height:1.4;margin:10px 0}.color-app-date{border-radius:12px;padding:14px;background:var(--c-accent);font-weight:700;font-size:19px}.color-app-date span{display:block;font-size:14px;font-weight:400;margin-top:4px}.color-app button{display:block;width:100%;background:var(--c-primary);color:#fff;border-color:var(--c-primary);margin:15px 0;font-size:18px;padding:13px}.color-app #colorAppStatus{font-size:14px}.color-app small{font-size:13px}.color-world-note{font-size:clamp(14px,1.15vw,20px);max-width:440px;margin:12px 0 0}.color-use-copy h2{font-size:clamp(25px,2.4vw,42px);margin:0 0 12px}.color-use-copy>p{font-size:clamp(17px,1.45vw,25px);line-height:1.4;margin:10px 0}.color-use-copy details{font-size:clamp(15px,1.2vw,21px);border-top:1px solid var(--line,#CDDAD2);padding-top:12px}.color-use-copy summary{font-weight:750;cursor:pointer}.color-use-copy details p{line-height:1.5;margin:10px 0}.color-use-copy .small,.wheel-side .small,.palette-side .small{font-size:clamp(12px,1vw,17px);line-height:1.35}.color-access{background:var(--sage,#DCEFE1);border-radius:12px;padding:14px}.color-access output{font-size:clamp(14px,1.15vw,20px)}
@media(max-width:1100px){#colorWheel{max-width:290px}.color-scene img{max-height:185px}.color-app{padding:18px 24px;max-width:320px}.color-app h2{font-size:27px;margin-top:12px}.color-app p{font-size:16px}.color-app button{font-size:16px;margin:10px 0}.color-app-date{padding:10px;font-size:16px}.color-swatch{grid-template-columns:30px 1fr}.color-swatch>span{width:30px;height:38px}.color-use-copy details p{margin:7px 0}.color-layout{grid-template-columns:.95fr 1.2fr}}
@media(max-width:720px){.color-layout,.color-use-layout{display:flex;flex-direction:column;height:auto;gap:24px}.wheel-side,.palette-side,.color-app-side,.color-use-copy{width:100%}.color-scene img{max-height:none}.color-use-copy .small{font-size:14px}.color-swatches{flex-wrap:wrap}}
@media print{.color-schemes,.color-worlds,.hue-control{display:none}.color-layout,.color-use-layout{height:auto}.color-scene img{max-height:230px}}
#w05-color-wheel .color-schemes button[aria-pressed=true],#w05-color-use .color-worlds button[aria-pressed=true]{background:#24666A;border-color:#24666A;color:#fff}
@media print{.slide #colorAppButton{display:block!important}}