/* 0.1.227 home page for visitors who are not signed in. Light "cloud garden" look: cream paper,
   jade, warm gold and a touch of sakura. Self-hosted Mitr (headings) and Sarabun (text), SIL OFL. */
@font-face{font-family:"Mitr";font-weight:400;font-display:swap;src:url(/assets/fonts/mitr-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:500;font-display:swap;src:url(/assets/fonts/mitr-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:600;font-display:swap;src:url(/assets/fonts/mitr-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:400;font-display:swap;src:url(/assets/fonts/mitr-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}
@font-face{font-family:"Mitr";font-weight:500;font-display:swap;src:url(/assets/fonts/mitr-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}
@font-face{font-family:"Mitr";font-weight:600;font-display:swap;src:url(/assets/fonts/mitr-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}
@font-face{font-family:"Sarabun";font-weight:400;font-display:swap;src:url(/assets/fonts/sarabun-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:600;font-display:swap;src:url(/assets/fonts/sarabun-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:400;font-display:swap;src:url(/assets/fonts/sarabun-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}
@font-face{font-family:"Sarabun";font-weight:600;font-display:swap;src:url(/assets/fonts/sarabun-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2192}

#landing{
 --paper:#fbf7ee;--paper2:#f3eddf;--card:#fffdf8;--ink:#17393b;--ink2:#3d5b5c;--muted:#6c8483;--line:#e4dbc6;--line2:#d6c9aa;
 --jade:#2f8f78;--jade2:#24735f;--jade-soft:#dcefe7;--gold:#c99434;--gold-soft:#f7e8c6;--sakura:#ee9fb1;--sakura-soft:#fbe4ea;
 --dawn:#d8952a;--dusk:#7a5cc9;--shadow:0 1px 2px rgba(23,57,59,.06),0 8px 24px -8px rgba(23,57,59,.16);
 position:fixed;inset:0;z-index:40;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scroll-padding-top:84px;
 background:var(--paper);color:var(--ink);font:400 16px/1.65 "Sarabun","Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif;
 -webkit-text-size-adjust:100%;color-scheme:light;
}
#landing[hidden]{display:none!important}
#landing *,#landing *::before,#landing *::after{box-sizing:border-box}
#landing h1,#landing h2,#landing h3,.lp-btn,.lp-nav,.lp-kicker,.lp-eyebrow,.lp-stats dd,.lp-step-n{font-family:"Mitr","Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;letter-spacing:0}
#landing a{color:var(--jade2)}
#landing kbd{display:inline-block;min-width:1.7em;padding:0 .45em;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;background:#fff;color:var(--ink);font:500 .82em/1.6 "Mitr",Tahoma,sans-serif;text-align:center}
html.landing-open,html.landing-open body{background:#fbf7ee}
html.landing-open #gate{display:none}
html.landing-open.landing-auth #gate{display:grid!important}

/* top bar */
.lp-top{position:sticky;top:0;z-index:5;background:rgba(251,247,238,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
#landing.lp-scrolled .lp-top{border-bottom-color:var(--line);box-shadow:0 6px 20px -14px rgba(23,57,59,.35)}
.lp-top-in{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.lp-logo img{display:block;height:48px;width:auto;filter:drop-shadow(0 2px 4px rgba(23,57,59,.18))}
.lp-nav{display:flex;gap:4px;flex:1;justify-content:center;font-size:15px}
.lp-nav a{padding:8px 12px;border-radius:999px;color:var(--ink2)!important;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.lp-nav a:hover,.lp-nav a[aria-current="true"]{background:var(--jade-soft);color:var(--jade2)!important}
.lp-top-actions{display:flex;gap:8px}

/* buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 18px;border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.lp-btn:focus-visible,#landing a:focus-visible,.lp-realm-tabs button:focus-visible{outline:3px solid rgba(47,143,120,.45);outline-offset:2px}
.lp-btn-main{background:linear-gradient(180deg,#38a387,#2a8670);color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -6px rgba(36,115,95,.7)}
.lp-btn-main:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -8px rgba(36,115,95,.75)}
.lp-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.lp-btn-ghost:hover{background:#fff}
.lp-btn-soft{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.lp-btn-soft:hover{transform:translateY(-1px)}
.lp-btn-big{min-height:52px;padding:12px 26px;font-size:17px}
.lp-link{background:none;border:0;padding:0;color:var(--jade2);font:inherit;cursor:pointer;text-decoration:underline}

/* hero */
.lp-hero{position:relative;overflow:hidden;padding:48px 24px 40px;background:
 radial-gradient(900px 420px at 85% 10%,rgba(255,226,170,.55),transparent 65%),
 radial-gradient(700px 380px at 5% 30%,rgba(190,232,218,.6),transparent 65%),
 linear-gradient(180deg,#eaf6f6 0%,var(--paper) 78%)}
.lp-hero-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--jade2);font-size:13.5px;font-weight:500;box-shadow:var(--shadow)}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 4px rgba(47,143,120,.18)}
.lp-hero h1{margin:0;font-size:clamp(34px,4.6vw,56px);line-height:1.18;font-weight:600;color:var(--ink)}
.lp-hero h1 em{font-style:normal;background:linear-gradient(90deg,#2f8f78,#3aa0a0 45%,#c99434);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lede{margin:18px 0 26px;max-width:34em;font-size:17.5px;color:var(--ink2)}
.lp-lede b{color:var(--ink);font-weight:600}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px}
.lp-badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.lp-badges li::before{content:"✓";color:var(--jade);font-weight:600;margin-right:6px}
.lp-hero-art{position:relative;margin:0}
.lp-hero-art img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;border-radius:28px;border:6px solid #fff;box-shadow:0 30px 60px -28px rgba(23,57,59,.55),0 2px 6px rgba(23,57,59,.08);transform:rotate(1.2deg)}
.lp-float{position:absolute;display:inline-flex;gap:6px;align-items:baseline;padding:8px 14px;border-radius:16px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow);font:500 14px "Mitr",Tahoma,sans-serif;color:var(--ink2);animation:lp-bob 6s ease-in-out infinite}
.lp-float b{font-size:20px;color:var(--jade2)}
.lp-float-a{left:-18px;top:14%}
.lp-float-b{right:-14px;top:42%;animation-delay:-2s}
.lp-float-b b{color:var(--gold)}
.lp-float-c{left:12%;bottom:-16px;animation-delay:-4s;background:linear-gradient(90deg,#fff6e0,#efe8ff)}
@keyframes lp-bob{50%{transform:translateY(-6px)}}
.lp-stats{position:relative;z-index:1;max-width:1200px;margin:44px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.lp-stats div{padding:18px 22px;text-align:center}
.lp-stats div+div{border-left:1px dashed var(--line2)}
.lp-stats dt{font-size:13.5px;color:var(--muted)}
.lp-stats dd{margin:2px 0 0;font-size:24px;font-weight:600;color:var(--ink)}
.lp-clouds i{position:absolute;display:block;border-radius:999px;background:#fff;opacity:.7;filter:blur(1px)}
.lp-clouds i::before,.lp-clouds i::after{content:"";position:absolute;border-radius:50%;background:inherit}
.lp-clouds i:nth-child(1){width:180px;height:44px;left:-40px;top:70px;animation:lp-drift 60s linear infinite}
.lp-clouds i:nth-child(2){width:240px;height:54px;right:6%;top:24px;opacity:.55;animation:lp-drift 80s linear infinite reverse}
.lp-clouds i:nth-child(3){width:140px;height:36px;left:42%;bottom:120px;opacity:.5;animation:lp-drift 70s linear infinite}
.lp-clouds i:nth-child(4){width:200px;height:48px;right:-50px;bottom:60px;opacity:.6;animation:lp-drift 90s linear infinite reverse}
.lp-clouds i::before{width:46%;height:180%;left:16%;top:-70%}
.lp-clouds i::after{width:34%;height:140%;left:52%;top:-50%}
@keyframes lp-drift{to{transform:translateX(60px)}}
.lp-petals i{position:absolute;top:-20px;width:12px;height:9px;border-radius:12px 1px 12px 1px;background:linear-gradient(135deg,#ffd6e0,#f29bb2);opacity:.8;animation:lp-fall 14s linear infinite}
.lp-petals i:nth-child(1){left:8%;animation-delay:-2s}.lp-petals i:nth-child(2){left:22%;animation-delay:-9s;animation-duration:17s}
.lp-petals i:nth-child(3){left:38%;animation-delay:-5s}.lp-petals i:nth-child(4){left:55%;animation-delay:-12s;animation-duration:19s}
.lp-petals i:nth-child(5){left:68%;animation-delay:-1s;animation-duration:16s}.lp-petals i:nth-child(6){left:82%;animation-delay:-7s}
.lp-petals i:nth-child(7){left:93%;animation-delay:-3s;animation-duration:18s}
@keyframes lp-fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-80px,760px) rotate(540deg);opacity:0}}

/* sections */
.lp-section{padding:84px 24px}
.lp-tint{background:linear-gradient(180deg,var(--paper2),#f6f1e4);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-head{max-width:760px;margin:0 auto 40px;text-align:center}
.lp-kicker{display:inline-block;margin:0 0 8px;padding:3px 12px;border-radius:999px;background:var(--gold-soft);color:#9a6b17;font-size:13.5px;font-weight:500}
.lp-head h2{margin:0;font-size:clamp(26px,3.2vw,38px);line-height:1.25;font-weight:600}
.lp-head p{margin:12px auto 0;color:var(--ink2);font-size:16.5px}
.lp-center{text-align:center;margin:30px 0 0}
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}

/* steps */
.lp-steps{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:none}
.lp-steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 20px 20px;box-shadow:var(--shadow)}
.lp-steps li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:38px;width:10px;height:10px;border-top:2px solid var(--line2);border-right:2px solid var(--line2);transform:rotate(45deg)}
.lp-step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--jade-soft),#fff);border:1px solid #bfe0d4;color:var(--jade2);font-size:18px;font-weight:600}
.lp-steps h3{margin:14px 0 6px;font-size:18px;font-weight:500}
.lp-steps p{margin:0;color:var(--ink2);font-size:15px}

/* classes */
.lp-classes{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lp-class{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.lp-class:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(23,57,59,.45)}
.lp-class-art{position:relative;height:250px;display:grid;place-items:end center;background:radial-gradient(160px 120px at 50% 70%,rgba(255,255,255,.95),transparent 70%),var(--tone,#dcefe7);overflow:hidden}
.lp-class-art img{position:relative;height:236px;width:auto;filter:drop-shadow(0 10px 10px rgba(23,57,59,.25))}
.lp-class-art::before{content:attr(data-glyph);position:absolute;left:14px;top:8px;font:600 64px/1 "Mitr",serif;color:rgba(255,255,255,.8);text-shadow:0 2px 0 rgba(23,57,59,.05)}
.lp-class-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.lp-class h3{margin:0;font-size:22px;font-weight:600;display:flex;align-items:baseline;gap:8px}
.lp-class h3 small{font:400 13px "Sarabun",Tahoma,sans-serif;color:var(--muted)}
.lp-class-role{margin:0;color:var(--ink2);font-size:15px}
.lp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.lp-chips li{padding:2px 10px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.lp-skills{margin:4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lp-skills li{position:relative}
.lp-skills img{display:block;width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:#24343a;object-fit:cover}
.lp-skills span{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:6px;background:rgba(23,57,59,.82);color:#fff;font:500 10px/1.5 "Mitr",sans-serif}
.lp-skill-names{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.lp-ranks{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line2);font-size:13.5px;color:var(--ink2)}
.lp-ranks b{color:var(--gold);font-weight:600}

/* systems */
.lp-systems{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-system{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.lp-system-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--tone,#e9f3ee);border:1px solid rgba(23,57,59,.08)}
.lp-system-icon img{width:44px;height:44px;object-fit:contain}
.lp-system-icon span{font:600 24px "Mitr",sans-serif;color:var(--ink)}
.lp-system h3{margin:2px 0 4px;font-size:17.5px;font-weight:500}
.lp-system p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.6}
.lp-system .lp-tag{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--gold-soft);color:#8a5f12;font:500 11.5px/1.7 "Mitr",sans-serif;vertical-align:2px}

/* lands */
.lp-realm-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto 12px}
.lp-realm-tabs button{padding:9px 18px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink2);font:500 15px "Mitr",Tahoma,sans-serif;cursor:pointer}
.lp-realm-tabs button small{font:400 12.5px "Sarabun",sans-serif;color:var(--muted);margin-left:4px}
.lp-realm-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lp-realm-tabs button[aria-selected="true"] small{color:#cfe3de}
.lp-realm-note{max-width:720px;margin:0 auto 26px;text-align:center;color:var(--muted);font-size:14.5px}
.lp-lands{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px}
.lp-land{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 12px 14px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.lp-land::before{content:"";position:absolute;inset:0 0 auto;height:92px;background:linear-gradient(180deg,var(--tone,#dcefe7),transparent);opacity:.75}
.lp-land img{position:relative;width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(23,57,59,.22))}
.lp-land-lv{position:absolute;z-index:2;top:10px;left:10px;padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);font:500 12.5px/1.7 "Mitr",sans-serif;color:var(--jade2)}
.lp-land h3{margin:6px 0 0;font-size:15.5px;font-weight:500;line-height:1.35}
.lp-land p{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* items */
.lp-item-strip{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;min-height:220px}
.lp-item{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;padding:14px 12px;border-radius:20px;background:linear-gradient(180deg,#22383b,#17292c);border:1px solid #2f4a4b;color:#eef5ef;text-decoration:none;box-shadow:var(--shadow);transition:transform .18s}
.lp-item:hover{transform:translateY(-4px)}
.lp-item img{width:100%;max-width:140px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.lp-item b{font:500 14px/1.4 "Mitr",sans-serif;color:#fff3d6}
.lp-item small{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-size:12px;color:#a9bfbb}
.lp-item small i{font-style:normal;padding:0 7px;border-radius:999px;background:#2b4446}
.lp-item small i.top{background:#ffb35c;color:#3a2405;font-weight:600}
.lp-item small i.dawn{background:#3d2f10;color:#ffd27a}.lp-item small i.dusk{background:#271a48;color:#c4a6ff}
.lp-item-skel{border-radius:20px;background:linear-gradient(90deg,#efe8d8,#f7f2e6,#efe8d8);background-size:200% 100%;animation:lp-shimmer 1.4s infinite}
@keyframes lp-shimmer{to{background-position:-200% 0}}

/* controls */
.lp-controls{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.lp-controls h3{margin:0 0 12px;font-size:19px;font-weight:500}
.lp-keys{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:center}
.lp-keys dt{white-space:nowrap;font-size:14px;color:var(--ink)}
.lp-keys dd{margin:0;color:var(--ink2);font-size:14.5px}
.lp-ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.lp-ticks li{padding-left:28px;position:relative;color:var(--ink2);font-size:15px}
.lp-ticks li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:6px;background:var(--jade-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232f8f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* final call + footer */
.lp-final{padding:72px 24px;background:radial-gradient(600px 260px at 50% 0%,rgba(255,226,170,.5),transparent 70%),linear-gradient(180deg,#e6f4ef,#d5ebe3)}
.lp-final-in{max-width:720px;margin:0 auto;text-align:center}
.lp-final h2{margin:0;font-size:clamp(28px,3.6vw,42px);font-weight:600}
.lp-final p{margin:10px 0 24px;color:var(--ink2);font-size:17px}
.lp-foot{background:var(--ink);color:#cfe0dc;padding:36px 24px 44px}
.lp-foot-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.lp-foot img{height:56px;width:auto;opacity:.95}
.lp-foot p{margin:0;font-size:14px}
.lp-foot .lp-fine{color:#93aeaa;font-size:13px}
.lp-foot nav{display:flex;gap:18px;margin-top:8px}
.lp-foot a,.lp-foot .lp-link{color:#f2dfb5!important}

/* sign-in sheet over the home page */
html.landing-open.landing-auth #gate{position:fixed;inset:0;z-index:60;place-items:center;padding:20px;overflow:auto;background:rgba(15,40,42,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.landing-open.landing-auth #gate>.brand,html.landing-open.landing-auth #gate>.gate-footer{display:none!important}
html.landing-open.landing-auth #gate .entry{position:relative!important;inset:auto!important;transform:none!important;margin:auto!important;max-height:none!important}
.gate-back{display:none}
html.landing-open.landing-auth .gate-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:6px 12px;border-radius:999px;border:1px solid #d3bb7b55;background:transparent;color:#f2dfb5;font:inherit;font-size:13px;cursor:pointer}
html.landing-open.landing-auth .gate-back:hover{background:#ffffff14}

@media (max-width:1100px){
 .lp-top-in{flex-wrap:wrap;justify-content:space-between;row-gap:4px}
 .lp-nav{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -8px;padding:0 4px 2px;font-size:14px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .lp-nav::-webkit-scrollbar{display:none}
 .lp-nav a{padding:6px 11px}
 #landing{scroll-padding-top:110px}
 .lp-steps{grid-template-columns:repeat(2,1fr)}
 .lp-steps li::after{display:none}
 .lp-steps li:last-child{grid-column:1/-1}
 .lp-classes{grid-template-columns:repeat(2,1fr)}
 .lp-systems{grid-template-columns:repeat(2,1fr)}
 .lp-item-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
 #landing{font-size:15.5px;scroll-padding-top:104px}
 .lp-top-in{padding:8px 16px;gap:10px}
 .lp-logo img{height:40px}
 .lp-top-actions .lp-btn-ghost{display:none}
 .lp-hero{padding:28px 16px 32px}
 .lp-hero-in{grid-template-columns:1fr;gap:34px}
 .lp-hero-art{order:-1}
 .lp-hero-art img{border-radius:20px;border-width:4px;transform:none}
 .lp-float{font-size:12.5px;padding:6px 10px}.lp-float b{font-size:16px}
 .lp-float-a{left:-6px}.lp-float-b{right:-6px}.lp-float-c{bottom:-12px}
 .lp-lede{font-size:16px}
 .lp-cta .lp-btn{flex:1 1 100%}
 .lp-stats{grid-template-columns:repeat(2,1fr);margin-top:32px}
 .lp-stats div:nth-child(3){border-left:0}
 .lp-stats div:nth-child(n+3){border-top:1px dashed var(--line2)}
 .lp-section{padding:56px 16px}
 .lp-steps,.lp-classes,.lp-systems,.lp-controls{grid-template-columns:1fr}
 .lp-class-art{height:220px}.lp-class-art img{height:208px}
 .lp-lands{grid-template-columns:repeat(2,1fr);gap:10px}
 .lp-land img{width:96px;height:96px}
 .lp-item-strip{grid-template-columns:repeat(2,1fr)}
 .lp-keys{grid-template-columns:1fr;gap:2px 0}
 .lp-keys dd{margin-bottom:8px}
 .lp-realm-tabs{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
 #landing{scroll-behavior:auto}
 .lp-petals,.lp-clouds i{animation:none!important}
 .lp-petals{display:none}
 .lp-float{animation:none}
}

/* 0.1.228: nothing flashes while boot.js decides between the home page and the loading screen */
html.booting #loading{visibility:hidden}
.lp-btn.lp-wait{cursor:progress;opacity:.85}
.lp-btn.lp-wait::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lp-spin .8s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}

/* 0.1.229: sign-in sheet — quiet fields (no gold ring on hover/focus), sign-up steps */
#gate input,#gate select{transition:border-color .15s,background-color .15s}
#gate input:hover,#gate input:focus,#gate input:focus-visible,#gate select:hover,#gate select:focus,#gate select:focus-visible{outline:none!important;box-shadow:none!important}
#gate input:focus,#gate select:focus{border-color:#5f8f86!important;background-color:#0e2a2e}
#gate .entry:is([data-auth-mode="signup"],[data-auth-mode="password"]) :is(#google-login,#google-note){display:none!important}
#gate .auth-legacy{margin:2px 0 0;font-size:11.5px;opacity:.75}
#gate .entry:is([data-auth-mode="signup"],[data-auth-mode="password"]) .auth-legacy{display:none}
#signup-form[hidden],#auth-form[hidden]{display:none!important}
.signup-steps{display:flex;gap:6px;margin:0 0 12px;padding:0;list-style:none;counter-reset:st}
.signup-steps li{flex:1;counter-increment:st;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;border:1px solid #d3bb7b33;font-size:12px;color:#b8c7c5;white-space:nowrap}
.signup-steps li::before{content:counter(st);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff14;font-size:11px;flex:none}
.signup-steps li[aria-current="step"]{border-color:#e9cc8e88;color:#fff3d6;background:#e9cc8e14}
.signup-steps li[aria-current="step"]::before{background:#e9cc8e;color:#2a2108}
.signup-steps li[data-done]{color:#9fe0c8}
.signup-steps li[data-done]::before{content:"✓";background:#2f8f78;color:#fff}
#signup-form .primary,.backup-form .primary{width:100%;margin-top:12px}
.signup-steps~div [data-role="code"]{font-size:24px;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
.signup-sent{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:#cfe3dc}
.signup-links{display:flex;justify-content:space-between;margin-top:8px}
.signup-links .text-button:disabled{opacity:.55;cursor:default}
[data-role="error"]{min-height:1em;margin:8px 0 0;color:#ffb4a8;font-size:13px}
[data-role="error"]:empty{display:none}
#gate .primary.is-busy{opacity:.8;cursor:progress}
/* 0.1.229: no "rotate your phone" over the home page or its sign-in sheet; it appears on the way into the game */
html.landing-open #rotate-screen,html.booting #rotate-screen,html.landing-open #city-load-status{display:none!important}

/* 0.1.230: accounts signed in on this browser, forgot-password link, Google backup password */
.slot-list{margin:0 0 12px;padding:10px;border:1px solid #d3bb7b33;border-radius:12px;background:#ffffff08}
.slot-list[hidden]{display:none!important}
#gate .entry:is([data-auth-mode="signup"],[data-auth-mode="password"]) .slot-list{display:none!important}
.slot-head{margin:0 0 8px;font-size:12px;color:#cfe3dc}
.slot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 0;border-top:1px dashed #d3bb7b26}
.slot-who{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.slot-who b{font-size:13.5px;color:#fff3d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-who small{font-size:11px;color:#9fb8b3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-go,.slot-out{min-height:32px;padding:4px 12px;border-radius:999px;font:inherit;font-size:12.5px;cursor:pointer}
.slot-go{border:0;background:linear-gradient(90deg,#e9cc8e,#f2dcaa);color:#2a2108;font-weight:600}
.slot-go:disabled{background:#ffffff1a;color:#9fe0c8;cursor:default}
.slot-out{border:1px solid #d3bb7b44;background:transparent;color:#cfe3dc}
.slot-or{margin:8px 0 0;font-size:11.5px;color:#9fb8b3;text-align:center}
#gate .auth-forgot{display:block;margin:10px auto 0;font-size:12.5px}
.roster-backup{margin-top:8px;padding:8px 14px;border-radius:999px;border:1px solid #c99434;background:#fff6e0;color:#7a5512;font:inherit;font-size:13px;cursor:pointer}
.roster-backup[hidden]{display:none}
.backup-dialog{width:min(420px,calc(100vw - 24px));padding:22px 22px 18px;border-radius:18px}
.backup-dialog h2{margin:0 0 6px;font-size:20px}
.backup-dialog .muted{margin:0 0 12px;font-size:13px;line-height:1.55}
.backup-dialog .close{position:absolute;right:12px;top:10px}
.backup-dialog .backup-form input[readonly]{opacity:.8}
.backup-dialog .signup-links [data-role="change"]{display:none}

/* 0.1.231: each account plays here or in its own new window; roster password form; no yellow focus ring */
.slot-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.slot-win{min-height:32px;padding:4px 12px;border-radius:999px;font:inherit;font-size:12.5px;cursor:pointer;border:1px solid #e9cc8e88;background:#e9cc8e1f;color:#f6e3b8}
.slot-win:disabled{opacity:.45;cursor:default}
@media (max-width:520px){.slot-row{grid-template-columns:1fr}.slot-actions{justify-content:flex-start}}
.roster-other{margin-top:8px;padding:8px 14px;border-radius:999px;border:1px solid #9cbfae;background:#eef6ef;color:#2f5d4c;font:inherit;font-size:13px;cursor:pointer}
.backup-dialog label{display:block;margin:10px 0 0;font-size:13px;color:#d9e8e2}
.backup-dialog label[hidden]{display:none}
.backup-dialog input{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;border:1px solid #d3bb7b44;background:#10292d;color:#f4efe2;font:inherit;font-size:15px}
.backup-dialog input:is(:hover,:focus,:focus-visible),#gate input:is(:hover,:focus,:focus-visible),#character-selection input:is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
.backup-dialog input:focus{border-color:#7fa59c88}
.pw-error{min-height:1em;margin:10px 0 0;color:#ffb4a8;font-size:13px}
.pw-error:empty{display:none}
/* 0.1.231: roster account row: sign out and another account side by side, the password button below */
#character-selection .roster-account-actions{display:grid!important;grid-template-columns:auto 1fr;gap:8px;align-items:stretch}
#character-selection .roster-account-actions>button{margin:0!important;min-height:36px;white-space:nowrap;font-size:13px}
#character-selection .roster-account-actions #roster-other{order:2;padding:6px 12px}
#character-selection .roster-account-actions #roster-backup{order:3;grid-column:1/-1;padding:6px 12px}
#character-selection .roster-account-actions #roster-backup[hidden]{display:none}