:root{
    --bg:#0f1724;
    --card-bg:#0b1220;
    --accent:#06b6d4;
    --text:#e6eef6;
    --muted:#9fb3c8;
    --card-w:88vw;
    --card-h:56vh;
    --radius:14px;
  }
  html,body{
    height:100%;
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background:linear-gradient(180deg,#071025 0%,var(--bg) 100%);
    color:var(--text);
    -webkit-tap-highlight-color: transparent;
  }

  .app {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    box-sizing:border-box;
    gap:16px;
    flex-direction:column;
  }

  header {
    width:100%;
    max-width:900px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
  }

  h1 {
    font-size:18px;
    margin:0;
    color:var(--text);
  }
  .controls {
    display:flex;
    gap:8px;
    align-items:center;
  }
  .small {
    font-size:13px;
    color:var(--muted);
  }

  .card-viewport {
    width:100%;
    max-width:900px;
    height:var(--card-h);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:visible;
    touch-action:none; /* prevent default pinch/scroll during swipe */
  }

  /* Card wrapper to handle swipe in/out animations */
  .card-wrap {
    width:var(--card-w);
    height:calc(var(--card-h) - 12px);
    perspective:1200px;
    position:relative;
    will-change:transform,opacity,left;
  }

  .card {
    width:100%;
    height:100%;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)), var(--card-bg);
    box-shadow: 0 8px 30px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    transform-style:preserve-3d;
    transition:transform 300ms cubic-bezier(.2,.9,.3,1);
    user-select:none;
    -webkit-user-select:none;
    cursor:grab;
    font-size:20px;
    padding:20px;
    box-sizing:border-box;
  }

  /* front/back faces */
  .face {
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    text-align:center;
    transform-origin:center;
    color:var(--text);
  }
  .face .content {
    max-height:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .front { font-weight:600; }
  .back { transform:rotateY(180deg); font-weight:500; color:var(--muted); }

  /* flipped state */
  .card.flipped { transform:rotateY(180deg); }

  /* swipe animation states */
  .anim-out-left { transition: transform 280ms ease, opacity 220ms ease; transform: translateX(-120%) rotate(-6deg) scale(.95); opacity:0; }
  .anim-in-right { transition: none; transform: translateX(120%) rotate(6deg) scale(.95); opacity:0; }
  .anim-enter { transition: transform 280ms ease, opacity 220ms ease; transform: translateX(0) rotate(0) scale(1); opacity:1; }

  /* hint area */
  .hint {
    font-size:13px;
    color:var(--muted);
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:8px;
  }

  .buttons button {
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
    padding:8px 10px;
    border-radius:8px;
    font-size:14px;
  }
  .buttons input[type="file"] {
    display:none;
  }

  footer {
    color:var(--muted);
    font-size:13px;
    margin-top:10px;
  }

  /* responsive */
  @media (min-width:640px){
    :root{ --card-w:60vw; --card-h:46vh; }
    .card { font-size:22px; }
  }