:root{color:#172033;text-rendering:optimizelegibility;--ink:#172033;--muted:#626d7f;--soft:#8791a3;--paper:#fbfcff;--paper-edge:#d8dee9;--surface:#fff;--border:#ccd4e0;--shadow:0 22px 65px #1a25372e;--p5-pink:#ed225d;--green:#16815d;--blue:#2f5fbd;--amber:#a45d00;background:#e9edf4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.35}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button{border:1px solid var(--border);color:var(--ink);cursor:pointer;font:inherit;background:#fff;border-radius:6px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 13px;font-weight:760;display:inline-flex}button:hover{background:#f3f6fb}button:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #ed225d52}h1,h2,p{margin:0}h1{letter-spacing:0;font-size:19px;font-weight:880}h2{color:var(--ink);letter-spacing:0;font-size:clamp(28px,4vw,48px);font-weight:880;line-height:1}.skip-link{background:var(--ink);color:#fff;z-index:20;padding:8px 10px;position:absolute;top:-48px;left:14px}.skip-link:focus{top:12px}.portfolio-shell{background-color:#e9edf4;background-image:linear-gradient(90deg,#1720330d 1px,#0000 1px),linear-gradient(#1720330a 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:32px 32px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:100vh}.site-header{border-bottom:1px solid var(--border);z-index:10;background:#fffffff0;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:12px;min-height:86px;padding:14px 18px;display:grid;position:sticky;top:0}.brand-block{align-items:center;gap:12px;min-width:0;display:flex}.brand-block p{color:var(--muted);font-size:13px;font-weight:720}.brand-mark{background:var(--p5-pink);color:#fff;flex:0 0 44px;justify-content:center;align-items:center;width:44px;height:44px;font-weight:920;display:inline-flex}.project-strip{align-items:center;gap:8px;min-width:0;padding-bottom:4px;display:flex;overflow-x:auto}.project-tab{border-color:#d4dbe7;flex:none;min-width:152px;position:relative}.project-tab span{color:var(--soft);font-size:12px;font-weight:850}.project-tab.active{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent);color:var(--accent)}.book-route,.project-route{padding:28px}.book-stage{perspective:1700px;grid-template-columns:78px minmax(0,980px);justify-content:center;align-items:stretch;min-height:calc(100vh - 142px);display:grid}.book-spine{color:#fff;text-transform:uppercase;writing-mode:vertical-rl;background:#243145;border:1px solid #111827;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:620px;font-size:12px;font-weight:850;display:flex}.book-page{--accent:var(--p5-pink);background:linear-gradient(90deg, #17203312, transparent 42px), var(--paper);border:1px solid var(--paper-edge);box-shadow:var(--shadow);transform-origin:0;grid-template-rows:auto minmax(340px,1fr) auto auto;gap:18px;min-height:620px;padding:28px;display:grid;position:relative;overflow:hidden}.book-page:before{content:"";pointer-events:none;background:linear-gradient(90deg,#ffffffeb,#fff0),repeating-linear-gradient(#0000 0 15px,#1720331a 15px 16px);width:26px;position:absolute;inset:0 auto 0 0}.book-page:after{content:"";opacity:0;pointer-events:none;background:repeating-linear-gradient(#0000 0 12px,#17203333 12px 13px);width:18px;position:absolute;inset:0 0 0 auto}.book-page.is-ripping{animation:.72s cubic-bezier(.2,.8,.28,1) forwards rip-page}.book-page.is-ripping:after{opacity:1}@keyframes rip-page{0%{opacity:1;transform:rotateY(0)translate(0)translateY(0)}55%{opacity:.92;transform:rotateY(-18deg)translate(60px)translateY(-10px)}to{opacity:0;transform:rotateY(-46deg)translate(460px)translateY(-48px)rotate(4deg)}}.page-heading,.project-header{justify-content:space-between;align-items:start;gap:18px;min-width:0;display:flex}.folio-number{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin-bottom:7px;font-size:12px;font-weight:880}.tag-list{flex-wrap:wrap;justify-content:flex-end;gap:7px;margin:0;padding:0;list-style:none;display:flex}.tag-list li{background:color-mix(in srgb, var(--accent) 12%, #fff);border:1px solid color-mix(in srgb, var(--accent) 38%, #fff);color:color-mix(in srgb, var(--accent) 72%, #172033);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:820}.canvas-window,.project-canvas{background:#0f172a;border:1px solid #182235;min-height:0;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0d}.canvas-window iframe,.project-canvas iframe{border:0;width:100%;height:100%;display:block}.project-description{border-left:4px solid var(--accent);color:#2a3547;padding-left:16px;font-size:clamp(16px,2vw,20px);line-height:1.55}.page-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.rip-button{background:var(--accent);border-color:color-mix(in srgb, var(--accent) 85%, #111827);color:#fff}.rip-button:hover{background:color-mix(in srgb, var(--accent) 88%, #111827)}.project-page{--accent:var(--p5-pink);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);grid-template-rows:auto minmax(420px,calc(100vh - 310px)) auto;gap:18px;max-width:1180px;min-height:calc(100vh - 142px);margin:0 auto;padding:22px;display:grid}.project-header h2{font-size:clamp(30px,5vw,58px)}.detail-arrows{gap:8px;display:flex}.detail-arrows button{min-width:40px;padding:0}.project-notes{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;display:grid}.project-notes p{color:#2a3547;font-size:18px;line-height:1.55}@media (width<=980px){.site-header{grid-template-columns:1fr}.book-route,.project-route{padding:18px}.book-stage{grid-template-columns:minmax(0,1fr)}.book-spine{display:none}.book-page{min-height:calc(100vh - 160px)}.project-notes{grid-template-columns:1fr}.project-notes .tag-list{justify-content:flex-start}}@media (width<=680px){.site-header{padding:12px}.project-tab{min-width:130px}.book-route,.project-route{padding:12px}.book-page,.project-page{padding:16px}.book-page{grid-template-rows:auto minmax(300px,52vh) auto auto}.page-heading,.project-header{display:grid}.tag-list{justify-content:flex-start}.page-actions{grid-template-columns:1fr;display:grid}.project-page{grid-template-rows:auto minmax(340px,58vh) auto}}