.cc-demo{background:var(--bg);padding:max(5rem,min(12vh,9rem)) 0;overflow:hidden}.cc-demo__inner{max-width:none;margin:0 auto;padding:0 max(1rem,min(2vw,1.75rem))}.cc-demo__header{text-align:center;margin-bottom:max(3rem,min(7vh,5rem))}.cc-demo__eyebrow{font-family:var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--subtle);margin:0 0 1.25rem;font-size:.68rem;display:block}.cc-demo__title{font-family:var(--font-d);letter-spacing:-.03em;color:var(--hi);margin:0 0 1rem;font-size:max(1.75rem,min(3.5vw + .5rem,3rem));font-weight:800;line-height:1.1}.cc-demo__lead{max-width:34rem;font-family:var(--font-body);color:var(--mid);margin:0 auto;font-size:max(.88rem,min(1vw + .4rem,.98rem));line-height:1.75}.cc-demo__stage{grid-template-columns:minmax(280px,1fr) minmax(420px,2fr) minmax(220px,.9fr);align-items:start;gap:max(1.5rem,min(2.5vw,2.75rem));width:100%;max-width:min(1480px,100%);margin:0 auto;display:grid}.cc-demo__mail-col{min-width:0}.cc-demo__term-col{opacity:0;min-width:0;transition:opacity .5s var(--ease),transform .5s var(--ease);flex-direction:column;gap:1rem;display:flex;transform:scale(.985)}.cc-demo__stage[data-phase=ready] .cc-demo__term-col,.cc-demo__stage[data-phase=running] .cc-demo__term-col,.cc-demo__stage[data-phase=done] .cc-demo__term-col{opacity:1;transform:none}.cc-demo__phone-col{opacity:0;pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease);justify-content:center;align-self:center;align-items:flex-start;display:flex;transform:scale(.985)translateY(10px)}.cc-demo__stage[data-phase=done] .cc-demo__phone-col{opacity:1;pointer-events:auto;transform:none}@media (min-width:1024px){.cc-demo__stage[data-phase=ready] .cc-demo__phone-col,.cc-demo__stage[data-phase=running] .cc-demo__phone-col{opacity:1;pointer-events:auto;transform:none}}.cc-mail{background:#0f0f0f;border:1px solid rgba(255,255,255,.07);border-radius:12px;width:100%;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.4)}.cc-mail__bar{background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.05);padding:.65rem .875rem}.cc-mail__bar-title{font-family:var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:#555;font-size:10px}.cc-mail__list{scrollbar-width:thin;scrollbar-color:rgba(139,107,184,.35) rgba(255,255,255,.04);height:max(420px,min(48vh,520px));overflow-y:auto}.cc-mail__list::-webkit-scrollbar{width:6px}.cc-mail__list::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}.cc-mail__list::-webkit-scrollbar-thumb{background:rgba(139,107,184,.35);border-radius:999px}.cc-mail__list::-webkit-scrollbar-thumb:hover{background:var(--acc-soft)}.cc-mail__item{transition:background .25s var(--ease);border-bottom:1px solid rgba(255,255,255,.04);padding:.875rem;position:relative}.cc-mail__item:last-child{border-bottom:none}.cc-mail__item--active{border-left:2px solid var(--acc);background:rgba(139,107,184,.06);padding-left:calc(.875rem - 2px)}.cc-mail__item--active .cc-mail__body{gap:.45rem;padding-right:5.75rem}.cc-mail__item--active .cc-mail__subject{margin-top:.15rem}.cc-mail__item:not(.cc-mail__item--active){opacity:.55}.cc-mail__item:not(.cc-mail__item--active):hover{opacity:.75;background:rgba(255,255,255,.02)}.cc-mail__row{align-items:flex-start;gap:.65rem;display:flex}.cc-mail__avatar{background:var(--acc-dim);width:32px;height:32px;font-family:var(--font-m);color:var(--acc-soft);border:1px solid rgba(139,107,184,.25);border-radius:50%;flex-shrink:0;place-items:center;font-size:10px;font-weight:500;display:grid}.cc-mail__body{flex-direction:column;flex:1;gap:.2rem;min-width:0;display:flex}.cc-mail__meta{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.cc-mail__from{font-family:var(--font-body);color:var(--hi);white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;overflow:hidden}.cc-mail__time{font-family:var(--font-m);color:#484848;flex-shrink:0;font-size:8px}.cc-mail__subject{font-family:var(--font-body);color:#b8b8b8;white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:500;line-height:1.35;overflow:hidden}.cc-mail__preview{font-family:var(--font-body);color:#555;white-space:nowrap;text-overflow:ellipsis;font-size:9px;line-height:1.5;overflow:hidden}.cc-mail__status{z-index:1;font-family:var(--font-m);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);border:1px solid transparent;border-radius:5px;padding:5px 10px;font-size:8px;position:absolute;top:.875rem;right:.875rem}.cc-mail__status--new{color:var(--acc-soft);background:rgba(139,107,184,.12);border-color:rgba(139,107,184,.25)}.cc-mail__status--progress{color:#c9a020;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.22)}.cc-mail__status--done{color:#28c840;background:rgba(40,200,64,.1);border-color:rgba(40,200,64,.22)}.cc-terminal{width:100%;font-family:var(--font-m),"JetBrains Mono","Fira Code",monospace;background:#0f0f0f;border:1px solid rgba(255,255,255,.07);border-radius:12px;font-size:14px;line-height:1.8;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.3),0 20px 48px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.04)}.cc-terminal__bar{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;align-items:center;padding:.55rem .875rem;display:flex}.cc-terminal__dots{flex-shrink:0;gap:6px;display:flex}.cc-terminal__dot{border-radius:50%;width:12px;height:12px}.cc-terminal__dot--r{background:#ff5f57}.cc-terminal__dot--y{background:#febc2e}.cc-terminal__dot--g{background:#28c840}.cc-terminal__title{text-align:center;color:#464646;letter-spacing:.03em;flex:1;padding-right:48px;font-size:11px}.cc-terminal__scroll{scrollbar-width:thin;scrollbar-color:rgba(139,107,184,.35) rgba(255,255,255,.04);flex-direction:column;height:max(420px,min(48vh,520px));padding:1rem .875rem 1rem 1.125rem;display:flex;overflow-y:auto}.cc-terminal__scroll::-webkit-scrollbar{width:6px}.cc-terminal__scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}.cc-terminal__scroll::-webkit-scrollbar-thumb{background:rgba(139,107,184,.35);border-radius:999px}.cc-terminal__scroll::-webkit-scrollbar-thumb:hover{background:var(--acc-soft)}.cc-line{white-space:pre;justify-content:space-between;align-items:baseline;min-height:1.8em;display:flex}.cc-line__left{min-width:0;display:flex}.cc-line__prefix{flex-shrink:0}.cc-line__text{text-overflow:clip;flex:1;min-width:0;overflow:hidden}.cc-line__right{flex-shrink:0;margin-left:1rem}.cc-line--green .cc-line__prefix,.cc-line--green .cc-line__text{color:#28c840}.cc-line--muted .cc-line__prefix,.cc-line--muted .cc-line__text{color:#4a4a4a}.cc-line--cmd .cc-line__prefix,.cc-line--cmd .cc-line__text{color:var(--hi)}.cc-line--hi .cc-line__prefix,.cc-line--hi .cc-line__text{color:var(--hi);font-weight:700}.cc-line__right--green{color:#28c840}.cc-line__right--muted{color:#4a4a4a}.cc-line--spacer{min-height:.5rem}.cc-line--prompt{color:var(--mid);justify-content:flex-start;align-items:center;gap:.35rem;width:-moz-fit-content;width:fit-content;min-height:1.8em;display:flex}.cc-prompt__ps{color:var(--acc-soft);flex-shrink:0;line-height:1}.cc-prompt__input{color:var(--hi)}.cc-cursor{background:var(--acc);border-radius:1px;flex-shrink:0;width:7px;height:1em;animation:1.05s step-end infinite cc-blink;display:inline-block}@keyframes cc-blink{0%,to{opacity:1}50%{opacity:0}}.cc-progress{background:rgba(255,255,255,.06);border-radius:2px;flex-shrink:0;height:2px;margin-top:.35rem;overflow:hidden}.cc-progress__fill{background:linear-gradient(90deg,var(--acc)0%,var(--acc-soft)100%);border-radius:2px;height:100%;transition:width 42ms linear}.cc-demo__btn-row{justify-content:center;min-height:2.5rem;display:flex}.cc-btn{cursor:pointer;font-family:var(--font-m);letter-spacing:.1em;text-transform:uppercase;transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);border-radius:6px;padding:.7rem 1.5rem;font-size:.7rem;font-weight:500;line-height:1}.cc-btn--run{background:var(--acc);border:1px solid var(--acc);color:#fff;box-shadow:0 0 22px rgba(139,107,184,.3)}.cc-btn--run:hover{background:var(--acc-soft);border-color:var(--acc-soft);box-shadow:0 0 32px rgba(139,107,184,.5)}.cc-btn--reset{color:var(--acc-soft);background:0 0;border:1px solid rgba(139,107,184,.35)}.cc-btn--reset:hover{border-color:var(--acc);color:var(--hi)}.cc-phone{width:max(240px,min(20vw,288px));height:max(478px,min(40vw,574px));transition:box-shadow .7s var(--ease);background:#0c0c0c;border:2px solid rgba(255,255,255,.1);border-radius:48px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 0 0 .5px rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.06)}.cc-phone--done{box-shadow:0 0 0 1px rgba(139,107,184,.25),0 0 40px rgba(139,107,184,.18),0 0 80px rgba(139,107,184,.08),0 28px 70px rgba(0,0,0,.6),inset 0 1px rgba(139,107,184,.12)}.cc-phone__screen{background:#090912;border-radius:42px;flex-direction:column;display:flex;position:absolute;top:6px;bottom:6px;left:6px;right:6px;overflow:hidden}.cc-phone__notch{z-index:30;pointer-events:none;background:#0c0c0c;border-radius:0 0 16px 16px;width:78px;height:26px;position:absolute;top:0;left:50%;transform:translate(-50%)}.cc-app{flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.cc-app__el{opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);transform:translateY(8px)}.cc-app__el--on{opacity:1;pointer-events:auto;transform:translateY(0)}.cc-app__header{background:linear-gradient(rgba(18,16,28,.98) 0%,rgba(11,10,19,.95) 100%);border-bottom:1px solid rgba(139,107,184,.12);flex-shrink:0;justify-content:space-between;align-items:center;padding:34px 14px 10px;display:flex}.cc-app__app-name{font-family:var(--font-d);color:var(--hi);letter-spacing:-.02em;font-size:15px;font-weight:800}.cc-app__settings-ico{width:24px;height:24px;color:var(--acc-soft);background:rgba(139,107,184,.1);border:1px solid rgba(139,107,184,.18);border-radius:7px;place-items:center;font-size:11px;font-style:normal;display:grid}.cc-app__tasks{flex-direction:column;flex:1;gap:7px;min-height:0;padding:10px 12px 6px;display:flex;overflow:hidden}.cc-app__task{background:rgba(255,255,255,.024);border:1px solid rgba(255,255,255,.055);border-radius:9px;flex-shrink:0;align-items:center;gap:8px;padding:8px 10px;display:flex}.cc-app__chk{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:1.5px solid rgba(139,107,184,.4);border-radius:50%;flex-shrink:0;place-items:center;width:15px;height:15px;padding:0;display:grid}.cc-app__chk--interactive{cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}.cc-app__chk--interactive:hover:not(.cc-app__chk--done){border-color:var(--acc-soft);background:rgba(139,107,184,.1)}.cc-app__chk--interactive:active{transform:scale(.92)}.cc-app__chk:disabled{cursor:default}.cc-app__chk--done{background:var(--acc);border-color:var(--acc)}.cc-app__chk--done:after{content:"✓";color:#fff;font-size:8px;font-weight:700;font-family:var(--font-body)}.cc-app__task-body{flex:1;min-width:0}.cc-app__task-txt{color:#a0a0a8;font-size:10px;font-family:var(--font-body);white-space:nowrap;text-overflow:ellipsis;transition:color .2s var(--ease),opacity .2s var(--ease);line-height:1.4;display:block;overflow:hidden}.cc-app__task-txt--done{color:#5a5a62;-webkit-text-decoration:line-through rgba(160,160,168,.5);text-decoration:line-through rgba(160,160,168,.5)}.cc-app__task-sub{color:#484848;font-size:8px;font-family:var(--font-m);margin-top:1px;display:block}.cc-app__badge{font-size:7px;font-family:var(--font-m);text-transform:uppercase;letter-spacing:.05em;border-radius:3px;flex-shrink:0;padding:2px 5px}.cc-app__badge--high{color:#ef6060;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2)}.cc-app__badge--med{color:#c9a020;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.18)}.cc-app__badge--low{color:var(--acc-soft);background:rgba(139,107,184,.1);border:1px solid rgba(139,107,184,.2)}.cc-app__spacer{flex:1;min-height:0}.cc-app__nav{background:rgba(9,9,18,.96);border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;justify-content:space-around;align-items:center;padding:8px 8px 24px;display:flex}.cc-app__nav-btn{flex-direction:column;align-items:center;gap:3px;display:flex}.cc-app__nav-ico{color:#3a3a3a;border-radius:6px;place-items:center;width:20px;height:20px;font-size:10px;font-style:normal;display:grid}.cc-app__nav-btn--active .cc-app__nav-ico{color:var(--acc-soft);background:rgba(139,107,184,.18)}.cc-app__nav-pip{background:0 0;border-radius:50%;width:4px;height:4px}.cc-app__nav-btn--active .cc-app__nav-pip{background:var(--acc)}.cc-app__fab{background:var(--acc);z-index:10;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:0;display:flex;position:absolute;bottom:80px;right:16px;box-shadow:0 4px 16px rgba(139,107,184,.5)}.cc-app__fab-icon{width:100%;height:100%;font-size:24px;font-weight:300;line-height:1;font-family:var(--font-body);color:#fff;justify-content:center;align-items:center;display:flex;transform:translateY(-1px)}@media (min-width:768px) and (max-width:1023px){.cc-demo__stage{grid-template-columns:minmax(220px,.75fr) minmax(0,1fr);align-items:start;gap:max(1rem,min(2vw,1.75rem));max-width:100%}.cc-demo__mail-col{grid-area:1/1}.cc-demo__term-col,.cc-demo__phone-col{grid-area:1/2;width:100%}.cc-demo__term-col{justify-self:center}.cc-demo__stage[data-phase=done] .cc-demo__term-col{opacity:0;pointer-events:none;transform:scale(.985)}.cc-demo__phone-col{justify-self:center;align-items:center}}@media (max-width:767px){.cc-demo__stage{grid-template-columns:minmax(0,1fr);gap:1.5rem;max-width:100%}.cc-demo__mail-col{display:none}.cc-demo__term-col,.cc-demo__phone-col{grid-area:1/1;width:100%}.cc-demo__term-col{justify-self:center}.cc-demo__stage[data-phase=done] .cc-demo__term-col{opacity:0;pointer-events:none;transform:scale(.985)}.cc-demo__phone-col{justify-self:center;align-items:center}.cc-terminal__scroll{height:max(300px,min(42vh,420px))}.cc-phone{width:220px;height:438px}}@media (prefers-reduced-motion:reduce){.cc-cursor{opacity:1!important;animation:none!important}.cc-app__el,.cc-demo__term-col,.cc-demo__phone-col,.cc-progress__fill,.cc-mail__status{transition:none!important}}
