/* PM Playground — animated app launch page (offline) */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --r: 16px; --r2: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.14);
  --shadow2: 0 10px 22px rgba(0,0,0,.18);
  --ring: 0 0 0 3px rgba(124, 92, 255, .35);

  --c-bg:#0b0f18;
  --c-surface: rgba(255,255,255,.08);
  --c-surface2: rgba(255,255,255,.12);
  --c-fg: rgba(255,255,255,.92);
  --c-muted: rgba(255,255,255,.68);
  --c-muted2: rgba(255,255,255,.52);
  --c-border: rgba(255,255,255,.16);

  --c-accent:#7c5cff;
  --c-accent2:#00d4ff;
  --c-good:#38f9d7;
  --c-warn:#ffcd3c;
  --c-bad:#ff4d6d;

  --card-w: 320px;
}
@media (prefers-color-scheme: light){
  :root{
    --c-bg:#f6f7fb;
    --c-surface: rgba(10,15,24,.06);
    --c-surface2: rgba(10,15,24,.085);
    --c-fg: rgba(10,15,24,.92);
    --c-muted: rgba(10,15,24,.62);
    --c-muted2: rgba(10,15,24,.48);
    --c-border: rgba(10,15,24,.12);
    --shadow:0 10px 24px rgba(10,15,24,.10);
    --shadow2:0 10px 20px rgba(10,15,24,.14);
  }
}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--c-fg);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(124,92,255,.35), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(0,212,255,.25), transparent 55%),
    radial-gradient(900px 620px at 15% 95%, rgba(56,249,215,.18), transparent 55%),
    radial-gradient(900px 620px at 95% 88%, rgba(255,77,109,.18), transparent 55%),
    var(--c-bg);
  overflow-x:hidden;
}
body[data-theme="dark"]{--c-bg:#0b0f18;--c-surface:rgba(255,255,255,.08);--c-surface2:rgba(255,255,255,.12);--c-fg:rgba(255,255,255,.92);--c-muted:rgba(255,255,255,.68);--c-muted2:rgba(255,255,255,.52);--c-border:rgba(255,255,255,.16);}
body[data-theme="light"]{--c-bg:#f6f7fb;--c-surface:rgba(10,15,24,.06);--c-surface2:rgba(10,15,24,.085);--c-fg:rgba(10,15,24,.92);--c-muted:rgba(10,15,24,.62);--c-muted2:rgba(10,15,24,.48);--c-border:rgba(10,15,24,.12);}

body[data-calm="true"] *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
.skip{position:absolute;left:-999px;top:10px;padding:10px 12px;border-radius:10px;background:var(--c-fg);color:var(--c-bg);z-index:999;}
.skip:focus{left:12px;outline:none;box-shadow:var(--ring);}

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

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.06));
  border-bottom:1px solid var(--c-border);
}
body[data-theme="light"] .topbar{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.55));}
.brand{display:flex;align-items:center;gap:12px;}
.mark{width:42px;height:42px;border-radius:16px;border:1px solid var(--c-border);display:grid;place-items:center;background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));box-shadow:var(--shadow);}
.brandName{font-weight:950;letter-spacing:.2px;}
.brandSub{font-size:12px;color:var(--c-muted);margin-top:2px;}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

.btn{
  border:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));
  color:var(--c-fg);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow2);}
.btn:active{transform:translateY(0) scale(.99);}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn.secondary{background:transparent;box-shadow:none;}
.btn.secondary:hover{background:var(--c-surface);}
.btn.ghost{background:transparent;box-shadow:none;}
.btn.ghost:hover{background:var(--c-surface);}

.iconBtn{
  width:42px;height:42px;border-radius:14px;border:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));
  color:var(--c-fg);
  cursor:pointer;display:grid;place-items:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.iconBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow2);}
.iconBtn:active{transform:translateY(0) scale(.99);}
.iconBtn:focus-visible{outline:none;box-shadow:var(--ring);}

.sunmoon{
  width:18px;height:18px;display:inline-block;background:currentColor;
  -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-size:contain;mask-repeat:no-repeat;mask-position:center;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 18a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM4 11a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2h1Zm18 0a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2h1ZM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 18a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM4 11a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2h1Zm18 0a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2h1ZM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z"/></svg>');
}

.hero{padding:22px 16px 8px;}
.heroInner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;}
@media (max-width:980px){.heroInner{grid-template-columns:1fr;}}
.heroLeft h1{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.6px;}
.lead{margin:12px 0 0;color:var(--c-muted);font-weight:700;max-width:64ch;}
.heroBadges{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.pill{border:1px solid var(--c-border);background:rgba(0,0,0,.06);border-radius:999px;padding:7px 10px;color:var(--c-muted);font-weight:900;}
body[data-theme="light"] .pill{background:rgba(255,255,255,.55);}
.pill.subtle{font-weight:800;color:var(--c-muted2);}
.dot{width:10px;height:10px;border-radius:99px;display:inline-block;margin-right:8px;background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));transform:translateY(1px);}
.heroTip{margin-top:14px;border:1px dashed var(--c-border);border-radius:var(--r2);padding:12px;background:rgba(0,0,0,.06);}
body[data-theme="light"] .heroTip{background:rgba(255,255,255,.55);}
.tipLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted2);font-weight:950;}
.tipText{margin-top:4px;font-weight:800;color:var(--c-muted);}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;padding:2px 7px;border-radius:10px;border:1px solid var(--c-border);background:rgba(0,0,0,.08);}
.heroCtas{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}

