/* ─────────────────────────────────────────────────────────
   Design tokens
   ───────────────────────────────────────────────────────── */
:root {
  --orange:      #fd6307;
  --blue:        #429AFF;
  --card-bg:     linear-gradient(138.23deg, #272727 4.87%, #313131 47.38%, #252525 103.12%);
  --field-bg:    #f4f4f8;
  --field-focus: #fafafa;
  --field-line:  #ececec;
  --text-active: #ffffff;
  --text-dim:    rgba(255,255,255,0.18);
  --text-dim-mob:rgba(255,255,255,0.52);
  --logo-color:  #ababab;
  --field-num:   rgba(0,0,0,0.5);
  --field-num-f: rgba(0,0,0,0.69);
  --badge-text:  #aeaeae;
}

/* ─────────────────────────────────────────────────────────
   Reset & base
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 100% 80% at 30% -65px,
      rgb(0, 31, 62)  0%,
      rgb(17, 32, 47) 50%,
      rgb(33, 33, 33) 100%);
}

.author {
  margin-top: 40px;
}

.author, .author a {
  text-decoration: none;
  color: #FD6307;
  font-size: 12px;
  line-height: 10x;
}

/* ─────────────────────────────────────────────────────────
   Page background gradient
   ───────────────────────────────────────────────────────── */
.layout-desktop,
.layout-mobile {
  
}

/* ─────────────────────────────────────────────────────────
   Layout visibility
   ───────────────────────────────────────────────────────── */
.layout-mobile { display: none; }

/* ─────────────────────────────────────────────────────────
   DESKTOP layout
   ───────────────────────────────────────────────────────── */
.layout-desktop {
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 10% 0 13%;
  gap: 6%;
}

/* ─────────────────────────────────────────────────────────
   Features nav (left column)
   ───────────────────────────────────────────────────────── */
.features-nav {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.feature {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-dim);
  transition: color 0.4s ease;
  text-align: left;
}

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

.feature.is-active { color: var(--text-active); }

.feature-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
}

.feature-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   Right panel
   ───────────────────────────────────────────────────────── */
.right-panel {
  flex: 1;
  position: relative;
  height: 100vh;
  min-width: 423px;
}

/* ─── App identity ─── */
.app-identity {
  position: absolute;
  top: 7.2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 423px;
}

.app-icon { display: block; object-fit: contain; }

.app-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4.6px;
  color: var(--logo-color);
  text-align: center;
  line-height: 24px;
  margin-top: 2px;
}

.app-tagline {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-top: 2px;
}

/* ─── Demo stage ─── */
.demo-stage {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  width: 436px;   /* widest chrome (attached = 423px) */
}

/* ─── Desktop badge ─── */
.right-panel .badge-link {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
}

.badge-link {
  display: block;
  line-height: 0;
  border-radius: 8px;
}

.badge-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.badge-img { display: block; width: 120px; height: 40px; object-fit: contain; }

