@font-face{font-family:'Noto Serif';src:url('/assets/noto-serif.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('/assets/noto-sans.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:light;font-family:'Noto Sans','Segoe UI',sans-serif;color:#382214;background:#211a14;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;display:grid;align-content:center}
.world{position:relative;width:100%;max-width:1920px;aspect-ratio:3/2;margin:0 auto;container-type:inline-size;background:#a16c3e url('/assets/silkroad-world.png') center/100% 100% no-repeat;isolation:isolate}
.intro{position:absolute;inset:0;pointer-events:none}
.logo{position:absolute;left:21%;top:2%;width:38.5%;height:17%}
.tagline{position:absolute;top:18.8%;left:22%;width:37%;margin:0;text-align:center;font:italic 400 1.35cqw/1.6 'Noto Serif',serif;letter-spacing:.28cqw;color:#ffe5a8;text-shadow:0 2px 4px #321c0f}
.story{position:absolute;top:26.3%;left:22%;width:37%;text-align:center}
h1{margin:0;white-space:nowrap;font:700 4cqw/1.5 'Noto Serif',serif;letter-spacing:-.16cqw;color:#321503;text-shadow:0 1px 1px #ffd790}
.story p{margin:.75cqw -1.5cqw 0;font:600 1.9cqw/1.7 'Noto Serif',serif;color:#311909;text-shadow:0 1px 1px #ffe8a6}
.panel{position:absolute;left:61.8%;top:6.3%;width:35.8%;height:85.5%}
h2{position:absolute;top:5.4%;width:100%;margin:0;text-align:center;font:700 2.55cqw/1.6 'Noto Serif',serif;letter-spacing:-.09cqw;color:#2d1c12}
.form-subtitle{position:absolute;top:17%;width:100%;margin:0;text-align:center;font:600 1.3cqw/1.6 'Noto Serif',serif;color:#56321e}
.field{position:absolute;left:9.5%;width:81%}
.field-username{top:24%}.field-password{top:39.1%}.field-confirm{top:54.1%}.field-answer{top:66.2%}
label{display:block;margin:0 0 .4cqw;font-size:1.17cqw;font-weight:650;line-height:1.5;color:#412b1d}
input{display:block;width:100%;height:3.1cqw;padding:.5cqw .8cqw;border:1px solid #987a4f;border-radius:4px;background:linear-gradient(110deg,#fffdf480,#e6dfcb40);box-shadow:inset 0 1px 4px #79552424,0 1px 1px #fffcdfb3;color:#302116;font-family:inherit;font-size:1.15cqw;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:#7d4b16;box-shadow:0 0 0 3px #b9863c30,inset 0 1px 3px #88633b22}
small{display:block;margin-top:.35cqw;font-size:.92cqw;line-height:1.6;color:#6a432b}
button{position:absolute;left:9.5%;top:78%;width:81%;height:7.7%;padding:0 8px;border:2px solid #cfaa59;border-radius:6px;outline:1px solid #6f430e;outline-offset:2px;background:linear-gradient(100deg,#55370dba,#9f6c21a8 48%,#583a10cc);box-shadow:inset 0 0 0 2px #694411,inset 0 0 0 3px #d2ac6380,0 3px 7px #53310c44;color:#ffdf8e;text-shadow:0 2px 2px #261300;font:700 1.9cqw/1.5 'Noto Serif',serif;text-transform:uppercase;letter-spacing:.02cqw;cursor:pointer;transition:filter .15s}
button::before,button::after{content:'❧';position:absolute;top:50%;transform:translateY(-50%);font-size:1.4cqw;color:#e1be6e}button::before{left:9px}button::after{right:9px;transform:translateY(-50%) rotate(180deg)}
button:hover{filter:brightness(1.13)}button:focus-visible{outline:3px solid #382614;outline-offset:5px}button:disabled{cursor:wait;filter:saturate(.6);opacity:.8}
.note{position:absolute;top:88.1%;width:100%;margin:0;text-align:center;color:#66472e;font-size:.91cqw;line-height:1.6}
#message{position:absolute;left:8%;top:92%;width:84%;margin:0;padding:.25cqw .5cqw;font-size:.86cqw;line-height:1.5;text-align:center;border-radius:3px;background:#fcf3dcf2}
#message:empty{display:none}.error{color:#8b241c}.success{color:#28552a}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.corner{display:none}
footer{position:absolute;top:95.5%;width:100%;text-align:center;color:#e8c683;font:500 1cqw/1.8 'Noto Serif',serif;letter-spacing:.1cqw}
@media(min-aspect-ratio:2/1) and (min-width:901px){.world{max-width:150vh}}
@media(max-width:900px){
  body{display:block;background:#3d2919}
  .world{aspect-ratio:auto;min-height:100vh;padding:0 16px 20px;background-image:none;background-color:#3d2919}
  .world::before{content:'';position:absolute;z-index:-1;inset:360px 0 0;background:linear-gradient(transparent,#3d2919 130px)}
  .intro{position:relative;inset:auto;height:350px}
  .intro::before{content:'';position:absolute;inset:0 -16px;z-index:-1;background:url('/assets/silkroad-world.png') left -22cqw/163% auto no-repeat}
  .intro::after{content:'';position:absolute;inset:0 -16px;z-index:-1;background:linear-gradient(#28160918,transparent 65%,#3d2919)}
  .logo{left:50%;top:12px;transform:translateX(-50%);width:min(440px,100%);height:140px;background:url('/assets/silkroad-logo.png') center/contain no-repeat}
  .tagline{top:148px;left:0;width:100%;font-size:15px;letter-spacing:3px}
  .story{top:210px;left:0;width:100%}
  h1{font-size:clamp(28px,7.7vw,49px);letter-spacing:-1.2px;line-height:1.6;color:#ffe4a8;text-shadow:0 2px 4px #321909,0 0 16px #301b12}
  .story p{font-size:clamp(14px,3.9vw,22px);margin:2px 0;color:#fff0d0;text-shadow:0 2px 3px #291b12}
  .panel{position:relative;left:auto;top:auto;width:min(540px,100%);height:auto;margin:0 auto;padding:33px 27px 31px;background:radial-gradient(ellipse at 0 100%,#ad8b4840,transparent 55%),radial-gradient(ellipse at 100% 0,#d0b88760,transparent 55%),linear-gradient(115deg,#f1e6c9,#fbf5e2 47%,#ebdfc0);border:2px solid #9d7736;outline:1px solid #d9b674;outline-offset:4px;box-shadow:inset 0 0 0 3px #4f351d,inset 0 0 0 5px #ccaa60,inset 0 0 28px #9d702d55,0 14px 35px #180f0c80}
  .corner{display:block;position:absolute;color:#987039;font-size:28px;line-height:1}
  .corner-tl{top:7px;left:7px}.corner-tr{top:7px;right:7px;transform:rotate(90deg)}.corner-bl{bottom:7px;left:7px;transform:rotate(-90deg)}.corner-br{bottom:7px;right:7px;transform:rotate(180deg)}
  h2{position:static;font-size:clamp(23px,6.5vw,33px);letter-spacing:-.8px;line-height:1.6}
  h2::after{content:'— ❧ —';display:block;color:#aa8445;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:7px}
  .form-subtitle{position:static;font-size:14px;margin:12px 0 26px;line-height:1.7}
  .field{position:static;width:100%;margin:0 0 23px}
  label{font-size:14px;margin-bottom:7px;line-height:1.6}
  input{height:47px;font-size:16px;padding:10px 12px}
  small{font-size:11px;margin-top:6px;line-height:1.7}
  button{position:relative;left:auto;top:auto;width:100%;height:57px;margin:4px 0 0;font-size:23px;letter-spacing:0;background:linear-gradient(110deg,#67410e,#9f712b 45%,#664010)}
  button::before,button::after{font-size:22px}
  .note{position:static;font-size:11px;margin:22px 0 0}
  #message{position:static;width:100%;font-size:12px;padding:10px 8px;margin-top:17px}
  footer{position:static;font-size:12px;letter-spacing:.5px;margin-top:28px;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}