/* Personal projects drift within one shared, transparent canvas. */
.playground-page{position:relative;z-index:2;max-width:1640px;min-height:100svh;margin:auto;padding:140px 5% 55px;color:#f5f2f7;touch-action:pan-y pinch-zoom}
.pg-toplinks{display:flex;justify-content:space-between;gap:25px;font-size:9px;color:#a39ba9;letter-spacing:.035em}
.pg-toplinks a{display:inline-flex;align-items:center;min-height:44px}.pg-toplinks a:hover{color:#fff}
.pg-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;padding:33px 0 42px}
.pg-eyebrow{font-size:8px;letter-spacing:.07em;color:#a596af;margin:0 0 17px}
.pg-heading h1{font:500 clamp(50px,6.4vw,100px)/.95 var(--landing-font,'Manrope',Arial,sans-serif);letter-spacing:-.065em;margin:0;outline:none}
.pg-heading h1:focus-visible{outline:1px solid #ffffff70;outline-offset:10px}
.pg-heading>p{font:400 clamp(14px,1.3vw,19px)/1.5 var(--landing-font,'Manrope',Arial,sans-serif);letter-spacing:-.02em;color:#aaa1b4;margin:0 0 3px}
.pg-board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid #ffffff1c}
.pg-board-hint{font-size:8px;letter-spacing:.04em;color:#8c8197;line-height:1.6;margin:0}.pg-hint-touch{display:none}
#pg-motion-toggle{font-size:9px;letter-spacing:.04em;min-height:44px;padding:10px 0 10px 15px;color:#c6b6d1;white-space:nowrap}
#pg-motion-toggle:hover{color:#fff}#pg-motion-toggle[aria-pressed=true]{color:#fff}
.pg-canvas{position:relative;isolation:isolate;height:clamp(520px,calc(100svh - 335px),980px);width:100%;overflow:hidden;user-select:none;touch-action:pan-y pinch-zoom}
.pg-object{position:absolute;left:0;top:0;width:clamp(170px,17.5vw,238px);padding:10px 10px 15px;text-align:left;color:#f3edf7;border:1px solid #c6a1dc28;border-radius:13px;background:#0d0a11cc;box-shadow:0 5px 25px #00000024;cursor:grab;touch-action:pan-y pinch-zoom;will-change:transform;transition:border-color .2s,box-shadow .2s,background .2s;overflow:hidden}
.pg-object:disabled{cursor:default;opacity:1}
.pg-object:not(:disabled):hover,.pg-object:focus-visible{color:#fff;border-color:#dcb0f59c;background:#120d19e6;box-shadow:0 0 25px #b857e51c;z-index:3}
.pg-object:focus-visible{outline:1px solid #f1d6ff;outline-offset:4px}.pg-object.is-dragging{cursor:grabbing;z-index:4;border-color:#ead6f7;box-shadow:0 8px 35px #0008}
.pg-preview{display:block;position:relative;width:100%;aspect-ratio:1.45;overflow:hidden;border-radius:7px;background:#17111d;pointer-events:none}
.pg-preview img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.pg-preview .pg-preview-loop{position:absolute;inset:0}.pg-preview .pg-preview-still{opacity:0}.is-paused .pg-preview .pg-preview-loop,.is-reduced .pg-preview .pg-preview-loop,.is-detail-open .pg-preview .pg-preview-loop{display:none}.is-paused .pg-preview .pg-preview-still,.is-reduced .pg-preview .pg-preview-still,.is-detail-open .pg-preview .pg-preview-still{opacity:1}
.pg-preview.pg-preview-logo{background:#100c16}.pg-preview-logo img{object-fit:contain;padding:18px}.pg-preview.pg-preview-logo .pg-preview-still{opacity:1}
.pg-object-category{display:block;font-family:'Roboto Mono','Courier New',monospace;font-size:7px;line-height:1.5;letter-spacing:.05em;color:#a88cba;margin:12px 2px 0}
.pg-object-status{position:absolute;top:17px;right:17px;font-family:'Roboto Mono','Courier New',monospace;font-size:7px;line-height:1.5;letter-spacing:.03em;color:#eadbf5;background:#0b0811da;border:1px solid #ccb3dd40;border-radius:4px;padding:3px 6px;pointer-events:none}
.pg-object-title{display:block;font:500 clamp(15px,1.3vw,19px)/1.15 var(--landing-font,'Manrope',Arial,sans-serif);letter-spacing:-.03em;margin:15px 2px 8px;color:inherit}
.pg-object-copy{display:block;font:400 11px/1.55 var(--landing-font,'Manrope',Arial,sans-serif);letter-spacing:-.01em;color:#b0a2ba;margin:0 2px;max-width:27em}
.playground-page.is-detail-open{z-index:60}
.is-detail-open .pg-canvas{pointer-events:none}
.playground-page:not(.pg-ready) .pg-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;height:auto}
.playground-page:not(.pg-ready) .pg-object{position:relative;inset:auto;width:100%;will-change:auto}
.pg-detail{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:30px;background:#050407c9;backdrop-filter:blur(14px);user-select:text;overscroll-behavior:contain}
.pg-detail-surface{position:relative;width:min(820px,100%);max-height:calc(100svh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:0 48px 45px;border:1px solid #b693cc48;border-radius:18px;background:#100c16f5;box-shadow:0 15px 90px #0007}
.pg-detail-toolbar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:22px 0 12px;margin-bottom:16px;background:#100c16}
#pg-detail-close{position:relative;min-height:48px;min-width:96px;padding:10px 14px;color:#ead6f8;font-size:12px;letter-spacing:.04em;border:1px solid #b693cc65;border-radius:6px;background:#1c1426}
#pg-detail-close:hover{color:#fff}
.pg-detail-item h2{font:500 clamp(30px,4vw,54px)/1.04 var(--landing-font,'Manrope',Arial,sans-serif);letter-spacing:-.045em;color:#fff;margin:0 0 22px;outline:none}
.pg-detail-item p{font:400 17px/1.65 var(--landing-font,'Manrope',Arial,sans-serif);color:#baadc6;margin:0 0 22px;letter-spacing:-.015em}
/* Effort, estimated GBP running costs and tools used sit beside the explanation. */
.pg-detail-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.65fr);gap:32px;align-items:start}
.pg-detail-copy{min-width:0}
.pg-detail-progress{display:grid;gap:0;margin:0;min-width:0;padding-left:24px;border-left:1px solid #b693cc48;font:400 14px/1.5 var(--landing-font,'Manrope',Arial,sans-serif)}
.pg-detail-progress>div{padding:14px 0;border-bottom:1px solid #b693cc30}
.pg-detail-progress>div:first-child{padding-top:0}
.pg-detail-progress>div:last-child{border-bottom:0;padding-bottom:0}
.pg-detail-progress dt{margin:0 0 6px;font:500 12px/1.5 'Roboto Mono','Courier New',monospace;color:#d3b9e2}
.pg-detail-progress dt small{display:block;font:400 12px/1.5 var(--landing-font,'Manrope',Arial,sans-serif);color:#b4a4be}
.pg-detail-progress dd{margin:0;color:#f3edf7;overflow-wrap:anywhere}
.pg-detail-progress .pg-progress-pending{color:#b4a4be}
.pg-detail-item>img,.pg-detail-preview img{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;margin:0 0 28px}
.pg-detail-item .pg-detail-note{font-size:13px;line-height:1.6;color:#a99ab5}
.pg-detail-item a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;border-bottom:1px solid #bba1cc8a;color:#ead6f8;font-size:12px;line-height:1.5}
.pg-detail-item a:hover{color:#fff}
.pg-detail-category{display:block;margin:0 0 15px}
.pg-detail-item .mono{font-size:9px;color:#ae8fc0;letter-spacing:.06em}
.is-reduced .pg-object{will-change:auto}
@media(max-width:1050px){.pg-object{width:205px}.pg-heading{gap:25px}.pg-canvas{height:870px}}
@media(max-width:760px){
.playground-page{padding:110px 6% 40px}.playground-page:not(.pg-ready) .pg-canvas{grid-template-columns:1fr}.pg-toplinks{font-size:7px;gap:16px}.pg-heading{display:block;padding:25px 0 30px}.pg-heading h1{font-size:clamp(48px,11vw,74px)}.pg-eyebrow{font-size:7px;line-height:1.6;margin-bottom:14px}.pg-heading>p{font-size:15px;margin-top:23px}.pg-board-hint{font-size:6px;max-width:170px}.pg-hint-desktop{display:none}.pg-hint-touch{display:inline}#pg-motion-toggle{font-size:8px}.pg-board-toolbar{gap:10px}.pg-object{width:min(250px,78vw);padding:10px 10px 15px}.pg-object-title{font-size:18px}.pg-object-copy{font-size:12px}.pg-detail{padding:24px 15px max(20px,env(safe-area-inset-bottom))}.pg-detail-surface{max-height:calc(100svh - 48px);padding:0 24px 30px;border-radius:14px}.pg-detail-toolbar{padding-top:24px}#pg-detail-close{min-height:48px;min-width:96px}.pg-detail-item p{font-size:16px}.pg-detail-body{grid-template-columns:1fr;gap:25px}.pg-detail-progress{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding:22px 0 0;border-left:0;border-top:1px solid #b693cc48}.pg-detail-progress>div,.pg-detail-progress>div:first-child,.pg-detail-progress>div:last-child{padding:0;border:0}.pg-detail-progress .pg-progress-tools-used{grid-column:1/-1}
}
@media(hover:none){.pg-hint-desktop{display:none}.pg-hint-touch{display:inline}}
@media(prefers-reduced-motion:reduce){.pg-object{transition:none;will-change:auto}.pg-detail{backdrop-filter:none}}