:root {
  --egg1: #f2a6c6; --egg2: #e486ad; --eggEdge: #c45f8b; --cap: #f5c6da; --wheel: #6fd3c3;
  --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); }
header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: #fff; }
#title { font-weight: 700; font-size: 14px; letter-spacing: .3px; opacity: .9; 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: pink egg shell, light cap with a zigzag edge, patterned frame, screen, side dial, three buttons.
   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); }
#shell { position: absolute; inset: 0; border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%; overflow: hidden;
  background: radial-gradient(ellipse at 40% 35%, var(--egg1), var(--egg2) 75%); border: 3px solid var(--eggEdge);
  box-shadow: inset 0 -10px 24px rgba(120,30,70,.25), 0 14px 34px rgba(0,0,0,.45); }
#cap { position: absolute; left: 0; right: 0; top: 0; height: 18.5%; background: var(--cap);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 92% 82%, 85% 66%, 78% 86%, 71% 68%, 64% 88%, 57% 70%, 50% 90%, 43% 70%, 36% 88%, 29% 68%, 22% 86%, 15% 66%, 8% 82%, 0 62%); }
#frame { position: absolute; left: 15%; top: 13.5%; width: 70%; height: 72%;
  clip-path: polygon(10% 6%, 17% 0, 24% 6%, 31% 0, 38% 6%, 45% 0, 52% 6%, 59% 0, 66% 6%, 73% 0, 80% 6%, 87% 0, 90% 6%, 90% 22%, 100% 30%, 100% 58%, 90% 66%, 90% 90%, 60% 90%, 50% 100%, 40% 90%, 10% 90%, 10% 66%, 0 58%, 0 30%, 10% 22%);
  background:
    radial-gradient(circle at 16% 12%, #ffd84a 0 7%, rgba(0,0,0,.18) 7% 7.7%, transparent 7.8%),
    radial-gradient(circle at 34% 9%, #7ad35f 0 8%, rgba(0,0,0,.18) 8% 8.7%, transparent 8.8%),
    radial-gradient(circle at 58% 10%, #b48cff 0 7%, rgba(0,0,0,.18) 7% 7.7%, transparent 7.8%),
    radial-gradient(circle at 80% 13%, #5fc2ff 0 8%, rgba(0,0,0,.18) 8% 8.7%, transparent 8.8%),
    radial-gradient(circle at 8% 40%, #fff 0 6%, rgba(0,0,0,.18) 6% 6.7%, transparent 6.8%),
    radial-gradient(circle at 6% 58%, #ffd84a 0 7%, rgba(0,0,0,.18) 7% 7.7%, transparent 7.8%),
    radial-gradient(circle at 94% 40%, #7ad35f 0 6%, rgba(0,0,0,.18) 6% 6.7%, transparent 6.8%),
    radial-gradient(circle at 93% 57%, #ff5a5a 0 6%, rgba(0,0,0,.18) 6% 6.7%, transparent 6.8%),
    radial-gradient(circle at 20% 82%, #5fc2ff 0 8%, rgba(0,0,0,.18) 8% 8.7%, transparent 8.8%),
    radial-gradient(circle at 42% 86%, #fff3a0 0 6%, rgba(0,0,0,.18) 6% 6.7%, transparent 6.8%),
    radial-gradient(circle at 63% 85%, #ff9a3c 0 7%, rgba(0,0,0,.18) 7% 7.7%, transparent 7.8%),
    radial-gradient(circle at 82% 80%, #b48cff 0 8%, rgba(0,0,0,.18) 8% 8.7%, transparent 8.8%),
    radial-gradient(circle at 50% 95%, #7ad35f 0 5%, rgba(0,0,0,.18) 5% 5.7%, transparent 5.8%),
    radial-gradient(circle, rgba(255,255,255,.5) 0 2px, transparent 2.5px) 0 0 / 14px 14px,
    repeating-linear-gradient(45deg, #f06fa5 0 10px, #ea5f98 10px 20px);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
#bezel { position: absolute; left: 25%; top: 29%; width: 49.5%; aspect-ratio: 1; border-radius: 7%; background: #000; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 4px 10px rgba(80,0,40,.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 { position: absolute; left: 94%; top: 30%; width: 13%; height: 17.5%; border-radius: 28%; background: var(--egg2);
  border: 3px solid var(--eggEdge); box-shadow: 0 3px 8px rgba(0,0,0,.35); touch-action: none; cursor: ns-resize; user-select: none; }
#wheel { position: absolute; inset: 9% 14%; border-radius: 38%; overflow: hidden;
  background: repeating-linear-gradient(to bottom, var(--wheel) 0 7px, #c86a94 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: #a06a86; font-weight: 700; font-size: calc(var(--eggw) * 0.035);
  background: radial-gradient(circle at 32% 28%, #fff 0 13%, #b8eee4 20%, var(--wheel) 62%, #4fae9f);
  box-shadow: 0 3px 0 rgba(120,30,70,.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(120,30,70,.35); filter: brightness(.93); }
#status { font-size: 12px; color: rgba(255,255,255,.75); min-height: 16px; text-align: center; }

.sheet { position: fixed; inset: auto 0 0 0; max-height: 88vh; 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); }