.work-category{margin-top:56px}.category-title{font-size:30px;letter-spacing:-.045em;margin:0 0 24px}.category-note{color:var(--muted);font-size:16px;line-height:1.6;margin:-10px 0 24px}.design-feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:50px;border:1px solid var(--line);border-radius:24px;background:rgba(70,119,255,.04)}.design-feature h4{font-size:clamp(32px,4vw,55px);letter-spacing:-.055em;line-height:1.1;margin:20px 0}.design-feature p{color:var(--muted);font-size:17px;line-height:1.6;max-width:480px}.design-feature .story-hint{font-size:14px;color:var(--fg)}.story-preview{position:relative;min-height:320px;width:100%;border:0;background:none;color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.story-teaser{position:absolute;width:140px;height:250px;left:calc(50% + 4px);top:20px;transform:rotate(7deg);border-radius:16px;overflow:hidden;opacity:.45;filter:blur(5px);pointer-events:none}.story-teaser img{width:100%;height:100%;object-fit:cover}.story-avatar{position:relative;display:block;width:172px;height:172px;padding:5px;border-radius:50%;background:linear-gradient(35deg,#ffc44e,#ff435c 40%,#d923cd 72%,#784aff);box-shadow:0 10px 45px #0002;transition:transform .3s}.story-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 30%;border:5px solid var(--bg);border-radius:50%}.story-preview:hover .story-avatar{transform:scale(1.035)}.story-preview-label{position:relative;font-size:16px;font-weight:700;margin-top:18px}.story-preview-label span{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:5px}.story-preview:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:20px}
.story-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:12px;border:0;background:#101010f5;color:white}.story-viewer::backdrop{background:#101010}.story-viewer[open]{display:flex;align-items:center;justify-content:center}.story-frame{position:relative;height:min(100%,900px);aspect-ratio:9/16;max-width:100%;border-radius:14px;overflow:hidden;background:#000}.story-artwork{display:block;width:100%;height:100%;object-fit:contain}.story-top{position:absolute;inset:0 0 auto;padding:12px 12px 35px;background:linear-gradient(#0009,transparent)}.story-progress{height:3px;border-radius:3px;background:#ffffff50;overflow:hidden}.story-progress span{display:block;width:0;height:100%;background:white}.story-profile{display:flex;align-items:center;gap:10px;margin-top:12px}.story-profile img{width:33px;height:33px;border-radius:50%;object-fit:cover;object-position:center 30%}.story-profile strong{font-size:14px;margin-right:auto}.story-profile button{border:0;background:transparent;color:white;cursor:pointer;min-width:40px;min-height:40px;font:inherit;font-size:24px;border-radius:50%}.story-profile button:hover{background:#ffffff20}.story-profile button:focus-visible{outline:2px solid white}.story-caption{position:absolute;bottom:0;left:0;right:0;padding:22px 16px 16px;font-size:12px;background:linear-gradient(transparent,#0008);text-align:center;pointer-events:none}@media(max-width:620px){.design-feature{grid-template-columns:1fr;padding:28px;gap:16px}.story-preview{min-height:300px}.story-viewer{padding:0}.story-frame{border-radius:0;height:100%;max-height:100dvh}.work-category{margin-top:40px}}@media(prefers-reduced-motion:reduce){.story-avatar{transition:none}}
.story-progress-track{display:flex;gap:5px}.story-progress-track .story-progress{flex:1}.story-step{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:44px;border:1px solid #ffffff40;border-radius:999px;background:#0005;color:white;font-size:30px;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}.story-prev{left:10px}.story-next{right:10px}.story-step:hover{background:#0009}.story-step:disabled{opacity:0;pointer-events:none}.story-step:focus-visible{outline:2px solid white;outline-offset:3px}