Skill · Portfolio

디자인 포트폴리오 구성·첨삭

리서치·스케치·렌더·시제품 자료로 근거 있는 가로형 포트폴리오를 구성하고 첨삭하는 원작 스킬(산업디자인). 원작자 truman-t3, MIT.

0installs
SkillIncludes scriptsApprovedBy truman-t3 · MIT · Uploaded by feeeldstudy · Version 1Claude · ChatGPT · Codex · Cursor
industrial-design-portfolio/assets/portfolio-template.html
<!doctype html><html lang="en" data-style="[STYLE_PRESET]"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="color-scheme" content="light dark">  <link rel="icon" href="data:,">  <title>[PORTFOLIO_TITLE] · [DESIGNER_NAME]</title>  <style>    :root{      --ink:#171717;--paper:#f1efe8;--paper-2:#e6e2d8;--paper-soft:#e8e4da;--accent:#f05a28;      --accent-text:#a63817;--accent-on-dark:#ff8b64;--on-accent:#171717;--on-accent-muted:#171717;      --muted:#68665f;--line:rgba(23,23,23,.18);--pad:clamp(28px,5vw,92px);      --sans:Inter,"Noto Sans SC","Helvetica Neue",Arial,sans-serif;      --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;      --serif:"Iowan Old Style","Source Han Serif SC","Noto Serif SC","Songti SC",STSong,SimSun,Georgia,serif;      --display:var(--sans);--title-weight:520;--title-tracking:-.045em;--label-tracking:.09em;--grid-opacity:.12;--grid-size:8.333vw;      --frame-radius:0px;--frame-border:0 solid transparent;--figure-gap:9px;--rule-weight:1px;      --dark-ink:#f1efe8;--dark-paper:#171717;--dark-paper-2:#272522;--dark-muted:#b8b4aa;--dark-line:rgba(241,239,232,.18);      --chrome-bg:rgba(10,10,10,.96);--chrome-ink:#eee;--chrome-border:rgba(255,255,255,.25);    }    html[data-style="workshop-orange"]{--ink:#171717;--paper:#f1efe8;--paper-2:#e6e2d8;--paper-soft:#e8e4da;--accent:#f05a28;--accent-text:#a63817;--accent-on-dark:#ff8b64;--on-accent:#171717;--on-accent-muted:#171717;--muted:#68665f;--line:rgba(23,23,23,.18);--grid-opacity:.12;--grid-size:8.333vw;--display:var(--sans);--title-weight:520;--title-tracking:-.045em;--label-tracking:.09em}    html[data-style="instrument-blue"]{--ink:#10233e;--paper:#f4f6f8;--paper-2:#dfe7ee;--paper-soft:#e8edf2;--accent:#1c67d2;--accent-text:#1c67d2;--accent-on-dark:#80b2ff;--on-accent:#fff;--on-accent-muted:#fff;--muted:#566779;--line:rgba(16,35,62,.22);--pad:clamp(28px,4.4vw,82px);--grid-opacity:.19;--grid-size:4.166vw;--display:var(--sans);--title-weight:650;--title-tracking:-.055em;--label-tracking:.12em;--frame-border:1px solid rgba(16,35,62,.2);--figure-gap:7px;--dark-ink:#edf4ff;--dark-paper:#10233e;--dark-paper-2:#193453;--dark-muted:#b7c8dc;--dark-line:rgba(237,244,255,.2);--chrome-bg:rgba(8,23,42,.97);--chrome-ink:#edf4ff;--chrome-border:rgba(237,244,255,.28)}    html[data-style="material-green"]{--ink:#17251d;--paper:#f2efe5;--paper-2:#e3e1d3;--paper-soft:#e9e4d5;--accent:#4f8a5b;--accent-text:#35683f;--accent-on-dark:#8fce9a;--on-accent:#0a140e;--on-accent-muted:#0a140e;--muted:#667067;--line:rgba(23,37,29,.16);--grid-opacity:.035;--grid-size:12.5vw;--display:var(--serif);--title-weight:560;--title-tracking:-.025em;--label-tracking:.075em;--frame-radius:10px;--frame-border:1px solid rgba(23,37,29,.12);--figure-gap:12px;--dark-ink:#f3f0e6;--dark-paper:#17251d;--dark-paper-2:#24362b;--dark-muted:#bdc8bd;--dark-line:rgba(243,240,230,.18);--chrome-bg:rgba(17,31,23,.96);--chrome-ink:#f3f0e6;--chrome-border:rgba(243,240,230,.25)}    html[data-style="gallery-red"]{--ink:#201d1b;--paper:#fff;--paper-2:#eeeae6;--paper-soft:#f5f0e8;--accent:#b83a30;--accent-text:#a32e26;--accent-on-dark:#ef8f87;--on-accent:#fff;--on-accent-muted:#fff;--muted:#716966;--line:rgba(32,29,27,.15);--pad:clamp(34px,6.4vw,118px);--grid-opacity:0;--display:var(--serif);--title-weight:500;--title-tracking:-.02em;--label-tracking:.14em;--frame-border:1px solid rgba(32,29,27,.12);--figure-gap:14px;--rule-weight:2px;--dark-ink:#f8f4ef;--dark-paper:#201d1b;--dark-paper-2:#332d2a;--dark-muted:#c7bfba;--dark-line:rgba(248,244,239,.18);--chrome-bg:rgba(26,23,21,.97);--chrome-ink:#f8f4ef;--chrome-border:rgba(248,244,239,.25)}    *{box-sizing:border-box} html,body{margin:0;background:#0d0d0d;color:var(--ink);font-family:var(--sans)}    body{overflow:hidden}.deck{display:flex;width:100vw;height:100svh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;scrollbar-width:none}.deck::-webkit-scrollbar{display:none}    .slide{position:relative;flex:0 0 100vw;height:100svh;scroll-snap-align:start;overflow:hidden;background:var(--paper);color:var(--ink);content-visibility:auto;contain-intrinsic-size:100vw 100svh}    .slide::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);opacity:var(--grid-opacity)}    .slide-inner{position:relative;z-index:1;height:100%;padding:clamp(54px,6vh,88px) var(--pad) clamp(72px,9vh,118px);display:flex;flex-direction:column;gap:clamp(18px,2.4vh,34px)}    .theme-dark{--ink:var(--dark-ink);--paper:var(--dark-paper);--paper-2:var(--dark-paper-2);--muted:var(--dark-muted);--line:var(--dark-line);--accent-text:var(--accent-on-dark)}    .theme-accent{--ink:var(--on-accent);--paper:var(--accent);--paper-2:color-mix(in srgb,var(--on-accent) 12%,transparent);--muted:var(--on-accent-muted);--line:color-mix(in srgb,var(--on-accent) 24%,transparent);--accent-text:var(--on-accent)}    .theme-paper{--paper:var(--paper-soft)}    h1,h2,p{margin:0}h1,h2{font-family:var(--display)}.title-hero{font-size:clamp(58px,9vw,156px);line-height:.88;letter-spacing:calc(var(--title-tracking) - .02em);font-weight:var(--title-weight);max-width:12ch}.title-xl{font-size:clamp(46px,6.2vw,108px);line-height:.95;letter-spacing:var(--title-tracking);font-weight:var(--title-weight);max-width:16ch}.slide-head h1{font-size:clamp(38px,4.7vw,78px);line-height:1;letter-spacing:var(--title-tracking);font-weight:var(--title-weight);max-width:18ch}    .eyebrow,.label,.meta,.caption,figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:var(--label-tracking);font-size:clamp(10px,.8vw,14px);line-height:1.45}.eyebrow,.label{color:var(--accent-text);font-weight:700}.lead{font-size:clamp(20px,2vw,34px);line-height:1.35;max-width:38ch}.body{font-size:clamp(16px,1.25vw,22px);line-height:1.55;max-width:56ch;color:var(--muted)}    .project-no{font-family:var(--mono);font-size:clamp(70px,16vw,280px);line-height:.72;color:var(--accent-text);letter-spacing:-.08em}.rule{height:var(--rule-weight);background:var(--line);width:100%}.spacer{flex:1}    .grid-2,.grid-3,.grid-4,.evidence-grid,.compare-grid{display:grid;gap:clamp(16px,2vw,34px)}.grid-2,.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4,.brief-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.evidence-grid{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;flex:1}    .brief-grid>div,.decision-note,.metric{border-top:1px solid var(--line);padding-top:14px}.brief-grid p{font-size:clamp(15px,1.2vw,21px);line-height:1.45;margin-top:10px}.decision-note{font-size:clamp(18px,1.55vw,28px);line-height:1.4;max-width:58ch}    figure{margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--figure-gap)}.frame{min-height:0;overflow:hidden;border:var(--frame-border);border-radius:var(--frame-radius)}.frame img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;background:var(--paper-2)}.frame.contain img{object-fit:contain}.evidence-grid .frame img{height:min(48vh,520px)}.compare-grid .frame img{height:min(44vh,480px)}figcaption{color:var(--muted);text-transform:none;letter-spacing:.02em}    .swatches{display:flex;gap:12px}.swatch{width:clamp(54px,6vw,100px);aspect-ratio:1;border:1px solid var(--line)}    .hero-frame{flex:1;min-height:0}.hero-frame img{height:100%;object-fit:cover}.data-table{width:100%;border-collapse:collapse;font-size:clamp(13px,1.05vw,19px);line-height:1.4}.data-table th,.data-table td{border-top:1px solid var(--line);padding:clamp(10px,1.2vw,18px) 12px;text-align:left;vertical-align:top}.data-table thead th{font:700 clamp(10px,.8vw,14px)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}.data-table tbody th{font-family:var(--mono);color:var(--accent-text)}    /* Composition systems: the registered markup stays portable while key layouts       change hierarchy, proportion, image role, and rhythm for each art direction. */    html[data-style="workshop-orange"] [data-layout="ID01"] .title-hero{max-width:9ch;transform:rotate(-1deg)}    html[data-style="workshop-orange"] [data-layout="ID01"] .rule{width:38%;height:8px;background:var(--accent)}    html[data-style="workshop-orange"] [data-layout="ID03"] .evidence-grid{grid-template-columns:1.15fr .85fr 1fr;align-items:start}    html[data-style="workshop-orange"] [data-layout="ID03"] .evidence-grid figure:nth-child(2){margin-top:7vh;transform:rotate(1deg)}    html[data-style="workshop-orange"] [data-layout="ID03"] .evidence-grid figure:nth-child(3){margin-top:2vh;transform:rotate(-.7deg)}    html[data-style="workshop-orange"] [data-layout="ID08"]>.slide-inner>.grid-2{grid-template-columns:1.35fr .65fr;transform:rotate(-.35deg)}    html[data-style="workshop-orange"] [data-layout="ID08"] .swatches{flex-direction:column;align-items:flex-start}    html[data-style="workshop-orange"] [data-layout="ID10"]>.slide-inner>.grid-2{grid-template-columns:1.25fr .75fr}    html[data-style="workshop-orange"] [data-layout="ID10"] .brief-grid>div:nth-child(even){transform:translateY(18px)}    html[data-style="workshop-orange"] [data-layout="ID14"] .hero-frame{margin-right:8vw;transform:rotate(-.5deg);box-shadow:12px 12px 0 var(--accent)}    html[data-style="workshop-orange"] [data-layout="ID16"] .project-no{transform:rotate(-4deg);text-shadow:10px 10px 0 color-mix(in srgb,var(--on-accent) 18%,transparent)}    html[data-style="instrument-blue"] [data-layout="ID01"] .slide-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto}    html[data-style="instrument-blue"] [data-layout="ID01"] .eyebrow{grid-column:1/13}html[data-style="instrument-blue"] [data-layout="ID01"] .spacer{display:none}    html[data-style="instrument-blue"] [data-layout="ID01"] .title-hero{grid-column:1/10;align-self:end;max-width:11ch}    html[data-style="instrument-blue"] [data-layout="ID01"] .rule{grid-column:1/13}    html[data-style="instrument-blue"] [data-layout="ID01"] .grid-2{grid-column:1/13;grid-template-columns:8fr 4fr}    html[data-style="instrument-blue"] [data-layout="ID03"] .evidence-grid{gap:1px;background:var(--line);border:1px solid var(--line)}    html[data-style="instrument-blue"] [data-layout="ID03"] .evidence-grid figure{background:var(--paper);padding:10px}    html[data-style="instrument-blue"] [data-layout="ID08"]>.slide-inner>.grid-2{grid-template-columns:7fr 5fr}    html[data-style="instrument-blue"] [data-layout="ID08"]>.slide-inner>.grid-2>div{display:grid;grid-template-rows:auto 1fr auto auto;border-left:1px solid var(--line);padding-left:clamp(18px,2vw,34px)}    html[data-style="instrument-blue"] [data-layout="ID10"]>.slide-inner>.grid-2{grid-template-columns:8fr 4fr}    html[data-style="instrument-blue"] [data-layout="ID10"] .brief-grid{gap:1px;background:var(--line);border:1px solid var(--line)}    html[data-style="instrument-blue"] [data-layout="ID10"] .brief-grid>div{border:0;background:var(--paper);padding:14px}    html[data-style="instrument-blue"] [data-layout="ID14"] .hero-frame{border:1px solid var(--line);padding:10px}    html[data-style="instrument-blue"] [data-layout="ID16"] .grid-2{grid-template-columns:5fr 7fr;align-items:end;border-top:1px solid var(--line);padding-top:24px}    html[data-style="material-green"] [data-layout="ID01"] .title-hero{max-width:10ch;font-style:italic}    html[data-style="material-green"] [data-layout="ID01"] .grid-2{grid-template-columns:2fr 1fr;align-items:end}    html[data-style="material-green"] [data-layout="ID03"] .evidence-grid{grid-template-columns:1.45fr .8fr .8fr;align-items:center}    html[data-style="material-green"] [data-layout="ID03"] .evidence-grid figure:first-child .frame img{height:min(55vh,590px)}    html[data-style="material-green"] [data-layout="ID03"] .evidence-grid figure:not(:first-child) .frame img{height:min(36vh,390px)}    html[data-style="material-green"] [data-layout="ID08"]>.slide-inner>.grid-2{grid-template-columns:1.55fr .65fr;align-items:end}    html[data-style="material-green"] [data-layout="ID08"] .frame{border-radius:26px 26px 4px 26px}    html[data-style="material-green"] [data-layout="ID10"]>.slide-inner>.grid-2{grid-template-columns:1.4fr .6fr;align-items:center}    html[data-style="material-green"] [data-layout="ID10"] .brief-grid{grid-template-columns:1fr}    html[data-style="material-green"] [data-layout="ID14"] .title-xl{font-style:italic;max-width:18ch}    html[data-style="material-green"] [data-layout="ID14"] .hero-frame{margin-left:9vw;border-radius:32px 4px 32px 32px}    html[data-style="material-green"] [data-layout="ID16"] .grid-2{grid-template-columns:.7fr 1.3fr;align-items:end}    html[data-style="gallery-red"] [data-layout="ID01"] .slide-inner{justify-content:flex-end}    html[data-style="gallery-red"] [data-layout="ID01"] .spacer{display:none}    html[data-style="gallery-red"] [data-layout="ID01"] .title-hero{font-size:clamp(68px,10.5vw,178px);max-width:8ch;margin:9vh 0 auto}    html[data-style="gallery-red"] [data-layout="ID01"] .rule{width:12%;background:var(--accent);height:3px}    html[data-style="gallery-red"] [data-layout="ID03"] .evidence-grid{grid-template-columns:1.6fr .7fr;grid-template-rows:1fr 1fr}    html[data-style="gallery-red"] [data-layout="ID03"] .evidence-grid figure:first-child{grid-row:1/3}    html[data-style="gallery-red"] [data-layout="ID03"] .evidence-grid figure:first-child .frame img{height:min(55vh,600px)}    html[data-style="gallery-red"] [data-layout="ID03"] .evidence-grid figure:not(:first-child){display:grid;grid-template-columns:1fr 1fr;align-items:end}    html[data-style="gallery-red"] [data-layout="ID03"] .evidence-grid figure:not(:first-child) .frame img{height:min(20vh,220px)}    html[data-style="gallery-red"] [data-layout="ID08"]>.slide-inner>.grid-2{grid-template-columns:1.7fr .55fr;align-items:end}    html[data-style="gallery-red"] [data-layout="ID08"] .swatches{gap:6px}html[data-style="gallery-red"] [data-layout="ID08"] .swatch{width:54px}    html[data-style="gallery-red"] [data-layout="ID10"]>.slide-inner>.grid-2{grid-template-columns:1.65fr .55fr;align-items:end}    html[data-style="gallery-red"] [data-layout="ID10"] .brief-grid{grid-template-columns:1fr}    html[data-style="gallery-red"] [data-layout="ID14"] .title-xl{font-size:clamp(52px,7vw,120px);max-width:12ch}    html[data-style="gallery-red"] [data-layout="ID14"] .hero-frame{margin-left:18vw}    html[data-style="gallery-red"] [data-layout="ID16"] .grid-2{display:block}html[data-style="gallery-red"] [data-layout="ID16"] .project-no{font-size:clamp(150px,28vw,470px);position:absolute;right:var(--pad);bottom:8vh;opacity:.18}    /* Optional composition recipes for ID01, ID03, and ID14. These fragments       change the page skeleton while preserving layout IDs and evidence fields. */    .workshop-cover-grid{height:100%;display:grid;grid-template-columns:74px minmax(0,1fr) minmax(220px,24vw);gap:clamp(24px,4vw,72px);align-items:stretch}    .workshop-index{border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding-right:16px;font:700 clamp(10px,.8vw,14px)/1 var(--mono);color:var(--accent-text);writing-mode:vertical-rl;transform:rotate(180deg)}    .workshop-title-block{align-self:center}.workshop-title-block .title-hero{font-size:clamp(72px,11vw,185px);max-width:8ch;transform:rotate(-2deg);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:clamp(6px,.6vw,10px);text-underline-offset:.08em}    .workshop-notes{display:flex;flex-direction:column;justify-content:flex-end;gap:10px}.workshop-notes>span{width:max-content;max-width:100%;border:1px solid var(--accent-text);padding:8px 10px;font:700 clamp(10px,.75vw,13px)/1 var(--mono);text-transform:uppercase;transform:rotate(-1deg)}.workshop-notes>span:nth-child(2){transform:rotate(1.5deg);margin-left:18px}.workshop-notes .body{margin-top:4vh}    .workshop-process-board{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:12px}.process-card{position:relative;background:var(--paper);border:1px solid var(--line);padding:12px;box-shadow:8px 8px 0 color-mix(in srgb,var(--accent) 30%,transparent)}.process-card>b{position:absolute;z-index:2;top:-18px;left:-12px;background:var(--accent);color:var(--on-accent);padding:8px 10px;font:700 13px var(--mono)}.process-card .frame,.process-card img{height:100%}.process-card-a{grid-column:1/6;grid-row:1/7;transform:rotate(-1.2deg)}.process-card-b{grid-column:5/10;grid-row:2/8;transform:rotate(1deg)}.process-card-c{grid-column:9/13;grid-row:1/6;transform:rotate(-.6deg)}.workshop-takeaway{grid-column:9/13;grid-row:7/9;border-top:6px solid var(--accent);padding-top:10px;font:700 clamp(15px,1.25vw,22px)/1.3 var(--sans)}    .workshop-resolution-grid{height:100%;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(24px,4vw,72px);align-items:stretch}.workshop-resolution-grid>figure{transform:rotate(-.7deg);box-shadow:12px 12px 0 var(--accent)}.workshop-resolution-grid>figure .frame,.workshop-resolution-grid>figure img{height:100%}.workshop-decision-ticket{align-self:center;border:1px solid var(--accent-text);padding:clamp(22px,2.8vw,48px);transform:rotate(1deg)}.workshop-decision-ticket .title-xl{font-size:clamp(46px,5.5vw,92px)}.workshop-decision-ticket>span{display:inline-block;margin-top:4vh;background:var(--accent);color:var(--on-accent);padding:8px 10px;font:700 12px var(--mono)}    .instrument-register,.instrument-scale,.instrument-finding{display:grid;align-items:center;font:700 clamp(9px,.7vw,12px)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.instrument-register{grid-template-columns:1fr auto auto;gap:28px;border-bottom:1px solid var(--line);padding-bottom:14px}.instrument-cover-grid{flex:1;display:grid;grid-template-columns:9fr 3fr;align-items:end}.instrument-cover-grid .title-hero{font-size:clamp(76px,12vw,198px);max-width:7ch}.instrument-coordinate{border-left:1px solid var(--line);padding-left:22px;display:grid;gap:16px}.instrument-coordinate b{font:300 clamp(100px,13vw,210px)/.75 var(--sans);color:var(--accent-on-dark)}.instrument-coordinate p{font:700 clamp(11px,.85vw,15px)/1.35 var(--mono);text-transform:uppercase}.instrument-scale{grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);padding-top:10px}.instrument-scale span:not(:first-child){text-align:right}    .instrument-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:14px}.instrument-head h1{font:var(--title-weight) clamp(40px,4.6vw,76px)/1 var(--display);letter-spacing:var(--title-tracking);max-width:18ch}.instrument-evidence-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.instrument-evidence-grid figure{background:var(--paper);padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}.instrument-evidence-grid .frame,.instrument-evidence-grid img{height:100%}.instrument-cell-id{font:700 11px var(--mono);color:var(--accent-text)}.instrument-finding{grid-template-columns:auto 1fr auto;gap:20px;border-top:1px solid var(--line);padding-top:12px}.instrument-finding p{font-size:clamp(15px,1.15vw,20px);text-transform:none;letter-spacing:0}    .instrument-resolution-grid{flex:1;min-height:0;display:grid;grid-template-columns:9fr 3fr;gap:1px;background:var(--line);border:1px solid var(--line)}.instrument-resolution-grid>figure{background:var(--paper);padding:14px}.instrument-resolution-grid>figure .frame,.instrument-resolution-grid>figure img{height:100%}.instrument-resolution-grid aside{background:var(--paper);padding:clamp(18px,2vw,32px);display:flex;flex-direction:column;gap:12px}.instrument-resolution-grid aside span{border-bottom:1px solid var(--line);padding-bottom:12px;font:700 11px var(--mono);color:var(--accent-text)}.instrument-resolution-grid aside p{margin-top:auto;font-size:clamp(17px,1.4vw,24px);line-height:1.4}    .material-cover .slide-inner{justify-content:center}.material-cover-mark{position:absolute;right:-4vw;top:50%;width:min(44vw,720px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:color-mix(in srgb,var(--accent) 20%,var(--paper));display:grid;place-items:center}.material-cover-mark span{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(90deg)}.material-cover-copy{position:relative;width:62%;z-index:1}.material-cover-copy .title-hero{font-size:clamp(68px,9.5vw,160px);font-style:italic;max-width:9ch}.material-cover-meta{position:absolute;right:var(--pad);bottom:10vh;max-width:24ch;font:700 11px/1.45 var(--mono);text-transform:uppercase}    .material-evidence-grid{flex:1;min-height:0;display:grid;grid-template-columns:1.55fr .7fr;grid-template-rows:1fr auto;gap:clamp(16px,2vw,30px)}.material-primary{grid-row:1/3}.material-primary .frame,.material-primary img{height:100%}.material-detail-stack{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:18px;min-height:0}.material-detail-stack figure .frame,.material-detail-stack figure img{height:100%}.material-evidence .frame{border-radius:28px 28px 5px 28px}.material-takeaway{border-top:1px solid var(--line);padding-top:14px;font:italic var(--title-weight) clamp(19px,1.55vw,28px)/1.35 var(--serif)}    .material-resolution .slide-inner{display:grid;grid-template-columns:.65fr 1.35fr;align-items:center}.material-resolution-copy{position:relative;z-index:2;margin-right:-8vw}.material-resolution-copy .title-xl{font-size:clamp(58px,7vw,118px);font-style:italic;max-width:9ch}.material-resolution-copy .lead{margin-top:4vh}.material-hero{height:72vh;min-height:0}.material-hero .frame,.material-hero img{height:100%}.material-hero .frame{border-radius:44% 44% 8px 8px}    .gallery-cover .slide-inner{display:grid;grid-template-rows:auto 1fr auto}.gallery-cover-top,.gallery-cover-bottom{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:12px;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}.gallery-cover-title{align-self:center;justify-self:center;font:400 clamp(92px,15vw,250px)/.77 var(--serif);letter-spacing:-.065em;text-align:center;max-width:6ch}.gallery-cover-bottom{border:0;border-top:2px solid var(--ink);padding:12px 0 0}.gallery-cover-bottom p:last-child{max-width:26ch;text-align:right}    .gallery-evidence .slide-inner{display:grid;grid-template-columns:2.4fr 6fr 2fr;gap:clamp(20px,3vw,52px);align-items:stretch}.gallery-evidence-title{align-self:end}.gallery-evidence-title h1{font:400 clamp(42px,5vw,82px)/.95 var(--serif);letter-spacing:-.035em}.gallery-primary{min-height:0}.gallery-primary .frame,.gallery-primary img{height:100%}.gallery-evidence-aside{display:grid;grid-template-rows:1fr 1fr auto;gap:18px;min-height:0}.gallery-evidence-aside figure{min-height:0}.gallery-evidence-aside .frame,.gallery-evidence-aside img{height:100%}.gallery-evidence-aside>p{border-top:2px solid var(--accent);padding-top:14px;font:400 clamp(15px,1.1vw,20px)/1.45 var(--serif)}    .gallery-resolution .slide-inner{padding:0;display:grid;grid-template-columns:3fr 1fr;gap:0}.gallery-resolution-image{min-height:0}.gallery-resolution-image .frame,.gallery-resolution-image img{height:100%;border:0}.gallery-resolution-image figcaption{position:absolute;left:24px;bottom:24px;background:var(--dark-paper);padding:7px 9px}.gallery-resolution-copy{padding:clamp(44px,5vw,90px) clamp(30px,3.5vw,64px);display:flex;flex-direction:column;justify-content:flex-end;border-left:1px solid var(--line)}.gallery-resolution-copy h1{font:400 clamp(48px,5.5vw,94px)/.9 var(--serif);letter-spacing:-.04em;margin:5vh 0}.gallery-resolution-copy>p:last-child{font-size:clamp(16px,1.15vw,20px);line-height:1.5}    .workshop-cmf-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto;gap:18px}.workshop-cmf-hero{grid-column:1/9;grid-row:1/3;transform:rotate(-.7deg);box-shadow:10px 10px 0 var(--accent)}.workshop-cmf-hero .frame,.workshop-cmf-hero img{height:100%}.workshop-sample-stack{grid-column:9/13;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px 16px;border:1px solid var(--line);padding:18px;transform:rotate(1deg)}.workshop-sample-stack .swatch{width:54px}.workshop-sample-stack p{font:700 12px var(--mono);text-transform:uppercase}.workshop-cmf-note{grid-column:9/13;border-top:6px solid var(--accent);padding-top:12px;font:700 clamp(17px,1.3vw,23px)/1.35 var(--sans)}    .workshop-architecture-grid{flex:1;min-height:0;display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(24px,4vw,68px)}.workshop-architecture-grid>figure .frame,.workshop-architecture-grid>figure img{height:100%}.workshop-part-tickets{display:flex;flex-direction:column;justify-content:center;gap:12px}.workshop-part-tickets span{border:1px solid var(--accent-text);padding:12px;font:700 12px var(--mono);text-transform:uppercase;transform:rotate(-1deg)}.workshop-part-tickets span:nth-child(even){transform:rotate(1.3deg);margin-left:18px}.workshop-part-tickets p{margin-top:3vh;border-top:6px solid var(--accent);padding-top:12px;font-size:clamp(16px,1.2vw,22px);line-height:1.4}    .workshop-iteration-board{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}.workshop-iteration-board figure{height:80%;position:relative;padding:12px;background:var(--paper);border:1px solid var(--line);box-shadow:9px 9px 0 color-mix(in srgb,var(--accent) 28%,transparent)}.workshop-iteration-board figure .frame,.workshop-iteration-board figure img{height:100%}.workshop-iteration-board figure>b{position:absolute;z-index:2;top:-18px;left:-12px;background:var(--accent);color:var(--on-accent);padding:8px 10px;font:700 12px var(--mono)}.iteration-before{transform:rotate(-1deg)}.iteration-after{transform:rotate(1deg)}.workshop-change-arrow{font:700 clamp(44px,5vw,82px) var(--mono);color:var(--accent-text)}.workshop-change-note{position:absolute;right:0;bottom:0;width:40%;border-top:6px solid var(--accent);padding-top:10px;font:700 clamp(15px,1.15vw,21px)/1.35 var(--sans)}    .workshop-divider .slide-inner{display:grid;grid-template-columns:.45fr 1.55fr;align-items:center}.workshop-project-stamp{border:4px solid var(--on-accent);aspect-ratio:1;display:grid;place-items:center;transform:rotate(-5deg);font:700 13px var(--mono)}.workshop-project-stamp b{font-size:clamp(100px,14vw,230px);line-height:.65}.workshop-divider-copy{padding-left:6vw}.workshop-divider-copy .title-xl{font-size:clamp(58px,8vw,136px);transform:rotate(-1deg)}.workshop-divider-copy>div{display:flex;gap:10px;margin-top:4vh}.workshop-divider-copy>div span{border:1px solid currentColor;padding:8px 10px;font:700 11px var(--mono)}    .instrument-cmf-grid{flex:1;min-height:0;display:grid;grid-template-columns:8fr 4fr;gap:1px;background:var(--line);border:1px solid var(--line)}.instrument-cmf-grid>figure{background:var(--paper);padding:14px}.instrument-cmf-grid>figure .frame,.instrument-cmf-grid>figure img{height:100%}.instrument-cmf-grid aside{background:var(--paper);padding:18px;display:grid;grid-template-rows:repeat(3,auto) 1fr;gap:1px}.instrument-cmf-grid aside>div{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:12px 0}.instrument-cmf-grid .swatch{width:48px}.instrument-cmf-grid aside p{font:700 11px/1.4 var(--mono);text-transform:uppercase}.instrument-cmf-grid aside>p{align-self:end;font:400 clamp(16px,1.2vw,21px)/1.45 var(--sans);text-transform:none}    .instrument-architecture-grid{flex:1;min-height:0;display:grid;grid-template-columns:8fr 4fr;gap:1px;background:var(--line);border:1px solid var(--line)}.instrument-architecture-grid>figure{background:var(--paper);padding:14px}.instrument-architecture-grid>figure .frame,.instrument-architecture-grid>figure img{height:100%}.instrument-architecture-grid table{border-collapse:collapse;background:var(--paper);font:700 12px var(--mono)}.instrument-architecture-grid th,.instrument-architecture-grid td{border-bottom:1px solid var(--line);padding:18px;text-align:left}.instrument-architecture-grid th{color:var(--accent-text)}    .instrument-iteration-grid{flex:1;min-height:0;display:grid;grid-template-columns:4fr 4fr 2fr;gap:1px;background:var(--line);border:1px solid var(--line)}.instrument-iteration-grid figure{background:var(--paper);padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}.instrument-iteration-grid figure>span{font:700 11px var(--mono);color:var(--accent-text)}.instrument-iteration-grid figure .frame,.instrument-iteration-grid figure img{height:100%}.instrument-iteration-grid aside{background:var(--paper);padding:18px;display:flex;flex-direction:column;gap:12px}.instrument-iteration-grid aside>span{border-bottom:1px solid var(--line);padding-bottom:10px;font:700 11px var(--mono)}.instrument-iteration-grid aside>p{margin-top:auto;font-size:clamp(16px,1.2vw,21px);line-height:1.4}    .instrument-divider .slide-inner{display:flex}.instrument-divider-grid{flex:1;display:grid;grid-template-columns:4fr 8fr;align-items:end}.instrument-divider-grid>b{font:300 clamp(160px,25vw,410px)/.7 var(--sans);color:var(--accent-on-dark)}.instrument-divider-grid>div{border-left:1px solid var(--line);padding-left:3vw}.instrument-divider-grid .title-xl{font-size:clamp(58px,7vw,118px)}    .material-cmf .slide-inner{display:grid;grid-template-columns:.65fr 1.35fr;grid-template-rows:1fr auto;align-items:end}.material-cmf-copy{position:relative;z-index:2;margin-right:-7vw}.material-cmf-copy .title-xl{font-size:clamp(54px,6.5vw,108px);font-style:italic}.material-cmf-copy .lead{margin-top:4vh}.material-cmf-hero{height:66vh}.material-cmf-hero .frame,.material-cmf-hero img{height:100%}.material-cmf-hero .frame{border-radius:42% 42% 6px 6px}.material-swatch-row{grid-column:1/3;display:grid;grid-template-columns:repeat(3,48px 1fr);gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:12px}.material-swatch-row>span{width:44px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line)}.material-swatch-row p{font:700 11px var(--mono);text-transform:uppercase}    .material-architecture-hero{flex:1;min-height:0}.material-architecture-hero .frame,.material-architecture-hero img{height:100%}.material-architecture-hero .frame{border-radius:28px}.material-component-ribbon{display:grid;grid-template-columns:repeat(4,1fr) 1.5fr;gap:18px;align-items:start}.material-component-ribbon>div{border-top:1px solid var(--line);padding-top:10px}.material-component-ribbon b{font:700 11px var(--mono);color:var(--accent-text)}.material-component-ribbon p{font-size:clamp(14px,1vw,18px);line-height:1.4}.material-component-ribbon>p{font:italic var(--title-weight) clamp(16px,1.2vw,22px)/1.4 var(--serif)}    .material-iteration .slide-inner{display:grid;grid-template-columns:.6fr 1.4fr;align-items:center}.material-iteration-copy{position:relative;z-index:3;margin-right:-7vw}.material-iteration-copy .title-xl{font-size:clamp(50px,6vw,102px);font-style:italic}.material-iteration-copy .lead{margin-top:4vh}.material-iteration-images{height:70vh;display:grid;grid-template-columns:.7fr 1.3fr;align-items:end;gap:18px}.material-iteration-images figure .frame,.material-iteration-images figure img{height:100%}.material-before{height:52vh}.material-after{height:68vh}.material-iteration-images .frame{border-radius:30px 30px 5px 30px}    .material-divider .slide-inner{justify-content:center}.material-divider-orbit{position:absolute;right:5vw;top:50%;width:min(50vw,780px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 16%,var(--paper));display:grid;place-items:center}.material-divider-orbit span{font:400 clamp(120px,20vw,330px)/1 var(--serif);color:var(--accent-text);opacity:.38}.material-divider-copy{position:relative;z-index:2;width:58%}.material-divider-copy .title-xl{font-size:clamp(64px,9vw,152px);font-style:italic;max-width:9ch}    .gallery-cmf .slide-inner{padding:0;display:grid;grid-template-columns:3fr 1fr}.gallery-cmf-image{min-height:0}.gallery-cmf-image .frame,.gallery-cmf-image img{height:100%;border:0}.gallery-cmf-image figcaption{position:absolute;left:24px;bottom:24px;background:var(--paper);padding:7px 9px}.gallery-cmf-copy{padding:clamp(44px,5vw,90px) clamp(26px,3vw,54px);display:flex;flex-direction:column;justify-content:flex-end;border-left:1px solid var(--line)}.gallery-cmf-copy h1{font:400 clamp(50px,5.5vw,94px)/.9 var(--serif);letter-spacing:-.04em;margin:5vh 0}.gallery-cmf-copy>p{font-size:clamp(15px,1.1vw,20px);line-height:1.5}.gallery-cmf-copy>div{display:flex;gap:6px;margin-top:5vh}.gallery-cmf-copy>div span{width:42px;aspect-ratio:1;border:1px solid var(--line)}.gallery-cmf-copy small{margin-top:12px;font:10px var(--mono);text-transform:uppercase}    .gallery-architecture .slide-inner{display:grid;grid-template-columns:2fr 7fr 2fr;grid-template-rows:1fr auto;gap:clamp(18px,2.5vw,42px)}.gallery-architecture-title{align-self:end}.gallery-architecture-title h1{font:400 clamp(40px,4.6vw,76px)/.95 var(--serif)}.gallery-architecture>.slide-inner>figure{min-height:0}.gallery-architecture figure .frame,.gallery-architecture figure img{height:100%}.gallery-architecture ol{margin:0;padding:0;list-style-position:inside;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;font:700 11px var(--mono);text-transform:uppercase}.gallery-architecture-note{grid-column:2/4;border-top:2px solid var(--accent);padding-top:12px;font:400 clamp(16px,1.2vw,22px)/1.4 var(--serif)}    .gallery-iteration .slide-inner{display:grid;grid-template-columns:2fr 3fr 5fr;grid-template-rows:1fr auto;gap:clamp(20px,2.5vw,44px);align-items:end}.gallery-iteration-title h1{font:400 clamp(42px,5vw,82px)/.92 var(--serif)}.gallery-iteration figure{height:66vh}.gallery-iteration figure .frame,.gallery-iteration figure img{height:100%}.gallery-before{height:48vh!important}.gallery-iteration-note{grid-column:2/4;border-top:2px solid var(--accent);padding-top:12px;font:400 clamp(16px,1.2vw,22px)/1.4 var(--serif)}    .gallery-divider .slide-inner{display:grid;grid-template-rows:auto 1fr auto}.gallery-divider-top{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:12px;font:700 11px var(--mono);text-transform:uppercase}.gallery-divider-number{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);font:400 clamp(260px,42vw,690px)/.7 var(--serif);color:var(--accent);opacity:.12}.gallery-divider-copy{position:relative;z-index:2;align-self:end;display:grid;grid-template-columns:2fr 1fr;gap:5vw;align-items:end}.gallery-divider-copy h1{font:400 clamp(72px,11vw,184px)/.78 var(--serif);letter-spacing:-.055em;max-width:7ch}.gallery-divider-copy p{border-top:2px solid var(--accent);padding-top:12px;font-size:clamp(17px,1.3vw,23px);line-height:1.45}    .chrome{position:fixed;z-index:20;left:0;right:0;bottom:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:var(--chrome-ink);background:var(--chrome-bg);font:12px var(--mono)}    .controls{display:flex;gap:8px}.controls button{appearance:none;border:1px solid var(--chrome-border);background:transparent;color:var(--chrome-ink);width:34px;height:30px;cursor:pointer}.progress{position:absolute;left:0;bottom:54px;height:2px;background:var(--accent);width:0;transition:width .25s ease}    [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .48s ease,transform .48s ease}.slide.is-active [data-reveal]{opacity:1;transform:none}    .render-all .slide{content-visibility:visible;contain-intrinsic-size:none}    @media(max-width:800px){body{overflow-y:auto;overflow-x:hidden}.deck{display:block;overflow:visible;height:auto}.slide{width:100%;flex:none;height:auto;min-height:100svh;overflow:hidden}.grid-4,.grid-3,.grid-2,.brief-grid,.evidence-grid,.compare-grid,[data-layout]>.slide-inner>.grid-2{grid-template-columns:1fr!important;grid-template-rows:auto!important}.slide-inner{height:auto;min-height:100svh;min-width:0}.slide-inner>*{min-width:0}html[data-style="instrument-blue"] [data-layout="ID01"] .slide-inner{display:flex}.chrome{display:none}.frame img,.evidence-grid .frame img,.compare-grid .frame img,.hero-frame img{height:auto!important;max-height:62vh}.data-table{display:block;overflow-x:auto}[data-layout] figure,[data-layout] .hero-frame,[data-layout] .title-hero,[data-layout] .project-no{grid-column:auto!important;grid-row:auto!important;margin:0!important;transform:none!important}[data-layout] .spacer{display:block}[data-layout="ID03"] .evidence-grid figure{display:flex!important}[data-layout="ID16"] .project-no{position:static!important;opacity:1!important}}    @media(max-width:800px){.composition-workshop .workshop-cover-grid,.composition-workshop .workshop-resolution-grid,.composition-instrument .instrument-cover-grid,.composition-instrument .instrument-resolution-grid,.composition-material .material-evidence-grid,.composition-material.material-resolution .slide-inner,.composition-gallery.gallery-evidence .slide-inner,.composition-gallery.gallery-resolution .slide-inner{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto!important;height:auto}.workshop-index{display:none}.workshop-notes{margin-top:28px}.workshop-process-board{display:flex;flex-direction:column}.process-card{transform:none!important}.workshop-takeaway{margin-top:18px}.instrument-register{grid-template-columns:1fr}.instrument-register span:not(:first-child),.instrument-scale{display:none}.instrument-coordinate b{font-size:72px}.instrument-evidence-grid{grid-template-columns:1fr}.instrument-evidence-grid .frame img{height:auto!important}.instrument-finding{grid-template-columns:1fr}.material-cover-mark{width:76vw;opacity:.65}.material-cover-copy{width:100%}.material-cover-meta{position:relative;right:auto;bottom:auto;margin-top:30px}.material-detail-stack{grid-template-columns:1fr;grid-template-rows:auto}.material-primary .frame img,.material-detail-stack .frame img{height:auto!important}.material-resolution-copy{margin:0}.material-hero{height:auto}.material-hero .frame{border-radius:26px}.gallery-cover-title{font-size:clamp(68px,22vw,110px)}.gallery-evidence-title{align-self:auto}.gallery-primary .frame img,.gallery-evidence-aside .frame img{height:auto!important}.gallery-resolution-copy{grid-row:1;padding:50px var(--pad)}.gallery-resolution-image{grid-row:2}.gallery-resolution-image .frame img{height:auto!important}.gallery-resolution-image figcaption{position:static}}    @media(max-width:800px){.workshop-cmf-board,.workshop-architecture-grid,.workshop-iteration-board,.workshop-divider .slide-inner,.instrument-cmf-grid,.instrument-architecture-grid,.instrument-iteration-grid,.instrument-divider-grid,.material-cmf .slide-inner,.material-component-ribbon,.material-iteration .slide-inner,.material-iteration-images,.gallery-cmf .slide-inner,.gallery-architecture .slide-inner,.gallery-iteration .slide-inner,.gallery-divider-copy{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto!important;height:auto}.workshop-cmf-hero,.workshop-sample-stack,.workshop-cmf-note,.gallery-architecture-note,.gallery-iteration-note,.material-swatch-row{grid-column:auto!important;grid-row:auto!important}.workshop-cmf-hero,.workshop-iteration-board figure{transform:none;box-shadow:none}.workshop-change-arrow{transform:rotate(90deg);text-align:center}.workshop-change-note{position:static;width:auto}.workshop-project-stamp{width:180px}.workshop-divider-copy{padding:28px 0}.instrument-cmf-grid>figure .frame img,.instrument-architecture-grid>figure .frame img,.instrument-iteration-grid figure .frame img{height:auto!important}.instrument-divider-grid>b{font-size:110px}.material-cmf-copy,.material-iteration-copy{margin:0}.material-cmf-hero,.material-before,.material-after{height:auto}.material-cmf-hero .frame,.material-iteration-images .frame{border-radius:24px}.material-swatch-row{grid-template-columns:44px 1fr}.material-component-ribbon{gap:14px}.material-divider-copy{width:100%}.material-divider-orbit{width:78vw;opacity:.55}.gallery-cmf-copy{grid-row:1}.gallery-cmf-image{grid-row:2}.gallery-cmf-image .frame img,.gallery-architecture figure .frame img,.gallery-iteration figure .frame img{height:auto!important}.gallery-cmf-image figcaption{position:static}.gallery-iteration figure{height:auto!important}.gallery-divider-copy h1{font-size:clamp(68px,20vw,105px)}}    @media(prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}[data-reveal]{opacity:1;transform:none;transition:none}}    @media print{@page{size:16in 9in;margin:0}body{overflow:visible;background:#fff}.deck{display:block;height:auto;overflow:visible}.slide{width:16in;height:9in;break-after:page;content-visibility:visible;contain-intrinsic-size:none}.chrome,.progress{display:none}[data-reveal]{opacity:1;transform:none}}  </style></head><body>  <main class="deck" id="deck" aria-label="[PORTFOLIO_TITLE]">    <!-- PORTFOLIO_SLIDES -->  </main>  <div class="progress" id="progress"></div>  <nav class="chrome" aria-label="Portfolio navigation">    <span>[DESIGNER_NAME] · [PORTFOLIO_META]</span>    <div class="controls"><button id="prev" aria-label="Previous page">←</button><span id="counter">01 / 01</span><button id="next" aria-label="Next page">→</button></div>  </nav>  <script>    const deck=document.querySelector('#deck');const slides=[...document.querySelectorAll('.slide')];const slideMarkup=slides.map(slide=>slide.innerHTML);const counter=document.querySelector('#counter');const progress=document.querySelector('#progress');const params=new URLSearchParams(location.search);const requestedPage=Number(params.get('page'));const renderAll=params.get('render')==='all';const placeholder='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';let current=Number.isFinite(requestedPage)&&requestedPage>0?requestedPage-1:0;current=Math.max(0,Math.min(current,slides.length-1));    const pad=n=>String(n).padStart(2,'0');    function prepareImages(slide){slide.querySelectorAll('img[data-src]').forEach(img=>{if(!img.src){img.src=placeholder;img.loading='lazy';img.decoding='async'}})}    function mountSlide(index){const slide=slides[index];if(!slide)return;if(slide.dataset.mounted!=='true'){slide.innerHTML=slideMarkup[index];slide.dataset.mounted='true'}prepareImages(slide);slide.querySelectorAll('img[data-src]').forEach(img=>{if(img.src!==new URL(img.dataset.src,location.href).href){img.src=img.dataset.src;img.loading='eager'}})}    function unmountSlide(index){if(renderAll||Math.abs(index-current)<=1)return;const slide=slides[index];if(slide?.dataset.mounted==='true'){slide.replaceChildren();delete slide.dataset.mounted}}    function hydrateAll(){document.documentElement.classList.add('render-all');slides.forEach((_,index)=>mountSlide(index))}    function hydrateDesktop(){if(renderAll){hydrateAll();return}slides.forEach((_,index)=>Math.abs(index-current)<=1?mountSlide(index):unmountSlide(index))}    function show(i){if(!slides.length)return;current=Math.max(0,Math.min(i,slides.length-1));slides[current].scrollIntoView({behavior:'auto',inline:'start'});update();if(innerWidth>800)hydrateDesktop()}    function update(){slides.forEach((s,i)=>s.classList.toggle('is-active',i===current));counter.textContent=`${pad(current+1)} / ${pad(slides.length)}`;progress.style.width=`${slides.length?(current+1)/slides.length*100:0}%`}    addEventListener('keydown',e=>{if(['ArrowRight','PageDown',' '].includes(e.key))show(current+1);if(['ArrowLeft','PageUp'].includes(e.key))show(current-1);if(e.key==='Home')show(0);if(e.key==='End')show(slides.length-1)});    document.querySelector('#prev').onclick=()=>show(current-1);document.querySelector('#next').onclick=()=>show(current+1);    let wheelLock=false;addEventListener('wheel',e=>{if(innerWidth<=800||wheelLock)return;wheelLock=true;show(current+(e.deltaY>0||e.deltaX>0?1:-1));setTimeout(()=>wheelLock=false,250)},{passive:true});    let startX=0;deck.addEventListener('touchstart',e=>startX=e.touches[0].clientX,{passive:true});deck.addEventListener('touchend',e=>{const dx=e.changedTouches[0].clientX-startX;if(Math.abs(dx)>50)show(current+(dx<0?1:-1))},{passive:true});    slides.forEach((slide,index)=>{slide.dataset.mounted='true';if(!renderAll&&Math.abs(index-current)>1){slide.replaceChildren();delete slide.dataset.mounted}});    let mobileObserver;if(!renderAll&&innerWidth<=800){mobileObserver=new IntersectionObserver(entries=>entries.forEach(entry=>{const index=slides.indexOf(entry.target);if(entry.isIntersecting)mountSlide(index);else unmountSlide(index)}),{rootMargin:'100% 0px',threshold:.01});slides.forEach(slide=>mobileObserver.observe(slide));mountSlide(current);mountSlide(current+1)}else hydrateDesktop();    addEventListener('beforeprint',hydrateAll);addEventListener('afterprint',()=>{if(!renderAll){document.documentElement.classList.remove('render-all');hydrateDesktop()}});    update();deck.scrollLeft=innerWidth>800?current*innerWidth:0;if(innerWidth<=800&&current)slides[current]?.scrollIntoView({behavior:'auto'});  </script></body></html>