/* Desktop composition measured against the supplied 1905 × 990 reference. */
@media(min-width:1001px){
 body[data-mode=chaos] .hero{--desk-h:100svh;container-type:inline-size;height:calc(100svh + 100px);min-height:57cqw}
 body[data-mode=chaos] .desk-left{transform:none}
 body[data-mode=chaos] .lamp{width:27.3cqw;left:-3.2%;top:calc(var(--desk-h)*-.10);z-index:2}
 body[data-mode=chaos] .notebook{width:53.6cqw;left:-17.8%;top:calc(var(--desk-h)*.368);transform:rotate(-26deg);z-index:3}
 body[data-mode=chaos] .paper{left:-11%;top:calc(var(--desk-h)*.145);width:21cqw;z-index:0}
 body[data-mode=chaos] .clipping{left:12.8%;top:calc(var(--desk-h)*.25);width:12.6cqw;transform:rotate(-10deg);z-index:4}
 body[data-mode=chaos] .pen{left:14.6%;top:calc(var(--desk-h)*.29);width:16cqw;height:calc(var(--desk-h)*.3);transform:rotate(3deg);object-fit:fill;z-index:5}
 body[data-mode=chaos] .coffee{left:-5.5%;top:calc(var(--desk-h)*.425);width:15.5cqw;transform:rotate(-14deg);z-index:4}
 body[data-mode=chaos] .cream{left:12%;top:calc(var(--desk-h)*.8);width:18cqw;transform:rotate(3deg);z-index:4}
 body[data-mode=chaos] .ideas-note{left:17.5%;top:calc(var(--desk-h)*.605);width:6.8cqw;height:7.4cqw;padding:.9cqw .6cqw;transform:rotate(-18deg);z-index:5}
 body[data-mode=chaos] .ideas-note span{font-size:1.65cqw}
 body[data-mode=chaos] .ideas-note small{font-size:.48cqw;margin-top:.6cqw}
 body[data-mode=chaos] .swatches{left:3.4%;top:calc(var(--desk-h)*.71);width:130px;height:135px;transform:scale(1.25) rotate(10deg);transform-origin:top left;z-index:5}
 body[data-mode=chaos] .intro{left:50%;top:calc(var(--desk-h)*.33);width:43%;max-width:none;transform:translateX(-50%);z-index:5}
 body[data-mode=chaos] .intro h1{font-size:6.3cqw;line-height:1;margin:0 0 1.7cqw;letter-spacing:-.1cqw;transform:rotate(-3deg)}
 body[data-mode=chaos] .role{font-size:1.26cqw;line-height:1.3;margin:0 0 .3cqw}
 body[data-mode=chaos] .definition{font-size:.95cqw}
 body[data-mode=chaos] .statement{font-size:1.26cqw;line-height:1.3;max-width:40cqw;margin:.65cqw auto 0;text-align:center;text-wrap:balance}
 body[data-mode=chaos] .music{right:2.6%;top:calc(var(--desk-h)*.042);width:18.9cqw;padding:1.3cqw 1.35cqw .75cqw;border-radius:1.4cqw;border-color:#e7e3de;background:#faf8f54d;font-size:.8cqw;z-index:4}
 body[data-mode=chaos] .music-symbol{font-size:1.25cqw;margin:-.8cqw 0 .35cqw}
 body[data-mode=chaos] .music p{font-size:.72cqw;margin:.25cqw 0}
 body[data-mode=chaos] .music .track-name{font-size:.95cqw}
 body[data-mode=chaos] .music input{height:1cqw;margin:.55cqw 0;width:95%}
 body[data-mode=chaos] .music-bottom{font-size:.58cqw;gap:.3cqw}
 body[data-mode=chaos] .music-bottom button{font-size:.72cqw;padding:.3cqw}
 body[data-mode=chaos] .pixel-cursor{right:21%;top:calc(var(--desk-h)*.10);width:5cqw;z-index:3}
 body[data-mode=chaos] .folder{width:13.2cqw;right:13.5%;top:calc(var(--desk-h)*.42);transform:rotate(-9deg);z-index:6}
 body[data-mode=chaos] .folder:hover{transform:rotate(-4deg) translateY(-5px)}
 body[data-mode=chaos] .folder span{font-size:.9cqw;margin-top:-.4cqw}
 body[data-mode=chaos] .folder[aria-expanded=true]{transform:rotate(0) translateY(35px)}
 body[data-mode=chaos] .airdrop{right:12.4%;top:calc(var(--desk-h)*.685);width:12.6cqw;border-radius:.8cqw;transform:rotate(13deg);z-index:6}
 body[data-mode=chaos] .airdrop>div:first-child{padding:.6cqw .3cqw}
 body[data-mode=chaos] .airdrop strong{font-size:.85cqw}
 body[data-mode=chaos] .airdrop>div span{font-size:.6cqw}
 body[data-mode=chaos] .airdrop-preview{height:9cqw}
 body[data-mode=chaos] .airdrop-actions button{font-size:.85cqw;padding:.65cqw 0}
 body[data-mode=chaos] .paint-toggle{display:none}
 body[data-mode=chaos] .paint{display:block;right:2.6%;top:calc(var(--desk-h)*.52);width:6cqw;z-index:3}
 body[data-mode=chaos] .paint-title{font-size:.6cqw;padding:.2cqw}
 body[data-mode=chaos] #close-paint{visibility:hidden}
 body[data-mode=chaos] .paint-grid{grid-template-columns:1fr 1fr;gap:.1cqw;padding:.15cqw}
 body[data-mode=chaos] .paint-grid button{height:2.9cqw;font-size:2cqw;min-width:0}
 body[data-mode=chaos] .paint-grid .ink-preset{font-size:0}
 .ink-preset:after{content:'';display:block;background:var(--swatch);width:55%;height:55%;margin:auto;border:1px solid #5558;transform:rotate(-15deg)}
 body[data-mode=chaos] .color-label,body[data-mode=chaos] .size-label{font-size:.6cqw;padding:.2cqw;gap:.2cqw}
 body[data-mode=chaos] .clear-drawing{font-size:.6cqw;padding:.3cqw}
 body[data-mode=chaos] .color-label input{width:2cqw;height:1.2cqw}
 body[data-mode=chaos] .size-label input{width:3cqw}
 body[data-mode=chaos] .desk-controls{top:calc(var(--desk-h)*.954);gap:.75cqw}
 body[data-mode=chaos] .desk-controls button{min-width:3.8cqw;min-height:3.8cqw;padding:.2cqw .5cqw;border-radius:1cqw}
 body[data-mode=chaos] .desk-controls svg{width:2.5cqw;height:2.7cqw}
 body[data-mode=chaos] .desk-controls small{font-size:.48cqw}
 body[data-mode=chaos] .sound-toggle{top:calc(var(--desk-h)*.954 + 4.5cqw);font-size:.55cqw}
 body[data-mode=chaos] .scroll-hint{display:none}
 body[data-mode=chaos] .notebook-hit{left:0;top:calc(var(--desk-h)*.55);width:28%;height:calc(var(--desk-h)*.4);z-index:4}
 body[data-mode=chaos] .floating-tools{right:14%;top:calc(var(--desk-h)*.33);width:15cqw;z-index:7}
}
.ink-preset{--swatch:#444}
.ink-preset:after{content:'';display:block;background:var(--swatch);width:55%;height:55%;margin:auto;border:1px solid #5558;transform:rotate(-15deg)}
body.drawing[data-mode=chaos] .paint{z-index:10}
/* The notebook sits in front of the lamp, as in the supplied reference. */
body[data-mode=chaos] .lamp{z-index:2}
.intro{text-align:center}
.intro .statement{margin-left:auto;margin-right:auto}
body[data-mode=clean] .intro{text-align:center}
.intro h1,.intro .role,.intro .definition,.intro .statement{transition:scale .25s ease;transform-origin:center}
.intro .definition{display:inline-block}
@media(hover:hover) and (pointer:fine){
 .intro h1:hover,.intro .role:hover,.intro .definition:hover,.intro .statement:hover{scale:1.08}
}
@media(prefers-reduced-motion:reduce){.intro h1,.intro .role,.intro .definition,.intro .statement{transition:none}}
@media(min-width:1001px){
 body[data-mode=chaos] .hero{height:calc(100svh + 12cqw)}
 body[data-mode=chaos] .cream{left:13.2%;top:calc(var(--desk-h)*.8);width:14.4cqw;transform:rotate(-20deg)}
 body[data-mode=chaos] .statement{max-width:35cqw;font-size:1.13cqw;line-height:1.45}
}