@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400&display=swap');
#portfolio-reference { --ref-blue:#0735bc; --ref-white:#fcfcfc; box-sizing:border-box; width:100%; max-width:100%; min-width:0; background:var(--ref-blue); padding:42px 24px 24px; color:var(--ref-blue); font-family:'Courier Prime','Courier New',serif; font-size:14px; line-height:1.4; color-scheme:light; container-type:inline-size; }
#portfolio-reference * { box-sizing:border-box; }
#portfolio-reference .ref-paper { min-width:0; width:100%; background:var(--ref-white); padding:16px 16px 0; }
#portfolio-reference nav { display:flex; flex-wrap:wrap; gap:12px; }
#portfolio-reference button { font:inherit; color:inherit; }
#portfolio-reference .ref-tab { font-family:'Courier Prime','Courier New',serif; }
#portfolio-reference .ref-tab { border:0; border-radius:24px; background:#f7f8fa; padding:5px 12px; font-size:13px; transform:translateY(0) rotate(0); transition:background-color 180ms ease,transform 180ms ease; }
#portfolio-reference .ref-tab[aria-pressed="true"] { background:#e6ebf7; }
#portfolio-reference .ref-tab:focus-visible { background:#e6ebf7; color:var(--ref-blue); }
@media(hover:hover) { #portfolio-reference .ref-tab:hover { background:#e6ebf7; color:var(--ref-blue); } #portfolio-reference .ref-tab:not([aria-pressed="true"]):hover { transform:translateY(-2px) rotate(-2deg); } }
@media(prefers-reduced-motion:reduce) { #portfolio-reference .ref-tab { transition:none; } #portfolio-reference .ref-tab:not([aria-pressed="true"]):hover { transform:none; } }
#portfolio-reference .ref-lead { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; min-width:0; gap:28px; align-items:start; margin-top:28px; }
#portfolio-reference .ref-lead > * { min-width:0; }
#portfolio-reference .ref-profile { max-width:400px; }
#portfolio-reference .ref-role { font-family:'Courier Prime','Courier New',serif; font-size:12px; line-height:1.5; margin:0 0 18px; }
#portfolio-reference .ref-intro { max-width:380px; margin:0; font-size:16px; line-height:1.45; letter-spacing:-.2px; }
#portfolio-reference .ref-intro + .ref-intro { margin-top:14px; }
#portfolio-reference .ref-skills { position:relative; width:100%; max-width:100%; min-width:0; aspect-ratio:2.03; min-height:240px; border-radius:7px; background:var(--ref-blue); color:var(--ref-white); overflow:hidden; }
#portfolio-reference .ref-playfield { position:absolute; inset:8px 8px 44px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-content:flex-end; justify-content:center; }
#portfolio-reference .ref-tag { display:block; flex:none; max-width:100%; background:var(--ref-white); color:var(--ref-blue); border:0; border-radius:40px; padding:9px 14px; font-size:12px; line-height:1.2; white-space:nowrap; user-select:none; touch-action:pan-y; }
#portfolio-reference .ref-playfield.ref-physics .ref-tag { position:absolute; left:0; top:0; will-change:transform; transform-origin:center; touch-action:none; cursor:grab; }
#portfolio-reference .ref-playfield.ref-physics .ref-tag:active { cursor:grabbing; }
#portfolio-reference .ref-tag:focus-visible { outline:2px solid white; outline-offset:3px; }
#portfolio-reference .ref-skills-title { position:absolute; bottom:9px; left:0; right:0; text-align:center; font-family:'Courier Prime','Courier New',serif; font-size:24px; line-height:1.15; margin:0; font-weight:400; color:inherit; pointer-events:none; }
#portfolio-reference .ref-name { font-family:'Courier Prime','Courier New',serif; font-size:clamp(32px,18.3cqw,260px); line-height:1.05; font-weight:400; letter-spacing:-.045em; white-space:nowrap; text-align:center; margin:60px 0 0; padding-bottom:10px; color:var(--ref-blue); }
#portfolio-reference .ref-panel { border-top:1px solid #dce3f5; padding:25px 4px 30px; }
#portfolio-reference .ref-panel[hidden] { display:none; }
#portfolio-reference .ref-panel h2 { font-family:'Courier Prime','Courier New',serif; font-size:34px; font-weight:400; margin:0 0 10px; color:inherit; }
#portfolio-reference .ref-panel p { max-width:600px; font-size:14px; margin:0 0 12px; }
#portfolio-reference .ref-list { display:flex; flex-wrap:wrap; gap:10px 25px; font-size:13px; }
@media(min-width:900px) { #portfolio-reference .ref-intro { font-size:18px; max-width:400px; } #portfolio-reference .ref-tag { font-size:13px; } }
@media(max-width:640px) {
 #portfolio-reference { padding:22px 12px 12px; }
 #portfolio-reference .ref-paper { padding:12px 12px 0; }
 #portfolio-reference nav { gap:7px; }
 #portfolio-reference .ref-tab { padding:6px 10px; font-size:12px; }
 #portfolio-reference .ref-lead { grid-template-columns:1fr; gap:25px; margin-top:26px; }
 #portfolio-reference .ref-intro { font-size:15px; max-width:360px; }
 #portfolio-reference .ref-skills { min-height:240px; }
 #portfolio-reference .ref-name { margin-top:32px; font-size:17.5cqw; padding-bottom:12px; }
 #portfolio-reference .ref-tag { font-size:11px; padding:8px 11px; }
}
#portfolio-reference .ref-projects { padding:50px 0 32px; scroll-margin-top:24px; }
#portfolio-reference .ref-project-heading { display:flex; justify-content:space-between; align-items:baseline; gap:15px; padding-top:22px; margin-bottom:28px; }
#portfolio-reference .ref-divider { height:1px; width:100%; margin:8px 0 26px; background:var(--ref-blue); opacity:.25; transform-origin:center; }
#portfolio-reference .ref-divider.is-playing { animation:ref-line-reveal 1100ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes ref-line-reveal { from { transform:scaleX(0); opacity:.1; } to { transform:scaleX(1); opacity:.25; } }
@media(prefers-reduced-motion:reduce) { #portfolio-reference .ref-divider.is-playing { animation:none; } }
#portfolio-reference .ref-project-heading h2 { font:inherit; font-size:24px; margin:0; }
#portfolio-reference .ref-project-heading span { font-size:12px; }
#portfolio-reference .ref-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 24px; }
#portfolio-reference .ref-delivery { display:block; width:100%; text-align:left; padding:0; border:0; background:transparent; }
#portfolio-reference .ref-cover { display:flex; position:relative; aspect-ratio:1.3; align-items:center; justify-content:center; background:#e8edf7; padding:30px; overflow:hidden; }
#portfolio-reference .ref-delivery:nth-child(2) .ref-cover { background:#d5e1f1; }
#portfolio-reference .ref-delivery:nth-child(3) .ref-cover { background:#e9e8e0; }
#portfolio-reference .ref-delivery:nth-child(4) .ref-cover { background:#dce7e6; }
#portfolio-reference .ref-cover-number { position:absolute; top:14px; left:16px; font-size:12px; }
#portfolio-reference .ref-cover-caption { position:absolute; bottom:13px; left:16px; font-size:11px; }
#portfolio-reference .ref-dashboard-sketch { background:var(--ref-white); width:100%; padding:17px; transform:rotate(-3deg); transition:transform 220ms ease; }
#portfolio-reference .ref-delivery:nth-child(even) .ref-dashboard-sketch { transform:rotate(3deg); }
#portfolio-reference .ref-delivery:is(:hover,:focus-visible) .ref-dashboard-sketch { transform:rotate(0) translateY(-4px); }
#portfolio-reference .ref-sketch-header { height:6px; width:42%; background:#ccd6ec; margin-bottom:16px; }
#portfolio-reference .ref-sketch-metrics { display:flex; gap:9px; margin-bottom:13px; }
#portfolio-reference .ref-sketch-metrics i { height:25px; background:#edf0f7; flex:1; }
#portfolio-reference .ref-sketch-chart { height:85px; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid #d5ddf2; }
#portfolio-reference .ref-sketch-chart i { flex:1; background:#95abda; height:var(--bar); }
#portfolio-reference .ref-delivery-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:14px; }
#portfolio-reference .ref-delivery-meta strong { font-size:20px; font-weight:400; }
#portfolio-reference .ref-delivery-meta span { font-size:12px; }
#portfolio-reference .ref-delivery-note { display:block; margin-top:6px; font-size:12px; color:#53658d; }
#portfolio-reference .ref-dashboard-page { padding:38px 0 40px; }
#portfolio-reference .ref-dashboard-page[hidden] { display:none; }
#portfolio-reference .ref-coming { padding:0 0 45px; scroll-margin-top:24px; }
#portfolio-reference .ref-coming > .ref-divider { margin:0 0 30px; }
#portfolio-reference .ref-coming h2 { font-size:24px; font-weight:400; margin:0 0 12px; }
#portfolio-reference .ref-coming p { font-size:14px; margin:0; color:#53658d; }
#portfolio-reference.dashboard-open .ref-coming { display:none; }
#portfolio-reference.dashboard-open .ref-lead,#portfolio-reference.dashboard-open .ref-name,#portfolio-reference.dashboard-open .ref-projects { display:none; }
#portfolio-reference .ref-back { border:0; background:#edf0f7; padding:9px 13px; border-radius:22px; }
#portfolio-reference .ref-dashboard-page h2 { font-weight:400; font-size:clamp(28px,5cqw,52px); margin:40px 0 12px; }
#portfolio-reference .ref-dashboard-page p { max-width:580px; }
#portfolio-reference .ref-dashboard-empty { margin-top:30px; min-height:300px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:12px; background:#edf0f7; padding:25px; }
#portfolio-reference .ref-dashboard-empty span { font-size:12px; max-width:380px; }
@media(max-width:640px) { #portfolio-reference .ref-project-grid { grid-template-columns:1fr; gap:28px; } #portfolio-reference .ref-projects { padding-top:30px; } #portfolio-reference .ref-project-heading h2 { font-size:21px; } #portfolio-reference .ref-cover { padding:35px; } }
@media(prefers-reduced-motion:reduce) { #portfolio-reference .ref-dashboard-sketch { transition:none; } }

html { scroll-behavior:auto; }
body { margin:0; background:#0735bc; }
.skip-link { position:absolute; left:12px; top:-70px; padding:12px; z-index:20; background:white; color:#0735bc; }
.skip-link:focus { top:12px; }
#portfolio-reference .ref-tab { text-decoration:none; color:inherit; }
#portfolio-reference .cursor-interaction { cursor:pointer; }
#portfolio-reference .ref-tab[aria-current="location"] { background:#e6ebf7; }
#portfolio-reference .ref-paper { max-width:1440px; margin-inline:auto; }
.noscript-note { background:#fcfcfc; color:#0735bc; padding:20px; margin:0; font-family:monospace; }
@media(pointer:coarse) { #portfolio-reference .ref-tab,#portfolio-reference .ref-tag,#portfolio-reference .ref-back { min-height:44px; } }