:root {
  --eggEdge: #6a6ecb; --bg: #1c1c1e; --sheet: #f6fcfd; --accent: #2a9db3; --text: #1f2a30; --btn: #ff8a3d;
}
@media (prefers-color-scheme: dark) {
  :root { --sheet: #232d36; --text: #e8f3f5; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overscroll-behavior: none; touch-action: manipulation; }
#app { height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* a long press (dial = lab menu, held buttons) must not start a text selection or the iOS copy/look-up callout:
   iOS Safari needs the -webkit- prefixes. Text fields keep normal selection. */
#app, #app * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#app input, #app textarea, #app select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* above the bottom sheets (z-index 10): an open menu's shadow must not dim the bar's text and icons */
header { position: relative; z-index: 11; background: var(--bg); display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: #fff; }
/* home-screen web app on iPhone: iOS blurs a band just below the status bar (the page is drawn under it), and the bar
   above sat inside it. Push the bar down out of that band; Safari tabs and desktop are unchanged. */
@media (display-mode: standalone) {
  header { margin-top: 28px; }
}
#title { font-weight: 700; font-size: 14px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 120px); }
button.icon { background: none; border: 0; color: #fff; font-size: 22px; width: 44px; height: 44px; border-radius: 12px; }
button.icon:active, button.icon.on { background: rgba(255,255,255,.16); }

/* device: egg shell, cap with a zigzag edge, decorated frame, screen, dial, three buttons. Case colours: cases.css,
   frame patterns: js/cases.js (both generated by work/mkcases.mjs).
   Every part is placed in % of the egg box, so the whole device scales with --eggw. */
#device { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 4px 0 12px; }
#egg { --eggw: min(calc(100vw - 48px), calc((100dvh - 150px) * 0.86), 560px); position: relative; width: var(--eggw); height: calc(var(--eggw) / 0.88); margin-right: calc(var(--eggw) * 0.06);
  --egg1: #f3f4ff; --egg2: #c4c7ef; --eggEdge: #8e93d8; --cap: #8186da; --cap2: #6a6ecb; --wheel: #7479d6; --ridge: #4f53b0;
  --btn1: #c3c6f6; --btn2: #7c81d9; --btn3: #5a5fbd; --letter: rgba(255,255,255,.8); }
#shell { position: absolute; inset: 0; border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%; overflow: hidden; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* makes Safari clip composited children to the radius */
  background: radial-gradient(ellipse at 40% 35%, var(--egg1), var(--egg2) 75%); border: 3px solid var(--eggEdge);
  box-shadow: inset 0 -10px 24px rgba(60,40,120,.22), 0 14px 34px rgba(0,0,0,.45); }
/* cap with a zigzag edge and a light rim under it (#capRim, the same shape 2px lower). No CSS filter here: Safari lets a
   filtered child escape the shell's rounded overflow clip, so the cap showed as a rectangle. */
/* the cap sits in front of the frame (as on the device): its own layer, clipped to the inside of the shell outline */
#capLayer { position: absolute; inset: 3px; border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%; overflow: hidden; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); pointer-events: none; }
#cap, #capRim { position: absolute; left: 0; right: 0; top: 0; height: 24%;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 89% 94%, 79% 56%, 67% 90%, 57% 50%, 46% 86%, 36% 52%, 24% 94%, 13% 58%, 0 80%); }
#cap { background: linear-gradient(to bottom, var(--cap) 40%, var(--cap2)); }
#capRim { top: 2px; background: rgba(255,255,255,.6); }
#frame { position: absolute; left: 7.75%; top: 13.85%; width: 84%; height: 73.9%; filter: drop-shadow(0 2px 3px rgba(40,30,110,.35)); }
#frame svg { display: block; width: 100%; height: 100%; }
#bezel { position: absolute; left: 25%; top: 29%; width: 49.5%; aspect-ratio: 1; border-radius: 4%; background: #000; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 4px 10px rgba(30,20,90,.45); }
#lcd { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; background: rgba(0,0,0,.6); font-size: 14px; padding: 12px; line-height: 1.5; }

/* dial: a knurled knob seen edge-on (axis to the right), at the top right, tilted up */
#dial { position: absolute; left: 88%; top: 9%; width: 12%; height: 15.5%; border-radius: 26%; background: var(--wheel);
  transform: rotate(-38deg); transform-origin: 0% 60%;
  border: 3px solid var(--ridge); box-shadow: 0 3px 8px rgba(0,0,0,.35); touch-action: none; cursor: ns-resize; user-select: none; }
#dial.pushed { filter: brightness(.85); box-shadow: 0 1px 3px rgba(0,0,0,.35); }   /* held: the menu key */
#dial::before { content: ""; position: absolute; left: -32%; top: 30%; width: 34%; height: 40%; background: var(--egg2); border: 2px solid var(--eggEdge); border-right: 0; border-radius: 30% 0 0 30%; }
#dial::after { content: ""; position: absolute; right: -14%; top: 6%; width: 22%; height: 88%; border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, var(--btn1), var(--wheel) 70%); border: 2px solid var(--ridge); }
#wheel { position: absolute; inset: 9% 12%; border-radius: 30%; overflow: hidden;
  background: repeating-linear-gradient(to bottom, var(--wheel) 0 7px, var(--ridge) 7px 10px); background-position: 0 0; }
#wheel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)); }

button.hw { position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; padding: 0; touch-action: none; user-select: none;
  border: 3px solid var(--eggEdge); color: var(--letter); font-weight: 700; font-size: calc(var(--eggw) * 0.035);
  background: radial-gradient(circle at 32% 28%, #fff 0 13%, var(--btn1) 20%, var(--btn2) 62%, var(--btn3));
  box-shadow: 0 3px 0 rgba(60,40,110,.35), 0 5px 10px rgba(0,0,0,.25); transition: transform .04s; }
button.hw::before { content: ""; position: absolute; inset: -40%; }   /* larger touch target */
button.hw[data-b="0"] { left: 23.3%; top: 84.4%; }
button.hw[data-b="1"] { left: 44.5%; top: 86.3%; }
button.hw[data-b="2"] { left: 66.4%; top: 84.4%; }
button.hw.down { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60,40,110,.35); filter: brightness(.93); }
/* simple layout (#egg.simple, menu → 화면 디자인): just the screen, ◀ 메뉴 ▶ for the dial and the A·B·C buttons, in a grid.
   Colours still come from the case. */
#simpleDial { display: none; }
#egg.simple { --eggw: min(calc(100vw - 32px), calc((100dvh - 150px) * 0.68), 520px); height: auto; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--eggw) * 0.06); }
#egg.simple > #shell, #egg.simple > #frame, #egg.simple > #capLayer, #egg.simple > #dial { display: none; }
#egg.simple #bezel { position: relative; left: auto; top: auto; width: 100%; grid-column: 1 / -1; grid-row: 1; border-radius: 3%;
  box-shadow: 0 0 0 4px var(--eggEdge), 0 8px 22px rgba(0,0,0,.45); }
