.aps-widget{--aps-gold:#fcb208;--aps-bright:#f2efe8;--aps-soft:#aab3c5;background:#31313a;color:var(--aps-bright);border:1px solid #45454f;max-width:800px;margin:12px auto;border-radius:8px;overflow:hidden;font-family:inherit;box-shadow:0 12px 30px #00000020}
.aps-widget *{box-sizing:border-box}
.aps-panel-head{background:#26262e;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid #45454f}
.aps-brand,.aps-top-badge,.aps-mode-tag,.aps-quest-count,.aps-panel-footer{font:600 12px/1.5 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:.04em}
.aps-brand{color:var(--aps-gold)}.aps-head-muted{color:#7586a1}.aps-pixel-icon{color:var(--aps-gold);margin-right:7px}.aps-top-badge{color:#7bdcb5;font-size:10px}.aps-top-badge[data-closed="yes"]{color:#f7b66f}
.aps-art{background:#12151c;display:flex;justify-content:center}
/* status.js sets --aps-k (a whole number of device pixels per art pixel) and the stage size. */
.aps-stage{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
.aps-scene{position:absolute;left:0;top:0;transform:translate(var(--aps-tx,0px),var(--aps-ty,0px)) scale(var(--aps-k,1));transform-origin:0 0;background:var(--aps-bg) 0 0/100% 100% no-repeat;image-rendering:pixelated}
.aps-scene>span{position:absolute;display:block;image-rendering:pixelated}
/* Custom pictures and clips from Settings fill the stage; status.js sizes the stage. */
.aps-scene.aps-custom{width:100%;height:100%;transform:none;background:#12151c;image-rendering:auto}
.aps-custom>img,.aps-custom>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.aps-fit-cover>img,.aps-fit-cover>video{object-fit:cover}
.aps-fit-pixel>img,.aps-fit-pixel>video{image-rendering:pixelated}
.aps-widget .aps-mode{display:none}.aps-widget[data-scene="coding"] .aps-coding,.aps-widget[data-scene="coffee"] .aps-coffee,.aps-widget[data-scene="treadmill"] .aps-treadmill,.aps-widget[data-scene="ramen"] .aps-ramen{display:block}
.aps-panel-content{padding:20px 23px 24px}.aps-status-line{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}.aps-mode-tag{color:var(--aps-gold)}.aps-quest-count{background:#26262e;border:1px solid #4b566e;padding:5px 10px;border-radius:6px;color:#e3e4eb;font-size:11px}
.aps-title{margin:0 0 8px!important;font-family:inherit;font-size:clamp(18px,3vw,24px);line-height:1.3;color:#ffffff;font-weight:700}.aps-description,.aps-completion,.aps-custom-message{color:var(--aps-soft);line-height:1.65;margin:0 0 11px;font-size:14px}.aps-completion{color:#ffc12d;font-weight:600}.aps-custom-message{color:#dfdce8}
.aps-cta{display:inline-flex;align-items:center;gap:10px;margin-top:9px;padding:11px 16px;text-decoration:none!important;color:#151515!important;background:var(--aps-gold);border:1px solid var(--aps-gold);border-radius:3px;font-size:13px;font-weight:700;transition:background .15s ease}.aps-cta:hover,.aps-cta:focus{background:#ffc12d;outline:2px solid #fff5;outline-offset:2px}
.aps-panel-footer{display:flex;justify-content:space-between;gap:10px;background:#26262e;border-top:1px solid #45454f;padding:10px 23px;font-size:10px;color:#7586a1}
/* Overlay sprite sheets in art pixels: one frame per step, no sub-pixel positions.
   Each animation ends where it starts, so every loop plays forward without a jump
   The ramen loop is one continuous take: pick up noodles, eat, chew, and back to the same pose for the next bite.
   The coding arms, the cat's tail and the caption icons are separate layers with their own timing. */
.aps-anim{background:var(--aps-sheet) 0 0 no-repeat}
.aps-coffee .aps-anim{animation:aps-sheet-coffee 3.6s steps(24) infinite}
.aps-coding .aps-anim{animation:aps-sheet-coding 2s steps(16) infinite}
.aps-coding .aps-anim-arms{animation:aps-sheet-coding-arms 1.5s steps(12) infinite}
.aps-ramen .aps-anim{animation:aps-sheet-ramen 4.8s steps(32) infinite}
.aps-ramen .aps-anim-tail{animation:aps-sheet-ramen-tail 1.6s steps(8) infinite}
.aps-treadmill .aps-anim{animation:aps-sheet-treadmill .8s steps(8) infinite}
.aps-treadmill .aps-anim-tail{animation:aps-sheet-treadmill-tail 1.6s steps(8) infinite}
@keyframes aps-sheet-coffee{from{background-position:0 0}to{background-position:-3240px 0}}
@keyframes aps-sheet-coding{from{background-position:0 0}to{background-position:-3728px 0}}
@keyframes aps-sheet-coding-arms{from{background-position:0 0}to{background-position:-1284px 0}}
@keyframes aps-sheet-ramen{from{background-position:0 0}to{background-position:-5056px 0}}
@keyframes aps-sheet-ramen-tail{from{background-position:0 0}to{background-position:-344px 0}}
@keyframes aps-sheet-treadmill{from{background-position:0 0}to{background-position:-1432px 0}}
@keyframes aps-sheet-treadmill-tail{from{background-position:0 0}to{background-position:-360px 0}}
/* Caption icons: rising steam, code on the laptop screen, bobbing chopsticks, a running figure. */
.aps-coffee .aps-icon{animation:aps-icon-coffee 2s steps(16) infinite}
.aps-coding .aps-icon{animation:aps-icon-coding 1.6s steps(8) infinite}
.aps-ramen .aps-icon{animation:aps-icon-ramen 1.6s steps(8) infinite}
.aps-treadmill .aps-icon{animation:aps-icon-treadmill .8s steps(8) infinite}
@keyframes aps-icon-coffee{from{background-position:0 0}to{background-position:-416px 0}}
@keyframes aps-icon-coding{from{background-position:0 0}to{background-position:-312px 0}}
@keyframes aps-icon-ramen{from{background-position:0 0}to{background-position:-216px 0}}
@keyframes aps-icon-treadmill{from{background-position:0 0}to{background-position:-320px 0}}
/* Pixel rain on the window glass, drawn at 2x to match the 768 x 512 scenes. */
.aps-rain-layer{background:var(--aps-rain) 0 0/96px 96px repeat;animation:aps-rain .6s steps(8) infinite}
/* The mask lets rain show only on the blue window glass, never on the frame, bars or indoor plant. */
.aps-rain-layer{-webkit-mask:var(--aps-mask) 0 0/100% 100% no-repeat;mask:var(--aps-mask) 0 0/100% 100% no-repeat}
@keyframes aps-rain{to{background-position:-16px 96px}}
/* Pixel music notes from the desktop speakers and z's from the napping cat, at 2x. */
.aps-note{width:9px;height:10px;opacity:0;animation:aps-float 2.4s steps(8) infinite}
.aps-note-gold{background:var(--aps-note-gold)}
.aps-note-cyan{background:var(--aps-note-cyan);animation-delay:-.8s}
.aps-note-pink{background:var(--aps-note-pink);animation-delay:-1.6s}
.aps-zzz{width:6px;height:6px;background:var(--aps-z);opacity:0;animation:aps-float 3.2s steps(8) infinite}
.aps-zzz-2{animation-delay:-1.6s}
.aps-note,.aps-zzz{scale:2;transform-origin:0 0}
@keyframes aps-float{0%{transform:translate(0,0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translate(8px,-16px);opacity:0}}
/* Morning dust motes: tiny pixel specks drifting through the sunbeam. */
.aps-mote{width:2px;height:2px;background:#fff6d8;opacity:0;animation:aps-mote 6s steps(12) infinite}
.aps-mote-2{animation-delay:-2s}.aps-mote-3{animation-delay:-4s}
@keyframes aps-mote{0%{transform:translate(0,0);opacity:0}20%,80%{opacity:.9}100%{transform:translate(24px,-48px);opacity:0}}
/* Workload HUD: segmented pixel bars, stress pips and coffee cups; no dates. */
.aps-hud-wrap:empty{display:none}
.aps-hud{--aps-stress:#7bdcb5;display:grid;gap:7px;margin:0 0 16px;padding:12px 14px;background:#26262e;border:1px solid #45454f;border-radius:6px;font:600 10px/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:.06em;color:#aab3c5}
.aps-hud[data-stress="2"]{--aps-stress:#b5e07b}.aps-hud[data-stress="3"]{--aps-stress:#fcb208}.aps-hud[data-stress="4"]{--aps-stress:#ff9a3c}.aps-hud[data-stress="5"]{--aps-stress:#ff5d5d}
.aps-hud-row{display:grid;grid-template-columns:112px 1fr 84px;align-items:center;gap:10px}
.aps-hud-value{text-align:right;color:#f2efe8}.aps-hud-stress{color:var(--aps-stress)}
.aps-hud-bar{display:block;height:10px;background:#12151c;border:1px solid #45454f;padding:1px;image-rendering:pixelated}
.aps-hud-bar>span{display:block;height:100%;background:repeating-linear-gradient(90deg,#fcb208 0 6px,transparent 6px 8px);animation:aps-charge 1.2s steps(4) infinite}
.aps-hud-energy>span{background:repeating-linear-gradient(90deg,#7bdcb5 0 6px,transparent 6px 8px)}
@keyframes aps-charge{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.aps-hud-pips,.aps-hud-cups,.aps-quest-level{display:flex;gap:3px;align-items:center}
.aps-hud-pips i{width:14px;height:8px;background:#12151c;border:1px solid #45454f}
.aps-hud-pips i.on{background:var(--aps-stress);border-color:var(--aps-stress);box-shadow:0 0 0 1px #12151c inset}
.aps-hud[data-stress="5"] .aps-hud-pips i.on{animation:aps-alarm .8s steps(2) infinite}
@keyframes aps-alarm{50%{opacity:.45}}
/* Pixel coffee cup: 10 x 9 box-shadow sprite drawn in 1px cells scaled by 1. */
.aps-hud-cups i{position:relative;width:10px;height:9px;background:linear-gradient(#f2efe8,#f2efe8) 0 2px/8px 7px no-repeat,linear-gradient(#8a5a3c,#8a5a3c) 1px 3px/6px 2px no-repeat}
.aps-hud-cups i::after{content:"";position:absolute;right:0;top:4px;width:2px;height:3px;border:1px solid #f2efe8;border-left:0}
.aps-hud-cups i::before{content:"";position:absolute;left:2px;top:-3px;width:1px;height:3px;background:#aab3c5;opacity:.7;animation:aps-steam 1.6s steps(3) infinite}
@keyframes aps-steam{0%{transform:translate(0,1px);opacity:0}50%{opacity:.8}100%{transform:translate(2px,-2px);opacity:0}}
.aps-quest-level{margin-top:7px}.aps-quest-level i{width:8px;height:6px;background:#12151c;border:1px solid #45454f}.aps-quest-level i.on{background:#ff9a3c;border-color:#ff9a3c}
@media(max-width:520px){.aps-hud-row{grid-template-columns:92px 1fr 66px;gap:8px}.aps-hud{font-size:9px}}
.aps-quests{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 16px}.aps-quest{border:1px solid #45454f;border-radius:8px;padding:10px;background:#26262e}.aps-quest-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#eee;margin-bottom:8px}.aps-quest-meter{background:#12151c;height:8px;overflow:hidden;border-radius:2px}.aps-quest-meter>span{display:block;height:100%;background:repeating-linear-gradient(90deg,#fcb208 0 6px,transparent 6px 8px)}.aps-quest-date{margin-top:7px;color:#aab1c2;font-size:11px}
.aps-compact .aps-art{max-width:560px;margin:0 auto}.aps-compact .aps-panel-content{padding-top:14px;padding-bottom:14px}
@media(max-width:520px){.aps-panel-head{padding:12px}.aps-head-muted{display:none}.aps-panel-content{padding:16px}.aps-panel-footer{padding:10px 16px}.aps-top-badge{font-size:9px}.aps-description{font-size:13px}}
@media(prefers-reduced-motion:reduce){.aps-widget *{animation:none!important;transition:none!important}}

.aps-widget [hidden]{display:none!important}