*{box-sizing:border-box}body{margin:0;background:#25160f;color:#ead3aa;font:14px system-ui,sans-serif;min-height:100svh;display:grid;place-items:center}main{width:min(100%,1446px,calc(100svh * 1.33))}#toy{position:relative;width:100%;aspect-ratio:1446/1087;isolation:isolate}#toy img{width:100%;height:100%;display:block;user-select:none}#glass{position:absolute;left:32.2%;top:30.4%;width:50.8%;height:10.5%;background:radial-gradient(ellipse,#231b12 0%,#20150e 72%,#20140cee);border-radius:5%;display:grid;align-items:center;padding:0 2%}#segments{width:100%;height:75%;filter:drop-shadow(0 0 3px #36f690) drop-shadow(0 0 7px #2f9a58)}#keys button{position:absolute;border:0;border-radius:25%;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#keys button:hover{background:#ffe5ac15}#keys button:active,#keys button.hit{background:#3e111c50;box-shadow:inset 0 2px 5px #3c181b88}#keys button:focus-visible{outline:3px solid #b0ffd5;outline-offset:1px}#lamp{position:absolute;left:72.98%;top:23.98%;width:1.98%;aspect-ratio:1;border-radius:100%;background:#ff5b58;box-shadow:0 0 12px 4px #ff382e}.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


#toy[data-power="off"] #lamp {
  display: block;
  pointer-events: none;
  left: 72.85%;
  top: 23.75%;
  width: 2.35%;
  background: radial-gradient(circle at 40% 32%, #773d41 0%, #502027 20%, #370f19 67%, #260e15 100%);
  box-shadow: none;
}

#essay {
  width: 100%;
  height: 91%;
  image-rendering: pixelated;
  mask-image: radial-gradient(ellipse, black 62%, transparent 87%);
  mask-size: 0.25% 1.5625%;
}
#glass.reading #segments { display: none; }

#toy footer {
  position: absolute;
  top: 1.4%;
  left: 2%;
  max-width: 51%;
  display: flex;
  align-items: baseline;
  gap: .65em;
  padding: .2em .55em;
  border-radius: .3em;
  background: #25160fd9;
  color: #f3dec2;
  font-size: clamp(10px, 1.3vw, 14px);
  pointer-events: none;
}
#mode { white-space: nowrap; }
#status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  #toy footer { max-width: 94%; top: 0; }
}

body { isolation: isolate; }
#tabletop { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }