::selection{background:#FF6B4A;color:#fff}
*{-webkit-tap-highlight-color:transparent}
body{background:transparent;font-family:'DM Sans',sans-serif;color:#E8E4DB;margin:0;padding:0;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden}
/* Phone — standalone (full browser window) */
.phone{width:390px;height:844px;background:#FFF5E4;border-radius:48px;overflow:hidden;position:relative;box-shadow:0 0 0 10px #0a0a1a,0 0 0 12px #2a2a3e,0 50px 80px rgba(0,0,0,.6);flex-shrink:0}
.phone::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:32px;background:#0a0a1a;border-radius:24px;z-index:100}
/* Phone — inside iframe (viewport shorter than phone) */
@media (max-height:860px){
  body{height:100vh;margin:0;padding:0}
  .phone{width:auto;height:calc(100vh - 24px);aspect-ratio:390/844;margin:12px auto;box-shadow:0 0 0 8px #0a0a1a,0 0 0 10px #2a2a3e,0 30px 50px rgba(0,0,0,.45);border-radius:36px}
  .phone::before{width:90px;height:24px;top:6px;border-radius:18px}
}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;transition:opacity .35s,transform .35s;opacity:0;transform:translateX(30px);pointer-events:none;scrollbar-width:none;display:flex;flex-direction:column}
.screen::-webkit-scrollbar{display:none}
.screen.active{opacity:1;transform:translateX(0);pointer-events:auto}
.screen.exit-left{opacity:0;transform:translateX(-30px)}
/* Anim */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes wobble{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes squiggle{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:8}}
.a-up{animation:fadeUp .5s ease-out both}
.a-up-1{animation:fadeUp .5s ease-out .08s both}
.a-up-2{animation:fadeUp .5s ease-out .16s both}
.a-up-3{animation:fadeUp .5s ease-out .24s both}
.a-scale{animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) both}
.a-float{animation:floaty 5s ease-in-out infinite}
.a-wig{animation:wiggle 3.5s ease-in-out infinite}
.a-brth{animation:breathe 3s ease-in-out infinite}
.a-wob{animation:wobble 4s ease-in-out infinite}

/* Tabbar */
.tab-bar{margin-top:auto;background:rgba(255,245,228,.95);backdrop-filter:blur(20px);border-top:1px solid rgba(15,29,58,.08);display:flex;justify-content:space-around;padding:8px 0 28px}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.65rem;font-weight:600;color:rgba(15,29,58,.3);cursor:pointer;transition:all .2s;padding:6px 18px;border-radius:16px}
.tab-item.active{color:#1EB5A6}
.tab-item.active .tab-ic{background:#E8F8F6}
.tab-item svg{width:22px;height:22px}
.tab-ic{width:40px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:all .2s}

/* Card */
.card{background:#fff;border-radius:28px;border:1.5px solid rgba(15,29,58,.06);box-shadow:0 2px 0 rgba(15,29,58,.04)}
.card-opt{border:2.5px solid transparent;border-radius:24px;padding:16px 14px;cursor:pointer;transition:all .25s;background:#fff;box-shadow:0 2px 0 rgba(15,29,58,.06)}
.card-opt:active{transform:scale(.96)}
.card-opt.sel-most{border-color:#1EB5A6;background:#E8F8F6;box-shadow:0 4px 0 rgba(30,181,166,.15)}
.card-opt.sel-least{border-color:#FF6B4A;background:#FFF0ED;opacity:.7}
.card-opt.dim{opacity:.25;pointer-events:none}
.btn-primary{background:#0F1D3A;color:#fff;border-radius:20px;padding:18px;font-weight:700;width:100%;transition:all .2s}
.btn-primary:active{transform:scale(.98)}
.btn-coral{background:#FF6B4A;color:#fff;border-radius:20px;padding:18px;font-weight:700;width:100%;box-shadow:0 4px 0 #d9553a;transition:all .2s}
.btn-coral:active{transform:translateY(2px);box-shadow:0 2px 0 #d9553a}
.btn-teal{background:#1EB5A6;color:#fff;border-radius:20px;padding:18px;font-weight:700;width:100%;box-shadow:0 4px 0 #0F7F76;transition:all .2s}
.btn-teal:active{transform:translateY(2px);box-shadow:0 2px 0 #0F7F76}

/* Ink-underline brand mark */
.brand-underline{position:relative;display:inline-block}
.brand-underline::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:6px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M0 3 Q 25 0, 50 3 T 100 3' fill='none' stroke='%23FF6B4A' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center;background-size:100% 100%}

/* Org blobs (handdrawn) */
.blob{position:absolute;pointer-events:none;z-index:0}

/* Placeholder with stripes */
.placeholder{background:repeating-linear-gradient(45deg,rgba(15,29,58,.04) 0 8px,rgba(15,29,58,.08) 8px 16px);color:rgba(15,29,58,.45);font-family:'JetBrains Mono',monospace;font-size:.62rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border-radius:20px;letter-spacing:.02em}

/* Progress dot */
.prog-dot{width:10px;height:10px;border-radius:50%;background:rgba(15,29,58,.1);transition:all .3s}
.prog-dot.on{background:#0F1D3A;width:32px;border-radius:6px}

/* Character */
.char{display:block;object-fit:contain}

/* Workspace layout */

/* Flow map */

/* Tweaks panel */

/* Scenario (for test) */
.scene-bg{background:linear-gradient(180deg,#FFE8C4 0%,#FFF5E4 100%)}

/* Chips */
.chip{padding:8px 14px;border-radius:100px;font-size:.72rem;font-weight:700;color:rgba(15,29,58,.55);background:#fff;border:1.5px solid rgba(15,29,58,.08);white-space:nowrap;flex-shrink:0;cursor:pointer;transition:all .2s}
.chip.chip-on{background:#0F1D3A;color:#fff;border-color:#0F1D3A}
.chip:hover:not(.chip-on){background:#FFF4CC;border-color:#FFD429}

/* Scene caption */
.scene-cap{position:absolute;bottom:6px;right:10px;font-family:'JetBrains Mono',monospace;font-size:.55rem;color:rgba(15,29,58,.35);letter-spacing:.05em}

/* RSVP confirmed */
.rsvp-on{background:#1EB5A6 !important;box-shadow:0 4px 0 #0F7F76 !important}