/* The "try it" stage. Normal-sized, and everything in it is real to click. */
.et { --et-accent: var(--accent, #ff4f8b); --et-accent-hi: var(--c1, #ff7a59); --et-wall: var(--wall, #1d1d22); --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif; color: #f5f5f7; text-align: left; }
.et button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.et-stage { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 30px; align-items: center; }

/* ─── Laptop ─── */
.et-lid { position: relative; padding: 9px 9px 19px; border-radius: 18px 18px 0 0; background: #050506; box-shadow: inset 0 0 0 1.5px #55565c, inset 0 0 0 3px #111113; }
.et-model { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 9.5px; color: #8b8c92; letter-spacing: .02em; }
.et-screen { position: relative; height: 524px; overflow: hidden; border-radius: 9px 9px 2px 2px; background: var(--et-wall); --notch-h: 30px; }
.et-base { position: relative; height: 15px; margin: 0 -26px; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, #e4e5e9 0, #c6c8cd 30%, #8d8f95 78%, #5d5f64 100%); box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .8); }
.et-base span { position: absolute; left: 50%; top: 0; width: 118px; height: 7px; margin-left: -59px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #8d8f95, #b6b8bd); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.et-menubar { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: rgba(0, 20, 60, .3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 11.5px; color: #fff; }
.et-menubar b { font-weight: 600; }
.et-apple { width: 12px; height: 13px; flex: none; }
.et-menubar i { flex: 1; }

/* ─── Notch ─── */
.et-notch { position: absolute; z-index: 5; left: 50%; top: 0; transform: translateX(-50%); width: 176px; min-height: 30px; background: #000; border-radius: 0 0 14px 14px; color: #fff; font-size: 12.5px; transition: width .45s cubic-bezier(.32, .72, 0, 1), border-radius .45s cubic-bezier(.32, .72, 0, 1); }
.et-cam { position: absolute; left: 50%; top: 10px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #10131c; box-shadow: inset 0 0 0 1.5px #1d2433; }
.et-notch[data-mode="working"], .et-notch[data-mode="waiting"] { width: 300px; cursor: default; }
.et-notch[data-mode="waiting"] { cursor: pointer; }
.et-notch[data-mode="ask"] { width: min(460px, 94%); border-radius: 0 0 22px 22px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); }
.et-notch[data-mode="done"] { width: 330px; border-radius: 0 0 20px 20px; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); }
.et-notch[data-mode="ask"] .et-cam, .et-notch[data-mode="done"] .et-cam { display: none; }
.et-notch-in { display: flex; }
.et-notch[data-mode="working"] .et-notch-in, .et-notch[data-mode="waiting"] .et-notch-in { align-items: center; justify-content: space-between; height: 30px; padding: 0 14px; }
.et-wing { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; }
.et-dim { color: rgba(255, 255, 255, .6); font-weight: 500; }
.et-notch i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.et-notch i.blue { background: var(--et-accent); }
.et-notch i.hot { background: #ff453a; animation: et-pulse 1s ease-in-out infinite; }
@keyframes et-pulse { 50% { transform: scale(1.3); opacity: .7; } }
.et-notch[data-mode="ask"] .et-notch-in { flex-direction: column; gap: 5px; padding: 12px 16px 13px; }
.et-r1 { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.et-r1 b { color: #fff; font-weight: 600; }
.et-r1 em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.et-r2 { font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.et-r3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.et .et-cap-btn { height: 28px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12.5px; font-weight: 500; transition: background .15s; }
.et .et-cap-btn:hover { background: rgba(255, 255, 255, .24); }
.et .et-cap-btn.pri { background: var(--et-accent); font-weight: 600; }
.et .et-cap-btn.pri:hover { background: var(--et-accent-hi); }
.et-grow { flex: 1; }
.et .et-snooze { font-size: 12px; color: rgba(255, 255, 255, .55); }
.et .et-snooze:hover { color: #fff; }
.et-notch[data-mode="done"] .et-notch-in { align-items: center; gap: 8px; padding: 11px 16px; }
.et-notch b { font-weight: 600; }
.et-ok { color: #30d158; font-weight: 700; }
.et-yes { color: #30d158; font-weight: 600; }
.et-no { color: #ff453a; font-weight: 600; }
.et-ed { position: absolute; z-index: 4; left: 50%; top: 0; width: 120px; height: 90px; margin-left: 100px; transform: translateY(calc(var(--notch-h) - 2px)); transition: transform .4s cubic-bezier(.32, .72, 0, 1); pointer-events: none; }

/* ─── Terminal: Claude Code's own layout ─── */
.et-chirp { position: absolute; z-index: 6; left: calc(50% + 196px); top: calc(var(--notch-h) + 4px); padding: 6px 11px; border-radius: 14px 14px 14px 3px; background: #fff; color: #1d1d1f; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: scale(.8); transform-origin: 0 100%; transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.et-chirp.on { opacity: 1; transform: none; }
.et-dock { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; gap: 5px; padding: 4px 6px; border-radius: 11px; background: rgba(255, 255, 255, .17); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); }
.et-dock u { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(145deg, var(--a), var(--b)); }
.et-term { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: min(620px, 94%); height: 346px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #111114; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .2), 0 20px 50px rgba(0, 0, 0, .5); }
.et-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; background: rgba(255, 255, 255, .06); }
.et-bar u { width: 9px; height: 9px; border-radius: 50%; }
.et-title { flex: 1; margin-right: 39px; text-align: center; font-size: 11px; color: #9a98a3; }
.et-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 8px 14px; font: 11.5px/1.38 var(--mono); color: #e8e6ef; outline: none; }
.et-head { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.et-mark { color: #d97757; font-size: 20px; line-height: 1; }
.et-head b { display: block; font-weight: 700; }
.et-head span:not(.et-mark) { color: #8a8894; }
.et-you { align-self: flex-start; max-width: 100%; padding: 0 5px; margin: 0 0 7px -5px; background: rgba(255, 255, 255, .13); }
.et-said { position: relative; padding-left: 14px; margin-bottom: 2px; }
.et-said i { position: absolute; left: 0; font-style: normal; color: #fff; }
.et-said i.g { color: #30d158; }
.et-said em { font-style: normal; color: #7fd3ff; }
.et-sub { padding-left: 14px; color: #8a8894; }
.et-spin { margin-top: 8px; color: #d97757; }
.et-caret { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: #e8e6ef; animation: et-blink 1s steps(2) infinite; }
@keyframes et-blink { 50% { opacity: 0; } }
.et-answered { padding-left: 14px; color: #7fe0b0; }
.et-rule { flex: none; height: 1px; margin: 7px 0 6px; background: #3a3a40; }
.et-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; color: #d6d4dc; }
.et-tabs .cur { padding: 0 5px; margin: 0 -5px; background: #bcdcff; color: #06284a; }
.et-q { font-weight: 700; color: #bcdcff; }
.et-plain { margin-top: 5px; }
.et-cmd { padding: 2px 0 0 14px; }
.et-cmd small { display: block; font-size: inherit; color: #8a8894; }
.et-boxed { padding: 4px 10px 5px; border: 1px solid #5c5c66; border-radius: 6px; }
.et-boxed b { display: block; color: #bcdcff; }
.et-opts { display: flex; flex-direction: column; }
.et .et-opt { display: flex; width: 100%; text-align: left; font: inherit; line-height: inherit; border-radius: 3px; }
.et-cur { flex: none; width: 14px; color: transparent; }
.et-n { flex: none; width: 20px; color: #8a8894; }
.et-lab small { display: block; font-size: inherit; color: #8a8894; }
.et-opt.on .et-cur { color: #bcdcff; }
.et-opt.on .et-lab { color: #bcdcff; }
.et-opt.on .et-lab small { color: #8a8894; }
.et-opt:focus-visible { outline: 1px solid #5c5c66; }
.et-input { width: 100%; border: 0; outline: none; background: none; color: #fff; font: inherit; }
.et-input::placeholder { color: #8a8894; }
.et-keys { margin-top: auto; padding-top: 5px; color: #8a8894; }

/* ─── Phone ─── */
/* The app at true phone width, scaled to fit, so it lays out exactly as it does on a phone. */
.et-frame { width: 272px; height: 556px; padding: 7px; border-radius: 42px; background: #000; overflow: hidden; box-shadow: inset 0 0 0 1.5px #55565c, 0 24px 70px color-mix(in srgb, var(--et-accent) 28%, transparent); }
.et-frame iframe { display: block; width: 390px; height: 790px; border: 0; border-radius: 50px; background: #000; transform: scale(.6616); transform-origin: 0 0; }

.et-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 16px; }
.et-cap { flex: 1 1 320px; margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: #f5f5f7; }
.et-actions { display: flex; align-items: center; gap: 16px; font-size: 13.5px; }
.et-actions a { display: none; color: var(--et-accent); text-decoration: none; }
.et .et-again { color: #86868b; font-size: 13.5px; }
.et .et-again:hover { color: #f5f5f7; }
.et.is-done .et-again { color: var(--et-accent); }

/* Narrower screens: the laptop gets the whole width, and the phone app opens on its own. */
@media (max-width: 980px) {
  .et-stage { grid-template-columns: 1fr; }
  .et-phone { position: absolute; left: -9999px; visibility: hidden; }
  .et-actions a { display: inline; }
  .et-base { margin: 0 -8px; }
  .et-chirp { left: auto; right: 10px; }
}
@media (max-width: 560px) {
  .et-lid { padding: 5px 5px 0; border-radius: 12px 12px 0 0; }
  .et-screen { height: 590px; }
  .et-chirp { display: none; }
  .et-term { width: calc(100% - 8px); bottom: 34px; height: 400px; }
  .et-body { padding: 8px 9px; font-size: 11px; }
  .et-keys { font-size: 10px; }
  .et-notch[data-mode="ask"] { width: 100%; border-radius: 0 0 18px 18px; }
  .et-notch[data-mode="working"], .et-notch[data-mode="waiting"] { width: 240px; }
  .et-notch[data-mode="done"] { width: 90%; }
  .et-menubar span { display: none; }
  .et-ed { display: none; }
}

/* A truer MacBook and Dock (2026-11-06). */
.et-lid { box-shadow: inset 0 0 0 1px #6b6c72, inset 0 0 0 2.5px #0c0c0e; }
.et-base { background: linear-gradient(180deg, #f1f1f3 0, #cfd0d4 18%, #a3a5aa 70%, #6e7075 100%); }
.et-menubar { background: rgba(255, 255, 255, .06); }
.et-wifi { width: 13px; height: 11px; flex: none; }
.et-dock { gap: 6px; padding: 4px 7px 6px; border-radius: 12px; background: rgba(40, 40, 46, .62); }
.et-dock .app { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 9px/1 var(--mono); color: #fff; }
.et-dock .app.on::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.et-dock .finder { background: linear-gradient(90deg, #3fa8f5 50%, #e8f4fd 50%); }
.et-dock .safari { background: #fff; }
.et-dock .safari::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(#ff3b30 0 12%, #fff 0 50%, #ff3b30 0 62%, #fff 0); box-shadow: inset 0 0 0 1.5px #2f7cf6; }
.et-dock .term { background: #1d1d1f; box-shadow: inset 0 0 0 .5px #555; }
.et-dock .msg { background: #34c759; }
.et-dock .msg::before { content: ""; width: 13px; height: 10px; border-radius: 50%; background: #fff; }
.et-dock .sep { width: 1px; height: 22px; margin: 1px 1px 0; background: rgba(255, 255, 255, .25); }
.et-dock .bin { background: rgba(255, 255, 255, .16); }
.et-dock .bin::before { content: ""; width: 10px; height: 12px; border-radius: 1px 1px 3px 3px; box-shadow: inset 0 0 0 1.4px #e8e8ea; }
.et-dock .eddie { background: #000 url("icons/icon-180.png") center / cover; }