.about-dialog{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#142653;outline:none}
.about-dialog::backdrop{background:transparent}
.about-dialog[open]{display:grid;place-items:center}
.about-window{position:relative;width:min(163svh,calc(100vw - 48px),1344px);display:flex;flex-direction:column;background:#fff7df;border:3px solid #142653;border-radius:8px;box-shadow:7px 7px 0 #fb8ac1,7px 7px 0 3px #142653;overflow:hidden;isolation:isolate;container-type:inline-size;transform-origin:center;transform:scale(.85)}
.about-titlebar{flex:0 0 auto;min-height:37px;display:grid;grid-template-columns:22px 1fr 22px;gap:15px;align-items:center;padding:5px 10px;border-bottom:3px solid #142653;background:repeating-linear-gradient(to bottom,#ff9bcc 0 2px,#142653 2px 2.75px,#ff9bcc 2.75px 5px)}
.about-window-label{justify-self:center;min-width:32%;padding:3px 20px;font:400 clamp(12px,2.06cqw,16px)/1.25 System,Arial,sans-serif;text-align:center;border:1.5px solid #142653;background:#fff7df}
.about-close{display:grid;place-items:center;width:21px;height:21px;padding:0;background:#fff7df;border:2px solid #142653;border-radius:0;color:#142653;cursor:pointer;font:400 26px/17px Arial,sans-serif}
.about-close span{position:relative;top:-1px}
.about-close:hover{background:#54c9ff}
.about-close:active{background:#fb8ac1}
.about-close:focus-visible,.about-button:focus-visible{outline:2px dashed #54c9ff;outline-offset:4px}
.about-zoom{width:21px;height:20px;border:2px solid #142653;background:linear-gradient(to bottom,#bbddff 0 4px,#142653 4px 5.5px,#bbddff 5.5px)}
.about-body{position:relative;width:100%;aspect-ratio:1366/720;background:#07101b url('about-assets/stars.svg') center/cover;overflow:hidden}
.about-heading{position:absolute;inset:1.7% 3.8% auto;display:flex;justify-content:space-between;margin:0;color:#fff;font:700 6.4cqw/1.1 Prophet,Arial,sans-serif;letter-spacing:-.02em}
.about-laugh{position:absolute;bottom:0;width:31.6%;height:auto;display:block;mask:url('about-assets/laugh-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('about-assets/laugh-mask.svg') center/100% 100% no-repeat}
.about-laugh-left{left:0;transform:scaleX(-1)}
.about-laugh-right{right:0}
.about-vitality{position:absolute;left:30.6%;top:3.2%;width:38.8%;height:auto;display:block;border:1px solid #111}
.about-invitation{position:absolute;inset:auto 30% 4%;display:flex;flex-direction:column;align-items:center;gap:2cqw;color:white;text-align:center}
.about-invitation p{margin:0;font:700 2.45cqw/1.15 Prophet,Arial,sans-serif;white-space:nowrap}
.about-footer{display:flex;justify-content:center;gap:16px;padding:0 3px 3px 0}
.about-button{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:72px;padding:1px 12px 0;background:#fff7df;border:2px solid #142653;border-radius:5px;box-shadow:3px 3px 0 #142653,inset 0 3px 0 #fff;color:#142653;cursor:pointer;text-decoration:none;font:700 15px/1 Prophet,Arial,sans-serif;touch-action:manipulation}
.about-enter{min-width:84px;background:#54c9ff;box-shadow:3px 3px 0 #142653,inset 0 0 0 2px #e9fbff}
.about-button:hover{background:#ffe45c}
.about-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #142653,inset 0 0 0 2px #e9fbff}
.about-grip{position:absolute;right:5px;bottom:5px;width:14px;height:12px;background:repeating-linear-gradient(135deg,transparent 0 3px,#142653 3px 4.5px,transparent 4.5px 7px);clip-path:polygon(100% 0,100% 100%,0 100%)}
.about-dialog[data-transition] .about-window{will-change:transform,opacity}
body.about-window-open .room .glow-image{display:none}
body.about-window-open .room .creature{animation:none}
body.about-window-open .room .base-image{filter:none}
@media(max-width:700px){.about-window{width:calc(100vw - 28px);transform:none}.about-titlebar{gap:8px}.about-body{aspect-ratio:1/1.13}.about-heading{inset:4% 6% auto;font-size:10cqw}.about-vitality{top:20%;left:23%;width:54%}.about-laugh{width:29%;bottom:23%}.about-invitation{inset:auto 5% 5%;gap:18px}.about-invitation p{font-size:5.8cqw}.about-button{height:32px}.about-window-label{min-width:55%;font-size:13px}}
