/* Corporate Clown: a sarcastic "corporate intranet". Everything is cubicle gray and tired blue;
     only the clown (red, yellow, blue) is allowed to be bright. */
  :root{
    --desk:#c5c9cf; --win:#e9ecf0; --panel:#dde1e7; --field:#fff; --text:#22262e; --muted:#5d6470;
    --edge:#2f3540; --hi:#fff; --lo:#9aa1ab;
    --title1:#4d6283; --title2:#8495af; --sticky:#f1e6a8; --fine:#d5e4d2;
    --red:#e4302b; --blue:#2b59ff; --yellow:#ffd23f;
    --ui:"Segoe UI",Tahoma,Geneva,Verdana,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono",Consolas,"Lucida Console","Courier New",monospace;
    --heavy:"Arial Black","Segoe UI Black",Arial,sans-serif;
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html,body{margin:0}
  body{
    color:var(--text); font-family:var(--ui);
    min-height:100vh; display:flex; flex-direction:column;
    background-color:var(--desk);
    /* faint spreadsheet cells */
    background-image:
      linear-gradient(rgba(55,65,80,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(55,65,80,.10) 1px, transparent 1px);
    background-size:72px 24px;
  }
  .app{
    width:100%; max-width:540px; margin:0 auto; flex:1 0 auto; padding:12px 16px 36px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }

  /* ---------- the fake app window ---------- */
  .win{
    width:100%; background:var(--win); border:1px solid var(--edge);
    box-shadow:inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 0 8px 24px rgba(30,40,55,.22);
  }
  .titlebar{
    display:flex; align-items:center; gap:8px; min-height:36px; padding:4px 4px 4px 8px;
    background:linear-gradient(90deg, var(--title1), var(--title2)); color:#fff;
    font-size:13px; line-height:1.2;
  }
  .tb-icon{font-size:16px; line-height:1}
  .tb-title{flex:1; min-width:0}
  .tb-title b{font-weight:700}
  .tag{display:inline; font-weight:400}
  .tag::before{content:" — "}
  .tb-btns{display:flex; gap:2px}
  .tb-btns i{
    width:24px; height:22px; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:12px;
    background:var(--win); color:var(--text); border:1px solid var(--edge);
    box-shadow:inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  }
  .tb-btns i:last-child{margin-left:2px}
  .menubar{display:flex; gap:2px; padding:3px 4px; font-size:13px; border-bottom:1px solid var(--lo)}
  .menubar span{display:inline-block; padding:2px 8px; color:var(--text)}
  .menubar span::first-letter{text-decoration:underline}
  .win-body{
    padding:14px 12px 18px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .statusbar{display:flex; gap:3px; padding:3px; border-top:1px solid var(--lo); font-size:12px; color:var(--muted)}
  .statusbar span{
    padding:2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  }
  .st-msg{flex:1; min-width:0}
  /* the status bar jokes follow whatever section is on screen (no JS needed) */
  .st-msg::before{content:"Synergy: loading"}
  .st-msg::after{
    content:"..."; display:inline-block; vertical-align:bottom; overflow:hidden; width:0;
    animation:dots 1.6s steps(4) infinite;
  }
  @keyframes dots{to{width:1.3em}}
  .st-cell::before{content:"Morale: 12%"}
  .win:has(#swipeWrap:not([hidden])) .st-msg::before{content:"Meetings today: 7 · Decisions: 0"}
  .win:has(#swipeWrap:not([hidden])) .st-cell::before{content:"Calendar: 112%"}
  .win:has(#fillWrap:not([hidden])) .st-msg::before{content:"Autocomplete powered by trauma"}
  .win:has(#fillWrap:not([hidden])) .st-cell::before{content:"Morale: 9%"}
  .win:has(#interlude:not([hidden])) .st-msg::before{content:"Saving progress to nowhere"}
  .win:has(#result:not([hidden])) .st-msg::before{content:"Review filed. Nothing will change."}
  .win:has(#result:not([hidden])) .st-cell::before{content:"Morale: N/A"}
  .win:has(#swipeWrap:not([hidden])) .st-msg::after,
  .win:has(#fillWrap:not([hidden])) .st-msg::after,
  .win:has(#result:not([hidden])) .st-msg::after{content:none}

  h1{
    font-family:var(--ui); font-weight:700; font-size:26px; line-height:1.1;
    text-align:center; margin:0; letter-spacing:-.5px;
  }
  h1 span{color:var(--red)}
  h1::after{content:"™"; font-size:.45em; vertical-align:super; font-weight:400; color:var(--muted)}
  .sub{margin:0; text-align:center; color:var(--muted); font-size:15px; max-width:38ch; line-height:1.4}

  /* ---------- the clown, on the office webcam ---------- */
  .stage{
    position:relative; width:100%; padding:20px 8px 10px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:var(--panel); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  }
  .stage::before{
    content:"● REC  Webcam · Employee #4471"; position:absolute; top:4px; left:8px;
    font-family:var(--mono); font-size:10.5px; color:var(--muted); white-space:nowrap;
  }
  #clown{width:190px; height:auto; overflow:visible}
  .meter{
    display:flex; gap:2px; justify-content:center; padding:2px;
    background:var(--field); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  }
  .meter i{width:22px; height:12px; background:#e3e6ea; transition:background .3s}
  .meter i:nth-child(3), .meter i:nth-child(5){margin-left:6px}
  .meter i.on{background:var(--red)}

  /* clown layers */
  .layer{
    opacity:0; transform:scale(.6);
    transform-box:fill-box; transform-origin:center;
    transition:opacity .25s, transform .4s cubic-bezier(.3,1.6,.5,1);
  }
  .layer.on{opacity:1; transform:scale(1)}
  #head{transform-origin:150px 230px}
  #head.nod{animation:nod 1.7s ease-in-out infinite}
  @keyframes nod{
    0%,100%{transform:rotate(0) translateY(0)}
    30%{transform:rotate(4deg) translateY(5px)}
    60%{transform:rotate(-2deg) translateY(1px)}
  }
  @media (prefers-reduced-motion:reduce){ #head.nod{animation:none} }

  .wrap{width:100%; display:flex; flex-direction:column; align-items:center; gap:14px}

  /* counters look like a spreadsheet formula bar */
  .count{
    width:100%; display:flex; align-items:center; min-height:28px; padding:3px 8px;
    font-family:var(--mono); font-size:12.5px; color:var(--text);
    background:var(--field); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  }
  .count::before{
    content:"fx"; font:italic 700 13px Georgia,"Times New Roman",serif; color:var(--title1);
    padding-right:8px; margin-right:8px; border-right:1px solid var(--lo);
  }
  .count.warn{color:#b3231f}

  /* ---------- stage 1: grid = spreadsheet cells ---------- */
  .grid{
    display:grid; grid-template-columns:repeat(3,1fr); width:100%;
    background:var(--field); border-top:1px solid var(--lo); border-left:1px solid var(--lo);
  }
  .card{
    min-height:104px; padding:10px 8px; margin:0;
    border:0; border-right:1px solid var(--lo); border-bottom:1px solid var(--lo); border-radius:0;
    background:var(--field); color:var(--text);
    font:inherit; font-size:13px; font-weight:600; line-height:1.25; text-align:center;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    transition:background .25s, box-shadow .12s;
  }
  .card:active{background:#eef1f5}
  .card[aria-pressed="true"]{background:#d6e0f0; box-shadow:inset 0 0 0 2px var(--title1)}
  .card:focus-visible{outline:1px dotted var(--edge); outline-offset:-5px}
  .card:disabled{cursor:default}
  .card .note{display:none; font-size:11.5px; font-weight:500; font-style:italic}
  .card.rev .note{display:block}
  .card.toxic{background:var(--red); color:#fff}
  .card.missed{background:#dfe2e6; color:var(--muted)}
  .card.fine{background:var(--fine); color:var(--text)}
  .grid.full .card[aria-pressed="false"]{opacity:.55}

  /* ---------- stage 2: swipe = meeting invites ---------- */
  .deck{position:relative; width:100%; height:190px; touch-action:pan-y}
  .scard{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:40px 20px 18px; text-align:center; font-size:21px; font-weight:700; line-height:1.25;
    background:var(--field); border:1px solid var(--edge);
    box-shadow:inset -1px -1px 0 var(--lo), 0 4px 10px rgba(30,40,55,.18);
    user-select:none; -webkit-user-select:none; cursor:grab; touch-action:pan-y;
  }
  .scard::before{
    content:"📅  Meeting invite · Recurring, no end date"; position:absolute; top:0; left:0; right:0;
    padding:5px 10px; text-align:left; font-size:12px; font-weight:600; color:var(--muted);
    background:var(--panel); border-bottom:1px solid var(--lo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .stamp{
    position:absolute; top:36px; font-family:var(--heavy); font-size:13px;
    letter-spacing:.04em; border:3px solid; border-radius:4px; padding:2px 8px; opacity:0;
  }
  .stamp.yes{right:12px; color:var(--red); border-color:var(--red); transform:rotate(8deg)}
  .stamp.no{left:12px; color:var(--muted); border-color:var(--muted); transform:rotate(-8deg)}

  /* feedback = sticky note on the monitor */
  .fb{
    min-height:2.6em; margin:0; padding:9px 14px; max-width:34ch;
    text-align:center; font-weight:600; font-size:15px; line-height:1.3;
    background:var(--sticky); color:var(--text);
    box-shadow:0 3px 6px rgba(30,40,55,.2); transform:rotate(-1.5deg);
  }
  .fb:empty{background:transparent; box-shadow:none}
  .fb.bad{color:#b3231f}

  /* ---------- stage 3: complete the phrase = a required form field ---------- */
  .prompt{
    position:relative; width:100%; padding:30px 14px 20px; text-align:center;
    font-size:23px; font-weight:700; line-height:1.3;
    background:var(--field); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
    box-shadow:inset 1px 1px 0 var(--edge);
  }
  .prompt::before{
    content:"Mandatory field *"; position:absolute; top:6px; left:10px;
    font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted);
  }
  .blank{display:inline-block; min-width:3.2em; border-bottom:3px dashed var(--title1); color:var(--title1)}
  .blank.filled{color:var(--text); border-bottom-style:solid; border-bottom-color:var(--text)}
  .opts{display:grid; gap:8px; width:100%}

  /* ---------- old-OS buttons, still big enough for thumbs ---------- */
  .btn{
    font:inherit; font-weight:700; font-size:16px; min-height:46px; padding:10px 18px;
    background:var(--win); color:var(--text); border:1px solid var(--edge); border-radius:2px;
    box-shadow:inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo);
    cursor:pointer;
  }
  .btn:active{box-shadow:inset 2px 2px 0 var(--lo), inset -1px -1px 0 var(--hi); transform:translate(1px,1px)}
  .btn:focus-visible{outline:1px dotted var(--edge); outline-offset:-6px}
  .btn.primary{
    background:var(--title1); color:#fff;
    box-shadow:0 0 0 1px var(--edge), inset 1px 1px 0 #8c9cb6, inset -2px -2px 0 #33445f;
  }
  .btn.primary:active{box-shadow:0 0 0 1px var(--edge), inset 2px 2px 0 #33445f}
  .btn.primary:focus-visible{outline-color:#fff}
  .btn:disabled{opacity:.5; cursor:default}
  .wrap > .btn{min-width:62%}
  .opt{font-size:18px; font-weight:600}
  .opt:disabled{opacity:1; color:var(--text)}
  .opt.ok{background:var(--fine)}
  .opt.bad{background:#f0d2cf}
  .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; width:100%}
  .row .btn{flex:1 1 140px}

  /* ---------- between stages: a big sticky note ---------- */
  .interlude{
    position:relative; width:100%; text-align:center; padding:22px 16px 16px;
    background:var(--sticky); box-shadow:0 4px 10px rgba(30,40,55,.22); transform:rotate(.8deg);
  }
  .interlude::before{
    content:""; position:absolute; top:-9px; left:50%; width:84px; height:20px; margin-left:-42px;
    background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.08); transform:rotate(-3deg);
  }
  .interlude .gain{font-family:var(--heavy); font-weight:900; font-size:26px}
  .interlude p{margin:4px 0 14px; font-size:15px}

  /* ---------- result: HR performance review certificate ---------- */
  .result{
    width:100%; text-align:center; padding:18px 14px 16px;
    background:#fbfaf5; border:6px double var(--title1); outline:1px solid var(--lo); outline-offset:3px;
  }
  .cert-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .cert-line{margin:10px 0 2px; font:italic 15px Georgia,"Times New Roman",serif; color:var(--muted)}
  .result .lvl{font-family:var(--heavy); font-weight:900; font-size:34px; letter-spacing:-1px}
  .result h2{margin:2px 0 8px; font:700 24px Georgia,"Times New Roman",serif; color:var(--red)}
  .result p{margin:0 0 10px; color:var(--muted); font-size:15px; line-height:1.4}
  .result .brk{
    display:inline-block; font-family:var(--mono); font-size:12.5px; color:var(--text);
    padding:4px 10px; margin-bottom:14px; border-top:1px solid var(--lo); border-bottom:1px solid var(--lo);
  }
  .cert-sign{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 6px 16px}
  .sig{
    flex:1; max-width:60%; padding-top:4px; border-top:1px solid var(--text); text-align:left;
    font:italic 15px Georgia,"Times New Roman",serif;
  }
  .sig small{display:block; font:12px var(--ui); color:var(--muted)}
  .seal{
    width:76px; height:76px; flex:none; border-radius:50%; display:grid; place-items:center;
    background:var(--red); color:#fff; font:900 9px/1.15 var(--heavy); letter-spacing:.06em;
    box-shadow:inset 0 0 0 4px var(--red), inset 0 0 0 5px rgba(255,255,255,.8); transform:rotate(-12deg);
  }

  @media (max-width:420px){
    .card{font-size:12px}
    /* title bar gets two lines on phones: app name, then the stage */
    .tag{display:block; font-size:12px; opacity:.92}
    .tag::before{content:none}
  }

/* ---------- top bar (outside the window) ---------- */
.topbar{width:100%; display:flex; align-items:center; justify-content:space-between}
.home{
  display:inline-flex; align-items:center; min-height:40px; padding:0 12px;
  color:var(--text); font-weight:700; font-size:14px; text-decoration:none;
  background:var(--win); border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo);
}
.home:active{box-shadow:inset 2px 2px 0 var(--lo), inset -1px -1px 0 var(--hi)}
.home:focus-visible{outline:1px dotted var(--edge); outline-offset:-5px}
.mute{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:var(--win); color:var(--text); border:1px solid var(--edge); border-radius:0;
  box-shadow:inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo);
}
.mute:active{box-shadow:inset 2px 2px 0 var(--lo), inset -1px -1px 0 var(--hi)}
.mute svg{width:20px; height:20px}

/* ---------- animations: bump, honk, desk scene ---------- */
#clown.bump{animation:bump .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.07) rotate(-2deg)}
  70%{transform:scale(.98) rotate(1deg)}
  100%{transform:scale(1)}
}
.honk{
  position:absolute; top:26%; right:6%; z-index:3; pointer-events:none;
  font-family:var(--heavy); font-weight:900; font-size:22px; letter-spacing:.02em;
  color:#fff; background:var(--red); border:3px solid #1b1f3b; border-radius:14px;
  padding:4px 12px; box-shadow:0 4px 0 #1b1f3b;
  opacity:0; transform:scale(.4) rotate(8deg);
}
.honk.on{animation:honk 1s ease-out forwards}
@keyframes honk{
  0%{opacity:0; transform:scale(.4) rotate(8deg)}
  15%{opacity:1; transform:scale(1.15) rotate(-6deg)}
  30%{transform:scale(1) rotate(4deg)}
  80%{opacity:1; transform:scale(1) rotate(-3deg)}
  100%{opacity:0; transform:scale(1.05) rotate(-3deg) translateY(-6px)}
}

#rig{transform-box:view-box; transform-origin:0 0; transition:transform .6s ease}
#scene{opacity:0; transition:opacity .5s .2s; pointer-events:none}
.stage.scene #rig{transform:translate(-14px,8px) scale(.92)}
.stage.scene #scene{opacity:1}
.stage.scene .meter{display:none}
#smirk{opacity:0; transition:opacity .3s}
.hand{transform-box:fill-box; transform-origin:center}
.stage.scene .hand{animation:type .26s ease-in-out infinite alternate}
.stage.scene .hand-r{animation-delay:-.13s}
@keyframes type{from{transform:translateY(0)} to{transform:translateY(4px)}}
.cursor{animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .stage.scene .hand, .cursor, #clown.bump, .honk.on{animation:none}
  .st-msg::after{animation:none; width:1.3em}
  .fb, .interlude{transform:none}
}

#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50}

/* ---------- static about + footer (same links as the rest of the site) ---------- */
.about{
  width:100%; max-width:540px; margin:0 auto; padding:0 16px 40px;
  color:var(--muted); font-size:14px; line-height:1.5;
}
.about h2{margin:0 0 6px; font-size:16px; color:var(--text)}
.about p{margin:0 0 10px}
.site-footer{border-top:1px solid var(--edge); box-shadow:inset 0 1px 0 var(--hi); background:#d3d7dc; padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.site-footer__inner{max-width:540px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between}
.site-footer__brand{font-weight:700; font-size:14px}
.site-footer__links{display:flex; gap:16px; flex-wrap:wrap}
.site-footer__links a{color:var(--text); font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid transparent}
.site-footer__links a:hover, .site-footer__links a:focus-visible{border-bottom-color:var(--title1)}