/* ─── Key hint badge ─── */
.key-hint {
  position: absolute;
  top: calc(36% + 316px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.key-hint-img {
  display: block;
  width: 68px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

.key-hint.is-visible { opacity: 1; }
.key-hint.is-hidden  { opacity: 0; }

/* ─────────────────────────────────────────────────────────
   Chrome shared
   ───────────────────────────────────────────────────────── */
.chrome {
  transition: opacity 0.35s ease;
}

.chrome.is-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}

/* ─────────────────────────────────────────────────────────
   Simulated macOS menu bar (above the popover PNG)
   ───────────────────────────────────────────────────────── */
.sim-menubar {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 2px;
}

.menubar-icon-img {
  display: block;
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────
   Popover chrome — PNG-based
   ───────────────────────────────────────────────────────── */
.popover-frame {
  position: relative;
  width: 436px;
  height: 332px;
  margin-top: -25px;
}

.chrome-bg-img {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Content overlay positioned inside the dark area of attached-background.png.
   Dark inner area: x≈46, y≈51, w=332, h=230 */
.popover-content {
  position: absolute;
  left: 52px;
  top:  60px;
  width: 332px;
}

/* ─────────────────────────────────────────────────────────
   Float chrome — PNG-based (348×281)
   ───────────────────────────────────────────────────────── */
.chrome-float {
  /* Offset so the shadow of the float PNG (8px each side) looks centered
     within the 423px demo-stage */
  margin-left: 45px;
  margin-top: -5px;
}

.float-frame {
  position: relative;
  width: 348px;
  height: 281px;
}

/* Content inside dark area: title bar ≈ 36px, side margin ≈ 8px */
.float-content {
  position: absolute;
  left: 8px;
  top:  58px;
  width: 332px;
}

/* ─────────────────────────────────────────────────────────
   Calculator widget (shared between popover and float)
   ───────────────────────────────────────────────────────── */
.calc-widget {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 10px;
  position: relative;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 4px;
  overflow: hidden;
}

/* Field cells — DOM order [0,2,1,3] → TL, TR, BL, BR */
.field {
  height: 97px;
  padding: 38px 10px 16px 16px;
  background: var(--field-bg);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
  cursor: text;
}

.field:nth-child(1) { border-right: 1px solid var(--field-line); border-bottom: 1px solid var(--field-line); }
.field:nth-child(2) { border-bottom: 1px solid var(--field-line); }
.field:nth-child(3) { border-right: 1px solid var(--field-line); }

.field.field-focused  { background: var(--field-focus); }
.field.field-result   { background: var(--field-bg); }
.field.field-inactive { background: var(--field-bg); }

.fv {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: var(--field-num);
  white-space: nowrap;
  user-select: none;
}

.field.field-focused .fv { color: var(--field-num-f); }
.field.field-result  .fv { color: var(--orange); }

.cursor-el {
  display: inline-block;
  width: 2px;
  height: 36px;
  background: rgba(0, 100, 220, 0.85);
  border-radius: 1px;
  flex-shrink: 0;
  animation: blink 1s step-end infinite;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── "CALCULATE HERE" overlay (per-field, on alt-hover) ─── */
/* inset: -1px covers the 1px grid border so no border shows on orange */
.field-overlay {
  position: absolute;
  inset: -1px;
  background: var(--orange);
  padding: 0 10px 16px 16px;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 2;
}

.field-overlay.is-visible { opacity: 1; }

.field-overlay-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
  white-space: pre-line;
}

/* ─────────────────────────────────────────────────────────
   Eq / Detach button (center of calc grid)
   Uses SVG images from assets — no CSS background color
   ───────────────────────────────────────────────────────── */
.eq-btn {
  position: absolute;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  width: 29px;
  height: 29px;
  border: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 0;
  background: none;
  box-shadow: none;
}

.eq-icon-img {
  display: block;
  width: 29px;
  height: 29px;
}

/* ─────────────────────────────────────────────────────────
   "DETACH WINDOW" overlay (covers whole calc-widget)
   ───────────────────────────────────────────────────────── */
.detach-widget-overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--field-bg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 16px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  margin:16px;
}

.detach-widget-overlay.is-visible { opacity: 1; }

.detach-label {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--blue);
}

.detach-hint {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.35);
  align-self: flex-end;
}

/* ─────────────────────────────────────────────────────────
   Simulated mouse cursor
   ───────────────────────────────────────────────────────── */
.sim-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 18px;
  pointer-events: none;
  z-index: 300;
  display: none;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.sim-cursor svg { display: block; width: 14px; height: 18px; }

/* ─────────────────────────────────────────────────────────
   MOBILE layout child elements
   ───────────────────────────────────────────────────────── */
.mobile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 32px;
}

.mobile-demo {
  width: 100%;
  max-width: 397px;
  margin-bottom: 4px;
  position: relative;   /* anchors sim-cursor + hidden-chrome absolute positioning */
}

/* Fluid chrome — same aspect ratio & content offsets as desktop (436×332 /
   348×281), expressed in % so it scales losslessly to any mobile width. */
.m-popover-frame,
.m-float-frame {
  position: relative;
}

/* Popover fills the full demo-stage width, exactly like desktop's
   .popover-frame (436px = 100% of #demoStage). */
.m-popover-frame { width: 100%; aspect-ratio: 436 / 362; }

/* Float frame keeps desktop's 348/436 width ratio AND its 45px/-5px nudge
   on the same element (not split across parent/child) — percentages for
   width and margin both need to resolve against the same full-width
   containing block, otherwise the margin shrinks the box the width-%
   is then taken from, compounding into a too-narrow, off-center frame. */
.m-float-frame {
  width: 79.817%;
  aspect-ratio: 348 / 281;
  margin-left: 10.321%;
  margin-top: -1.147%;
}

.m-chrome-bg-img {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.m-popover-content {
  position: absolute;
  left:  11.927%;
  top:   18.072%;
  width: 76.147%;
}

.m-float-content {
  position: absolute;
  left:  2.299%;
  top:   20.641%;
  width: 95.402%;
}

/* Key hint (Option / ESC) — a reserved-height flow slot below the demo so
   it never shifts the feature text underneath when it fades in/out. */
.mobile-key-hint {
  height: 54px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-key-hint .key-hint-img { width: 60px; }

.mobile-key-hint.is-visible { opacity: 1; }
.mobile-key-hint.is-hidden  { opacity: 0; }

.mobile-features {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 60px;
}

.mobile-feature h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-active);
  margin-bottom: 8px;
}

.mobile-feature p {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dim-mob);
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-el             { animation: none; opacity: 1; }
  .chrome                { transition: none; }
  .key-hint              { transition: none; }
  .field-overlay         { transition: none; }
  .feature               { transition: none; }
  .detach-widget-overlay { transition: none; }
  .sim-cursor            { transition: none; }
  .mobile-key-hint        { transition: none; }
}

/* ─────────────────────────────────────────────────────────
   Responsive breakpoint  ← MUST be last
   ───────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  html, body {
    overflow: auto;
    height: auto;
  }
  .layout-desktop { display: none; }
  .layout-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 62px 16px 60px;
  }
  .layout-mobile .badge-link {
    position: static;
    transform: none;
    margin-bottom: 60px;
  }
}