:root{--text: #e9f3ff;--muted: #a8bfd8;--accent: #57b0ff;--accent-strong: #8fcbff;--ring: #8bc6ff36;--grid-unit: 24px;--grid-major-step: calc(var(--grid-unit) * 5);--radius: 0;--layout-columns: 58;--layout-top-pad-cells: 2;--layout-bottom-pad-cells: 4;--page-margin-left: 0px;--foreground-drift-y: 0px;--hero-start: 2;--hero-cells: 40;--intro-start: 2;--intro-span-cells: 56;--intro-main-start: 1;--intro-main-cells: 33;--intro-contact-start: 35;--intro-contact-cells: 22;--projects-start: 2;--projects-span-cells: 56;--project-left-start: 1;--project-right-start: 30;--project-card-cells: 27;--framework-start: 2;--framework-span-cells: 56;--framework-col-1-start: 1;--framework-col-2-start: 19;--framework-col-3-start: 37;--framework-card-cells: 17;--framework-head-cells: 30;--contact-label-cells: 3;--preview-height-cells: 15;--space-1: calc(var(--grid-unit) * 1);--space-2: calc(var(--grid-unit) * 2);--space-3: calc(var(--grid-unit) * 3);--space-4: calc(var(--grid-unit) * 4);--page-span: calc(var(--grid-unit) * var(--layout-columns));--hero-span: calc(var(--grid-unit) * var(--hero-cells));--intro-main-span: calc(var(--grid-unit) * var(--intro-main-cells));--intro-contact-span: calc(var(--grid-unit) * var(--intro-contact-cells));--intro-span: calc(var(--grid-unit) * var(--intro-span-cells));--projects-span: calc(var(--grid-unit) * var(--projects-span-cells));--project-card-span: calc(var(--grid-unit) * var(--project-card-cells));--framework-span: calc(var(--grid-unit) * var(--framework-span-cells));--framework-card-span: calc(var(--grid-unit) * var(--framework-card-cells));--framework-head-span: calc(var(--grid-unit) * var(--framework-head-cells));--contact-label-span: calc(var(--grid-unit) * var(--contact-label-cells));--preview-height: calc(var(--grid-unit) * var(--preview-height-cells));--page-grid-line: #8ecfff17;--page-grid-major: #8ecfff2b;--panel-grid-line: #8fcfff14;--panel-grid-major: #8fcfff1f;--page-dark: #061321;--panel-intro-top: #143452c7;--panel-intro-bottom: #112f4bcb;--panel-card-top: #123652c7;--panel-card-bottom: #102d47cb;--panel-framework-top: #12314fc7;--panel-framework-bottom: #0f2a43cb;--panel-framework-card-top: #163d61bf;--panel-framework-card-bottom: #11314dc4}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:Trebuchet MS,Segoe UI,Tahoma,sans-serif;overflow-x:hidden;background-color:var(--page-dark);background-image:linear-gradient(var(--page-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-line) 1px,transparent 1px),linear-gradient(var(--page-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-major) 1px,transparent 1px),linear-gradient(var(--page-dark),var(--page-dark));background-size:var(--grid-unit) var(--grid-unit),var(--grid-unit) var(--grid-unit),var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step),100% 100%;background-position:0 0,0 0,0 0,0 0,0 0}.intro-card,.card,.framework,.framework-card{position:relative;border:1px solid var(--ring);border-radius:var(--radius);background-size:auto,var(--grid-unit) var(--grid-unit),var(--grid-unit) var(--grid-unit),var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step);background-position:0 0,0 0,0 0,0 0,0 0;background-attachment:scroll,scroll,scroll,scroll,scroll}.page{position:relative;display:grid;grid-template-columns:repeat(var(--layout-columns),var(--grid-unit));width:var(--page-span);margin:0;margin-left:var(--page-margin-left, 0px);padding-top:calc(var(--grid-unit) * var(--layout-top-pad-cells));padding-bottom:calc(var(--grid-unit) * var(--layout-bottom-pad-cells));row-gap:var(--space-1);transform:translate3d(0,var(--foreground-drift-y),0);will-change:transform}.hero{grid-column:var(--hero-start) / span var(--hero-cells);padding-bottom:calc(var(--grid-unit) * .5)}.intro-grid{display:grid;grid-column:var(--intro-start) / span var(--intro-span-cells);grid-template-columns:repeat(var(--intro-span-cells),var(--grid-unit));align-items:start;column-gap:0;row-gap:var(--space-1)}.intro-grid>.intro-card:not(.contact-card){grid-column:var(--intro-main-start) / span var(--intro-main-cells)}.intro-grid>.contact-card{grid-column:var(--intro-contact-start) / span var(--intro-contact-cells)}.grid{display:grid;grid-column:var(--projects-start) / span var(--projects-span-cells);grid-template-columns:repeat(var(--projects-span-cells),var(--grid-unit));column-gap:0;margin-top:var(--space-2);row-gap:var(--space-2)}.grid>.card:nth-child(odd){grid-column:var(--project-left-start) / span var(--project-card-cells)}.grid>.card:nth-child(2n){grid-column:var(--project-right-start) / span var(--project-card-cells)}.framework{grid-column:var(--framework-start) / span var(--framework-span-cells);margin-top:var(--space-2);padding:calc(var(--space-1) - 1px);box-shadow:0 22px 30px -27px #000000f2}.framework-grid{display:grid;grid-template-columns:repeat(var(--framework-inner-span-cells),var(--grid-unit));column-gap:0;row-gap:var(--space-1);margin-top:var(--space-1)}.framework-grid>.framework-card:nth-child(3n+1){grid-column:var(--framework-col-1-start) / span var(--framework-card-cells)}.framework-grid>.framework-card:nth-child(3n+2){grid-column:var(--framework-col-2-start) / span var(--framework-card-cells)}.framework-grid>.framework-card:nth-child(3n){grid-column:var(--framework-col-3-start) / span var(--framework-card-cells)}h1{margin:0 0 var(--space-1);font-size:clamp(3rem,2.1rem + 3.2vw,5rem);line-height:1.05;letter-spacing:.01em}h2{margin:0 0 var(--space-1);font-size:1.14rem}.eyebrow{margin:0;color:#9cd2ff;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-weight:700}.subhead{margin:0;color:var(--muted);font-size:1.12rem}.url{margin:0 0 var(--space-1);color:var(--muted);font-size:.92rem}.section-tag{position:absolute;z-index:3;margin:0;font-size:.8rem;font-family:Courier New,Courier,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.32;line-height:1;white-space:nowrap;pointer-events:none}.section-tag--container,.section-tag--project{top:calc(var(--grid-unit) * -.96);left:calc(var(--grid-unit) * 1.08)}.left-rail{position:absolute;left:max(calc(var(--grid-unit) * -4.5),calc(8px - var(--page-margin-left)));top:0;bottom:0;width:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;justify-content:space-evenly}.rail-text,.rail-scale{position:relative;transform:rotate(-90deg);transform-origin:left center;font-family:Courier New,Courier,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.25;margin:0;white-space:nowrap}.rail-text--prod,.rail-text--self,.rail-text--circa{top:auto}.rail-scale{display:inline-flex;align-items:center;gap:calc(var(--grid-unit) * .5)}.rail-scale-line{display:inline-block;flex:0 0 auto;width:calc(var(--grid-unit) * 3);height:0;border-top:2px solid currentColor;opacity:.95}.rail-scale-label{line-height:1}.rail-text--live{top:auto}.intro-card{padding:var(--space-1);box-shadow:0 18px 30px -24px #000000d9;background-image:linear-gradient(180deg,var(--panel-intro-top),var(--panel-intro-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.intro-card h2{margin:0 0 var(--space-1);font-size:1.15rem}.intro-card p{margin:0;color:#e0efff;font-size:1.04rem;line-height:1.45}.intro-card p+p{margin-top:var(--space-1)}.intro-line{color:var(--accent-strong);font-weight:700}.contact-list{margin:0;padding:0;list-style:none}.contact-list li{display:grid;grid-template-columns:var(--contact-label-span) 1fr;gap:var(--space-1);align-items:baseline;padding:0}.contact-list li+li{margin-top:var(--space-1)}.contact-list span{color:#9fbbd8;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}.contact-list a{color:#e6f2ff;font-size:1.03rem;text-decoration:none}.contact-list a:hover{color:#9ed1ff}.card{background-image:linear-gradient(175deg,var(--panel-card-top),var(--panel-card-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px);box-shadow:0 22px 32px -26px #000000db;overflow:visible;display:flex;flex-direction:column;transition:box-shadow .22s ease}.card:hover{box-shadow:0 24px 36px -22px #000}.preview-link{position:relative;display:block;block-size:var(--preview-height);border-bottom:1px solid var(--ring)}.preview{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:var(--space-1)}.intro-card .section-tag,.framework .section-tag,.preview-link .section-tag{font-size:.8rem;color:var(--accent);line-height:1}.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-1)}.type-pill{display:inline-block;margin:0;padding:calc(var(--grid-unit) / 4) calc(var(--grid-unit) / 2);border-radius:999px;border:1px solid #8fcbff40;background:#8fcbff24;color:#9fd2ff;font-size:.78rem;font-weight:700}.type-pill.soft{background:#8fcbff14;color:#c8e6ff}.meta-links{display:flex;flex-wrap:wrap;gap:0;margin:calc(var(--grid-unit) * .85) 0 calc(var(--grid-unit) * .85)}.meta-links .action+.action:before{content:"/";margin-right:calc(var(--grid-unit) * .5);color:var(--accent);opacity:.9}.meta-links .action+.action{margin-left:calc(var(--grid-unit) * .5)}.action{display:inline-block;text-decoration:none;font-weight:700;color:var(--accent)}.secondary{color:var(--accent)}.action:hover{color:var(--accent-strong)}.detail,.detail.open{padding-top:var(--space-1);opacity:1;max-height:none;overflow:visible}.detail.structure-block{padding-top:0}.detail.structure-block h3{margin-top:0;color:#c7e4ff}.structure-tree{margin:0;padding:var(--space-1);border:1px solid #8fcbff33;background:#081727bf;color:#d5eaff;font-family:Courier New,Courier,monospace;font-size:.72rem;line-height:1.45;white-space:pre;overflow-x:auto}.detail h3{margin:var(--space-1) 0;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:#c7e4ff}.detail p{margin:0;color:#e3f0ff;font-size:1.03rem;line-height:1.45}.detail ul{margin:0;padding-left:var(--space-1);color:#e3f0ff;font-size:1.01rem;line-height:1.4}.detail li+li{margin-top:var(--space-1)}.framework{background-image:linear-gradient(155deg,var(--panel-framework-top),var(--panel-framework-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.framework-head{max-width:var(--framework-head-span)}.framework-head h2{margin:0 0 var(--space-1);font-size:1.45rem}.framework-head p{margin:0;color:var(--muted);font-size:1.02rem}.framework-card{padding:var(--space-1);background-image:linear-gradient(170deg,var(--panel-framework-card-top),var(--panel-framework-card-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.framework-card h3{margin:0 0 var(--space-1);font-size:1.08rem;color:#deefff}.framework-card ul{margin:0;padding-left:var(--space-1);color:#e2f0ff;font-size:1.02rem;line-height:1.35}.framework-card li+li{margin-top:var(--space-1)}.reveal{opacity:1}[data-bp=tablet] .grid>.card,[data-bp=small-tablet] .grid>.card{grid-column:1 / span var(--project-card-cells)}[data-bp=tablet] .framework-grid>.framework-card:nth-child(odd),[data-bp=small-tablet] .framework-grid>.framework-card:nth-child(odd){grid-column:var(--framework-col-1-start) / span var(--framework-card-cells)}[data-bp=tablet] .framework-grid>.framework-card:nth-child(2n),[data-bp=small-tablet] .framework-grid>.framework-card:nth-child(2n){grid-column:var(--framework-col-2-start) / span var(--framework-card-cells)}[data-bp=mobile] .grid>.card{grid-column:1 / span var(--project-card-cells)}[data-bp=mobile] .framework-grid>.framework-card{grid-column:1 / span var(--framework-card-cells)}@media (max-width: 768px){.left-rail{position:fixed;left:12px;top:0;bottom:0;width:0;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-evenly;z-index:6}.rail-text,.rail-scale{transform:rotate(-90deg);transform-origin:left top;position:relative;left:0;font-size:.5rem;letter-spacing:.1em}.rail-scale{gap:calc(var(--grid-unit) * .25)}.detail p,.detail ul,.framework-card ul{font-size:.96rem}}.page:after{content:"GRID UNIT : 24PX  ·  SCALE : 1 : 1  ·  DataFright Portfolio";grid-column:1 / -1;display:block;text-align:right;font-size:.6rem;font-family:Courier New,Courier,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.25;padding-top:var(--space-1)}