/* iOS and iPadOS have no Comic Sans; their "cursive" is a script face. Comic Neue (OFL) is the fallback. */
@font-face { font-family:"Comic Neue"; font-style:normal; font-weight:700; font-display:swap; src:url("vendor/comic-neue/ComicNeue-Bold.woff2") format("woff2"); }
:root{font-family:Arial,Helvetica,sans-serif;color:#343434;background:#fff;--blue:#346295;--line:#e9dcbe;--muted:#6f7a85}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}a{color:#346295}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #205f96;outline-offset:4px}.skip-link{position:fixed;top:-70px;left:16px;background:white;padding:12px;z-index:100}.skip-link:focus{top:12px}.site-header{padding:20px 32px;border-bottom:1px solid var(--line);background:var(--blue);color:white}.site-name{font-size:18px}.hero{flex:1;min-height:400px;display:grid;place-items:center;padding:60px 24px}.hero-content{text-align:center}h1{font-size:32px;font-weight:500;line-height:1.2;margin:0 0 32px}.hero-actions{display:flex;justify-content:center;gap:16px}.button{display:inline-block;padding:13px 24px;min-height:46px;border:1px solid var(--blue);border-radius:4px;font-weight:400;font-size:16px;text-decoration:none}.button.primary{background:var(--blue);color:white}.button.primary:hover{background:#27496f}.button.secondary{background:white;color:#27496f}.button.secondary:hover{background:#eaf0f7}.site-footer{display:flex;justify-content:space-between;gap:16px;padding:20px 32px;font-size:12px;color:#6f7a85;background:#e5ebf2;border-top:1px solid var(--line)}.divider{padding:0 10px}dialog{width:min(780px,calc(100% - 40px));max-height:calc(100svh - 40px);border:1px solid #e9dcbe;border-radius:4px;background:white;color:#343434;padding:36px;overflow:auto}dialog::backdrop{background:#172b4270}.dialog-close{position:absolute;right:10px;top:8px;background:white;border:0;color:#506070;font-size:26px;width:44px;height:44px}.dialog-close:hover{background:#eef3f7}h2{font-size:26px;line-height:1.2;font-weight:500;margin:0 36px 18px 0}h3{font-size:21px;font-weight:500;margin:0;color:#346295}#root-dialog{max-width:650px}#root-dialog p{font-size:15px;line-height:1.75;color:#394b5c}.root-explainer{border-block:1px solid var(--line);padding:12px 0;margin:24px 0}#root-dialog .button{margin-top:12px}#root-dialog .external-note{font-size:12px}@media(max-width:600px){.site-header{padding:18px 24px}.hero{min-height:420px}.hero-actions{flex-direction:column;max-width:260px;margin:auto}h1{font-size:28px}.site-footer{flex-direction:column;padding:20px 24px;font-size:11px;gap:10px}dialog{padding:36px 22px 24px;width:calc(100% - 24px)}h2{font-size:24px}}


/* Home: a short guide framed by examples from the plotting tool. */
.hero { min-height:0; padding:64px 48px 24px; grid-template-rows:1fr auto; gap:56px; }
.home-stage {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(480px, 40.6%) minmax(0, 1fr);
  grid-template-rows:370px 150px; align-items:center; gap:32px 40px;
  width:min(1800px, 100%);
}
.hero-content { width:100%; grid-column:2; grid-row:1 / 3; align-self:start; padding-top:22px; }
.hero-content h1 { margin:16px 0 34px; color:#000; font-size:44px; font-weight:400; white-space:nowrap; }
.hero-subheading { margin:0; color:var(--blue); font-size:16px; line-height:1.4; font-weight:600; }
.home-plot { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.plot-interference { grid-column:1; grid-row:1; }
.plot-gaussian { grid-column:1; grid-row:2; }
.plot-beam { grid-column:3; grid-row:1; overflow:hidden; }
/* The beam export has wider white margins than the other plots. */
.plot-beam svg { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1.2); }
.plot-decay { grid-column:3; grid-row:2; align-self:start; }
.hero-actions { flex-direction:column; gap:14px; max-width:none; width:100%; margin:0; }
.primary-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.primary-tools .button { display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; font-weight:600; }
.tutorial-placeholder { position:relative; }
.tutorial-button { display:block; width:100%; min-height:50px; font-weight:600; text-align:center; }
.how-it-works { margin-top:36px; padding-top:12px; border-top:1px solid #999; text-align:left; color:#000; font-size:14px; line-height:1.3; }
.how-it-works h2 { margin:0 0 6px; font-size:14px; line-height:1.3; font-weight:700; }
.how-it-works ol { margin:0; padding-left:26px; }
.starting-values-tip { margin:0; }
.starting-values-tip > strong { color:#df0000; }
.home-help { margin:0; color:#435672; font-size:14px; line-height:1.6; text-align:center; }
.home-help a, .home-help button { color:#204775; text-decoration:underline; }
.home-help button { padding:0; border:0; background:transparent; }
@media (max-width:1100px) {
  .hero { padding:40px 28px 24px; gap:32px; }
  .home-stage { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto 330px 170px; gap:24px; }
  .hero-content { grid-column:1 / -1; grid-row:1; max-width:640px; justify-self:center; padding-top:0; margin-bottom:12px; }
  .plot-interference { grid-column:1; grid-row:2; }
  .plot-beam { grid-column:2; grid-row:2; }
  .plot-beam svg { transform:none; }
  .plot-gaussian { grid-column:1; grid-row:3; }
  .plot-decay { grid-column:2; grid-row:3; }
}

.support-links { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:0 16px; margin-left:auto; }
.support-links a, .support-links button { display:inline-flex; align-items:center; min-height:44px; padding:6px 4px; border:0; background:transparent; color:#fff; font-size:14px; text-decoration:none; }
.support-links a:hover, .support-links button:hover { text-decoration:underline; text-underline-offset:4px; }
.support-links a:focus-visible, .support-links button:focus-visible { outline-color:#fff; }
@media(max-width:600px) {
  .home-header { padding:8px 24px; }
  .support-links { gap:0 10px; }
  .support-links a, .support-links button { font-size:12px; }
}
#root-dialog p { margin: 0 0 18px; line-height: 1.65; }
.root-links { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
#root-dialog .root-links .button { margin: 0; text-align: center; }
@media(max-width:600px) {
  .hero { padding: 28px 20px; }
  .home-stage { grid-template-rows:auto 240px 110px; gap:20px 12px; }
  .primary-tools { grid-template-columns:1fr; gap:12px; }
  .hero-content h1 { font-size:clamp(24px, 7vw, 36px); margin:14px 0 26px; }
  .hero-subheading { font-size:14px; }
}

.contact-page { flex: 1; width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0; }
.contact-page p { font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.contact-page address { font-style: normal; line-height: 1.8; padding: 24px 0; margin: 0 0 24px; border-block: 1px solid var(--line); }
.contact-page address a { overflow-wrap: anywhere; }
.contact-page .button { margin-top: 8px; }
@media(max-width:600px) { .contact-page { padding: 36px 0; } }

/* Small handwritten aside above the help line: present, not in the way. */
.fun-fact { max-width:230px; margin:8px auto 0; transform:rotate(-3deg); color:#c20000; font-family:"Comic Sans MS", "Comic Sans", "Comic Neue", sans-serif; font-size:13px; font-weight:700; line-height:1.3; text-align:center; }
.fun-fact a { color:inherit; }
.fun-fact a:hover { color:#8a0000; }