/* Page chrome around the two versions. Card styles live in kit.css and in each version's own K.css block. */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:#F8EEE2;color:#162412;font:400 16px/1.5 'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif}
button{font:inherit;color:inherit}

.top{position:sticky;top:0;z-index:50;background:rgba(248,238,226,.94);border-bottom:1px solid #E5D2B8;backdrop-filter:blur(8px)}
.top-in{max-width:1040px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top h1{margin:0 auto 0 0;font:400 22px/1.2 'SN Gangster',Georgia,serif;color:#4C6234;letter-spacing:-.3px}

.seg{display:inline-flex;padding:4px;border-radius:32px;background:#EFE3D3}
.seg button{border:0;background:none;cursor:pointer;height:36px;padding:0 16px;border-radius:32px;font:500 14px/1 'NB International Pro',Helvetica,Arial,sans-serif;color:#71717A;transition:background .15s,color .15s}
.seg button:hover{color:#4C6234}
.seg button[aria-pressed=true]{background:#fff;color:#4C6234}
.seg button:focus-visible{outline:2px solid #A18372;outline-offset:1px}
.seg.quiet button{height:32px;padding:0 12px;font-size:13px}

.wrap{max-width:1040px;margin:0 auto;padding:20px 24px 72px}
.about{display:flex;align-items:baseline;gap:16px;min-height:28px;margin:0 0 14px}
.about p{margin:0 auto 0 0;font-size:15px;color:#4B5548;max-width:70ch}
.again{flex:none;border:0;background:none;padding:6px 0;cursor:pointer;font:500 14px/1.2 'NB International Pro',Helvetica,Arial,sans-serif;color:#4C6234;text-decoration:underline;text-underline-offset:3px}
.again:focus-visible{outline:2px solid #A18372;outline-offset:3px}

.stage{position:relative;border-radius:18px;background:#EDE3D5 url(../img/stage/stage-bg.webp) center/cover;padding:40px 24px;min-height:560px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.stage>.mount{width:100%;display:flex;justify-content:center}

.read{margin:20px 0 0;padding:18px 20px 20px;border-radius:12px;background:#FFFAF5;border:1px solid #E5D2B8}
.read h2{margin:0 0 8px;font:400 11px/1.2 'NB International Pro Mono',ui-monospace,Consolas,monospace;letter-spacing:1.3px;text-transform:uppercase;color:#7D9366}
.read p{margin:0;font-size:16px;line-height:1.55;color:#162412}
.read p + p{margin-top:4px}
.read .none{color:#8A8F87}

@media (max-width:700px){
  .top-in{padding:10px 16px;gap:10px}
  .top h1{font-size:19px;width:100%;margin:0}
  .seg#ver{flex:1}
  .seg#ver button{flex:1;padding:0 8px}
  #size{display:none}
  .wrap{padding:14px 0 56px}
  .about{padding:0 16px;margin-bottom:12px}
  .about p{font-size:14px}
  .stage{padding:18px 0;border-radius:0;min-height:420px}
  .read{margin:16px 16px 0}
}