
#hz-portfolio{--hp-bg:#050505;--hp-fg:#f1f1f1;--hp-dim:#999;--hp-line:#303030;background:var(--hp-bg);color:var(--hp-fg);font:14px/1.7 Arial,Helvetica,sans-serif;padding:0 5.35% 24px;box-sizing:border-box;color-scheme:dark;overflow-wrap:break-word;container-type:inline-size}
#hz-portfolio *{box-sizing:border-box}
#hz-portfolio [hidden]{display:none!important}
#hz-portfolio h1,#hz-portfolio h2,#hz-portfolio h3,#hz-portfolio p{margin:0}
#hz-portfolio button{font:inherit;border-radius:0;color:inherit}
#hz-portfolio .hp-header{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-right:90px}
#hz-portfolio .hp-brand{border:0;background:none;padding:8px 0;font-size:22px;font-weight:700;letter-spacing:-1.1px;white-space:nowrap}
#hz-portfolio .hp-brand span{color:#999;font-weight:400}
#hz-portfolio .hp-nav{display:flex;gap:24px;align-items:center}
#hz-portfolio .hp-nav button{background:none;border:0;padding:12px 0;color:#aaa;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-nav button:hover{color:#fff}
#hz-portfolio .hp-mono{font:11px/1.7 SFMono-Regular,Consolas,'Liberation Mono',monospace;letter-spacing:1.5px;text-transform:uppercase}
#hz-portfolio .hp-stage{position:relative;min-height:410px;display:flex;align-items:center;justify-content:center}
#hz-portfolio .hp-aperture{position:absolute;top:10px;bottom:0;left:35.5%;width:29%;overflow:hidden;border-inline:1px solid #242424;mask-image:linear-gradient(transparent,#000 13%,#000 82%,transparent);background:#090909;pointer-events:none}
#hz-portfolio .hp-rain{position:absolute;inset:-80px 0;display:flex;justify-content:space-around;gap:5px;opacity:.45;overflow:hidden}
#hz-portfolio .hp-rain span{white-space:nowrap;writing-mode:vertical-rl;text-orientation:upright;font:14px/2 SFMono-Regular,Consolas,'Liberation Mono',monospace;letter-spacing:10px;color:#999;animation:hp-fall 23s linear infinite;will-change:transform}
#hz-portfolio .hp-rain span:nth-child(2n){color:#555;animation-duration:31s;animation-delay:-14s}
#hz-portfolio .hp-rain span:nth-child(3n){color:#bbb;animation-delay:-19s;animation-duration:27s}
#hz-portfolio .hp-rain span:nth-child(4n){color:#444;animation-direction:reverse}
#hz-portfolio[data-paused=true] .hp-rain span{animation-play-state:paused}
#hz-portfolio .hp-title-frame{position:relative;width:100%;text-align:center;padding:34px 0}
#hz-portfolio .hp-eyebrow{letter-spacing:2.8px;color:#bdbdbd;font-size:11px;text-shadow:0 2px 10px #000}
#hz-portfolio .hp-title-frame h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(68px,15.1cqw,171px);line-height:1.05;letter-spacing:-.078em;font-weight:700;margin:12px 0 14px;padding-right:.055em;text-shadow:0 2px 25px #000}
#hz-portfolio .hp-signature{font:12px/1.7 SFMono-Regular,Consolas,'Liberation Mono',monospace;letter-spacing:3px;color:#b4b4b4;text-transform:uppercase;text-shadow:0 2px 10px #000}
#hz-portfolio .hp-cross{position:absolute;top:-6px;color:#777;font:22px/1 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-cross:first-child{left:0}#hz-portfolio .hp-cross:nth-child(2){right:0}
#hz-portfolio .hp-edge{position:absolute;left:-22px;top:50%;writing-mode:vertical-rl;white-space:nowrap;transform:translateY(-50%) rotate(180deg);color:#777;font:10px/1 SFMono-Regular,Consolas,'Liberation Mono',monospace;letter-spacing:1.8px}
#hz-portfolio .hp-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:18px 0 25px}
#hz-portfolio .hp-intro h2{font-size:34px;line-height:1.12;font-weight:400;letter-spacing:-1.3px}
#hz-portfolio .hp-intro p{font-size:13px;color:#999;max-width:255px;line-height:1.8}
#hz-portfolio .hp-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#hz-portfolio .hp-card{background:#0d0d0d;border:1px solid #303030;padding:25px 27px;text-align:left;min-width:0;transition:border-color .2s,background .2s;display:flex;flex-direction:column}
#hz-portfolio .hp-card:hover{background:#131313;border-color:#8a8a8a}
#hz-portfolio .hp-card-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#999;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-card h3{font-size:36px;line-height:1.08;font-weight:400;letter-spacing:-1.5px;margin:25px 0 15px}
#hz-portfolio .hp-card p{color:#999;font-size:13px;line-height:1.8;max-width:340px;margin-bottom:23px}
#hz-portfolio .hp-card-link{border-top:1px solid #303030;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace;margin-top:auto}
#hz-portfolio .hp-card-link svg{width:15px;height:15px}
#hz-portfolio .hp-labs{display:flex;gap:22px;align-items:center;padding:25px 0;border-bottom:1px solid #303030}
#hz-portfolio .hp-labs strong{font-size:39px;line-height:1;letter-spacing:-2px;font-weight:400}
#hz-portfolio .hp-labs-label{font-size:13px;color:#b0b0b0}
#hz-portfolio .hp-labs-label b{font-weight:400;color:#eee}
#hz-portfolio .hp-levels{margin-left:auto;display:flex;gap:17px;align-items:center;color:#aaa;font:11px/1.5 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-levels span+span{border-left:1px solid #444;padding-left:17px}
#hz-portfolio .hp-footer{padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#888;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-motion{border:0;background:none;color:#aaa;font:inherit;padding:5px 0;display:flex;align-items:center;gap:8px}
#hz-portfolio .hp-motion svg{width:12px;height:12px}
#hz-portfolio .hp-back{background:none;border:0;color:#aaa;display:flex;gap:10px;align-items:center;padding:14px 0;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-back svg{width:14px;height:14px}
#hz-portfolio .hp-course-heading{margin:10px 0 23px}
#hz-portfolio .hp-course-heading .hp-mono{color:#999;margin-bottom:10px}
#hz-portfolio .hp-course-heading h1{font-size:42px;line-height:1.08;font-weight:400;letter-spacing:-1.7px;max-width:650px}
#hz-portfolio .hp-study{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start}
#hz-portfolio .hp-study>div{min-width:0}
#hz-portfolio .hp-media{background:#0b0b0b;color:#f1f1f1;border:1px solid #494949;position:relative;width:100%;max-width:100%;min-width:0;aspect-ratio:1.45;min-height:275px;display:flex;align-items:center;justify-content:center;text-align:center;padding:48px 24px}
#hz-portfolio .hp-media[data-tone=white]{background:#eee;color:#111;border-color:#eee}
#hz-portfolio .hp-media .hp-media-title{font-size:38px;letter-spacing:-1.8px;line-height:1.1;font-weight:400}
#hz-portfolio .hp-media-top{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;gap:15px;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace;opacity:.7}
#hz-portfolio .hp-media-bottom{position:absolute;left:20px;right:20px;bottom:17px;display:flex;justify-content:space-between;gap:15px;font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace;opacity:.7}
#hz-portfolio .hp-summary{font-size:13px;color:#999;line-height:1.85;margin-top:15px;max-width:510px}
#hz-portfolio .hp-outline{border-top:1px solid #777;min-width:0}
#hz-portfolio .hp-outline-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 0}
#hz-portfolio .hp-outline-head h2{font-size:16px;line-height:1.4;font-weight:400;letter-spacing:-.2px}
#hz-portfolio .hp-outline-head span{font:11px/1.5 SFMono-Regular,Consolas,'Liberation Mono',monospace;color:#999}
#hz-portfolio .hp-module{border-top:1px solid #303030}
#hz-portfolio .hp-module:last-child{border-bottom:1px solid #303030}
#hz-portfolio .hp-module summary{list-style:none;padding:16px 0;display:flex;align-items:center;gap:11px;min-height:54px;font-size:13px;line-height:1.5}
#hz-portfolio .hp-module summary::-webkit-details-marker{display:none}
#hz-portfolio .hp-module summary .hp-index{font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace;color:#888;flex:none}
#hz-portfolio .hp-module summary b{font-weight:400}
#hz-portfolio .hp-module summary .hp-expand{margin-left:auto;font:17px/1 monospace;flex:none;color:#aaa}
#hz-portfolio .hp-module[open] summary .hp-expand{font-size:0}
#hz-portfolio .hp-module[open] summary .hp-expand:after{content:'−';font-size:17px}
#hz-portfolio .hp-topic-list{list-style:none;padding:0 0 12px 26px;margin:0}
#hz-portfolio .hp-topic-list li{display:grid;grid-template-columns:21px minmax(0,1fr);gap:10px;font-size:12px;color:#aaa;line-height:1.6;padding:6px 0}
#hz-portfolio .hp-topic-list li span:first-child{font:10px/1.9 SFMono-Regular,Consolas,'Liberation Mono',monospace;color:#888}
#hz-portfolio .hp-hermes{font-size:12px;color:#aaa;padding:7px 0 8px 31px;line-height:1.7}
#hz-portfolio .hp-community{background:#0d0d0d;border:1px solid #303030;padding:27px;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:22px}
#hz-portfolio .hp-community .hp-mono{color:#999;letter-spacing:1.5px}
#hz-portfolio .hp-community h2{font-size:35px;font-weight:400;letter-spacing:-1.3px;line-height:1.15;margin:9px 0}
#hz-portfolio .hp-community p{font-size:13px;color:#999;line-height:1.7;max-width:430px}
#hz-portfolio .hp-join{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:15px 18px;white-space:nowrap;border:1px solid #eee;background:#eee;color:#090909;font:11px/1.7 SFMono-Regular,Consolas,'Liberation Mono',monospace}
#hz-portfolio .hp-join:hover{background:#ccc;border-color:#ccc}
#hz-portfolio .hp-join svg{width:15px;height:15px}
#hz-portfolio .hp-community-action{min-width:180px}
#hz-portfolio .hp-notice{font:11px/1.6 SFMono-Regular,Consolas,'Liberation Mono',monospace!important;margin-top:10px!important;max-width:230px!important}
#hz-portfolio .hp-course-footer{border-top:1px solid #303030;margin-top:23px}
@keyframes hp-fall{from{transform:translateY(-70px)}to{transform:translateY(70px)}}
@media(max-width:760px){#hz-portfolio .hp-header{min-height:78px;padding-right:85px}#hz-portfolio .hp-nav{gap:16px}#hz-portfolio .hp-stage{min-height:350px}#hz-portfolio .hp-intro h2{font-size:30px}#hz-portfolio .hp-intro p{max-width:210px}#hz-portfolio .hp-card{padding:22px}#hz-portfolio .hp-card h3{font-size:31px}#hz-portfolio .hp-study{gap:20px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}#hz-portfolio .hp-media{min-height:295px;aspect-ratio:1}#hz-portfolio .hp-media .hp-media-title{font-size:31px}#hz-portfolio .hp-media-bottom span:last-child{display:none}#hz-portfolio .hp-community{padding:23px;gap:20px}#hz-portfolio .hp-community h2{font-size:30px}#hz-portfolio .hp-levels{gap:12px}#hz-portfolio .hp-levels span+span{padding-left:12px}}
@media(max-width:580px){#hz-portfolio{padding:0 22px 22px}#hz-portfolio .hp-header{min-height:98px;align-items:start;justify-content:center;flex-direction:column;gap:0;padding-right:80px}#hz-portfolio .hp-brand{font-size:21px;padding:5px 0}#hz-portfolio .hp-nav button{padding:8px 0}#hz-portfolio .hp-stage{min-height:300px}#hz-portfolio .hp-title-frame{padding:26px 0}#hz-portfolio .hp-title-frame h1{font-size:17.1cqw;letter-spacing:-.078em;margin:20px 0}#hz-portfolio .hp-eyebrow{font-size:11px;letter-spacing:1.5px;max-width:260px;margin:auto;line-height:1.8}#hz-portfolio .hp-signature{font-size:11px;letter-spacing:1.5px}#hz-portfolio .hp-aperture{left:29%;width:42%;top:0}#hz-portfolio .hp-rain span{font-size:12px;letter-spacing:8px}#hz-portfolio .hp-cross{font-size:17px;top:-12px}#hz-portfolio .hp-edge{left:-15px;font-size:9px;letter-spacing:1px}#hz-portfolio .hp-intro{display:block;padding:10px 0 24px}#hz-portfolio .hp-intro h2{font-size:31px}#hz-portfolio .hp-intro p{margin-top:13px;max-width:100%}#hz-portfolio .hp-cards{grid-template-columns:1fr;gap:13px}#hz-portfolio .hp-card{padding:23px}#hz-portfolio .hp-card h3{font-size:34px;margin:22px 0 14px}#hz-portfolio .hp-card p{margin-bottom:22px}#hz-portfolio .hp-labs{flex-wrap:wrap;gap:13px 17px;padding:24px 0}#hz-portfolio .hp-labs strong{font-size:36px}#hz-portfolio .hp-labs-label{font-size:12px}#hz-portfolio .hp-levels{width:100%;margin:0;gap:20px}#hz-portfolio .hp-levels span+span{padding-left:20px}#hz-portfolio .hp-course-heading h1{font-size:34px}#hz-portfolio .hp-course-heading{margin:8px 0 22px}#hz-portfolio .hp-study{grid-template-columns:1fr;gap:23px}#hz-portfolio .hp-media{min-height:265px;aspect-ratio:1.2;padding:45px 20px}#hz-portfolio .hp-media .hp-media-title{font-size:32px}#hz-portfolio .hp-outline-head{padding:17px 0}#hz-portfolio .hp-module summary{font-size:14px}#hz-portfolio .hp-topic-list li{font-size:13px;padding:7px 0}#hz-portfolio .hp-community{display:block;padding:24px}#hz-portfolio .hp-community h2{font-size:33px}#hz-portfolio .hp-community-action{margin-top:23px}#hz-portfolio .hp-join{width:100%}#hz-portfolio .hp-notice{max-width:100%!important}#hz-portfolio .hp-footer{align-items:start;gap:10px;flex-wrap:wrap}}
@media(pointer:coarse){#hz-portfolio .hp-header button,#hz-portfolio .hp-back,#hz-portfolio .hp-motion{min-height:44px}}
@media(max-width:580px){#hz-portfolio .hp-study{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#hz-portfolio .hp-rain span{animation:none}#hz-portfolio .hp-card{transition:none}}
