.web-preview{border:1px solid #ffffff24;border-radius:16px;overflow:hidden;background:#111;min-width:0}
.web-browserbar{display:flex;align-items:center;gap:10px;padding:10px 13px;color:#afbbb6;font:10px ui-monospace,monospace;background:#171b19;border-bottom:1px solid #ffffff18}
.web-browserbar i{width:6px;height:6px;border-radius:50%;background:#40dda1;box-shadow:10px 0 #b5b8aa,20px 0 #646d68;margin-right:22px;flex-shrink:0}
.web-browserbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-scroll{height:280px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;background:#101312;scrollbar-width:thin;scrollbar-color:#34f5a8 #202822;position:relative}
.web-scroll img{display:block;width:100%;height:auto;max-width:none;min-height:100%;object-fit:cover;object-position:top}
.web-scroll:focus-visible{outline:2px solid #34f5a8;outline-offset:-3px}
.web-preview-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;font-size:11px;border-top:1px solid #ffffff18}
.web-preview-tools button{padding:7px 11px;border:1px solid #34f5a850;border-radius:50px;color:#34f5a8;background:#34f5a810;cursor:pointer}
.web-preview-tools span{color:#aaa;font-size:10px}
.project-journey{border:1px solid #ffffff20;border-radius:20px;overflow:hidden;background:#101210;transition:border-color .25s}
.project-journey:hover{border-color:#34f5a870}.project-journey>.web-preview{border:0;border-radius:0}
.project-journey-copy{padding:22px}.project-journey-copy h3{font-size:23px;margin:7px 0}.project-journey-copy p{font-size:13px;color:#b4bbb7;line-height:1.7}.project-journey-copy a{display:inline-flex;margin-top:16px;color:#34f5a8;font-size:13px}.project-journey-type{font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;color:#7ecfb0}
.kre-cinema{margin:30px 0 46px;border:1px solid #ffffff26;border-radius:24px;overflow:hidden;background:#0b100d}
.kre-cinema-heading{padding:24px 28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.kre-cinema-heading h3{font-size:clamp(24px,4vw,42px);line-height:1.1;margin-top:8px}.kre-cinema-heading p{max-width:310px;font-size:13px;color:#a6b6ae;line-height:1.6}
.cinema-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050806;isolation:isolate}
.cinema-screen video{display:block;width:100%;height:100%;object-fit:cover}
.cinema-start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:linear-gradient(0deg,#0008,transparent 65%);color:#fff;font-size:15px;cursor:pointer;border:0;width:100%}
.cinema-start b{display:grid;place-items:center;width:74px;height:74px;border:1px solid #fff9;border-radius:50%;background:#10151088;backdrop-filter:blur(8px);font-size:25px;padding-left:3px}
.cinema-start[hidden],.cinema-montage[hidden]{display:none}
.cinema-montage{position:absolute;inset:0;background:#070c09;overflow:hidden;animation:cinema-reveal .45s ease-out}
.cinema-montage img{width:100%;height:auto;max-width:none;display:block;transform:translateY(var(--cinema-offset,0px));will-change:transform}
.cinema-title{position:absolute;bottom:0;left:0;right:0;padding:50px 25px 22px;background:linear-gradient(transparent,#030805ed);color:#fff;pointer-events:none}
.cinema-title small{font:10px ui-monospace,monospace;letter-spacing:.16em;color:#34f5a8}.cinema-title strong{display:block;font-size:clamp(20px,3vw,35px);margin-top:6px}
.cinema-controls{display:flex;align-items:center;gap:12px;padding:15px 20px;flex-wrap:wrap}.cinema-controls button{border:1px solid #ffffff38;border-radius:30px;padding:9px 16px;font-size:12px;color:#eaf6ee;cursor:pointer;background:#ffffff08}.cinema-controls a{margin-left:auto;color:#34f5a8;font-size:12px}.cinema-status{color:#afbab3;font-size:11px}.cinema-progress{height:3px;background:#1a2920}.cinema-progress span{display:block;height:100%;width:0;background:#34f5a8}
@keyframes cinema-reveal{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px){.web-scroll{height:260px}.kre-cinema-heading{display:block;padding:22px}.kre-cinema-heading p{margin-top:15px}.cinema-start b{width:54px;height:54px;font-size:19px}.cinema-start{font-size:12px}.cinema-title{padding:25px 14px 10px}.cinema-controls{padding:12px;gap:8px}.cinema-status{width:100%;order:3}.cinema-controls a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.cinema-montage{animation:none}.project-journey{transition:none}}

.project-work{margin-top:16px;border-top:1px solid #ffffff18;padding-top:12px}.project-work summary{cursor:pointer;color:#e2eee8;font-size:13px}.project-work ul{padding-left:18px;margin-top:12px;color:#b4bbb7;font-size:12px;line-height:1.7}.project-work li+li{margin-top:7px}