/* ============================================================================
   needmoreeasy.com — one stylesheet for both language versions.

   Design intent: the language's whole idea is that code can read like an
   ordinary sentence, so the typography star of this page is the CODE, not a
   decorative display face. Everything around it is quiet paper: warm off-white,
   hairline rules, one ink-green accent. The only loud surface is the terminal,
   which is dark on purpose — real output should look like real output.

   Both languages share this file, so nothing here may assume Latin text: no
   letter-spacing tricks on body copy, no small-caps on words that may be
   Hangul, and line-height stays generous enough for Korean glyphs.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper: #fbf8f3;
  --surface: #ffffff;
  --surface-sunken: #f4efe6;
  --ink: #191713;
  --ink-soft: #4a443a;
  --muted: #6e6659;
  --line: #e3dcd0;
  --line-strong: #cfc5b4;
  --accent: #2e6f4f;
  --accent-ink: #1f4f38;
  --accent-wash: #e9f1eb;
  --amber: #9c6316;
  --amber-wash: #f7efe1;

  /* The terminal keeps the same colours in both themes. */
  --term-bg: #16150f;
  --term-ink: #e8e3d6;
  --term-muted: #8d8677;
  --term-accent: #8fd0a8;
  --term-error: #e79a8a;

  --radius: 12px;
  --radius-sm: 8px;
  --page: 1120px;

  --sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "D2Coding", "Nanum Gothic Coding", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110e;
    --surface: #1a1815;
    --surface-sunken: #16150f;
    --ink: #f0ebe1;
    --ink-soft: #d5cec1;
    --muted: #9c9484;
    --line: #2e2a24;
    --line-strong: #423c33;
    --accent: #7fc79e;
    --accent-ink: #a6dcbd;
    --accent-wash: #1b2b22;
    --amber: #d9a463;
    --amber-wash: #2a2118;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 20px; }

/* --- header ------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.head-nav { display: flex; gap: 18px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.head-nav a { color: var(--muted); text-decoration: none; font-size: 0.94rem; }
.head-nav a:hover { color: var(--ink); }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.85rem;
}
.lang-toggle a {
  padding: 4px 12px;
  text-decoration: none;
  color: var(--muted);
  background: transparent;
}
.lang-toggle a[aria-current="true"] { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) {
  .lang-toggle a[aria-current="true"] { color: #10221a; }
}

/* --- generic sections --------------------------------------------------- */

section { padding: 64px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 10px; }
.lede { color: var(--ink-soft); max-width: 62ch; }
.fineprint { color: var(--muted); font-size: 0.9rem; }

/* --- hero --------------------------------------------------------------- */

.hero { padding: 56px 0 40px; }
.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  max-width: 18ch;
  margin-bottom: 18px;
}
.hero .lede { font-size: clamp(1.02rem, 2vw, 1.15rem); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #10221a; } }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary:hover { color: #10221a; } }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-family: var(--mono);
  font-size: 0.76rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.badge-beta { border-color: var(--amber); background: var(--amber-wash); color: var(--amber); }

/* --- playground --------------------------------------------------------- */

.play-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.examples { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 14px; }
.chip {
  font: inherit;
  font-size: 0.87rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }

.panes { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .panes { grid-template-columns: 1fr 1fr; } }

.pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
  font-size: 0.84rem;
  color: var(--muted);
}
.pane-head strong { color: var(--ink); font-weight: 600; }

.editor, .readout {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  tab-size: 4;
  margin: 0;
  padding: 14px;
  min-height: 260px;
  border: 0;
  width: 100%;
  background: transparent;
  color: var(--ink);
  overflow: auto;
}
.editor { resize: vertical; outline-offset: -2px; }
.readout { white-space: pre; }
.readout[data-state="error"] { color: var(--amber); white-space: pre-wrap; }

/* Minimal Python colouring: enough to read structure, not a rainbow. */
.tok-kw { color: var(--accent); }
.tok-str { color: var(--amber); }
.tok-num { color: var(--ink-soft); }
.tok-com { color: var(--muted); font-style: italic; }

.run-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.run-note { color: var(--muted); font-size: 0.88rem; }

.terminal {
  background: var(--term-bg);
  color: var(--term-ink);
  border-radius: var(--radius);
  border: 1px solid #2a281f;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 14px;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal:empty::before { content: attr(data-placeholder); color: var(--term-muted); }
.term-error { color: var(--term-error); }
.term-meta { color: var(--term-muted); }
.term-echo { color: var(--term-accent); }

.term-input-row { display: flex; gap: 8px; margin-top: 12px; }
.term-input-row[hidden] { display: none; }
.term-input {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 16px;
}

/* --- cards -------------------------------------------------------------- */

.cards { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 780px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  min-width: 0;
}
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card .role { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); margin-bottom: 12px; }
.card p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 12px; }

pre.code {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}
code { font-family: var(--mono); font-size: 0.92em; }
p code, li code {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.split { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; margin-top: 24px; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: 32px; } }

.copy-wrap { position: relative; }
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font: inherit;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.copy-btn:hover { color: var(--accent-ink); border-color: var(--accent); }

.links { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
@media (min-width: 780px) { .links { grid-template-columns: 1fr 1fr; gap: 10px 28px; } }
.links li { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.links a { font-weight: 600; text-decoration: none; }
.links span { display: block; color: var(--muted); font-size: 0.9rem; }

/* --- footer ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 56px;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-foot .wrap { display: flex; gap: 14px 26px; flex-wrap: wrap; align-items: center; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }
.foot-spacer { margin-left: auto; }

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 520px) {
  body { font-size: 16px; }
  section { padding: 44px 0; }
  .hero { padding: 36px 0 28px; }
  .head-nav { gap: 12px; }
  .head-nav a.nav-hide-sm { display: none; }
  .editor, .readout { min-height: 200px; font-size: 0.85rem; }
}

/* The answers box only appears when shared memory is unavailable, so it is
   sized to look like a note field rather than a second editor. */
.answers-box { min-height: 80px; margin-top: 8px; }

/* --- hero figure --------------------------------------------------------- */

/* The site's one piece of ornament, and it is not ornament: it states the
   whole idea (a sentence on top, the Python it becomes underneath) before the
   reader has scrolled to the playground. Hidden on narrow screens, where the
   playground itself arrives one swipe later and says the same thing. */
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 960px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; }
}

.hero-figure { display: none; }
@media (min-width: 960px) { .hero-figure { display: block; } }

.figure-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.figure-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  margin: 14px 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.figure-arrow::before,
.figure-arrow::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.hero-figure .code { background: var(--surface); }

/* Korean does not break at syllables the way the default rule assumes, so a
   headline would split a word in half mid-line. `keep-all` makes it wrap at
   spaces, which is how Korean text is meant to break. */
html[lang="ko"] body { word-break: keep-all; }

/* Keep the first line of a copyable block clear of the copy button. */
.copy-wrap pre.code { padding-right: 84px; }

/* Grid children default to `min-width: auto`, so one long line inside a code
   block stretches its whole column and pushes the page sideways on a phone.
   These two rules are what keep the body from scrolling horizontally at 320px. */
.split > *,
.hero .wrap > * { min-width: 0; }