/* progshow_v3 · Programming Lab learner showcase as a game world (programming-lab.html #student-apps only). LOCAL concept, 2026-11-03 ~19:00 AEST.
   Original NextRising AI CSS. Style references only (no code, fonts, images or text reused): Press Start, Professional Heart, Tobi Mallory, Polygon, Nexira, Indiex — see NOTE.md.
   Site header, menus, colour tokens, glass and fonts stay; the pixel font (Silkscreen, OFL 1.1, self-hosted here) is used for SHORT labels only.
   Ted: pixel Ted option B (Rowan via Relay 19:56), page-scoped /assets/progshow_v3/ted_pixel_B_*, on a white chip. Shared Ted assets unchanged. Rollback: remove the css/js tags. */
@font-face{font-family:"NR Pixel";src:url("/assets/progshow_v3/silkscreen.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
.ps3{--px:"NR Pixel",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--g-bg:#0D1330;--g-bg2:#141C42;--g-line:#2C3870;--g-cy:#4DBAE5;--g-ye:#FEC623;--g-or:#F57E20;--g-tx:#E8ECF7;--g-mu:#B7C1DC;
  position:relative;isolation:isolate;overflow:hidden;background:#0D1330 linear-gradient(180deg,var(--g-bg) 0%,#101842 60%,var(--g-bg) 100%);color:var(--g-tx);padding-top:104px;padding-bottom:104px}
.ps3.ps-band::before{display:none}
/* pixel-step edges (white page → dark section → white page) */
.ps3-edge{position:absolute;left:0;right:0;height:24px;z-index:1;pointer-events:none;
  background:linear-gradient(#fff,#fff) 0 0/100% 8px no-repeat,
             linear-gradient(90deg,#fff 50%,transparent 50%) 0 8px/48px 8px repeat-x,
             linear-gradient(90deg,#fff 25%,transparent 25%) 0 16px/48px 8px repeat-x}
.ps3-edge-t{top:0}
.ps3-edge-b{bottom:0;transform:scaleY(-1)}
/* pixel layer: grid + scattered blocks, gentle parallax via --ps3-y (set by progshow3.js) */
.ps3-pxl{position:absolute;inset:-60px 0;z-index:-1;pointer-events:none;transform:translate3d(0,var(--ps3-y,0px),0);
  background:
   linear-gradient(rgba(77,186,229,.07) 1px,transparent 1px) 0 0/32px 32px,
   linear-gradient(90deg,rgba(77,186,229,.07) 1px,transparent 1px) 0 0/32px 32px,
   radial-gradient(60% 45% at 80% 20%,rgba(77,186,229,.16),transparent 70%),
   radial-gradient(45% 40% at 10% 85%,rgba(245,126,32,.14),transparent 70%)}
.ps3-pxl::before,.ps3-pxl::after{content:"";position:absolute;width:8px;height:8px;background:var(--g-cy);opacity:.5;
  box-shadow:120px 60px 0 #FEC623,260px 220px 0 rgba(77,186,229,.6),980px 90px 0 #F57E20,1120px 300px 0 rgba(254,198,35,.7),720px 40px 0 rgba(77,186,229,.5),
   60px 520px 0 rgba(245,126,32,.6),1180px 640px 0 rgba(77,186,229,.6),880px 760px 0 #FEC623,420px 860px 0 rgba(77,186,229,.5),1040px 980px 0 rgba(245,126,32,.6)}
.ps3-pxl::before{left:3%;top:120px}
.ps3-pxl::after{left:6%;top:200px;width:16px;height:16px;opacity:.28}
/* heading block with corner brackets (Professional Heart idea) */
.ps3-head{position:relative;max-width:760px;margin:0 auto 40px;padding:28px 32px;text-align:center}
.ps3-brk,.ps3-brk::before,.ps3-brk::after,.ps3-head::before{position:absolute;width:22px;height:22px;border:0 solid var(--g-cy)}
.ps3-brk{inset:0;width:auto;height:auto;pointer-events:none}
.ps3-brk::before{content:"";left:0;top:0;border-left-width:4px;border-top-width:4px}
.ps3-brk::after{content:"";right:0;bottom:0;border-right-width:4px;border-bottom-width:4px}
.ps3-head::before{content:"";right:0;top:0;border-right-width:4px;border-top-width:4px}
.ps3-head::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:22px;border-left:4px solid var(--g-cy);border-bottom:4px solid var(--g-cy)}
.ps3 .ps3-sticker{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:6px;background:var(--g-ye);color:#14204A;transform:rotate(-2deg);box-shadow:3px 3px 0 #000}
.ps3-k{margin:0 0 10px;font:400 14px/1.2 var(--px);letter-spacing:.12em;color:var(--g-cy)}
.ps3-caret{display:inline-block;margin-left:4px;animation:ps3Blink 1.1s steps(1,end) infinite}
@keyframes ps3Blink{50%{opacity:0}}
.ps3 h2{color:#fff;margin:0}
.ps3 .sec-head .ps-lede,.ps3 .ps-lede{margin:12px auto 0;max-width:46ch;color:var(--g-tx);font-size:18px;line-height:1.5}
.ps3 .ps-fine{margin:10px auto 0;color:var(--g-mu);font-size:13px}
/* HUD frame around the showcase */
.ps3-hud{position:relative;padding:20px;border:3px solid var(--g-line);border-radius:6px;background:rgba(13,19,48,.72);
  box-shadow:0 0 0 3px #0A0F26,8px 8px 0 #0A0F26,0 0 60px -10px rgba(77,186,229,.35)}
.ps3-hud-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:0 4px;font:400 13px/1 var(--px);letter-spacing:.1em;color:var(--g-tx)}
.ps3-hud-l{color:var(--g-cy)}
.ps3-hud-xp{display:flex;align-items:center;gap:8px;flex:1;max-width:320px}
.ps3-hud-xp b{font-weight:400;color:var(--g-ye)}
.ps3-hud-xp i{flex:1;height:10px;border:2px solid var(--g-tx);background:linear-gradient(90deg,var(--g-ye) 0 70%,transparent 70%);background-size:100% 100%;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px);mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px)}
.ps3-hud-h{color:#FF6B8A;letter-spacing:.2em;font-family:inherit;font-size:16px}
/* game cards (“cartridges”): equal sizes, hard offset shadows (Tobi Mallory idea), hover lift */
.ps3-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ps3-card{position:relative;display:flex;flex-direction:column;margin:0;border:2px solid var(--g-line);border-radius:6px;background:var(--g-bg2);
  box-shadow:6px 6px 0 #070B1E;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ps3-card:hover{transform:translate(-3px,-5px);box-shadow:10px 12px 0 #070B1E,0 0 0 2px var(--g-cy);border-color:var(--g-cy)}
.ps3-lv{display:flex;justify-content:space-between;gap:8px;margin:0;padding:9px 12px;border-bottom:2px solid var(--g-line);font:400 12px/1 var(--px);letter-spacing:.08em;color:var(--g-ye)}
.ps3-lv span+span{color:var(--g-cy)}
.ps3-shot{margin:0;aspect-ratio:11/7;background:#0A0F26;border-bottom:2px solid var(--g-line);overflow:hidden}
.ps3-shot img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}
.ps3-body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;flex:1}
.ps3-kind{margin:0;color:var(--g-mu);font:600 13px/1.4 var(--font,inherit)}
.ps3-body h3{margin:0;color:#fff;font:800 18px/1.25 var(--font-d,inherit)}
.ps3-desc{margin:0;color:var(--g-tx);font-size:15px;line-height:1.5}
.ps3-xp{display:block;margin:0 16px 16px;height:8px;border:2px solid var(--g-line);background:#0A0F26}
.ps3-xp i{display:block;height:100%;width:calc(var(--xp,4) * 14%);background:linear-gradient(90deg,var(--g-cy),#7FD3F2)}
/* Ted's hint: original Ted on a white chip + a pixel-framed white bubble (Ted never on the dark backdrop) */
.ps3-hint{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;margin:26px 0 0;padding:0 4px;max-width:none}
.ps3-ted{flex:none;order:2;width:96px;height:96px;display:grid;place-items:center;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px #0A0F26,0 0 0 6px var(--g-ye),0 10px 22px rgba(0,0,0,.45)}
.ps3-ted img{width:80px;height:80px;object-fit:contain}
.ps3-bubble{position:relative;order:1;max-width:560px;padding:16px 44px 16px 18px;background:#fff;color:#14204A;
  box-shadow:0 -4px 0 #fff,0 4px 0 #fff,-4px 0 0 #fff,4px 0 0 #fff,0 -8px 0 #0A0F26,0 8px 0 #0A0F26,-8px 0 0 #0A0F26,8px 0 0 #0A0F26,-4px -4px 0 #0A0F26,4px -4px 0 #0A0F26,-4px 4px 0 #0A0F26,4px 4px 0 #0A0F26,12px 12px 0 rgba(0,0,0,.35)}
.ps3-bubble::after{content:"";position:absolute;right:-16px;bottom:18px;width:8px;height:8px;background:#fff;box-shadow:4px 0 0 #fff,8px 0 0 #0A0F26,0 4px 0 #0A0F26,4px -4px 0 #0A0F26}
.ps3-bubble-k{margin:0 0 6px;font:400 12px/1 var(--px);letter-spacing:.12em;color:#B4500F}
.ps3-bubble-h{margin:0 0 6px;font:800 17px/1.3 var(--font-d,inherit);color:#14204A}
.ps3-bubble-t{margin:0;font-size:15px;line-height:1.55;color:#3E4866}
.ps3-hint-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:4px;background:#F3F5F9;color:#14204A;font:700 18px/1 var(--font,inherit);cursor:pointer}
.ps3-hint-x[hidden]{display:none}
.ps3-hint-x:hover{background:#E6EAF2}
.ps3-hint-x:focus-visible,.ps3-start:focus-visible{outline:3px solid var(--g-ye);outline-offset:3px}
.ps3-hint.is-gone{display:none}
/* peek-in (JS adds .ps3-peek before reveal; no JS = static, visible) */
.ps3-hint.ps3-peek .ps3-ted{transform:translateY(28px) rotate(-8deg);opacity:0}
.ps3-hint.ps3-peek .ps3-bubble{transform:scale(.92);transform-origin:100% 100%;opacity:0}
.ps3-hint .ps3-ted,.ps3-hint .ps3-bubble{transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .3s ease}
.ps3-hint .ps3-bubble{transition-delay:.15s}
.ps3-ted:hover{transform:translateY(-4px) rotate(4deg)}
/* CTA: site glass card on the dark section; main CTA stays the site orange; secondary = PRESS START-style pixel button */
.ps3 .ps3-cta{margin-top:56px;background-color:rgba(255,255,255,.96)}
.ps3-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ps3-start{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border:2px solid #14204A;border-radius:4px;background:#fff;color:#14204A;
  font:400 13px/1 var(--px);letter-spacing:.08em;text-decoration:none;box-shadow:4px 4px 0 #14204A;transition:transform .15s ease,box-shadow .15s ease}
.ps3-start:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #14204A;color:#14204A}
.ps3-start:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #14204A}
@media (max-width:1100px){.ps3-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ps3{padding-top:80px;padding-bottom:80px}
  .ps3-head{padding:22px 14px;margin-bottom:28px}
  .ps3-hud{padding:12px;box-shadow:0 0 0 3px #0A0F26,5px 5px 0 #0A0F26}
  .ps3-hud-bar{font-size:11px;gap:10px}.ps3-hud-h{display:none}
  .ps3-cards{grid-template-columns:minmax(0,1fr);gap:18px}
  .ps3-hint{flex-direction:column;align-items:flex-end;gap:18px}
  .ps3-bubble{max-width:none;align-self:stretch;margin:0 8px}
  .ps3-bubble::after{right:28px;bottom:-16px;box-shadow:0 4px 0 #fff,0 8px 0 #0A0F26,-4px 4px 0 #0A0F26,4px 4px 0 #0A0F26}
  .ps3-ted{order:2;margin-right:8px;width:92px;height:92px}.ps3-ted img{width:80px;height:80px}
  .ps3-cta-row{width:100%}.ps3-cta-row a{width:100%;justify-content:center}
}
@media (max-width:360px){.ps3-hud-xp{display:none}}
/* reduced motion: no blink, no parallax, no lift, Ted static */
@media (prefers-reduced-motion:reduce){.ps3-caret{animation:none}.ps3-pxl{transform:none}.ps3-card,.ps3-card:hover,.ps3-start,.ps3-start:hover,.ps3-ted,.ps3-ted:hover{transition:none;transform:none}
  .ps3-hint .ps3-ted,.ps3-hint .ps3-bubble{transition:none;transform:none;opacity:1}}
html.rm-user .ps3-caret{animation:none}html.rm-user .ps3-pxl{transform:none}
html.rm-user .ps3-card,html.rm-user .ps3-card:hover,html.rm-user .ps3-ted,html.rm-user .ps3-ted:hover{transition:none;transform:none}
html.rm-user .ps3-hint .ps3-ted,html.rm-user .ps3-hint .ps3-bubble{transition:none;transform:none;opacity:1}
/* v3.3 (19:32): original Ted image at 80px, normal smooth image rendering. */
/* desktop: Ted peeks over the HUD's bottom-right corner (still on his white chip) */
@media (min-width:641px){.ps3-hud{padding-bottom:28px}.ps3-hint{margin-bottom:-62px;padding-right:0}.ps3-ted{transform:translate(18px,0)}
  .ps3-hint.ps3-peek .ps3-ted{transform:translate(18px,28px) rotate(-8deg)}.ps3-ted:hover{transform:translate(18px,-4px) rotate(4deg)}}
@media (min-width:641px) and (prefers-reduced-motion:reduce){.ps3-hint .ps3-ted,.ps3-ted:hover{transform:translate(18px,0)}}
@media (min-width:641px){html.rm-user .ps3-hint .ps3-ted,html.rm-user .ps3-ted:hover{transform:translate(18px,0)}}

/* v3.2 (19:30 AEST): page-scoped SOLID notes for real content that used the site-wide dashed .ph look.
   Shared .ph CSS is untouched; only elements with .ps3-note on programming-lab.html change. */
html body .ph.ps3-note{border:1px solid #D6DCE8;border-style:solid;background:#fff;background-image:none;border-radius:16px;box-shadow:0 2px 10px rgba(20,32,74,.05);color:#3E4866}
html body .ph.ps3-note strong{color:#14204A}
html body .site-footer .fbase-2>.ph-b.ps3-note-dark[role="note"],
html body .site-footer .ph-b.ps3-note-dark{border:1px solid rgba(255,255,255,.24);border-style:solid;background:rgba(255,255,255,.06);background-image:none;border-radius:14px;box-shadow:none;padding:12px 14px;color:#C9D3EA}
@media (forced-colors:active){html body .ph.ps3-note{border-color:CanvasText}}
/* v3.4 (19:5x) tap target: Ted's × keeps its 32px look but gets a 44px hit area */
.ps3-hint-x::before{content:"";position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px}
/* v3.5 (19:5x) pixel Ted option B in the Ted's Tip chip only: 40x40 art shown at exactly 80px (2x), crisp pixels, on the white chip (never on navy) */
.ps3-ted.ps3-ted-px img.ps3-ted-pxb{width:80px;height:80px;object-fit:contain;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}
/* v3.6 (20:0x) Ted breathing room: 80px art (exact 2x) in a 112px white circle (>=4px clear of the ear tips); negative margin keeps the old 96/92px footprint */
.ps3-hint .ps3-ted.ps3-ted-px{width:112px;height:112px;margin:-8px}
/* v3.6 Ted stays as a mini chip when the tip is closed (JS turns the chip into a button; no JS = static chip, tip always open) */
.ps3-ted-btn{appearance:none;-webkit-appearance:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ps3-ted-btn:focus-visible{outline:3px solid #fff;outline-offset:8px}
.ps3-hint.is-closed .ps3-bubble{display:none}
.ps3-hint.is-closed .ps3-ted.ps3-ted-px{width:60px;height:60px;margin:0}
.ps3-hint.is-closed .ps3-ted.ps3-ted-px img.ps3-ted-pxb{width:40px;height:40px}
.ps3-hint.ps3-pop .ps3-bubble{transform:scale(.92);transform-origin:100% 100%;opacity:0;transition:none}
@media (max-width:640px){
  .ps3-hint .ps3-ted.ps3-ted-px{width:112px;height:112px;margin:-10px -2px -10px -10px}
  .ps3-hint.is-closed .ps3-ted.ps3-ted-px{width:60px;height:60px;margin:0 8px 0 0}}
@media (prefers-reduced-motion:reduce){.ps3-hint.ps3-pop .ps3-bubble{transform:none;opacity:1}}
html.rm-user .ps3-hint.ps3-pop .ps3-bubble{transform:none;opacity:1}
/* v3.6 pixel Ted stays crisp: no rotation on hover (rotating pixel art blurs it), lift only on real-hover devices, none on touch */
.ps3-hint .ps3-ted.ps3-ted-px:hover{transform:none}
@media (min-width:641px){.ps3-hint .ps3-ted.ps3-ted-px:hover{transform:translate(18px,0)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.ps3-hint .ps3-ted.ps3-ted-px:hover{transform:translateY(-4px)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (min-width:641px){.ps3-hint .ps3-ted.ps3-ted-px:hover{transform:translate(18px,-4px)}}
html.rm-user .ps3-hint .ps3-ted.ps3-ted-px:hover{transform:none}
@media (min-width:641px){html.rm-user .ps3-hint .ps3-ted.ps3-ted-px:hover{transform:translate(18px,0)}}