:root{font-family:'Be Vietnam Pro',Arial,sans-serif;color:#1E1E1E;background:#FFF3EE;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
.display-layout{height:100vh;height:100dvh;display:grid;grid-template-columns:47% 53%}
.display-message{background:#EE5923;padding:clamp(24px,4.3vw,88px);display:flex;flex-direction:column;justify-content:center;min-height:0;gap:clamp(16px,2.8vh,32px)}
.display-logo{display:block;width:clamp(150px,20vw,370px);height:auto;max-height:11vh;object-fit:contain;object-position:left}
.display-eyebrow{font-size:clamp(11px,1.05vw,22px);font-weight:700;letter-spacing:.14em;margin:1vh 0 0;line-height:1.5}
h1{color:#FFFFFF;font-size:clamp(28px,min(3.9vw,7vh),76px);line-height:1.16;letter-spacing:-.035em;margin:0;font-weight:800}
h1 span{display:block;color:#1E1E1E;margin-top:1.8vh}
.display-steps{list-style:none;padding:0;margin:1vh 0 0;display:grid;gap:1.4vh;font-size:clamp(13px,min(1.45vw,2.9vh),29px);font-weight:700}
.display-steps li{display:flex;align-items:center;gap:1vw;line-height:1.35}
.display-steps span{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75em;height:1.75em;background:#1E1E1E;color:#FFFFFF;border-radius:50%;font-size:.8em}
.display-code{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2vh;min-width:0;padding:3vh 1.5vw 5vh}
.scan-heading{color:#9D360F;font-size:clamp(14px,1.5vw,30px);letter-spacing:.16em;font-weight:800;margin:0}
.qr-frame{width:min(70vh,47vw);height:min(70vh,47vw);background:#FFFFFF;flex-shrink:0;box-shadow:0 12px 50px #65280f0c}
.qr-frame svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}

.scan-caption{font-size:clamp(10px,1vw,20px);color:#6B5951;letter-spacing:.09em;margin:0;text-align:center;line-height:1.4}
#fullscreen{position:fixed;right:16px;top:12px;border:1px solid #A2887D;background:#FFFFFF;color:#1E1E1E;border-radius:6px;padding:8px 10px;font:700 12px 'Be Vietnam Pro',Arial,sans-serif;cursor:pointer;z-index:2}
#fullscreen span{margin-left:8px;color:#6B5951}
#fullscreen:focus-visible{outline:3px solid #9D360F;outline-offset:3px}
:fullscreen #fullscreen{display:none}
.cursor-hidden,.cursor-hidden *{cursor:none!important}
#fullscreen-status{position:fixed;right:16px;top:40px;background:#FFF3EE;color:#1E1E1E;font-size:12px;max-width:270px}
#fullscreen-status:empty{display:none}
.local-warning{position:fixed;bottom:0;left:0;width:100%;padding:8px 16px;background:#FFF0AD;color:#513D00;font-size:clamp(10px,1vw,16px);line-height:1.35;text-align:center}
@media(orientation:portrait){
  .display-layout{grid-template-columns:1fr;grid-template-rows:59% 41%}
  .display-code{grid-row:1}
  .display-message{grid-row:2}
  .display-message{padding:2.2vh 6vw;gap:1vh;align-items:center;text-align:center}
  .display-logo{width:auto;height:5.3vh;max-width:55vw;max-height:none}
  .display-eyebrow{font-size:clamp(8px,1.15vh,16px);margin:0;letter-spacing:.09em}
  h1{font-size:clamp(19px,min(5.2vw,3.5vh),54px);line-height:1.1;max-width:90vw}
  h1 span{margin-top:.8vh}
  .display-steps{display:flex;gap:3vw;margin:.6vh 0 0;font-size:clamp(9px,min(2.6vw,1.5vh),20px);text-align:left}
  .display-steps li{gap:1vw;max-width:27vw}
  .display-code{gap:1vh;padding:1.7vh 6vw 5vh}
  .qr-frame{width:min(40vh,76vw);height:min(40vh,76vw)}
  .scan-heading{font-size:clamp(12px,1.8vh,25px)}
  
  .scan-caption{font-size:clamp(8px,1.05vh,15px)}
  #fullscreen{font-size:10px;right:6px;top:6px;padding:6px}#fullscreen span{display:none}
  .local-warning{font-size:10px;padding:5px 10px}
}
@media(max-height:480px) and (orientation:landscape){.display-message{padding:3vh 4vw;gap:1vh}.display-logo{max-height:9vh}.display-eyebrow{font-size:9px}.display-steps{font-size:11px;gap:.6vh}h1{font-size:6.4vh}.display-code{gap:1vh}.scan-heading{font-size:10px}.scan-caption{font-size:8px}.local-warning{font-size:9px;padding:4px}}
.display-operator{position:fixed;left:16px;top:12px;z-index:2;display:flex;align-items:center;gap:10px;font-size:11px}
#variant-back{display:inline-flex;align-items:center;gap:8px;border:1px solid #A2887D;background:#FFFFFFE8;color:#1E1E1E;border-radius:6px;padding:8px 10px;font-size:12px;font-weight:500;text-decoration:none}
#variant-back kbd{font:inherit;color:#6B5951;font-size:10px}
.display-operator>span{color:#1E1E1E;background:#FFFFFFE8;border-radius:5px;padding:5px 7px;font-size:10px}
:fullscreen .display-operator,.cursor-hidden .display-operator,.cursor-hidden #fullscreen{visibility:hidden;pointer-events:none}
#variant-back:focus-visible{outline:3px solid #9D360F;outline-offset:3px}
@media(orientation:portrait){.display-operator{left:6px;top:6px;gap:5px}#variant-back{font-size:10px;padding:6px;gap:4px}.display-operator>span{font-size:8px;padding:4px}.display-code{padding-top:4vh}}
@media(max-width:380px){.display-operator{align-items:flex-start;flex-direction:column;gap:3px}.display-operator>span{font-size:8px}}
@media(orientation:portrait) and (max-width:380px){.display-code{padding-top:64px}.qr-frame{width:min(35vh,70vw);height:min(35vh,70vw)}}