.px-room{--map-px:2px;--room-cover:28px;--room-pad:12px;--room-ink:var(--color-pastel-ink);--room-foam:#d9efe4}@media (min-width:640px){.px-room{--room-pad:24px}}@media (min-width:1024px){.px-room{--map-px:3px;--room-cover:42px;--room-pad:32px}}.px-room .room-bar{z-index:40;background:linear-gradient(var(--room-ink) 0 0) 0 100% / 100% var(--map-px) no-repeat, linear-gradient(var(--room-foam) 0 0) 0 calc(100% - var(--map-px)) / 100% var(--map-px) no-repeat, linear-gradient(var(--room-ink) 0 0) 0 calc(100% - var(--map-px) * 2) / 100% var(--map-px) no-repeat, var(--color-surface-1);height:3.5rem;position:sticky;top:0}.px-room .room-bar-in{height:calc(100% - var(--map-px) * 3);padding-inline:var(--room-pad);justify-content:space-between;align-items:center;gap:16px;display:flex}.px-room .room-where{min-width:0;font:400 20px/1 var(--map-font);color:var(--color-dim);white-space:nowrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.px-room .room-where li{flex:none;align-items:center;gap:8px;display:flex}.px-room .room-where a{min-height:44px;color:inherit;align-items:center;text-decoration:none;display:inline-flex}.px-room .room-where a:hover,.px-room .room-where [aria-current=page],.px-room .room-brand a{color:var(--color-fg)}.px-room .room-brand span{color:var(--color-accent)}.px-room .room-sep{color:var(--color-mute)}.px-room .room-where .room-isle{flex:0 auto;min-width:0}.px-room .room-isle #room-island{text-overflow:ellipsis;min-width:0;line-height:44px;display:block;overflow:hidden}.px-room .room-back-short{display:none}@media (max-width:1023px){.px-room .room-where .room-map{display:none}.px-room .room-back-long{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.px-room .room-back-short{display:inline}}@media (max-width:639px){.px-room .room-kind{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.px-room .room-key{border:calc(var(--map-px) * 2) solid transparent;border-image:var(--map-key) 2 fill / calc(var(--map-px) * 2);min-height:44px;font:400 20px/1 var(--map-font);color:var(--color-fg);white-space:nowrap;cursor:pointer;flex:none;align-items:center;gap:8px;padding:0 12px;text-decoration:none;display:inline-flex;position:relative}.px-room .room-key:hover{border-image:var(--map-key-hover) 2 fill / calc(var(--map-px) * 2)}.px-room .room-key.primary{border-image:var(--map-key-accent) 2 fill / calc(var(--map-px) * 2)}.px-room .room-key.primary:hover{border-image:var(--map-key-accent-hover) 2 fill / calc(var(--map-px) * 2)}.px-room .room-key.sun{border-image:var(--map-key-sun) 2 fill / calc(var(--map-px) * 2);color:var(--room-ink)}.px-room .room-key:active{transform:translateY(var(--map-px))}.px-room .room-key svg{width:calc(var(--map-px) * 5);height:calc(var(--map-px) * 5);fill:currentColor;flex:none}.px-room .room-key.is-text{font:500 14px/1 var(--font-sans)}.px-room :is(.room-bar a,.room-key,.room-tile,.room-next):focus-visible{outline:3px solid var(--color-sun);outline-offset:2px}.px-room .room-art{background:var(--color-bg);height:clamp(160px,min(34svh,52vw),320px);position:relative;overflow:hidden}.px-room .room-art canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.px-room .room-hero{z-index:1;margin-top:calc(var(--room-cover) * -1);position:relative}.px-room .room-window{border:calc(var(--map-px) * 4) solid transparent;border-image:var(--map-window) 4 fill / calc(var(--map-px) * 4);filter:drop-shadow(0 var(--map-px) 0 #04141a8c);margin-inline:-12px;padding:16px}@media (min-width:1024px){.px-room .room-window{margin-inline:calc((var(--map-px) * 4 + 24px) * -1);padding:24px}}.px-room .room-tags{font:400 20px/1.2 var(--map-font);color:var(--color-dim);flex-wrap:wrap;align-items:center;gap:8px;margin:0;display:flex}.px-room .room-tag{align-items:center;gap:8px;display:inline-flex}.px-room .room-gem{width:calc(var(--map-px) * 4);height:calc(var(--map-px) * 4);background:var(--map-gem) 0 0 / 100% 100% no-repeat;flex:none}.px-room .room-title{margin:16px 0 0;font-size:clamp(2.1rem,7.2vw,5rem);line-height:.95}.px-room .room-title.is-long{font-size:clamp(1.6rem,6.4vw,4.4rem)}.px-room .room-lead{max-width:56ch;color:var(--color-dim);margin:16px 0 0}.px-room .room-meta{background:linear-gradient(90deg, var(--color-surface-3) 50%, transparent 0) 0 0 / calc(var(--map-px) * 2) var(--map-px) repeat-x;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:24px 0 0;padding-top:20px;display:grid}@media (min-width:640px){.px-room .room-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}.px-room .room-meta dt{font:400 20px/1.2 var(--map-font);color:var(--color-mute)}.px-room .room-meta dd{color:var(--color-fg);margin:8px 0 0;font-size:14px;line-height:20px}.px-room .room-hint{font:400 20px/1.2 var(--map-font);color:var(--color-mute);margin:16px 0 0}@media (prefers-reduced-motion:reduce){.px-room .room-hint{display:none}}.px-room .room-kicker{font:400 20px/1.2 var(--map-font);color:var(--color-dim);align-items:center;gap:12px;display:flex}.px-room .room-kicker:after,.px-room .room-rule{content:"";height:var(--map-px);background:linear-gradient(90deg, var(--color-surface-3) 50%, transparent 0) 0 0 / calc(var(--map-px) * 2) 100% repeat-x;flex:1}.px-room .room-n{font:400 20px/1 var(--map-font);color:var(--color-sun)}.px-room .room-label{font:400 20px/1.2 var(--map-font);letter-spacing:0;text-transform:none;color:var(--color-mute)}.px-room .room-stat{background:linear-gradient(90deg, var(--color-surface-3) 50%, transparent 0) 0 0 / calc(var(--map-px) * 2) var(--map-px) repeat-x;border-top:0}.px-room .room-break-n{font:400 20px/1 var(--map-font);color:var(--color-sun);flex:none}.px-room .room-break-t{font:400 20px/1 var(--map-font);color:var(--color-dim);flex:none}.px-room .room-row{padding:28px 0}.px-room .room-row:first-child{padding-top:0}.px-room .room-row+.room-row{background:linear-gradient(90deg, var(--color-surface-3) 50%, transparent 0) 0 0 / calc(var(--map-px) * 2) var(--map-px) repeat-x}.px-room .room-foot{background:linear-gradient(90deg, var(--color-surface-3) 50%, transparent 0) 0 0 / calc(var(--map-px) * 2) var(--map-px) repeat-x;margin-top:64px;padding-top:32px}.px-room .room-note,.px-room .room-next{border:calc(var(--map-px) * 4) solid transparent;border-image:var(--map-window) 4 fill / calc(var(--map-px) * 4)}.px-room .room-note{margin-top:32px;padding:12px 16px}.px-room .room-note-t{font:400 20px/1.2 var(--map-font);color:var(--color-sun);margin:0 0 8px}.px-room .room-next{color:var(--color-fg);justify-content:space-between;align-items:center;gap:24px;margin-top:112px;padding:16px 20px;text-decoration:none;display:flex}.px-room .room-next .room-key{padding:0 14px}.px-room .room-next:hover .room-key.primary{border-image:var(--map-key-accent-hover) 2 fill / calc(var(--map-px) * 2)}.px-room .room-next:active .room-key{transform:translateY(var(--map-px))}.px-room .room-frame{border:calc(var(--map-px) * 2) solid transparent;border-image:var(--map-key) 2 fill / calc(var(--map-px) * 2);overflow:hidden}.px-room .room-frame.matte{padding:12px}.px-room .room-tiles{gap:8px;padding:0;list-style:none;display:grid}@media (min-width:640px){.px-room .room-tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}}.px-room .room-tile{border:calc(var(--map-px) * 2) solid transparent;border-image:var(--map-key) 2 fill / calc(var(--map-px) * 2);width:100%;color:var(--color-fg);padding:20px;text-decoration:none;display:block}.px-room .room-tile:hover{border-image:var(--map-key-hover) 2 fill / calc(var(--map-px) * 2)}.px-room .room-tile:active{transform:translateY(var(--map-px))}@media (min-width:640px){.px-room .room-tile{padding:24px}}
