/* Interactive examples on the public landing only. No application styles. */
body.lp2 #features{color:var(--ink);scroll-margin-top:100px}
#features *{box-sizing:border-box}
#features [hidden]{display:none!important}
#features button,#features textarea{font:inherit;color:inherit}
#features button{cursor:pointer}
#features button:focus-visible,#features [tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#features svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#features .fx-symbols{position:absolute;width:0;height:0;overflow:hidden}
#features .fx-showcase{display:grid;grid-template-columns:290px minmax(0,1fr);gap:40px;margin-top:40px;align-items:start}
#features .fx-feature-rail{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
#features .fx-feature-tab{position:relative;display:flex;gap:16px;text-align:left;border:0;border-bottom:1px solid var(--line);padding:22px 10px;background:none;overflow:hidden}
#features .fx-tab-number{font:15px var(--serif);color:var(--mute)}
#features .fx-tab-copy{min-width:0}
#features .fx-tab-title{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:21px;font-weight:600}
#features .fx-tab-title svg{opacity:0}
#features .fx-tab-description{display:block;font-size:14px;line-height:1.45;color:var(--mute);margin-top:6px}
#features .fx-feature-tab[aria-selected=true]{background:var(--paper)}
#features .fx-feature-tab[aria-selected=true] .fx-tab-title svg{opacity:1}
#features.auto .fx-feature-tab[aria-selected=true]::after{content:'';position:absolute;height:3px;background:var(--y);bottom:0;left:0;width:100%;transform-origin:left;animation:lp-example-progress 7s linear}
#features .fx-stage{min-width:0;background:var(--paper);border:1px solid var(--line);box-shadow:0 16px 25px -20px #0005;padding:24px 28px 0}
#features .fx-stage-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.04em;padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--mute)}
#features .fx-stage-top>span:last-child{letter-spacing:0;white-space:nowrap}
#features .fx-live-dot{display:inline-block;width:6px;height:6px;background:#668263;border-radius:50%;margin-right:6px}
#features .fx-scene{position:relative;min-height:490px;padding:24px 0 22px}
#features .fx-scene-kicker{font-size:10px;letter-spacing:.08em;color:var(--mute)}
body.lp2 #features .fx-scene h3{font:600 30px/1.15 var(--serif);letter-spacing:-.04em;margin:8px 0 24px;max-width:none}
#features .fx-scene-caption{font-size:14px;line-height:1.5;margin:22px 0 0;color:#42433e}
#features .fx-scene-caption small{display:block;font-size:12px;color:var(--mute);margin-top:4px}
#features .fx-work-now{position:relative;display:flex;align-items:center;gap:15px;padding:12px 0 18px;border-bottom:1px solid var(--line)}
#features .fx-work-now time{font:500 32px/1 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
#features .fx-work-now b{display:block;font-size:15px;margin-top:3px}
#features .fx-work-status{font-size:10px;color:var(--mute)}
#features .fx-work-left{margin-left:auto;font-size:12px;white-space:nowrap}
#features .fx-work-pause{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;background:none;flex:none}
#features .fx-work-pause svg{width:12px;height:12px;fill:currentColor;stroke:none}
#features .fx-work-pause [data-play],#features .fx-work-pause[aria-pressed=true] [data-pause]{display:none}
#features .fx-work-pause[aria-pressed=true] [data-play]{display:block}
#features .fx-work-progress{height:3px;position:absolute;bottom:-1px;left:0;right:0;background:#e4e4de}
#features .fx-work-progress i{display:block;height:100%;background:#b23c2e;transform-origin:left}
#features .fx-work-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px 8px;margin:12px -4px 0}
#features .fx-work-grid th{text-align:left;font-size:12px;font-weight:500;vertical-align:top}
#features .fx-work-grid th:first-child{width:30%}
#features .fx-work-grid td{vertical-align:top}
#features .fx-work-grid thead button{background:none;border:0;text-align:left;padding:0;min-height:40px;font-weight:600}
#features .fx-work-grid thead button span{display:block;color:var(--mute);font-weight:400;font-size:11px;margin-top:4px}
#features .fx-work-grid tbody time{display:block;font-size:12px;font-weight:600;white-space:nowrap}
#features .fx-work-grid tbody th b{display:block;font-weight:400;margin-top:4px;color:var(--mute)}
#features .fx-work-number{display:none}
#features .fx-work-task{display:block;width:100%;min-height:62px;padding:10px;background:var(--b);border:0;border-radius:5px;font-size:12px;line-height:1.35;text-align:left;overflow-wrap:anywhere}
#features .fx-work-current .fx-work-task{background:var(--y)}
#features [data-work-dim]{opacity:.4}
#features .fx-work-edit{position:absolute;inset:160px 0 auto;background:var(--paper);border:1px solid var(--ink);padding:20px;box-shadow:0 10px 25px #0003;z-index:5}
#features .fx-work-edit label{display:block;font-size:13px;margin-bottom:10px}
#features .fx-work-edit textarea{width:100%;padding:12px;background:#fff;border:1px solid #96978f;font-size:16px;resize:vertical}
#features .fx-work-edit>div{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
#features .fx-work-edit button{border:1px solid var(--ink);border-radius:5px;min-height:44px;padding:8px 12px;background:none;font-size:13px}
#features .fx-work-edit button[type=submit]{background:var(--ink);color:var(--paper)}
#features .fx-file-composition{position:relative;height:280px}
#features .fx-paper{position:absolute;width:48%;height:220px;background:#fff;border:1px solid #cdcec7;padding:20px;box-shadow:0 8px 15px #0001}
#features .fx-paper-back{left:5%;top:8px;transform:rotate(-5deg)}
#features .fx-paper-front{right:5%;top:28px;transform:rotate(4deg)}
#features .fx-paper-tag,#features .fx-paper-page,#features .fx-paper-head{font-size:8px;letter-spacing:.03em}
body.lp2 #features .fx-paper h3{font:600 23px/1.1 var(--sans);margin:16px 0}
#features .fx-paper-page{position:absolute;bottom:18px;left:20px;color:var(--mute)}
#features .fx-paper-lines{display:grid;gap:6px}
#features .fx-paper-lines i{display:block;border-top:1px solid #bbb;width:90%}
#features .fx-paper-stamp{display:inline-block;border:1px solid #a04538;color:#a04538;font-size:8px;padding:5px;margin-top:16px;transform:rotate(-5deg)}
#features .fx-paper-head{display:flex;justify-content:space-between}
#features .fx-stage-plan{width:100%;height:75px}
#features .fx-file-ticket{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:16px;background:var(--b);border-radius:6px;z-index:2}
#features .fx-ticket-time{font-size:20px;font-variant-numeric:tabular-nums}
#features .fx-ticket-time>span{display:block;font-size:12px;margin-top:4px}
#features .fx-ticket-files{display:grid;gap:7px;font-size:12px}
#features .fx-ticket-files>span{display:flex;gap:7px;align-items:center}
#features .fx-ticket-files svg{width:13px;height:13px}
#features .fx-ticket-count{margin-left:auto;font-size:11px;white-space:nowrap}
#features .fx-telegram-composition{position:relative;min-height:270px;padding:55px 15px 20px}
#features .fx-time-change{position:absolute;right:15px;top:0;display:flex;align-items:center;gap:14px;font:32px var(--hand);color:#ae362a;transform:rotate(-4deg)}
#features .fx-time-change>span{text-decoration:line-through;color:var(--mute);font:22px var(--serif)}
#features .fx-time-change svg{transform:rotate(45deg)}
#features .fx-notification{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 12px 18px -14px #0006;animation:lp-example-enter .5s ease-out}
#features .fx-notification-top{display:flex;align-items:center;gap:9px;font-size:13px}
#features .fx-bot-avatar{width:32px;height:32px;display:grid;place-items:center;background:#deebf3;border-radius:50%}
#features .fx-notification-top small{display:block;font-size:10px;color:var(--mute);margin-top:3px}
#features .fx-notification-top>span:last-child{margin-left:auto;font-size:10px;color:var(--mute)}
#features .fx-notification p{font-size:20px;line-height:1.45;margin:20px 0}
#features .fx-notification-link{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;color:#315e7b;font-size:12px}
#features .fx-connection-label{display:block;font-size:10px;color:var(--mute);text-align:right;margin-top:14px}
#features .fx-timing-composition{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:20px;align-items:center;margin-top:32px}
#features .fx-timeline{border-top:1px solid var(--ink)}
#features .fx-timeline-head{display:flex;justify-content:space-between;gap:8px;padding:12px 0;font-size:10px;color:var(--mute);border-bottom:1px solid var(--line)}
#features .fx-timeline-row{display:flex;gap:22px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}
#features .fx-timeline-row time{font:22px var(--serif);font-variant-numeric:tabular-nums}
#features .fx-timeline-row small{display:block;font-size:11px;color:var(--mute);margin-top:5px}
#features .fx-is-shifted .fx-timeline-row time{animation:lp-example-enter .3s ease-out}
#features .fx-shift-button{background:var(--y);color:var(--ink);border:0;border-radius:5px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;transform:rotate(3deg);font-size:15px;margin-right:8px}
#features .fx-shift-button>svg:last-child{align-self:flex-end}
#features .fx-team-controls{display:flex;justify-content:space-between;gap:12px;margin:26px 0 12px}
#features .fx-team-filter{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px}
#features .fx-team-controls button{padding:10px 12px;border:0;background:transparent;border-radius:4px;font-size:13px;min-height:40px}
#features .fx-team-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
#features .fx-team-controls .fx-mine-filter{border:1px solid var(--line)}
#features .fx-team-caption{font-size:12px;color:var(--mute);line-height:1.5}
#features .fx-person{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
#features .fx-person-avatar{display:grid;place-items:center;width:32px;height:32px;background:#e2e3dc;border-radius:50%;font-size:14px;flex:none}
#features .fx-person[data-person=mine] .fx-person-avatar{background:var(--y)}
#features .fx-person b{font-size:14px}
#features .fx-person b small{font-size:11px;color:var(--mute);font-weight:400;margin-left:6px}
#features .fx-person p{font-size:12px;margin:5px 0 0;color:#444}
#features .fx-person time{font-size:13px;margin-left:auto}
#features .fx-team-status{font-size:11px;color:var(--mute);text-align:right;margin-top:12px}
#features .fx-extras{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:28px;border-top:1px solid var(--line);padding-top:24px;margin-top:32px}
#features .fx-extras>div{display:flex;align-items:start;gap:12px;font-size:11px;color:var(--mute)}
#features .fx-extras p{font-size:16px;margin:0;line-height:1.4}
#features .fx-extras small{display:block;font-size:13px;color:var(--mute);margin-top:5px}
#features .fx-feature-foot{font-size:12px;line-height:1.5;color:var(--mute);margin-top:22px}
#features .fx-feature-foot a{color:inherit}
@keyframes lp-example-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lp-example-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1050px){#features .fx-showcase{grid-template-columns:220px minmax(0,1fr);gap:24px}#features .fx-stage{padding:20px 20px 0}#features .fx-tab-title{font-size:18px}#features .fx-tab-description{font-size:13px}}
@media(max-width:760px){
  #features .fx-showcase{display:block;margin-top:28px}
  #features .fx-feature-rail{flex-direction:row;overflow-x:auto;gap:8px;border:0;margin-bottom:18px;padding:4px 2px 10px;scrollbar-width:thin}
  #features .fx-feature-tab{flex:none;padding:12px 16px;border:1px solid #a9aaa2;border-radius:100px;min-height:44px;overflow:hidden}
  #features .fx-tab-description,#features .fx-tab-number,#features .fx-tab-title svg{display:none}
  #features .fx-tab-title{font-size:14px;white-space:nowrap}
  #features .fx-stage{padding:18px 16px 0}
  #features .fx-stage-top{font-size:9px}
  #features .fx-scene{min-height:490px;padding-top:20px}
  body.lp2 #features .fx-scene h3{font-size:27px}
  #features .fx-work-now{gap:8px}
  #features .fx-work-now time{font-size:27px}
  #features .fx-work-now b{font-size:12px}
  #features .fx-work-status{font-size:9px}
  #features .fx-work-left{font-size:10px}
  #features .fx-work-pause{width:28px;height:28px}
  #features .fx-work-grid{border-spacing:3px 8px}
  #features .fx-work-grid th:first-child{width:30%}
  #features .fx-work-grid tbody time{font-size:10px}
  #features .fx-work-grid tbody th b{font-size:11px}
  #features .fx-work-task{padding:8px;font-size:11px;min-height:70px}
  #features .fx-work-edit{padding:14px}
  #features .fx-work-edit button{font-size:12px}
  #features .fx-scene-caption{font-size:13px}
  #features .fx-scene-caption small{font-size:11px}
  #features .fx-timing-composition{grid-template-columns:1fr;gap:20px;margin-top:20px}
  #features .fx-shift-button{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;transform:none;padding:14px;margin-right:0}
  #features .fx-shift-button>svg:last-child{align-self:center}
  #features .fx-timeline-row{padding:15px 0}
  #features .fx-person{gap:8px}
  #features .fx-person b small{display:block;margin:3px 0 0}
  #features .fx-person p{font-size:11px}
  #features .fx-person time{font-size:12px}
  #features .fx-paper{padding:14px;height:210px;width:52%}
  #features .fx-paper-back{left:4%}
  #features .fx-paper-front{right:4%}
  body.lp2 #features .fx-paper h3{font-size:19px}
  #features .fx-file-ticket{gap:12px;padding:12px}
  #features .fx-ticket-count{display:none}
  #features .fx-ticket-files{font-size:10px}
  #features .fx-ticket-time{font-size:18px}
  #features .fx-extras{grid-template-columns:1fr;gap:20px}
  #features .fx-extras>div{justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){#features *,#features *::after{animation:none!important;transition:none!important}}
html:not(.js) #features .fx-feature-rail{display:none}
html:not(.js) #features [role=tabpanel][hidden]{display:block!important}

#features .fx-swipe-nav{display:none}
@media(max-width:760px){
  #features .fx-stage{touch-action:pan-y pinch-zoom}
  #features .fx-stage.fx-dragging{user-select:none;-webkit-user-select:none}
  #features .fx-stage.fx-dragging .fx-scene:not([hidden]){opacity:.7}
  #features .fx-swipe-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:14px 0}
  #features .fx-swipe-nav button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:22px;cursor:pointer;touch-action:manipulation}
  #features .fx-swipe-nav>span{text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
  #features .fx-swipe-nav small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
}