/* Page-scoped styles for quiz.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0a0a0a;
      --bg2: #111111;
      --bg3: #181818;
      --border: rgba(255,255,255,0.07);
      --border-bright: rgba(255,255,255,0.14);
      --lime: #bfff5e;
      --lime-dim: rgba(191,255,94,0.12);
      --lime-glow: rgba(191,255,94,0.28);
      --lime-mid: rgba(191,255,94,0.18);
      --white: #f0f0ec;
      --muted: rgba(240,240,236,0.60);
      --faint: rgba(240,240,236,0.30);
      --mono: 'DM Mono', monospace;
      --sans: 'Bodoni Moda', Georgia, serif;
      --body: 'Instrument Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--body);
      line-height: 1.6;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* ── NOISE OVERLAY ─────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 1000;
      opacity: 0.6;
    }

    /* ── NAV (from site nav.html styles) ─────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 48px;
      background: rgba(10,10,10,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 18px;
      color: var(--lime);
      letter-spacing: 0.04em;
      text-decoration: none;
    }
    .nav-cta {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: var(--bg);
      background: var(--lime);
      padding: 9px 20px;
      border-radius: 3px;
      text-decoration: none;
      transition: opacity 0.15s;
    }
    .nav-cta:hover { opacity: 0.85; box-shadow: 0 4px 20px var(--lime-glow); }

    /* ── QUIZ SHELL ─────────────────────────────────── */
    .quiz-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 24px 60px;
      position: relative;
    }

    /* Grid background */
    .quiz-bg-grid {
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 75%);
      pointer-events: none;
      z-index: 0;
    }

    .quiz-glow {
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 500px;
      background: radial-gradient(ellipse, var(--lime-glow) 0%, transparent 65%);
      pointer-events: none;
      filter: blur(60px);
      z-index: 0;
      opacity: 0.4;
    }

    /* ── PROGRESS BAR ────────────────────────────────── */
    .progress-wrap {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: 200;
      background: rgba(255,255,255,0.05);
    }
    .progress-fill {
      height: 100%;
      background: var(--lime);
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 12px var(--lime-glow);
    }

    /* ── QUESTION COUNTER ─────────────────────────────── */
    .q-counter {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 32px;
      position: relative;
      z-index: 2;
      opacity: 0;
      animation: fadeUp 0.5s 0.1s ease forwards;
    }

    /* ── CARD ───────────────────────────────────────── */
    .quiz-card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 620px;
      background: var(--bg2);
      border: 1px solid var(--border-bright);
      border-radius: 12px;
      padding: 52px 52px 44px;
      will-change: transform, opacity;
    }

    .q-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeUp 0.5s 0.15s ease forwards;
    }

    .q-text {
      font-family: var(--sans);
      font-size: clamp(26px, 4vw, 38px);
      font-weight: 900;
      font-variation-settings: 'opsz' 60;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 36px;
      opacity: 0;
      animation: fadeUp 0.5s 0.2s ease forwards;
    }
    .q-text em { font-style: italic; color: var(--lime); }

    /* ── ANSWER OPTIONS ───────────────────────────────── */
    .q-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      animation: fadeUp 0.5s 0.3s ease forwards;
    }

    .q-option {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, transform 0.15s;
      font-size: 15px;
      color: var(--muted);
      text-align: left;
      font-family: var(--body);
      width: 100%;
      position: relative;
      overflow: hidden;
    }
    .q-option:hover {
      border-color: rgba(191,255,94,0.35);
      background: rgba(191,255,94,0.04);
      color: var(--white);
      transform: translateY(-1px);
    }
    .q-option.selected {
      border-color: var(--lime);
      background: var(--lime-dim);
      color: var(--white);
    }
    .q-option.selected .opt-indicator {
      background: var(--lime);
      border-color: var(--lime);
      color: var(--bg);
    }
    .q-option.selected .opt-indicator svg {
      display: block;
    }

    .opt-indicator {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border-bright);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .opt-indicator svg { display: none; }

    .opt-text { flex: 1; line-height: 1.4; }
    .opt-sub {
      display: block;
      font-size: 12px;
      color: var(--faint);
      margin-top: 2px;
      font-family: var(--mono);
    }

    /* ── NEXT BUTTON ─────────────────────────────────── */
    .q-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;
      opacity: 0;
      animation: fadeUp 0.5s 0.4s ease forwards;
    }

    .btn-next {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--bg);
      background: var(--lime);
      border: none;
      padding: 14px 32px;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .btn-next:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .btn-next:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px var(--lime-glow);
    }
    .btn-next svg { transition: transform 0.2s; }
    .btn-next:not(:disabled):hover svg { transform: translateX(3px); }

    .btn-back {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--faint);
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 0;
      transition: color 0.15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-back:hover { color: var(--muted); }

    /* ── SLIDE TRANSITIONS ───────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes slideOutLeft {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(-40px); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(40px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideOutRight {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(40px); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-40px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .card-exit-left  { animation: slideOutLeft  0.3s ease forwards; }
    .card-exit-right { animation: slideOutRight 0.3s ease forwards; }
    .card-enter-right { animation: slideInRight 0.4s 0.15s ease both; }
    .card-enter-left  { animation: slideInLeft  0.4s 0.15s ease both; }

    /* ── INTRO SCREEN ────────────────────────────────── */
    .intro-screen {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 560px;
    }
    .intro-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp 0.5s 0.2s ease forwards;
    }
    .intro-headline {
      font-family: var(--sans);
      font-size: clamp(40px, 7vw, 72px);
      font-weight: 900;
      font-variation-settings: 'opsz' 96;
      line-height: 1.0;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp 0.6s 0.3s ease forwards;
    }
    .intro-headline em { font-style: italic; color: var(--lime); }
    .intro-sub {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.75;
      margin-bottom: 44px;
      opacity: 0;
      animation: fadeUp 0.5s 0.45s ease forwards;
    }
    .intro-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      margin-bottom: 44px;
      opacity: 0;
      animation: fadeUp 0.5s 0.5s ease forwards;
    }
    .intro-meta-item {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--faint);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .intro-meta-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--lime);
      opacity: 0.6;
    }
    .btn-start {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--bg);
      background: var(--lime);
      border: none;
      padding: 18px 44px;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      animation: fadeUp 0.5s 0.6s ease forwards;
    }
    .btn-start:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 36px var(--lime-glow);
    }
    .btn-start svg { transition: transform 0.2s; }
    .btn-start:hover svg { transform: translateX(4px); }

    /* ── RESULT SCREEN ───────────────────────────────── */
    .result-screen {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 680px;
      opacity: 0;
      animation: fadeUp 0.6s 0.2s ease forwards;
    }

    .result-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 20px;
    }

    .result-profile-name {
      font-family: var(--sans);
      font-size: clamp(36px, 6vw, 64px);
      font-weight: 900;
      font-variation-settings: 'opsz' 96;
      line-height: 1.0;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }
    .result-profile-name em { font-style: italic; color: var(--lime); }

    .result-desc {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 40px;
      max-width: 520px;
    }

    /* ── STATS ROW ─────────────────────────────────── */
    .result-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 36px;
    }
    .stat-card {
      background: var(--bg2);
      border: 1px solid var(--border-bright);
      border-radius: 8px;
      padding: 24px 24px 20px;
    }
    .stat-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--faint);
      margin-bottom: 8px;
    }
    .stat-value {
      font-family: var(--sans);
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 900;
      font-variation-settings: 'opsz' 48;
      color: var(--lime);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .stat-unit {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ── RECOMMENDED SETUP ───────────────────────────── */
    .setup-block {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 28px 28px 24px;
      margin-bottom: 32px;
    }
    .setup-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 16px;
    }
    .setup-features {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .setup-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    .setup-check {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--lime-dim);
      border: 1px solid rgba(191,255,94,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .setup-check svg { display: block; }

    /* ── EARNINGS CHART ──────────────────────────────── */
    .earnings-block {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 28px;
      margin-bottom: 32px;
    }
    .earnings-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--faint);
      margin-bottom: 20px;
    }
    .earnings-rows {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .earnings-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .earnings-row-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .earnings-platform {
      font-size: 13px;
      font-family: var(--mono);
      color: var(--muted);
    }
    .earnings-pct {
      font-size: 13px;
      font-family: var(--mono);
    }
    .earnings-bar-track {
      height: 6px;
      background: rgba(255,255,255,0.06);
      border-radius: 3px;
      overflow: hidden;
    }
    .earnings-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
    }
    .earnings-bar-fill.platform { background: rgba(255,255,255,0.2); }
    .earnings-bar-fill.artdrop  { background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); }

    /* ── EMAIL CAPTURE ───────────────────────────────── */
    .email-block {
      background: var(--lime-dim);
      border: 1px solid rgba(191,255,94,0.25);
      border-radius: 8px;
      padding: 32px 28px 28px;
      margin-bottom: 28px;
    }
    .email-headline {
      font-family: var(--body);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .email-sub {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .email-form {
      display: flex;
      gap: 10px;
    }
    .email-input {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border-bright);
      border-radius: 4px;
      padding: 13px 16px;
      font-family: var(--body);
      font-size: 14px;
      color: var(--white);
      outline: none;
      transition: border-color 0.15s;
    }
    .email-input::placeholder { color: var(--faint); }
    .email-input:focus { border-color: var(--lime); }
    .btn-join {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--bg);
      background: var(--lime);
      border: none;
      padding: 13px 22px;
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .btn-join:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--lime-glow); }
    .email-success {
      display: none;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--lime);
      padding: 10px 0 0;
      letter-spacing: 0.05em;
    }
    .email-privacy {
      font-size: 11px;
      color: var(--faint);
      margin-top: 10px;
      font-family: var(--mono);
    }

    /* ── SHARE BUTTONS ───────────────────────────────── */
    .share-block {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .share-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .btn-share {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      font-weight: 500;
      color: var(--white);
      background: var(--bg3);
      border: 1px solid var(--border-bright);
      border-radius: 4px;
      padding: 9px 16px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: border-color 0.15s, color 0.15s;
    }
    .btn-share:hover { border-color: var(--lime); color: var(--lime); }
    .btn-retake {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--faint);
      background: none;
      border: none;
      cursor: pointer;
      padding: 9px 0;
      transition: color 0.15s;
    }
    .btn-retake:hover { color: var(--muted); }

    /* ── FOOTER ──────────────────────────────────────── */
    footer {
      padding: 48px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      position: relative;
      z-index: 2;
    }
    .footer-logo { font-family: var(--mono); font-size: 14px; color: var(--lime); }
    .footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
    .footer-links a { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; }
    .footer-links a:hover { color: var(--white); }
    .footer-copy { font-family: var(--mono); font-size: 11px; color: var(--faint); }

    /* ── RESULT SCREEN ALIGNMENT ─────────────────────── */
    /* flex-direction: column means align-items controls horizontal axis.
       Use justify-content for the vertical top-align so the result block
       still centers horizontally on wide viewports. Defined BEFORE the
       responsive ladder so per-breakpoint padding-top overrides win. */
    .quiz-shell.result-aligned {
      justify-content: flex-start;
      padding-top: 96px;
    }

    /* ── MOBILE ──────────────────────────────────────── */
    /* Six-tier responsive ladder (matches the StanHattie standard).
       Each rule below is intentionally narrow: the design centers a
       620px-max card and uses clamp() for type, so most layout already
       scales fluidly. These media queries handle the cases where the
       fluid behavior isn't quite right. */

    @media (max-width: 640px) {
      nav { padding: 16px 24px; }
      .quiz-shell { padding: 80px 16px 48px; }
      .quiz-card { padding: 32px 24px 28px; }
      .result-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
      .stat-card { padding: 18px 16px 14px; }
      .email-form { flex-direction: column; }
      .btn-join { width: 100%; }
      .setup-block, .earnings-block, .email-block { padding: 22px 18px; }
      footer { padding: 36px 24px; flex-direction: column; align-items: flex-start; }
      .footer-links { flex-direction: column; gap: 10px; }
      .q-footer { flex-direction: row-reverse; }
      /* Tap targets: WCAG 2.5.5 / responsive standard requires min 44x44 */
      .btn-back { min-height: 44px; padding: 10px 14px; }
      .btn-retake { min-height: 44px; padding: 12px 0; }
      .share-btn, .btn-share, .result-screen a[href*="twitter"], .result-screen a[href*="linkedin"] { min-height: 44px; display: inline-flex; align-items: center; }
    }

    /* Narrow phones (iPhone SE 375px, Galaxy small) */
    @media (max-width: 480px) {
      nav { padding: 14px 16px; }
      .quiz-shell { padding: 64px 12px 36px; }
      .quiz-card { padding: 26px 18px 24px; }
      .intro-meta { gap: 12px; flex-wrap: wrap; }
      .intro-meta-item { font-size: 11px; }
      .stat-card { padding: 14px 12px 12px; }
      .setup-block, .earnings-block, .email-block { padding: 18px 14px; }
      footer { padding: 28px 16px; }
    }

    /* Tablet (iPad portrait, etc.). Default desktop styles already work
       at this width; this rule just gives the card a touch more padding
       so questions don't feel cramped on a phablet. */
    @media (min-width: 641px) and (max-width: 1023px) {
      .quiz-card { padding: 44px 40px 36px; }
      .quiz-shell { padding: 96px 32px 56px; }
    }

    /* Standard desktop (1024-1439). Layout is fully fluid here, no
       overrides needed. Documented as a tier for the responsive
       ladder. */
    @media (min-width: 1024px) and (max-width: 1439px) {
      /* No-op, documented for the ladder. */
    }

    /* Large desktop (1440-1919). Give the intro hero a touch more
       breathing room from the top. */
    @media (min-width: 1440px) {
      .quiz-shell { padding-top: 112px; }
    }

    /* 1080p / large desktop (1920+). Slightly more vertical breathing
       room above the intro and result hero so the card doesn't feel
       lonely on a wide display. */
    @media (min-width: 1920px) {
      .quiz-shell { padding-top: 128px; }
      .quiz-shell.result-aligned { padding-top: 112px; }
    }

    /* 4K / ultra-wide (2560+). Bump the card max-width slightly and
       grow the intro typography ceiling so the hero has presence on a
       very large display. */
    @media (min-width: 2560px) {
      .quiz-card, .result-screen { max-width: 720px; }
      .intro-headline { font-size: clamp(64px, 5.5vw, 96px); }
    }

    /* ── EARNINGS BAR COLORS ──────────────────────────── */
    .earnings-pct-artdrop { color: var(--lime); }
    .earnings-pct-platform { color: var(--muted); }

    /* ── SHARED RESULT CTA ────────────────────────────── */
    .btn-take-quiz {
      width: 100%;
      padding: 14px 22px;
      font-size: 13px;
    }

    /* ── HIDDEN STATES ────────────────────────────────── */
    .screen { display: none; }
    .screen.active { display: flex; }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }