/* A fixed canvas lets the story change without moving its frame. */
.story-shot{position:relative;flex:1 1 0}
.story-shot>img{position:absolute;inset:0;display:block}
.card-build-trigger{border:0;background:none;padding:0;cursor:pointer}
.mini-generation{height:100%;min-height:0;display:grid;grid-template-rows:42px 106px minmax(0,1fr) 29px;color:#203c59;background:#fff;font-size:11px;text-align:left}
.mini-builder-header{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e4ecf5;background:#fcfdff}
.mini-builder-header>div{display:flex;align-items:center;gap:8px}
.mini-builder-header img,.mini-builder-cursor img{width:25px;height:25px;object-fit:contain}
.mini-builder-header strong{font-size:12px;font-weight:600}
.mini-state{display:inline-flex;align-items:center;gap:4px;color:#58837a;font-size:9px;margin-left:3px}
.mini-state:before{content:'';width:4px;height:4px;border-radius:50%;background:#45a684}
.mini-replay{display:grid;place-items:center;width:28px;height:28px;border:1px solid #e0e9f5;border-radius:8px;color:#477197;background:#fff;cursor:pointer}
.mini-replay:hover{color:#2359cc;background:#edf5ff}
.mini-replay .netz-icon{width:13px;height:13px}
.mini-conversation{padding:11px 14px 9px;background:linear-gradient(120deg,#f8fbff,#f0f6ff);overflow:hidden}
.mini-user-prompt{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#e2edff;border-radius:9px 9px 2px 9px;min-height:46px}
.mini-you{font-size:7px;letter-spacing:.08em;font-weight:600;color:#5274ad;line-height:17px;flex:none}
.mini-prompt{font-size:10px;line-height:15px;min-height:30px;margin:0;color:#264f82;max-width:none}
.mini-reply{display:flex;align-items:center;gap:6px;height:27px;font-size:9px;color:#698399;opacity:1;transition:opacity .25s}
.mini-reply .netz-icon{width:11px;height:11px;color:#288c75}
.mini-page-viewport{position:relative;overflow:hidden;background:#f5f0e8;isolation:isolate}
.mini-page-preview{position:absolute;inset:0;clip-path:inset(0 0 calc((1 - var(--page-reveal,1))*100%) 0);z-index:2;will-change:clip-path}
.mini-page-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;max-width:none}
.mini-construction{position:absolute;inset:16px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:16px 1fr;gap:12px;opacity:0;transition:opacity .3s}
.mini-construction span{border-radius:6px;background:linear-gradient(100deg,#e8e3dc 15%,#fdfaf5 40%,#e8e3dc 65%);background-size:240% 100%}
.mini-construction span:first-child{grid-column:1/-1;width:38%;height:11px}
.mini-builder-cursor{position:absolute;z-index:4;left:0;top:0;display:flex;align-items:center;gap:4px;padding:4px 8px 4px 4px;border:1px solid #fff9;border-radius:7px;background:#245bdb;color:white;box-shadow:0 3px 12px #245bdb22;opacity:0;pointer-events:none;transform:translate3d(0,0,0);font-size:8px;transition:opacity .25s}
.mini-builder-cursor:before{content:'';position:absolute;left:-5px;top:-7px;width:8px;height:12px;background:#245bdb;clip-path:polygon(0 0,100% 75%,35% 70%);transform:rotate(-16deg);filter:drop-shadow(0 0 1px #fff)}
.mini-builder-cursor img{height:18px;width:18px}
.mini-builder-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;background:#fcfdff;border-top:1px solid #e7edf4;font-size:8px;color:#8090a1;white-space:nowrap}
.mini-result{color:#406689}
.mini-generation[data-demo-state=typing] .mini-reply,.mini-generation[data-demo-state=ready] .mini-reply{opacity:0}
.mini-generation[data-demo-state=typing] .mini-prompt:after{content:'';display:inline-block;height:11px;width:1px;background:#2c65cf;margin-left:2px;vertical-align:-1px;animation:mini-caret .8s step-end infinite}
.mini-generation:not([data-demo-state=complete]) .mini-state{color:#4776ad}
.mini-generation:not([data-demo-state=complete]) .mini-state:before{background:#347bec}
.mini-generation[data-demo-state=building] .mini-builder-cursor{opacity:1}
.mini-generation:not([data-demo-state=complete]) .mini-construction{opacity:1}
.mini-generation[data-demo-state=building] .mini-construction span{animation:mini-shimmer 2s linear infinite}
.mini-generation.is-paused *{animation-play-state:paused!important}
@keyframes mini-shimmer{to{background-position:-240% 0}}
@keyframes mini-caret{50%{opacity:0}}

/* The real Crystal mark, a small companion to the hero proposition. */
.hero .hero-tagline{gap:8px;padding:5px 13px 5px 7px;min-height:34px}
.hero-tag-crystal{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;perspective:300px}
.hero-tag-crystal>svg{display:block;width:24px;height:24px;overflow:visible;animation:hero-crystal-float 5.6s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 3px 4px #246cb622)}
.hero-tag-crystal .netz-char-look{transform:translate(var(--tag-look-x,0px),var(--tag-look-y,0px));transition:transform .28s ease-out}
.hero-tag-crystal .netz-char-eyes{transform-box:fill-box;transform-origin:center;animation:hero-crystal-blink 6.8s infinite;animation-play-state:paused}
.hero.is-hero-visible .hero-tag-crystal>svg,.hero.is-hero-visible .hero-tag-crystal .netz-char-eyes{animation-play-state:running}
.hero-pointer{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .28s}
.hero-pointer.is-visible{opacity:1}
.hero-pointer i{position:absolute;top:0;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#327fe3;will-change:transform;opacity:.3}
.hero-pointer i:first-child{width:29px;height:29px;margin:-14.5px 0 0 -14.5px;background:transparent;opacity:1}
.hero-pointer i:nth-child(3){width:4px;height:4px;margin:-2px;opacity:.2}
.hero-pointer i:nth-child(4){width:3px;height:3px;margin:-1.5px;opacity:.1}
.hero-pointer i:first-child:after{content:"";position:absolute;inset:0;border:1px solid #3982de7d;border-radius:50%;transition:transform .2s,border-color .2s}
.hero-pointer.is-over-control i:first-child:after{transform:scale(1.25);border-color:#2975cdb3}
@keyframes hero-crystal-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-3px) rotate(6deg)}}
@keyframes hero-crystal-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.12)}}
@media(max-width:1050px){.mini-generation{grid-template-rows:38px 102px minmax(0,1fr) 27px}.mini-builder-header{padding-inline:10px}.mini-conversation{padding-inline:10px}.mini-state{font-size:8px}.mini-builder-footer{font-size:7px;padding-inline:9px}}
@media(max-width:700px){.story-card .mini-builder-media{height:360px}.mini-generation{grid-template-rows:40px 110px minmax(0,1fr) 28px}.mini-prompt{font-size:10px}.mini-builder-footer{font-size:7px}.mini-page-preview img{object-fit:cover}.hero .hero-tagline{font-size:9px;gap:6px;padding:4px 9px 4px 5px}.hero-tag-crystal,.hero-tag-crystal>svg{width:22px;height:22px}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.hero-pointer{display:none!important}}
@media(prefers-reduced-motion:reduce){.hero-tag-crystal>svg,.hero-tag-crystal .netz-char-eyes,.mini-generation *{animation:none!important;transition:none!important}.mini-builder-cursor{display:none}}

.mini-page-preview picture{display:block;width:100%;height:100%}
.mini-page-preview img{width:calc(100% + 8px)}
@media(max-width:700px){.story-card .mini-builder-media{height:425px}.mini-generation{grid-template-rows:44px 100px minmax(0,1fr) 28px}.mini-page-preview img{width:calc(100% + 12px);height:auto;transform:translateY(-15%)}.mini-replay{height:40px;width:40px;border:0;background:transparent}.mini-replay .netz-icon{width:16px;height:16px}.card-build-trigger{min-height:44px}}