:root{--rail:clamp(138px,18vw,218px);--ink:#333a3e;--muted:#73787b;--line:#c9c9be;--blue:#6e9ab2;--cream:#faf8ef;--gold:#d8a34e;--green:#8fa450;--red:#a85d42;--pixel:Pixel,Noto Sans,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:#e8edf0;color:var(--ink);font:13px/1.45 Arial,Helvetica,sans-serif}.skip-link{position:absolute;left:-10000px;top:5px;z-index:100;background:white;padding:9px}.skip-link:focus{left:8px}.portal-shell{width:min(1500px,calc(100% - 18px));margin:6px auto;background:#fff;border:1px solid #98a1a5;border-radius:13px;overflow:hidden;box-shadow:0 1px 4px #0002}.masthead{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;background:#fff}.brand{min-height:34px;position:relative;display:flex;flex-direction:column;justify-content:center;padding:5px 8px 4px 28px;text-decoration:none;color:#17191a;background:linear-gradient(150deg,#f8bd57,#df8d35);border-right:2px solid #fff}.brand:after{content:"";position:absolute;right:9px;top:4px;width:14px;height:23px;background:#9d281e;clip-path:polygon(0 0,55% 28%,100% 0,75% 55%,100% 100%,48% 73%,0 100%,24% 50%)}.brand-name{font:22px Georgia,serif;letter-spacing:-1.4px;line-height:1}.brand-note{font-size:7px;letter-spacing:1px;margin-top:1px}.brand img{position:absolute;right:8px;bottom:2px;width:24px;height:24px;object-fit:contain;image-rendering:pixelated}.masthead-main{min-width:0}.top-nav{height:34px;display:flex;align-items:stretch;justify-content:space-around;background:linear-gradient(#e9eef0,#d9e0e3);border-bottom:1px solid #9ba7ab}.top-nav button{flex:1 1 auto;min-width:0;border:0;border-right:1px solid #edf0f0;background:transparent;color:#202a2f;font:bold 9px Arial,sans-serif;padding:4px 3px;white-space:nowrap}.top-nav button:hover,.top-nav button:focus-visible{background:#fff2cc;color:#9b551d}.hero{height:clamp(108px,16vw,178px);position:relative;overflow:hidden;border-bottom:5px solid #3c4245;background:#d6e9f0}.hero-track{height:100%;width:200%;display:flex;transition:transform .45s cubic-bezier(.22,.7,.2,1)}.hero-slide{position:relative;width:50%;height:100%;flex:none;overflow:hidden}.hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 70%;image-rendering:auto}.hero-slide:nth-child(2)>img{object-position:50% 80%;image-rendering:pixelated}.hero-copy{position:absolute;inset:0 auto 0 0;width:min(34%,250px);min-width:170px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:9px 12px;background:linear-gradient(90deg,rgba(255,252,231,.96),rgba(255,252,231,.84) 75%,transparent);color:#35444a}.hero-copy strong{font:900 clamp(17px,2vw,27px)/.98 Impact,"Arial Narrow",sans-serif;letter-spacing:.3px;text-shadow:1px 1px white}.hero-copy span{font-size:10px;margin:6px 0}.hero-copy button{border:0;background:none;padding:0;color:#a55d30;font-size:10px;font-weight:bold;text-align:left}.banner-selector{position:absolute;right:7px;top:7px;display:grid;gap:4px}.banner-selector button{width:23px;height:23px;padding:0;border:1px solid #c8cdd0;border-radius:50%;background:#fff;color:#526066;font-size:10px;font-weight:bold;box-shadow:0 1px 1px #0002}.banner-selector button[aria-pressed=true]{background:#dfa845;color:#fff;border-color:#fff}.body-grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:9px;padding:0 10px 14px 4px}.left-rail{min-width:0;padding:0 4px 12px;background:linear-gradient(90deg,#f1f0e9,#faf9f3);border-right:1px solid #d2d1c8}.member-box{padding:8px 7px 6px;margin:6px 0 9px;border:1px solid #bbb8a9;border-top:0;background:#eeece1 url("../images/nov2004/main_login11_01.gif") no-repeat center top;background-size:100% 40px;box-shadow:inset 0 0 0 2px #fff}.member-box h2{margin:0 0 10px;padding:2px 3px 8px;color:#595b56;font-size:12px;letter-spacing:.25px;border-bottom:1px solid #c5c2b3}.member-status{font-size:9px;color:#77756c;margin:0 0 6px}.member-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.member-actions button{min-width:0;height:31px;padding:3px 2px;border:2px solid #fff;box-shadow:inset 0 0 0 1px #958b6e;border-radius:0;color:#fff;font-size:10px;font-weight:bold;text-shadow:1px 1px #694822;white-space:nowrap}.login-button{background:linear-gradient(#dda552,#bb713b)}.signup-button{background:linear-gradient(#a4b857,#778b3d)}.member-actions button:disabled{opacity:.65}.beginner-promo{display:block;width:100%;padding:3px;background:#fff;border:1px solid #c9c3ae;text-align:center}.beginner-promo img{display:block;width:100%;height:auto;max-height:105px;object-fit:contain;image-rendering:pixelated}.play-button{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:2px 5px;width:100%;margin:8px 0;padding:7px 6px;border:2px solid #d5c576;outline:1px solid #74673e;background:linear-gradient(#1b3d70,#12294d);color:#f5da69;text-align:left;font-weight:bold;font-size:12px}.play-button img{grid-row:span 2;width:34px;height:27px;object-fit:contain}.play-button small{grid-column:2;font-size:7px;color:#d9e0e9;font-weight:normal}.side-menu{margin:8px 0;border:1px solid #c8c4b4;background:#fff}.side-menu h2,.today-tip h2{margin:0;padding:5px 7px;background:linear-gradient(#e9bb67,#cf913e);color:#fff;font-size:10px;letter-spacing:.25px;text-shadow:1px 1px #98612a}.side-menu button{display:block;width:100%;border:0;border-bottom:1px dotted #d4d0c3;background:#fff;padding:5px 6px;color:#596267;text-align:left;font-size:10px}.side-menu button:before{content:"›";color:#bf8b3e;font-weight:bold;padding-right:6px}.side-menu button:hover{background:#fff4d9;color:#985924}.side-menu .all-pages{font-weight:bold;color:#427994}.today-tip{margin:8px 0;border:1px solid #cfccb7;background:#fffef5}.today-tip h2{background:#8e9955}.today-tip p{margin:0;padding:7px;font-size:9px;color:#6c6c5c}.support-banner{display:block;width:100%;border:1px solid #c7aa7b;background:#f4ead8;padding:8px 6px;color:#765c34;text-align:left;font-size:10px;font-weight:bold}.support-banner span{display:block;font-weight:normal;font-size:9px;margin-top:3px}main{min-width:0;padding:8px 0 0}.content-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.notice-board{min-width:0}.section-head{display:flex;align-items:center;gap:6px;min-height:20px;border-bottom:2px solid #9eb2c0;margin:0 0 4px}.section-head h2{margin:0;padding-left:7px;border-left:5px solid #7b9fb4;color:#46545b;font-size:12px;line-height:1.2}.section-head button{margin-left:auto;border:0;background:transparent;color:#4f778a;font-size:9px;font-weight:bold}.event-head h2{border-color:#d89d48}.notice-list{min-height:65px}.notice-row{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:baseline;gap:5px;padding:4px 2px;border-bottom:1px dotted #d1d0c8;font-size:9px}.notice-row a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#53595d;text-decoration:none}.notice-row a:hover{text-decoration:underline;color:#a35922}.notice-row time{color:#88877f;font-size:8px;white-space:nowrap}.notice-tag{padding:1px 3px;background:#89a6b4;color:#fff;text-align:center;font-size:7px;font-weight:bold}.notice-tag.event{background:#c796a1}.empty-notice,.loading{color:#85847b;font-size:10px}.feature-strip{display:flex;align-items:center;gap:8px;position:relative;overflow:hidden;width:100%;min-height:52px;margin:10px 0;padding:6px 47px 6px 9px;border:1px solid #becbd0;background:linear-gradient(100deg,#dceef1,#eaf3e5);color:#48616b;text-align:left}.feature-strip:hover{background:linear-gradient(100deg,#d2e9eb,#f5f1d7)}.feature-sprite img{width:28px;height:24px;object-fit:contain;image-rendering:pixelated}.feature-strip b{display:block;color:#566e7a;font:italic bold 13px Impact,"Arial Narrow",sans-serif}.feature-strip small{display:block;margin-top:2px;color:#657176;font-size:8px}.strip-action{margin-left:auto;white-space:nowrap;color:#9d5c29;font-size:8px;font-weight:bold}.strip-mushroom{position:absolute;right:7px;bottom:0;width:31px;height:36px;object-fit:contain;image-rendering:pixelated}.lower-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.portal-module{min-width:0;border:1px solid #cccabd;background:#fcfbf6;padding:5px 7px 9px;box-shadow:inset 0 0 0 2px white}.portal-module p{font-size:10px;color:#70736d;min-height:39px;margin:7px 2px}.module-launch{width:100%;border:1px solid #c6b782;background:linear-gradient(#fff9e4,#f0e7cc);padding:7px;color:#80663a;font-size:9px;font-weight:bold;text-align:left}.module-launch:hover{background:#fff0c7}.world-tools,.directory{margin-top:14px}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tool-grid button{display:grid;grid-template-columns:27px 1fr;align-items:center;gap:1px 5px;min-width:0;padding:7px 5px;border:1px solid #d2d0c5;background:#fffefa;text-align:left;color:#59605e}.tool-grid button:hover{background:#fff4d7;border-color:#c7a261}.tool-grid img{grid-row:span 2;width:25px;height:25px;object-fit:contain;image-rendering:pixelated}.tool-grid b{font-size:8px}.tool-grid small{font-size:8px;color:#858277}.directory{border-top:1px solid #d2d0c5;padding-top:8px}.directory-tools{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:5px 9px;align-items:center;padding:6px;background:#f5f4ed;border:1px solid #dedbcf}.directory-tools label{font-size:9px;color:#66695f}.directory-tools input{min-width:0;border:1px solid #c7c6bc;background:#fff;padding:6px;font-size:11px}.directory-filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}.directory-filters button{border:1px solid #c8c8bd;background:#fbfaf5;color:#666b69;padding:4px 7px;font-size:9px}.directory-filters button.active{background:#d89d48;border-color:#c08739;color:white}.directory-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px}.directory-entry{display:block;min-width:0;padding:6px 7px;border:1px solid #d2d0c3;background:#fff;color:#55636a;text-align:left}.directory-entry:hover{background:#fff3d4;border-color:#c9a25c}.directory-entry strong,.directory-entry small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-entry strong{font-size:9px}.directory-entry small{margin-top:2px;color:#8a887e;font-size:8px}.empty-state{padding:10px;color:#777;font-size:10px}.studio-footer{display:flex;justify-content:center;align-items:center;gap:22px;min-height:67px;padding:10px 15px;border-top:3px solid #b7c2c6;background:linear-gradient(#f5f5ef,#ebeae0);text-align:center}.studio-wordmark{display:flex;align-items:center;gap:5px;color:#575b54;text-decoration:none}.studio-wordmark strong{font:bold 13px/1 Georgia,serif}.studio-wordmark span{align-self:flex-end;font-size:8px;letter-spacing:1px}.footer-copy p{margin:1px;color:#797c75;font-size:8px}.footer-links{display:flex;gap:8px}.footer-links button{border:0;background:none;color:#667f89;font-size:8px}.window-frame{height:100%;display:flex;flex-direction:column;min-height:0;border:3px solid #d4d4c9;outline:1px solid #667075;background:#f7f5ea;box-shadow:inset 0 0 0 2px white,0 10px 40px #0005}.window-titlebar{display:flex;align-items:center;gap:7px;min-height:32px;padding:3px 5px;background:linear-gradient(#edf0ee,#cfd7d8);border-bottom:1px solid #919b9d}.window-mark{color:#ad7430;font-size:15px}.window-titlebar h2{overflow:hidden;margin:0;color:#41484b;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.window-controls{display:flex;gap:3px;margin-left:auto}.window-controls button,.minimized-window-dock button{width:23px;height:22px;padding:0;border:1px solid #9aa2a1;background:linear-gradient(#fff,#e4e3d8);color:#565c5d;font-size:15px;line-height:1}.window-controls .window-close{background:linear-gradient(#df9882,#bc5e48);color:white;border-color:#a34d3d}dialog#portal-window{width:min(1160px,94vw);height:min(850px,88dvh);max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible;opacity:0;transform:translateY(8px) scale(.985);transition:opacity .18s ease,transform .18s ease}dialog#portal-window[open]{opacity:1;transform:none}dialog#portal-window::backdrop{background:rgba(31,39,42,.58);backdrop-filter:blur(1px);opacity:0;transition:opacity .18s ease}dialog#portal-window[open]::backdrop{opacity:1}dialog#portal-window.is-maximized{width:calc(100vw - 16px);height:calc(100dvh - 16px)}dialog#portal-window.is-minimized{position:fixed;inset:auto auto 12px 12px;width:260px;height:34px;margin:0}dialog#portal-window.is-minimized .window-frame{height:34px}dialog#portal-window.is-minimized .window-body{display:none}.window-body{position:relative;flex:1;min-height:0;background:#fbfaf2}.window-body iframe{display:block;width:100%;height:100%;border:0;background:#fbfaf2}.frame-status{position:absolute;z-index:1;top:6px;left:8px;margin:0;padding:3px 6px;background:#fffff0;border:1px solid #d4d0bb;color:#6e6e61;font-size:10px}.frame-status[data-ready="true"]{display:none}.minimized-window-dock{position:fixed;z-index:15;left:13px;bottom:13px;display:flex;gap:3px;padding:3px;border:1px solid #8c9799;background:#e5e7dc;box-shadow:0 2px 6px #0003}.minimized-window-dock button{width:auto;padding:2px 6px;font-size:10px}.minimized-window-dock button:last-child{width:24px;padding:0}.minimized-window-dock[hidden]{display:none}@media(max-width:760px){:root{--rail:100%}.portal-shell{width:100%;margin:0;border-radius:0}.masthead{display:block}.brand{height:38px;min-height:38px;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:2px 12px;border-right:0}.brand-name{font-size:21px}.brand-note{margin:3px 0 0;font-size:7px}.brand img{right:42px;bottom:1px;width:28px;height:28px}.top-nav{height:auto;min-height:37px;overflow-x:auto;justify-content:flex-start}.top-nav button{flex:0 0 auto;padding:0 12px;font-size:9px}.hero{height:120px}.hero-copy{width:43%;min-width:145px;padding-left:9px}.hero-copy strong{font-size:17px}.hero-slide>img{object-position:60% 68%}.body-grid{display:flex;flex-direction:column;gap:8px;padding:0 8px 10px}.left-rail{order:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:7px;padding:7px;border:1px solid #ddd9ce}.member-box{margin:0;grid-column:span 2}.member-status{font-size:10px}.member-actions button{height:34px;font-size:12px}.beginner-promo,.play-button{margin:0;min-height:74px}.side-menu{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.side-menu h2{grid-column:span 2}.side-menu button{padding:8px;font-size:11px}.today-tip{grid-column:span 2;margin:0}.support-banner{grid-column:span 2;padding:11px}main{order:1;padding-top:8px}.content-columns,.lower-grid{grid-template-columns:1fr;gap:10px}.notice-row{grid-template-columns:46px minmax(0,1fr) auto;padding:7px 2px;font-size:11px}.notice-row time{font-size:9px}.feature-strip{min-height:64px;padding-right:38px}.feature-strip b{font-size:12px}.feature-strip small{font-size:9px}.strip-action{font-size:8px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-grid button{min-height:47px}.tool-grid b{font-size:9px}.tool-grid small{font-size:8px}.directory-list{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-tools{grid-template-columns:1fr}.directory-tools label{font-size:10px}.directory-filters{grid-column:auto}.studio-footer{flex-direction:column;gap:5px;padding:12px 8px}.footer-copy p{font-size:9px}.footer-links{gap:14px}.footer-links button{font-size:10px}dialog#portal-window{width:calc(100vw - 10px);height:calc(100dvh - 12px);margin:auto auto 0}dialog#portal-window.is-maximized{width:calc(100vw - 6px);height:calc(100dvh - 6px)}dialog#portal-window.is-minimized{inset:auto auto 8px 8px;width:calc(100vw - 16px);height:34px;margin:0}.window-controls button{width:28px;height:27px}.window-titlebar{min-height:36px}.window-body{overflow:auto}.window-body iframe{min-width:0}.minimized-window-dock{left:8px;bottom:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(max-width:560px){.top-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:auto;min-height:0;overflow:visible;justify-content:initial}.top-nav button{min-width:0;min-height:32px;padding:4px 2px;font-size:8px;line-height:1.15;white-space:normal;border-bottom:1px solid #edf0f0}}
/* 2006-era MapleStory portal art: keep the logo sprites in their own measured slots. */
.brand{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:4px;padding:3px 7px 3px 10px}.brand:after{display:none}.brand-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}.brand img{position:static;right:auto;bottom:auto;width:34px;height:34px;object-fit:contain;image-rendering:pixelated}.beginner-promo img{max-height:none;object-fit:contain;image-rendering:pixelated}.hero-slide>img.hero-backdrop{object-position:55% 63%;image-rendering:auto}.hero-sprite{position:absolute;inset:auto;z-index:1;width:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 0 rgba(24,28,25,.35));pointer-events:none}.hero-player{right:clamp(28px,7%,90px);bottom:0;height:min(82%,134px);max-width:16%}.hero-mob{right:clamp(114px,22%,224px);bottom:2px;height:min(39%,54px)}.hero-copy{z-index:2}.banner-selector{z-index:4}@media(max-width:760px){.brand{height:38px;min-height:38px;grid-template-columns:minmax(0,1fr) 32px;padding:2px 10px 2px 12px}.brand img{width:32px;height:32px;right:auto;bottom:auto}.hero-slide>img.hero-backdrop{object-position:56% 63%}.hero-player{right:10px;height:76%;max-width:17%}.hero-mob{right:76px;height:35%}}
/* Keep the accepted summer panorama at its designed proportions while period assets are recovered. */
.hero-slide>img.hero-backdrop,.hero-slide:nth-child(2)>img.hero-backdrop{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 66%;image-rendering:auto}
.hero-slide:nth-child(2)>img.hero-backdrop{object-position:72% 66%}
@media(max-width:760px){.hero-slide>img.hero-backdrop,.hero-slide:nth-child(2)>img.hero-backdrop{inset:0;width:100%;height:100%;object-position:66% 66%}.hero-slide:nth-child(2)>img.hero-backdrop{object-position:80% 66%}}