/* One continuous, reversible journey from the bath into Butter OS. */
html{scrollbar-color:#d7bc80 #795337}
body{height:100svh;overflow-x:hidden}
#intro{height:100svh;bottom:auto;transition:none;will-change:opacity;box-shadow:none}
#intro.breaking{background:transparent}
.butter-shards{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#desktop{position:fixed;inset:0;height:100svh;min-height:0;overflow:auto;background:radial-gradient(ellipse at 65% 35%,#c5a77555,transparent 60%),#98744e}
#desktop:before{opacity:.14}
.wallpaper{opacity:.24}
.icons b{color:var(--cream);text-shadow:1px 1px #4a2d19}
.icons .icon{background:none;border:0;border-radius:0;filter:drop-shadow(2px 3px 0 #4f382b88);width:48px;height:48px}
.icon svg{display:block;width:100%;height:100%;overflow:visible;image-rendering:auto}
.menubar{background:var(--cream);color:var(--ink)}
.taskbar{background:#dfd1b4;color:var(--ink)}
.taskbar button,.titlebar button{background:#eee1c5;border-color:#fff5db #a9997e #a9997e #fff5db;color:var(--ink)}
.titlebar{background:#735036;color:#fff3d5}
.window{border-color:#32251b;background:var(--cream);box-shadow:inset 1px 1px #fff8e9,inset -1px -1px #a9997e,5px 6px 0 #3b251b33}
.statusbar{background:var(--cream);color:var(--ink)}
body.entered #desktop{animation:none}
.intro-copy,.intro-top{will-change:opacity}
.intro-film{pointer-events:none}
.scroll-meter{height:3px;position:absolute;bottom:0;left:0;right:0;background:#f3ebd833}
.scroll-meter i{display:block;width:100%;height:100%;background:var(--cream);transform:scaleX(0);transform-origin:left}
@media(max-width:700px){
 body{height:100svh}
 #desktop:after{content:'';display:block;min-height:830px;pointer-events:none}
 #intro{transform-origin:50% 42%}
 .intro-foot{max-width:60%;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){body{height:100svh}#intro{will-change:opacity}}