@font-face{font-family:Clash;src:url('/workshop/532795f825c5.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Archivo;src:url('/workshop/7150c0ec5ad3.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{
 --color-bg:oklch(16% .009 290);--color-surface:oklch(20% .009 290);--color-ink:oklch(95% .008 85);--color-muted:oklch(71% .014 290);--color-rule:oklch(31% .013 290);--color-accent:oklch(77% .115 295);--color-active:oklch(82% .13 135);--color-dark:oklch(12% .009 290);--color-overlay:oklch(16% .009 290 / .93);--color-invisible:oklch(16% .009 290 / 0);
 --font-display:Clash,Arial,sans-serif;--font-body:Archivo,Arial,sans-serif;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--text-display:clamp(48px,5.5vw,88px);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.5,0,1,.5);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-short:180ms;--dur-long:500ms;--radius-small:3px;--rule-thin:1px;
}

/* Hallmark · macrostructure: immersive workshop · theme: custom SVN after-hours
 * paper: oklch(16% .009 290) · accent: oklch(77% .115 295) · display: Clash · body: Archivo
 * Pre-emit critique: P5 H5 E4 S5 R4 V5 */
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-ink);font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;cursor:pointer;white-space:nowrap}button:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}button:active{transform:translateY(1px)}button:disabled{cursor:default;color:var(--color-muted)}.skip{position:absolute;top:-80px;left:20px;z-index:30;color:var(--color-bg);background:var(--color-ink);padding:12px}.skip:focus{top:20px}.shell{max-width:1800px;margin:auto;padding:0 48px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-rule);gap:24px}.brand{display:flex;align-items:center;gap:18px}.brand img{width:86px;height:40px;object-fit:contain}.brand span{font-size:10px;line-height:1.35;letter-spacing:.03em;border-left:1px solid var(--color-rule);padding-left:18px}.topnote{color:var(--color-muted);font-size:11px}.motion{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--color-rule);border-radius:var(--radius-small);padding:11px 15px;font-size:11px;min-height:40px}.motion:hover{border-color:var(--color-muted)}.motion svg{width:12px;height:12px;fill:currentColor}.intro{padding:36px 0 5px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}.intro h1{font-family:var(--font-display);font-size:var(--text-display);font-weight:600;line-height:.96;letter-spacing:-.047em;margin:0;overflow-wrap:anywhere;min-width:0}.intro h1 span{color:var(--color-accent)}.intro-copy{max-width:270px;line-height:1.65;color:var(--color-muted);font-size:13px;padding-bottom:8px}.intro-copy p{margin:0}.intro-copy strong{display:block;color:var(--color-ink);font-weight:400;margin-bottom:7px}.experience{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start;margin-top:10px}.stage-column{min-width:0}.stage{position:relative;width:100%;height:600px;isolation:isolate;touch-action:pan-y}.stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%;outline:none}.stage canvas:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.stage-labels{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;display:flex;align-items:center;gap:7px;transform:translate(-50%,-50%);background:var(--color-overlay);border:1px solid var(--color-rule);padding:5px 9px 5px 5px;border-radius:30px;box-shadow:0 2px 14px var(--color-dark);font-size:10px;pointer-events:auto;min-height:29px;transition:opacity var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}.hotspot .index{width:20px;height:20px;display:grid;place-items:center;font-size:9px;border:1px solid var(--color-rule);border-radius:50%;color:var(--color-muted)}.hotspot .label{display:none}.hotspot.selected .label,.hotspot:hover .label,.hotspot:focus-visible .label{display:block}.hotspot.selected{border-color:var(--color-accent)}.hotspot.selected .index{background:var(--color-accent);color:var(--color-dark);border-color:var(--color-accent)}.hotspot.working .index{background:var(--color-active);border-color:var(--color-active);color:var(--color-dark)}.hotspot.working::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--color-active)}.scene-topline{position:absolute;left:0;top:18px;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--color-muted);z-index:2}.scene-topline i{width:5px;height:5px;background:var(--color-active);border-radius:50%}.scene-topline.paused i{background:var(--color-muted)}.scene-controls{position:absolute;bottom:12px;right:0;display:flex;gap:5px}.scene-controls button{background:var(--color-overlay);border:1px solid var(--color-rule);border-radius:var(--radius-small);font-size:15px;width:32px;height:32px}.scene-controls button:last-child{width:auto;padding:0 10px;font-size:10px}.scene-controls button:hover{border-color:var(--color-accent)}.scene-hint{position:absolute;bottom:18px;left:0;color:var(--color-muted);font-size:10px;pointer-events:none}.scene-hint b{font-weight:400;color:var(--color-ink)}.loading{position:absolute;inset:20%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;color:var(--color-muted);text-align:center;background:var(--color-bg);z-index:5}.loading.hidden{display:none}.loading strong{font-family:var(--font-display);font-size:32px;color:var(--color-ink)}.floor-status{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}.activity{display:flex;gap:12px;align-items:center;min-width:0}.activity-light{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--color-muted)}.activity-light.working{background:var(--color-active)}.activity-copy{min-width:0}.activity-copy small{display:block;color:var(--color-muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}.activity-copy span{font-size:12px}.activity-progress{width:96px;height:2px;background:var(--color-rule);overflow:hidden;flex-shrink:0}.activity-progress i{display:block;width:100%;height:100%;background:var(--color-active);transform:scaleX(0);transform-origin:left}.aside{padding-top:26px}.project-photo{margin:0;position:relative;aspect-ratio:1.48;background:var(--color-surface);overflow:hidden}.project-photo img{width:100%;height:100%;object-fit:cover;display:block}.project-photo figcaption{position:absolute;bottom:0;left:0;padding:25px 12px 10px;width:100%;font-size:9px;color:var(--color-ink);background:linear-gradient(var(--color-invisible),var(--color-overlay))}.detail{min-height:194px;padding:19px 0 21px}.detail small{color:var(--color-accent);font-size:10px;display:block;margin-bottom:10px}.detail h2{font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1.04;letter-spacing:-.025em;margin:0 0 12px;overflow-wrap:anywhere}.detail p{font-size:12px;color:var(--color-muted);line-height:1.7;margin:0}.stations{border-top:1px solid var(--color-rule)}.station{display:flex;width:100%;align-items:center;gap:12px;padding:13px 0;border:0;border-bottom:1px solid var(--color-rule);background:transparent;text-align:left;font-size:12px;min-height:43px}.station .num{font-size:9px;color:var(--color-muted);font-variant-numeric:tabular-nums}.station .name{flex:1}.station .mark{color:var(--color-muted);font-size:13px}.station.selected{color:var(--color-accent)}.station.selected .num,.station.selected .mark{color:var(--color-accent)}.station.working .mark{color:var(--color-active)}.station:hover .name{text-decoration:underline;text-underline-offset:4px}.closing{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:31px 0 28px}.closing p{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;margin:0}.closing p span{color:var(--color-muted)}.closing small{color:var(--color-muted);font-size:9px;line-height:1.65;max-width:290px;text-align:right}.fallback-photo{width:100%;height:100%;object-fit:cover;display:block;opacity:.65}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.error-note{font-size:11px;line-height:1.7;max-width:300px}.project-photo img{transition:opacity var(--dur-short) var(--ease-out)}
@media(min-width:1550px){.experience{grid-template-columns:minmax(0,1fr) 330px;gap:42px}.stage{height:680px}.aside{padding-top:36px}.detail h2{font-size:32px}.station{padding:15px 0;font-size:13px}}
@media(max-width:1190px){.shell{padding:0 28px}.experience{grid-template-columns:minmax(0,1fr) 245px;gap:20px}.stage{height:565px}.intro h1{font-size:68px}.detail h2{font-size:25px}.project-photo{aspect-ratio:1.35}.detail{min-height:210px}.stage .hotspot{padding-right:5px}.hotspot.selected .label{display:none}.hotspot:hover .label,.hotspot:focus-visible .label{display:block}.closing p{font-size:22px}}
@media(max-width:900px){.experience{grid-template-columns:minmax(0,1fr);gap:8px}.stage{height:540px}.aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;padding-top:20px}.project-photo{grid-column:1;grid-row:1;aspect-ratio:1.7}.detail{grid-column:1;grid-row:2;min-height:0}.stations{grid-column:2;grid-row:1 / 3}.station{padding:15px 0}.intro h1{font-size:64px}.intro-copy{max-width:245px}.scene-topline{top:8px}.closing{border-top:1px solid var(--color-rule)}.hotspot.selected .label{display:block}}
@media(max-width:600px){.shell{padding:0 20px}.topbar{height:74px;gap:12px}.brand img{width:69px;height:34px}.brand{gap:10px}.brand span{padding-left:10px;font-size:8px}.topnote{display:none}.motion{font-size:10px;padding:9px 10px;min-height:36px}.intro{display:block;padding-top:32px}.intro h1{font-size:clamp(47px,11.5vw,68px)}.intro-copy{max-width:360px;margin-top:20px;font-size:12px;padding:0}.intro-copy strong{display:none}.intro-copy p{max-width:31ch}.experience{margin-top:12px}.stage{height:400px;margin:0 -16px;width:calc(100% + 32px)}.scene-topline{left:16px;top:12px;font-size:9px}.scene-hint{left:16px;bottom:16px;font-size:9px}.scene-hint .desktop{display:none}.scene-controls{right:16px;bottom:10px}.scene-controls button{width:30px;height:32px}.hotspot{font-size:9px;min-height:27px;padding:4px}.hotspot .index{width:18px;height:18px;font-size:8px}.hotspot .label,.hotspot.selected .label{display:none}.hotspot:focus-visible .label{display:block}.floor-status{min-height:67px}.activity-copy span{font-size:11px}.activity-progress{width:55px}.aside{grid-template-columns:minmax(0,1fr);padding-top:24px}.project-photo{grid-column:1;grid-row:1;aspect-ratio:1.8}.detail{grid-column:1;grid-row:2;padding:20px 0 24px}.detail h2{font-size:34px;max-width:12ch}.detail p{max-width:45ch;font-size:13px}.stations{grid-column:1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}.station{gap:8px;font-size:11px;min-height:48px;padding:13px 0}.station .mark{display:none}.station:last-child{grid-column:1 / -1}.closing{display:block;padding-top:28px;margin-top:28px}.closing p{font-size:26px;line-height:1.2}.closing small{display:block;text-align:left;margin-top:14px;max-width:290px}.project-photo figcaption{font-size:10px}}
@media(max-width:360px){.shell{padding:0 16px}.brand span{display:none}.intro h1{font-size:48px}.stage{height:355px}.station{font-size:10px;gap:6px}.scene-controls button:last-child{font-size:9px;padding:0 7px}.scene-hint{max-width:135px;line-height:1.5;bottom:11px}.activity-copy span{font-size:10px}.detail h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Hallmark · existing SVN workbench, restored reference sidebar · pre-emit critique: P5 H5 E4 S5 R4 V4 */
:root{--color-bg:oklch(15% .009 290);--color-surface:oklch(20% .012 290);--color-backdrop:oklch(8% .009 290 / .96);--color-halo:oklch(34% .05 290 / .15)}
.shell{max-width:1800px;padding:0 40px}.intro{padding:28px 0 16px}.intro h1{font-size:clamp(52px,5.8vw,88px);letter-spacing:0;word-spacing:.08em}.intro-copy{max-width:310px;font-size:13px}.experience{grid-template-columns:minmax(0,1fr) 330px;gap:28px;margin-top:4px}.stage{height:660px;background:radial-gradient(ellipse at 50% 50%,var(--color-halo),var(--color-invisible) 70%)}.aside{padding-top:8px}.reference-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--color-muted);padding:0 0 12px;gap:12px}.reference-heading span:first-child{color:var(--color-accent)}.project-photo{aspect-ratio:auto;overflow:visible;background:transparent}.project-photo button{display:block;position:relative;border:1px solid var(--color-rule);background:var(--color-dark);width:100%;height:240px;padding:0;overflow:hidden}.project-photo img{height:100%;width:100%;object-fit:contain}.photo-enlarge{position:absolute;bottom:10px;right:10px;font-size:10px;background:var(--color-overlay);padding:8px 10px;color:var(--color-ink)}.project-photo button:hover{border-color:var(--color-accent)}.project-photo figcaption{position:static;background:none;padding:12px 0 0;font-size:10px;line-height:1.5;color:var(--color-muted)}.detail{min-height:195px;padding:20px 0}.detail h2{font-size:30px;letter-spacing:0;word-spacing:.08em}.detail p{font-size:12px}.stations{border-top:1px solid var(--color-rule)}.station{min-height:46px}.station.working{background:var(--color-surface)}.station.working .mark{font-size:0}.station.working .mark:after{content:'';display:block;width:7px;height:7px;background:var(--color-active);border-radius:50%}.station.selected .name{text-decoration:none}.hotspot.working{border-color:var(--color-active)}.hotspot{min-height:34px}.hotspot .index{height:24px;width:24px;font-size:10px}.scene-controls button{min-height:40px;min-width:40px}.scene-hint{font-size:11px}.closing p{letter-spacing:0;word-spacing:.08em}dialog{width:min(1200px,96vw);max-height:94dvh;background:var(--color-dark);color:var(--color-ink);border:1px solid var(--color-rule);padding:20px}dialog::backdrop{background:var(--color-backdrop)}dialog img{width:100%;height:72dvh;object-fit:contain;display:block}dialog button{display:block;margin:0 0 16px auto;padding:12px 18px;border:1px solid var(--color-rule);background:var(--color-surface)}dialog p{font-size:12px;color:var(--color-muted)}
@media(min-width:1550px){.experience{grid-template-columns:minmax(0,1fr) 370px;gap:36px}.stage{height:760px}.project-photo button{height:270px}.detail{min-height:185px}.detail h2{font-size:34px}.station{min-height:48px}}
@media(max-width:1190px){.shell{padding:0 24px}.experience{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.stage{height:600px}.project-photo button{height:210px}.detail h2{font-size:27px}.detail{min-height:210px}.reference-heading{font-size:9px}}
@media(max-width:900px){.experience{grid-template-columns:minmax(0,1fr)}.stage{height:530px}.aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;padding-top:24px}.reference-heading{grid-column:1;grid-row:1}.project-photo{grid-column:1;grid-row:2}.detail{grid-column:1;grid-row:3;min-height:0}.stations{grid-column:2;grid-row:1/4}.project-photo button{height:250px}.intro h1{font-size:64px}.intro-copy{max-width:250px}}
@media(max-width:600px){.shell{padding:0 20px}.intro{padding-top:28px}.intro h1{font-size:clamp(48px,11vw,64px)}.intro-copy{max-width:340px}.stage{height:390px}.aside{grid-template-columns:minmax(0,1fr)}.reference-heading{grid-column:1;grid-row:1}.project-photo{grid-column:1;grid-row:2}.project-photo button{height:260px}.detail{grid-column:1;grid-row:3;padding:24px 0}.detail h2{font-size:34px}.detail p{font-size:13px}.stations{grid-column:1;grid-row:4}.station{min-height:48px}.scene-controls button{min-width:36px}.scene-hint{font-size:10px;max-width:125px}.reference-heading{font-size:10px}.hotspot{min-height:30px}.hotspot .index{height:20px;width:20px}.closing{margin-top:28px}}
@media(max-width:360px){.shell{padding:0 16px}.stage{height:355px}.intro h1{font-size:48px}.project-photo button{height:225px}.station{font-size:10px}}