.heroRight{position:relative;height:340px;}
.orb{position:absolute;width:220px;height:220px;border-radius:999px;opacity:.55;mix-blend-mode:screen;animation:float 7s ease-in-out infinite;}
.o1{left:-20px;top:10px;background:radial-gradient(circle at 30% 30%, rgba(124,92,255,.85), transparent 60%);}
.o2{right:0;top:0;background:radial-gradient(circle at 40% 30%, rgba(0,212,255,.75), transparent 60%);animation-duration:9s;}
.o3{right:20px;bottom:-10px;background:radial-gradient(circle at 40% 30%, rgba(56,249,215,.65), transparent 60%);animation-duration:8s;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0) scale(1);}50%{transform:translateY(-10px) translateX(6px) scale(1.03);}}
.mascot{position:absolute;right:14px;bottom:0;border-radius:var(--r2);border:1px solid var(--c-border);background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));box-shadow:var(--shadow);padding:12px 12px 10px;transform-origin:70% 80%;animation:bob 3.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:rotate(-1deg) translateY(0);}50%{transform:rotate(1deg) translateY(-6px);}}
.mascotLabel{margin-top:6px;font-weight:900;color:var(--c-muted);font-size:12px;text-align:center;}

.main{max-width:1200px;margin:0 auto;padding:16px 16px 22px;}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.sectionHead h2{margin:0;font-size:20px;font-weight:950;}
.sectionTools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.searchWrap{position:relative;width:min(520px,92vw);}
.search{width:100%;padding:12px 44px 12px 14px;border-radius:16px;border:1px solid var(--c-border);background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));color:var(--c-fg);font-weight:800;outline:none;}
.search:focus{box-shadow:var(--ring);}
.kbdHint{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--c-muted2);border:1px solid var(--c-border);padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.08);}
body[data-theme="light"] .kbdHint{background:rgba(10,15,24,.03);}

.grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--card-w), 1fr));gap:14px;}

.card{
  position:relative;
  border-radius:var(--r2);
  border:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);}
.card:active{transform:translateY(-1px) scale(.995);}
.card:focus-visible{outline:none;box-shadow:var(--ring);}

.card::before{content:"";position:absolute;inset:-2px;background:radial-gradient(700px 240px at 20% 10%, rgba(124,92,255,.20), transparent 55%);opacity:.95;pointer-events:none;}
.card[data-hue="risk"]::before{background:radial-gradient(700px 240px at 20% 10%, rgba(255,77,109,.20), transparent 55%);}
.card[data-hue="gantt"]::before{background:radial-gradient(700px 240px at 20% 10%, rgba(0,212,255,.20), transparent 55%);}
.card[data-hue="swot"]::before{background:radial-gradient(700px 240px at 20% 10%, rgba(255,205,60,.20), transparent 55%);}

.cardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cardIcon{width:44px;height:44px;border-radius:16px;border:1px solid var(--c-border);display:grid;place-items:center;background:rgba(0,0,0,.06);}
body[data-theme="light"] .cardIcon{background:rgba(255,255,255,.55);}
.cardName{margin:0;font-size:16px;font-weight:950;letter-spacing:-.2px;}
.cardSub{margin-top:4px;color:var(--c-muted);font-weight:750;font-size:12px;}
.cardBadges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.badge{border-radius:999px;border:1px solid var(--c-border);padding:5px 10px;font-weight:900;font-size:12px;color:var(--c-muted);background:rgba(0,0,0,.06);}
body[data-theme="light"] .badge{background:rgba(255,255,255,.55);}

.spark{
  position:absolute;right:12px;bottom:12px;width:86px;height:86px;border-radius:26px;opacity:.9;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(circle at 60% 40%, rgba(56,249,215,.35), transparent 55%),
    radial-gradient(circle at 50% 70%, rgba(0,212,255,.28), transparent 55%);
  transform:rotate(10deg);
  animation:sparkle 3.2s ease-in-out infinite;
}
@keyframes sparkle{0%,100%{transform:rotate(10deg) scale(1);opacity:.80;}50%{transform:rotate(14deg) scale(1.05);opacity:1;}}

.footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}

/* Toast */
.toastWrap{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{pointer-events:auto;min-width:min(520px, calc(100vw - 24px));border-radius:18px;border:1px solid var(--c-border);background:linear-gradient(180deg,var(--c-surface2),var(--c-surface));box-shadow:var(--shadow2);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:toastIn .18s ease-out;}
@keyframes toastIn{from{transform:translateY(10px) scale(.98);opacity:.0;}to{transform:translateY(0) scale(1);opacity:1;}}
.toast .msg{font-weight:950;}
.toast .sub{font-size:12px;color:var(--c-muted);margin-top:2px;}
.toast .xBtn{width:34px;height:34px;border-radius:14px;border:1px solid var(--c-border);background:transparent;cursor:pointer;}
.toast .xBtn:hover{background:rgba(255,255,255,.08);}