/* Public creative studios: the shared canvas tools, in the DysArtisan palette. */
.creative-breaks,.play-studio{
  --studio-burgundy:#642e37;--studio-gold:#d7ae43;--studio-cream:#f0eee6;--studio-charcoal:#1b1d1b;
  --osu-orange:var(--studio-burgundy);--osu-orange-dark:var(--studio-burgundy);--osu-surface:#f9f6ee;--osu-muted:#62645b;--osu-line:#d2cbbd;
}
.creative-breaks{margin-block:38px 48px}
.creative-breaks-heading{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:24px}
.creative-breaks-heading h2{font-size:clamp(2rem,3vw,2.8rem);margin-top:12px}
.creative-breaks-heading>p{font-size:.92rem;color:var(--muted);max-width:330px}
.creative-break-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.creative-break-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#f9f6ee;min-width:0;overflow:hidden}
.creative-break-art{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;border-bottom:1px solid var(--line);background:white}
.creative-break-color img{display:block;width:100%;height:100%;object-fit:contain}
.creative-break-copy{padding:26px 28px 28px;display:flex;flex-direction:column;align-items:start;flex:1}
.creative-break-meta{font-size:.75rem;color:var(--studio-burgundy);font-weight:600}
.creative-break-copy h3{font:clamp(1.95rem,3vw,2.75rem)/1.12 var(--serif);letter-spacing:-.035em;margin-block:15px 16px}
.creative-break-copy>p:not(.creative-break-meta){font-size:.98rem;line-height:1.75;color:var(--muted);margin-bottom:22px;max-width:460px}
.creative-break-copy .button{margin-top:auto;background:var(--studio-burgundy);color:#f9f6ee;min-height:48px;gap:22px;white-space:normal}
.creative-break-copy .button:hover{background:#4d2630}
.creative-break-card a:focus-visible{outline:3px solid var(--studio-burgundy);outline-offset:-4px}
.creative-break-ink{isolation:isolate;background:repeating-linear-gradient(166deg,#f0eee6 0 17%,#642e37 17% 23%,#1b1d1b 23% 25%,#d7ae43 25% 29%,#f0eee6 29% 34%,#e59a70 34% 38%,#642e37 38% 43%,#f0eee6 43% 53%)}
.creative-break-ink::before,.creative-break-ink::after,.creative-break-ink>span{content:'';position:absolute;display:block;width:65%;height:135%;border-radius:50%;transform:rotate(27deg)}
.creative-break-ink::before{left:-3%;top:-72%;border:18px solid #f0eee6;box-shadow:0 0 0 8px #1b1d1b,0 0 0 22px #642e37,0 0 0 31px #d7ae43,0 0 0 45px #f0eee6,0 0 0 61px #642e37}
.creative-break-ink::after{right:-13%;bottom:-78%;border:30px solid #642e37;box-shadow:0 0 0 5px #1b1d1b,0 0 0 18px #f0eee6,0 0 0 30px #e59a70,0 0 0 43px #f0eee6;transform:rotate(-35deg)}
.creative-break-ink>span{width:30%;height:50%;left:43%;top:33%;border:15px solid #642e37;box-shadow:0 0 0 4px #1b1d1b,0 0 0 12px #f0eee6,0 0 0 20px #d7ae43;transform:rotate(-16deg)}
.play-studio{max-width:1320px;padding-top:20px;padding-bottom:60px}
.play-studio [hidden]{display:none!important}
.play-studio-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--studio-burgundy);text-decoration:underline;text-underline-offset:4px;font-size:.88rem}
.play-studio-back::before{content:'\2190';font-size:1.1rem;text-decoration:none}
.play-studio-heading{margin-block:18px 30px}
.play-studio .play-studio-heading h1,.play-studio .osu-game-head h1{font-size:clamp(2.5rem,4.5vw,4.3rem);line-height:1.08;margin:14px 0 18px;letter-spacing:-.04em}
.play-studio .play-studio-heading h1 em{color:var(--studio-burgundy)}
.play-studio-heading>p:last-child,.play-studio .osu-game-copy{font-size:1rem;line-height:1.75;color:var(--muted);max-width:560px}
.play-studio .eyebrow{color:var(--studio-burgundy);font-size:.7rem;letter-spacing:.12em}
.play-studio-kicker{margin-top:20px}
.play-studio-device-note{font-size:.82rem;color:var(--muted);margin-top:24px;line-height:1.7}
.play-studio.osu-main :where(button,input,select){accent-color:var(--studio-burgundy)}
.play-studio.osu-main :where(button,a,input,select,canvas):focus-visible{outline:3px solid var(--studio-burgundy);outline-offset:4px}
.play-studio .osu-color-canvas:focus-visible,.play-studio .osu-ink-canvas:focus-visible{outline-offset:-4px}
.play-studio .osu-button[aria-pressed=true],.play-studio .osu-color-tools button[aria-pressed=true]{background:#efe0e3;border-color:var(--studio-burgundy);color:#512430}
.play-studio .osu-button--primary,.play-studio .osu-color-actions [data-action=download]{background:var(--studio-burgundy);border-color:var(--studio-burgundy);color:#fff8ed}
.play-studio .osu-button--primary:hover,.play-studio .osu-color-actions [data-action=download]:hover{background:#4d2630;border-color:#4d2630}
.play-studio .osu-color-controls :where(select,label){max-width:100%;min-width:0}
.play-studio .osu-color-art-select select{overflow:hidden;text-overflow:ellipsis}
.play-studio .osu-color-controls .osu-color-blank{display:inline-flex;min-height:44px;align-items:center;color:var(--studio-burgundy);text-decoration:underline;text-underline-offset:4px}
.play-studio .osu-color-confirm,.play-studio .osu-ink-confirm{background:#f4e8e8;border-color:#b68a93}
.play-studio .osu-color-confirm button{color:var(--studio-charcoal)}
.play-studio .osu-canvas-wrap{background:var(--studio-cream)}
.play-studio .osu-swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--osu-surface),0 0 0 5px var(--studio-burgundy)}
.play-studio--ink{max-width:1272px}
.play-studio .osu-game-head{margin-top:12px}
.play-studio .osu-game-head h1{margin-bottom:10px}
.play-studio noscript p{padding:16px 0;max-width:650px}
.play-studio noscript a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
  .creative-breaks-heading{display:block}
  .creative-breaks-heading>p{margin-top:15px;max-width:none}
  .creative-break-copy{padding:24px}
}
@media(max-width:760px){
  .creative-break-grid{grid-template-columns:1fr;gap:22px}
  .creative-breaks{margin-block:28px 38px}
  .creative-break-art{aspect-ratio:16/10}
  .creative-break-copy .button{width:100%;justify-content:center}
  .play-studio{padding-top:14px;padding-bottom:42px}
  .play-studio-heading{margin-block:10px 21px}
  .play-studio .play-studio-heading h1,.play-studio .osu-game-head h1{font-size:clamp(2.5rem,8vw,3.5rem);margin-block:12px}
  .play-studio-heading>p:last-child,.play-studio .osu-game-copy{font-size:.94rem}
  .play-studio .osu-color-layout{max-width:100%}
  .play-studio .osu-color-controls,.play-studio .osu-color-workspace{min-width:0}
  .play-studio .osu-color-art-select{display:block;width:100%;min-width:0}
  .play-studio .osu-color-art-select select{width:100%}
  .play-studio .osu-color-confirm{width:100%}
  .play-studio .osu-color-palette{width:100%}
  .play-studio-device-note{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){.creative-breaks .button,.play-studio :where(button,a){transition:none}}