@font-face{font-family:"Clash Display";font-weight:500;src:url(/workshop/d8840198f4bf.ttf) format("truetype")}
@font-face{font-family:"Clash Display";font-weight:700;src:url(/workshop/2c27c46f9f95.ttf) format("truetype")}
@font-face{font-family:\"Clash Display\";font-weight:500;src:url(/workshop/d8840198f4bf.ttf) format(\"truetype\")}
@font-face{font-family:\"Clash Display\";font-weight:700;src:url(/workshop/2c27c46f9f95.ttf) format(\"truetype\")}
/* SVN brand kit. The workshop remains a dark section of the brand system. */
:root{
 --font-display:"Clash Display",Archivo,sans-serif;--font-body:Archivo,system-ui,sans-serif;
 --color-bg:#121214;--color-surface:#212025;--color-dark:#09070e;
 --color-ink:#faf9fe;--color-muted:rgba(250,249,254,.7);
 --color-rule:rgba(250,249,254,.15);--color-accent:#d7d3f3;--color-active:#d7d3f3;
 --color-overlay:rgba(18,18,20,.93);--color-invisible:rgba(18,18,20,0);
 --color-backdrop:rgba(9,7,14,.96);--color-halo:rgba(98,82,155,.12);
 --radius-small:0;--dur-short:.22s;--dur-long:.42s;
}
.intro h1,.detail h2,.loading strong,.closing p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;word-spacing:normal}
.intro h1{font-size:clamp(48px,5.7vw,82px);line-height:.98}
.detail h2{line-height:1.02;letter-spacing:-.02em}
.closing p{font-size:28px;line-height:1.1}
.motion,.topnote,.reference-heading,.photo-enlarge,.station,.detail small,.scene-controls button:last-child,dialog button,.activity-copy small{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;line-height:1.5}
.motion{min-height:44px;padding:10px 20px;border-color:#62529b;background:#62529b;color:#faf9fe;transition:background .22s,border-color .22s}
.motion:hover{background:#564889;border-color:#564889}
.motion:disabled{background:transparent;border-color:var(--color-rule);color:var(--color-muted)}
.station{gap:12px;min-height:48px}
.station .num{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:-.02em}
.station .mark{font-family:Archivo,sans-serif;font-size:18px;font-weight:400;letter-spacing:0}
.station.working .mark{font-size:18px}
.station.working .mark:after{display:none}
.station.working{box-shadow:inset 2px 0 #62529b;padding-left:10px;background:rgba(215,211,243,.08)}
.station:hover{background:rgba(215,211,243,.08)}
.hotspot{border-radius:0;box-shadow:none;padding:4px;gap:6px;min-width:36px;min-height:36px}
.hotspot .index{border:0;border-radius:0;font-family:var(--font-display);font-weight:700;font-size:12px;width:26px;height:26px}
.hotspot .label{font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding-right:5px}
.hotspot.selected .index,.hotspot.working .index{background:#62529b;color:#faf9fe}
.hotspot.working::after{border-radius:0;margin-right:4px}
.scene-controls button{border-radius:0;min-height:44px;min-width:44px}
.scene-controls button:last-child{font-size:10px}
.reference-heading{font-size:10px;letter-spacing:.08em}
.photo-enlarge{background:#62529b;color:#faf9fe;padding:10px 16px}
.project-photo button:hover .photo-enlarge{background:#564889}
.detail p{color:rgba(250,249,254,.85)}
button:active{transform:none}
button:focus-visible,a:focus-visible{outline:2px solid #6d54b7;outline-offset:2px}
.station:focus-visible .name{text-decoration:underline;text-decoration-color:#d7d3f3;text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:900px){.intro h1{font-size:64px}}
@media(max-width:600px){
 .intro h1{font-size:clamp(40px,10.6vw,64px)}
 .motion{padding:10px;font-size:10px;letter-spacing:.06em}
 .station{font-size:10px;letter-spacing:.06em}
 .detail h2{font-size:32px}
 .reference-heading{font-size:9px}
 .scene-controls button{min-width:40px}
 .hotspot{min-width:32px;min-height:32px}.hotspot .index{width:22px;height:22px}
 .closing p{font-size:26px}
}

.topbar{height:64px}.detail{min-height:0!important;padding:20px 0}.shell{padding-bottom:32px}html{overflow-y:hidden}.floor-status{height:70px;min-height:0}.activity-copy small,#activity-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.topbar{display:none}.floor-status{height:67px}.activity-names{display:none}}
/* Anchor on the number square, so the dot and label grow rightward instead of re-centring it. */
.hotspot{min-width:26px;min-height:26px;padding:2px;gap:5px}.hotspot .index{width:20px;height:20px;font-size:11px}
.hotspot,.hotspot:active{transform:translate(-13px,-50%)}
@media(max-width:600px){.hotspot{min-width:24px;min-height:24px}.hotspot .index{width:18px;height:18px;font-size:10px}.hotspot,.hotspot:active{transform:translate(-12px,-50%)}}
.project-photo img{object-fit:cover}
/* Loader: a still of the workshop exactly as the scene first draws it (poster.js lines it up with the camera), so
   the floor is there from the start and only the motion arrives; the live canvas fades in underneath it. */
.loading{inset:0;gap:14px;padding:24px;background:transparent;pointer-events:none;transition:opacity var(--dur-long) var(--ease-out),visibility 0s linear var(--dur-long)}
.loading.hidden{display:flex;opacity:0;visibility:hidden}
.loading-poster{position:absolute;max-width:none;visibility:hidden;user-select:none}
.loading-note{position:absolute;top:14px;right:0;display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--color-rule);border-radius:30px;background:var(--color-overlay);color:var(--color-muted);font-size:10px}
.loading-bar{position:relative;display:block;width:28px;height:2px;background:var(--color-rule);overflow:hidden}
.loading-bar::after{content:'';position:absolute;inset:0;background:var(--color-accent);transform:translateX(-100%);animation:loading-bar 1.4s var(--ease-out) infinite}
@keyframes loading-bar{to{transform:translateX(100%)}}
@media(max-width:900px){.loading-note{top:4px}}
@media(max-width:600px){.loading-note{right:16px;top:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.loading-bar{display:none}}