#egg.simple #simpleDial { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: calc(var(--eggw) * 0.04); }
#egg.simple button.hw { position: relative; left: auto; top: auto; grid-row: 3; justify-self: center; width: 62%; font-size: calc(var(--eggw) * 0.06); }
button.sd { height: calc(var(--eggw) * 0.11); min-width: calc(var(--eggw) * 0.18); padding: 0 calc(var(--eggw) * 0.03); border-radius: 999px;
  border: 3px solid var(--ridge); background: var(--wheel); color: #fff; font-weight: 700; font-size: calc(var(--eggw) * 0.045);
  touch-action: none; user-select: none; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
button.sd.down { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); filter: brightness(.88); }
#status { font-size: 12px; color: rgba(255,255,255,.75); min-height: 16px; text-align: center; }

/* sheets sit at the bottom: their height must fit the visible screen. 88vh alone is measured with the browser's
   toolbars hidden, so on phones the top of the menu (the firmware list) ran off the screen; dvh is the visible height. */
.sheet { position: fixed; inset: auto 0 0 0; max-height: 88vh; max-height: calc(100dvh - env(safe-area-inset-top) - 64px);   /* header is 60px */ overflow: auto; background: var(--sheet); color: var(--text);
  border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.4); z-index: 10; }
.sheet h2 { margin: 4px 0 12px; font-size: 19px; }
.sheet p { line-height: 1.55; font-size: 14px; }
.sheet .fine { opacity: .65; font-size: 12px; }
.group { margin: 14px 0; }
.label { font-size: 12px; font-weight: 700; opacity: .6; margin-bottom: 6px; }
.sheet button, .filebtn, .sheet select { display: block; width: 100%; text-align: left; padding: 13px 14px; margin: 6px 0; border-radius: 12px;
  border: 1px solid rgba(128,128,128,.25); background: transparent; color: inherit; font-size: 15px; }
.sheet select { appearance: auto; }
.sheet button:active, .filebtn:active { background: rgba(42,157,179,.12); }
.sheet button.primary { background: var(--accent); color: #fff; border: 0; text-align: center; font-weight: 700; }
.sheet button.danger { color: #d33; }
.sheet button.fw.on { border-color: var(--accent); font-weight: 700; }
.filebtn { text-align: center; background: var(--accent); color: #fff; border: 0; font-weight: 700; }
.filebtn.small { background: transparent; color: var(--accent); border: 1px dashed var(--accent); }
.filebtn input { display: none; }
.seg { display: flex; gap: 6px; }
.seg button { text-align: center; margin: 0; }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.toggle { display: flex; gap: 10px; align-items: center; padding: 10px 2px; font-size: 15px; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(16,24,28,.92);
  color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 20; max-width: 90vw; text-align: center; }
.hidden { display: none !important; }

/* connection code */
.codebox { font: 700 40px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 10px; text-align: center; margin: 14px 0 8px; color: var(--eggEdge); }
.codebox .slot { display: inline-block; width: 1.05em; border-bottom: 3px solid currentColor; margin: 0 2px; letter-spacing: 0; min-height: 1.2em; }
.abcpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.sheet .abcpad button { text-align: center; font-size: 22px; font-weight: 800; margin: 0; }
.row2 { display: flex; gap: 8px; }
.sheet .row2 button { text-align: center; }
.sheet button:disabled { opacity: .45; }
#linkBar { margin: 4px 12px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.9); color: #333; font-size: 13px; display: flex; align-items: center; gap: 8px; }
#linkBar.hidden { display: none; }
#linkBar span { flex: 1; line-height: 1.4; }
#linkBar button { border: 0; border-radius: 8px; padding: 6px 10px; background: var(--eggEdge); color: #fff; font-weight: 700; white-space: nowrap; }
#linkBar #linkView { background: #fff; color: var(--eggEdge); box-shadow: inset 0 0 0 1.5px var(--eggEdge); }
/* home-screen app: the bar sits 28px lower (see header), so sheets stop below it */
@media (display-mode: standalone) { .sheet { max-height: calc(100dvh - env(safe-area-inset-top) - 92px); } }