:root{--card-width:310px;--card-height:328px}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
main{padding:24px 0;min-height:100svh}
.experience{max-width:760px;margin:auto}
.about-brand{text-align:center;padding:16px 24px 0;flex-shrink:0}
.about-brand h1{margin:0;color:#62646a;font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.26em;text-indent:.26em}
.about-brand p{margin:8px 0 0;color:#92959b;font-size:11px;line-height:1.7;letter-spacing:.12em;text-indent:.12em}
.scene{height:440px;min-height:440px}
.interaction{margin-top:4px}
.hint{color:#666971;font-size:14px;margin-bottom:16px;max-width:400px;min-height:24px}
.instructions{font-size:13px;line-height:1.8;color:#858991;margin:20px 0 0}
.toolbar{gap:2px}
.card-link{position:absolute;display:block;cursor:pointer;text-decoration:none;border-radius:5px;-webkit-tap-highlight-color:#b7a35333}
.card-link:hover{background:#b7a35312;box-shadow:inset 0 -1px #a4913266}
.card-link:focus-visible{outline:2px solid #a49132;outline-offset:3px}
.glass-link{left:0;top:0;z-index:3;transform-origin:0 0}
.card-link[hidden]{display:none!important}
.fallback-link{z-index:3;transform-origin:center}
.scene[data-renderer=css] .face{border:1px solid #d9dee4;box-shadow:inset 1px 1px 3px #fff9}
@media(max-width:600px){
  :root{--card-width:min(76vw,310px);--card-height:min(80.45vw,328px)}
  main{padding:12px 0 24px}
  .about-brand{padding-top:8px}
  .about-brand h1{font-size:11px;letter-spacing:.22em;text-indent:.22em}
  .scene{height:min(56svh,440px);min-height:360px}
  .hint{max-width:340px}
  .toolbar button{padding:12px 10px;font-size:14px}
  .instructions{font-size:13px}
}
@media(max-height:520px) and (orientation:landscape){
  :root{--card-width:220px;--card-height:233px}
  main{padding:12px}
  .experience{gap:8px}
  .about-brand{position:absolute;top:16px;left:0;right:0;padding:0 24px}
  .about-brand p{display:none}
  .scene{width:48%;height:280px;min-height:280px;flex-shrink:0}
  .interaction{max-width:48%}
  .instructions{margin-top:12px}
}