* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  background: #090a0c;
  color: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 44%, #191a1e 0, #0c0d0f 47%, #070809 100%);
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background: url("./Pusan_National_University_logo.svg.webp") repeat;
  background-size: 170px 170px;
  opacity: 0.2;
  pointer-events: none;
}

.calculator {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  min-height: min(850px, calc(100svh - 48px));
  padding: max(28px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.app-layout {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 56px);
}

.camera-panel {
  width: min(100%, 360px);
  flex: 0 0 min(360px, 42%);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 26px;
  background: rgba(18, 19, 23, .84);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
}

.camera-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #ffb340; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.camera-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.6px; }
.camera-status { flex: 0 0 auto; margin-top: 4px; padding: 6px 9px; border-radius: 999px; color: #c7c8ce; background: rgba(255,255,255,.09); font-size: 11px; }
.camera-status[data-state="active"] { color: #9df0bc; background: rgba(45,180,100,.16); }
.camera-status[data-state="error"] { color: #ffb5b5; background: rgba(255,70,70,.16); }
.camera-view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg,#272a31,#141519); }
.camera-view video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scaleX(-1); }
.camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 20px; color: #b4b6bf; font-size: 13px; text-align: center; }
.camera-face { color: #ffb340; font-size: 42px; }
.camera-view.is-live .camera-placeholder { display: none; }
.alarm-message { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,20,55,.38); color: white; font-size: clamp(52px, 8vw, 76px); font-weight: 900; letter-spacing: -.08em; text-shadow: 0 5px 24px rgba(0,0,0,.6); opacity: 0; pointer-events: none; }
.camera-view.alarm .alarm-message { opacity: 1; }
.camera-view.alarm { animation: flash-alarm .34s steps(2, jump-none) infinite; }
@keyframes flash-alarm { 50% { box-shadow: inset 0 0 0 7px #ff3155; filter: brightness(1.45); } }
.blink-counter { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 5px; color: #c3c5cc; font-size: 14px; }
.blink-counter strong { color: #fff; font-size: 25px; font-variant-numeric: tabular-nums; }
.blink-counter small { color: #858791; font-size: 15px; font-weight: 500; }
.camera-note { min-height: 44px; margin: 7px 0 17px; color: #9699a3; font-size: 12px; line-height: 1.65; }
.camera-actions { display: flex; gap: 10px; }
.camera-button { min-height: 44px; flex: 1; border: 0; border-radius: 13px; background: #ff9f0a; color: #17120a; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.camera-button:hover:not(:disabled) { background: #ffb340; }
.camera-button.secondary { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #f2f2f4; }
.camera-button:disabled { opacity: .42; cursor: default; }

.title {
  position: fixed;
  z-index: 2;
  top: max(24px, calc(env(safe-area-inset-top) + 12px));
  left: max(24px, calc(env(safe-area-inset-left) + 20px));
  margin: 0;
  color: #f4f4f6;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.display {
  flex: 1;
  min-height: 190px;
  padding: 18px 4px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
}

.expression {
  width: 100%;
  min-height: 28px;
  color: #92949a;
  font-size: 19px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result {
  width: 100%;
  color: #f8f8f8;
  font-size: clamp(64px, 18vw, 88px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -4px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 3.1vw, 15px);
}

.key {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 400;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 100ms ease, transform 100ms ease, background 100ms ease;
  user-select: none;
}

.key:active { filter: brightness(1.35); transform: scale(.96); }
.key:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.number { background: #333438; }
.number:hover { background: #45464b; }
.utility { background: #a5a6aa; color: #111216; font-size: clamp(20px, 5.6vw, 26px); }
.utility:hover { background: #c0c1c5; }
.operator { background: #ff9f0a; font-size: clamp(32px, 8vw, 40px); }
.operator:hover { background: #ffb340; }
.operator.selected { background: #fff; color: #ff9f0a; }
.zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; justify-content: start; padding-left: 12%; }
.home-indicator { width: 128px; height: 5px; margin: 28px auto 0; border-radius: 9px; background: #f5f5f5; }

@media (min-width: 600px) {
  .calculator { min-height: 780px; padding-inline: 30px; }
}

@media (max-height: 650px) {
  .calculator { min-height: 100svh; }
  .display { min-height: 120px; }
  .home-indicator { margin-top: 15px; }
}

@media (max-width: 760px) {
  body { align-items: flex-start; }
  .app-layout { flex-direction: column; gap: 8px; }
  .calculator { width: min(100%, 440px); min-height: min(780px, calc(100svh - 48px)); }
  .camera-panel { width: min(100%, 440px); flex-basis: auto; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .camera-view.alarm { animation: none; }
}