/* Solutions — automate-the-busywork game */
.office{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(18,17,38,.035) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(18,17,38,.035) 23px 24px),var(--paper)}
.desk{position:relative;aspect-ratio:1.25;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.desk:before{content:"";position:absolute;left:18%;right:18%;bottom:14%;height:30%;border-radius:6px 6px 0 0;background:var(--paper-2)}
.desk:after{content:"";position:absolute;left:44%;right:44%;bottom:6%;height:9%;background:var(--line-2);border-radius:2px}
.task{position:absolute;inset:8px;border-radius:10px;border:0;padding:10px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:#fff;box-shadow:0 10px 24px -14px rgba(18,17,38,.55),0 0 0 1.5px var(--ink);transform:translateY(110%);transition:transform .32s var(--ease),background .3s,box-shadow .3s;z-index:2;cursor:pointer}
.task.up{transform:none}
.task small{font:500 10px var(--mono);color:var(--red);display:flex;justify-content:space-between}
.task b{font:560 clamp(13px,1.2vw,16px)/1.15 var(--display);letter-spacing:-.02em}
.task .life{position:absolute;left:0;bottom:0;height:3px;background:var(--amber);width:100%;transform-origin:left}
.task.up .life{animation:life var(--life) linear forwards}
@keyframes life{to{transform:scaleX(0)}}
.task.done{background:var(--ink);color:#fff;box-shadow:0 0 0 1.5px var(--ink)}
.task.done small{color:var(--amber)}
.task.done .life{display:none}
.task.human{box-shadow:0 10px 24px -14px rgba(18,17,38,.4),0 0 0 1.5px var(--green);background:#f2f8f5}
.task.human small{color:var(--green)}
.task.oops{background:#fdecea;box-shadow:0 0 0 1.5px var(--red)}
.task.missed{opacity:.5}
.aw-tip{margin:0;padding:11px 16px;border-top:1px solid var(--line);background:#fff;min-height:42px}
.hud small{font-size:10px;margin-left:2px}

.sols .card{min-height:220px}
.cta-card{background:var(--ink)!important;color:#fff;border-color:var(--ink)!important}
.cta-card p{color:#c9c7d8!important}.cta-card .mono{color:var(--amber)!important}
.card:target{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
@media(max-width:560px){.office{gap:7px;padding:10px}.desk{aspect-ratio:1}.task{inset:5px;padding:7px}.task b{font-size:12px}.hud{gap:10px}.hud .tbar{display:none}}
@media(max-width:560px){.desk{aspect-ratio:.82}.task small span:last-child{display:none}.task b{font-size:12.5px;line-height:1.15}}