@font-face{font-family:Jakarta;src:url('./fonts/plus-jakarta-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Jakarta;src:url('./fonts/plus-jakarta-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Jakarta;src:url('./fonts/plus-jakarta-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#111216;--body:#57595e;--muted:#96979b;--line:#e8e8e8;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--font:Jakarta,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);font-family:var(--font);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:#fff}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #42474d;outline-offset:5px}::selection{background:#dededb}img{display:block;max-width:100%}.content-width{width:min(1060px,calc(100% - 112px));margin-inline:auto}.muted{color:var(--muted)}.eyebrow{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:1.3px;line-height:1.6;color:#8a8b8f}.skip-link{position:fixed;top:8px;left:24px;z-index:5;background:#fff;padding:12px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.ruler{pointer-events:none;position:absolute;color:#b7b7ba;font-family:var(--mono);font-size:8px;user-select:none;z-index:-1}.ruler-top{top:0;left:16px;right:0;height:20px;display:flex;gap:0;overflow:hidden;border-bottom:1px solid #f2f2f2;background:repeating-linear-gradient(90deg,#e9e9eb 0 1px,transparent 1px 10px);background-size:100% 5px;background-position:bottom;background-repeat:no}.ruler-top span{min-width:100px;padding-left:0;transform:translateX(-3px)}.ruler-left{top:20px;left:0;width:18px;height:680px;border-right:1px solid #efefef;background:repeating-linear-gradient(#e9e9eb 0 1px,transparent 1px 10px);background-size:5px 100%;background-position:right;background-repeat:no}.drawing-guides{position:absolute;top:0;bottom:0;left:max(32px,calc((100% - 1188px)/2));right:max(32px,calc((100% - 1188px)/2));border-inline:1px solid #f0f0f0;pointer-events:none;z-index:-1}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;padding-top:10px;font-size:12px;color:#5e6064}.wordmark{font-weight:700;display:inline-flex;align-items:center;gap:8px}.identity-mark{width:14px;height:14px;background:#111216;border-radius:4px}.site-header nav{display:flex;gap:28px}.site-header nav a{transition:color .18s}.site-header nav a:hover{color:#111}.site-header nav span{padding-left:4px;color:#888}.intro{padding-top:79px;padding-bottom:56px;position:relative}.section-rule{position:absolute;top:0;left:-28px;right:-28px;border-top:1px solid #dedee0;height:1px}.section-rule:before,.section-rule:after{content:'+';position:absolute;font-family:var(--mono);font-size:12px;top:-8px;color:#aeb0b2}.section-rule:before{left:-4px}.section-rule:after{right:-4px}.section-rule span{position:absolute;top:-7px;left:30px;padding-inline:8px;background:#fff;font:9px var(--mono);letter-spacing:.5px;color:#9b9b9f}.intro>.eyebrow{margin:0 0 26px}.hello{font-size:15px;color:#66676c;margin:0 0 0}.intro h1{font-size:58px;line-height:1.17;letter-spacing:-3.6px;font-weight:700;margin:1px 0 6px}.intro-subtitle{font-size:16px;color:#96979c;margin:0}.intro-copy{font-size:18px;line-height:1.85;color:var(--body);margin-top:27px;letter-spacing:.1px}.intro-copy p{margin:0 0 16px}.updated{font-size:12px;color:#96979c;margin:25px 0 0}.work-section{scroll-margin-top:28px}.work-heading{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);color:#909196;letter-spacing:.15px;padding-bottom:17px}.work-heading h2{font:inherit;margin:0}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e8e8e8;position:relative}.project-card{border:0;padding:0;margin:0;aspect-ratio:16/10;position:relative;overflow:hidden;text-align:left;background:var(--card-bg,#eee);isolation:isolate}.project-card>.cover{width:100%;height:100%;object-fit:var(--cover-fit,cover);object-position:var(--cover-position,50% 50%);transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:auto}.project-card:hover>.cover,.project-card:focus-visible>.cover{transform:scale(1.035)}.project-card:focus-visible{outline-offset:-5px;z-index:1;outline-color:#fff}.project-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,rgb(0 0 0 / .13));opacity:0;transition:opacity .25s;pointer-events:none}.card-info{position:absolute;left:20px;right:20px;bottom:20px;display:flex;gap:14px;align-items:center;justify-content:space-between;opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s;z-index:1}.card-label{background:rgb(255 255 255 / .93);border:1px solid rgb(255 255 255 / .45);backdrop-filter:blur(16px);border-radius:4px;display:flex;gap:12px;align-items:center;padding:10px 13px;font-size:12px;color:#222}.card-number{font:9px var(--mono);color:#888}.card-arrow{width:33px;height:33px;display:grid;place-items:center;background:rgb(255 255 255 / .93);border-radius:50%;font-size:17px;color:#222}.project-card:hover .card-info,.project-card:focus-visible .card-info{opacity:1;transform:translateY(0)}.project-card:hover:after,.project-card:focus-visible:after{opacity:1}.project-card:last-child:nth-child(3n + 1){grid-column:1/-1;aspect-ratio:3/1}.project-card:last-child:nth-child(3n + 1)>.cover{object-position:50% 58%}.load-message{grid-column:1/-1;text-align:center;padding:100px 24px;background:#fafafa;color:#777;font-size:14px;line-height:2}.site-footer{padding-top:76px}.footer-note{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}.footer-note p{font-size:27px;line-height:1.5;letter-spacing:-.8px;margin:0 0 74px;min-width:40%}.footer-note p span{color:#a1a1a5}.footer-bottom{border-top:1px solid #dedee0;padding:21px 0 30px;display:flex;justify-content:space-between;gap:20px;font:10px var(--mono);color:#898a8e}.footer-bottom a:hover{color:#111}
.project-dialog{width:min(1480px,calc(100% - 80px));height:calc(100dvh - 56px);max-width:none;max-height:none;inset:0;margin:auto;padding:0;border:1px solid rgb(0 0 0 / .08);border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 24px 100px rgb(0 0 0 / .24);overflow:hidden}.project-dialog::backdrop{background:rgb(12 14 17 / .54);backdrop-filter:blur(7px)}.project-dialog[open]{display:flex;flex-direction:column;animation:dialog-in .28s cubic-bezier(.16,1,.3,1)}@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.987)}to{opacity:1;transform:none}}.case-toolbar{height:64px;flex-shrink:0;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #efefef;background:#fff;z-index:2}.close-button{display:flex;align-items:center;gap:12px;border:0;background:transparent;font-size:12px;color:#626368;padding:8px 0 8px 12px}.close-button kbd{font:9px var(--mono);padding:3px 5px;border:1px solid #dedee0;border-radius:3px;color:#999}.close-cross{font-size:26px;color:#333;font-weight:400;line-height:1}.close-button:hover{color:#111}.case-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1;min-height:0;outline:none}.case-heading{padding:52px 6.5% 42px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}.case-heading h2{font-size:clamp(28px,3.5vw,49px);line-height:1.15;letter-spacing:-1.8px;margin:8px 0 0;outline:none}.case-heading .eyebrow{margin:0}.case-description{color:#777;line-height:1.85;font-size:13px;margin:0;max-width:460px}.case-scroll{container-type:inline-size}.case-gallery{display:grid;gap:3.125cqw;background:var(--gallery-bg,#e9e9e7);padding:0;--plate-radius:0px}.case-block{margin:0;min-width:0;overflow:hidden}.case-block>img{width:100%;height:auto}.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:3.125cqw;align-items:start}.case-pair figure{margin:0;overflow:hidden;background:var(--plate-bg,#fff);border-radius:var(--plate-radius)}.case-pair img{width:100%;height:auto}.case-pair.contained{align-items:stretch}.case-pair.contained figure{aspect-ratio:930/1080;display:flex;align-items:center;justify-content:center;padding:5%}.case-pair.contained img{width:100%;max-height:100%;object-fit:contain}.case-stage{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--plate-bg,#fff);padding:var(--stage-padding,0)}.case-stage>img{width:100%;height:100%;object-fit:contain}.case-introduction{min-height:0;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;background-color:#fafafa;background-image:linear-gradient(#ededed 1px,transparent 1px),linear-gradient(90deg,#ededed 1px,transparent 1px);background-size:42px 42px}.case-introduction .eyebrow{font-size:clamp(9px,.85vw,12px)}.case-introduction h3{font-size:clamp(20px,3.2vw,48px);font-weight:400;letter-spacing:-1.5px;line-height:1.25;margin:12px 0 24px}.case-introduction p:last-child{font-size:clamp(11px,1.2vw,17px);color:#686a6c;line-height:1.9;max-width:600px;margin:0}.case-footer{background:#fff;padding:48px 6.5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.case-footer p{font-size:12px;color:#8a8b8e;line-height:1.8;margin:0}.next-project{border:0;padding:12px 0 12px 18px;background:transparent;text-align:right;color:#333}.next-project small{font:9px var(--mono);letter-spacing:1px;color:#999;display:block;margin-bottom:8px}.next-project span{font-size:20px;letter-spacing:-.5px}.next-project:hover span{color:#777}.case-notice{padding:16px;text-align:center;background:#fff7ed;color:#8a583b;font-size:12px;line-height:1.6}
@media(min-width:1680px){.content-width{width:1060px}.intro{padding-top:90px;padding-bottom:72px}.project-card{aspect-ratio:16/9}}
@media(max-width:900px){.content-width{width:calc(100% - 80px)}.intro{padding-top:65px}.project-card{aspect-ratio:4/3}.card-info{opacity:1;transform:none;left:14px;right:14px;bottom:14px}.card-label{font-size:10px;padding:8px 10px;gap:8px}.card-arrow{width:28px;height:28px}.case-heading{gap:22px;padding:34px 5%}.case-toolbar{padding-inline:22px}.project-dialog{width:calc(100% - 32px);height:calc(100dvh - 32px)}.case-description{font-size:12px}.footer-note p{min-width:47%}}
@media(max-width:600px){.content-width{width:calc(100% - 48px)}.ruler-top{height:12px;font-size:6px}.ruler-left{width:9px;height:620px}.drawing-guides{left:12px;right:12px}.site-header{height:80px;padding-top:5px;font-size:11px}.site-header nav{gap:20px}.identity-mark{width:12px;height:12px}.intro{padding-top:51px;padding-bottom:43px}.section-rule{left:-12px;right:-12px}.section-rule span{left:16px;font-size:7px}.intro>.eyebrow{font-size:8px;margin-bottom:26px}.hello{font-size:14px}.intro h1{font-size:50px;letter-spacing:-3px}.intro-subtitle{font-size:13px}.intro-copy{font-size:15px;line-height:1.9;margin-top:24px}.intro-copy p{margin-bottom:14px}.desktop-break{display:none}.updated{font-size:10px;margin-top:23px}.work-heading{font-size:8px;gap:12px;line-height:1.7;padding-bottom:14px}.work-heading>span{max-width:130px;text-align:right}.project-grid{grid-template-columns:1fr}.project-card{aspect-ratio:16/10}.project-card:last-child:nth-child(3n + 1){aspect-ratio:16/10}.project-card:last-child:nth-child(3n + 1)>.cover{object-position:50% 50%}.card-info{left:16px;right:16px;bottom:16px}.card-label{font-size:11px}.site-footer{padding-top:43px}.footer-note{display:block}.footer-note .eyebrow{font-size:8px}.footer-note p{font-size:23px;line-height:1.6;letter-spacing:-.5px;margin:23px 0 45px}.footer-bottom{font-size:8px;padding-bottom:26px;flex-wrap:wrap;gap:20px}.footer-bottom>span:last-child{display:none}.project-dialog{width:100%;height:100dvh;border:0;border-radius:0}.case-toolbar{height:57px;padding:0 20px}.case-toolbar>.eyebrow{font-size:8px;letter-spacing:.7px}.close-button{font-size:10px}.close-button kbd{display:none}.case-heading{display:block;padding:31px 24px 28px}.case-heading h2{font-size:33px;letter-spacing:-1.2px;margin:10px 0 16px}.case-heading .eyebrow{font-size:8px}.case-description{font-size:12px;line-height:1.9}.case-gallery{gap:12px}.case-pair{gap:12px}.case-pair.contained{grid-template-columns:1fr 1fr}.case-introduction{aspect-ratio:auto;min-height:300px;padding:35px 24px;background-size:30px 30px}.case-introduction h3{font-size:27px;letter-spacing:-1px;margin-bottom:18px}.case-introduction p:last-child{font-size:12px;line-height:1.85}.case-footer{padding:30px 24px;align-items:flex-start}.case-footer p{font-size:9px;max-width:140px}.next-project small{font-size:8px}.next-project span{font-size:15px}.case-stage{min-height:210px}.case-scroll{scrollbar-gutter:auto}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Additional web sections follow the complete original case. */
.case-landing{margin:0;background:#fff}
.landing-page{margin:0}
.landing-page>img{width:100%;height:auto;max-height:none;object-fit:initial}
.landing-caption{padding:20px 6.5%;border-top:1px solid #ececec;font:10px var(--mono);color:#8a8b8f;letter-spacing:.7px}
.case-section-heading{padding:40px 6.5% 12px}
.case-section-heading .eyebrow{margin:0 0 8px}
.case-section-heading p:last-child{font-size:13px;color:#777;line-height:1.8;margin:0}
.case-stage:first-child{aspect-ratio:auto;min-height:0;padding:0}
.case-stage:first-child>img{height:auto}
@media(max-width:600px){.case-section-heading{padding:25px 24px 8px}.case-section-heading p:last-child{font-size:11px}.landing-caption{padding:14px 24px;font-size:9px}}
#project-title:focus{outline:none}
.case-video{background:#111}
.case-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.video-caption{display:flex;justify-content:space-between;gap:20px;padding:18px 6.5%;background:#fff;font:10px var(--mono);color:#777;line-height:1.6}
.case-video video:focus-visible{outline:2px solid #777;outline-offset:-3px}
@media(max-width:600px){.video-caption{padding:14px 24px;font-size:9px}.case-pair.storyboard{grid-template-columns:1fr}}

/* Raft retains the existing Figma case: 60px gaps and 30px corners at 1920px. */
.case-gallery[data-layout="figma-raft"]{gap:3.125cqw;--plate-radius:1.5625cqw}
.case-gallery[data-layout="figma-raft"]>.case-block:not(.case-pair){border-radius:var(--plate-radius)}
.case-gallery[data-layout="figma-raft"]>.case-pair{gap:3.125cqw}
.case-gallery[data-layout="figma-raft"]>.case-pair figure{background:transparent}

/* imdaryl reference calibration: white paper, type and drawing scale. */
@font-face{font-family:'JetBrains Mono';src:url('./fonts/jetbrains-mono-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#0a0c10;--body:#565b64;--muted:#8b909a;--line:rgba(16,20,28,.1);--line-soft:rgba(16,20,28,.06);--rail-soft:rgba(140,146,158,.18);--rail-tick:rgba(140,146,158,.55);--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace}
body{position:relative;background:#fff;-webkit-font-smoothing:antialiased}
.content-width{width:min(1004px,calc(100% - 56px))}
.site-header{height:auto;padding:46px 0 24px;font-size:13.5px;line-height:1.62;color:var(--body)}
.wordmark{letter-spacing:-.405px}
.identity-mark{width:14px;height:14px;border-radius:4px;background:var(--ink)}
.intro{padding-top:86px;padding-bottom:48px}
.eyebrow{font-size:9.5px;letter-spacing:.95px;line-height:1.62;color:var(--muted)}
.intro>.eyebrow{margin:0 0 24px;display:flex;align-items:center;gap:7px}
.intro>.eyebrow>span{font-size:0;width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);margin-inline:1px}
.hello{font-size:16.5px;font-weight:500;line-height:1.2;letter-spacing:-.198px;color:var(--body);margin:0 0 1px -.08em;padding-bottom:3px}
.intro h1{font-size:58px;line-height:1.04;letter-spacing:-.045em;font-weight:700;margin:0 0 -12px -.07em;padding-bottom:12px}
.intro-subtitle{font-size:16.5px;line-height:1.4;letter-spacing:-.198px;color:var(--muted);margin:8px 0 0}
.intro-copy{font-size:17.5px;line-height:1.6;letter-spacing:-.0775px;max-width:640.5px;margin-top:24px;color:var(--body)}
.intro-copy p{margin:0 0 16px}
.intro-copy p:last-child{margin-bottom:0}
.updated{font-size:13px;line-height:1.62;color:var(--muted);margin:16px 0 0}
.section-rule{top:6px;left:-28px;right:-28px;border-color:var(--line)}
.section-rule:before,.section-rule:after{content:'';top:-6px;width:11px;height:11px;background:linear-gradient(var(--rail-tick),var(--rail-tick)) center/11px 1px no-repeat,linear-gradient(var(--rail-tick),var(--rail-tick)) center/1px 11px no-repeat}
.section-rule:before{left:-41px}.section-rule:after{right:-41px}
.section-rule span{top:-7px;left:0;padding:0 10px 0 0;color:var(--muted);font:9.5px/14px var(--mono);letter-spacing:.57px;background:#fff}
.ruler{z-index:2;color:var(--muted);font:9px/1 var(--mono)}
.ruler-top{left:0;right:0;top:0;height:19px;display:block;border-bottom:1px solid var(--line-soft);background:repeating-linear-gradient(90deg,var(--rail-soft) 0 1px,transparent 1px 10px);background-position:var(--ruler-origin,0px) bottom;background-size:auto 6px;background-repeat:repeat-x}
.ruler-top span{position:absolute;top:2px;min-width:0;padding:0 0 8px 3px;transform:none;opacity:.8}
.ruler-top span:before{content:'';position:absolute;left:0;bottom:0;width:1px;height:7px;background:var(--rail-tick)}
.ruler-left{left:0;top:0;width:19px;border-right:1px solid var(--line-soft);background:repeating-linear-gradient(var(--rail-soft) 0 1px,transparent 1px 10px);background-size:6px auto;background-position:right top;background-repeat:repeat-y}
.ruler-left span{position:absolute;right:0;writing-mode:vertical-rl;padding:3px 8px 0 0;opacity:.8}
.ruler-left span:before{content:'';position:absolute;right:0;top:0;width:7px;height:1px;background:var(--rail-tick)}
.drawing-guides{left:calc(50% - 566px);right:calc(50% - 566px);z-index:1;border-color:var(--rail-soft)}
.drawing-guides:before,.drawing-guides:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}
.drawing-guides:before{left:-51px}.drawing-guides:after{right:-51px}
.site-footer{background:#fff}
.footer-bottom{border-color:var(--line);color:var(--muted)}
@media(max-width:1279px){.drawing-guides{left:9px;right:9px}.drawing-guides:before,.drawing-guides:after{display:none}.section-rule:before,.section-rule:after{display:none}}
@media(max-width:760px){
  .content-width{width:calc(100% - 48px)}
  .ruler,.drawing-guides{display:none}
  .site-header{padding:24px 0;font-size:13.5px}
  .site-header nav{gap:20px}
  .intro{padding-top:56px;padding-bottom:48px}
  .section-rule{left:0;right:0;border-color:var(--line-soft)}
  .section-rule span{display:none}
  .intro>.eyebrow{font-size:9.5px;margin-bottom:16px}
  .hello{font-size:13.5px;letter-spacing:-.162px}
  .intro h1{font-size:clamp(26px,7vw,32px);letter-spacing:-.045em}
  .intro-subtitle{font-size:13.5px;letter-spacing:-.162px}
  .intro-copy{font-size:14.5px;line-height:1.55;letter-spacing:-.0725px;margin-top:24px}
  .intro-copy p{margin-bottom:16px}
  .updated{font-size:12px;margin-top:16px}
  .desktop-break{display:none}
}
@media(min-width:761px) and (hover:hover){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}}
@media(min-width:761px){.intro:before{content:'';position:absolute;top:6px;left:calc(50% - 50vw);width:100vw;height:1px;background:var(--line-soft);pointer-events:none}}