:root{--bg:#071219;--panel:#0c1b23;--panel2:#10232c;--line:#203943;--ink:#eef7f5;--muted:#8fa6ae;--accent:#69e8c5;--blue:#7caaff;--amber:#f2c56d;--red:#ff8d8d}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}
.story-preview{height:100vh;min-height:560px;overflow:hidden;background:radial-gradient(circle at 78% 12%,rgba(124,170,255,.09),transparent 30%),var(--bg)}
.story-app{height:100%;display:grid;grid-template-columns:188px 1fr}.story-side{padding:20px 12px;border-right:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,#081720,#071219)}
.story-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;border-bottom:1px solid rgba(255,255,255,.07)}.story-brand span{display:grid}.story-brand strong{font-size:12px}.story-brand small{margin-top:2px;color:#718a93;font-size:7px;letter-spacing:.07em}
.story-nav-label{margin:18px 9px 8px;color:#5f7780;font-size:7px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.story-nav{display:grid;gap:4px}.story-nav div{height:37px;display:flex;align-items:center;gap:9px;padding:0 9px;border-radius:9px;color:#8298a1;font-size:9px}.story-nav div i{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.055);font-style:normal;font-size:7px;font-weight:900}.story-nav div.active{color:#fff;background:rgba(105,232,197,.11)}.story-nav div.active i{color:#08231c;background:var(--accent)}
.story-main{min-width:0;display:flex;flex-direction:column}.story-top{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.065);background:rgba(10,24,32,.88)}.story-search{width:min(390px,42%);height:31px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:9px;color:#607982;background:#09171e;font-size:8px}.story-user{display:flex;align-items:center;gap:9px;color:#9bb0b7;font-size:8px}.story-user b{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:#08231b;background:#153d34}
.story-page{flex:1;min-height:0;overflow:hidden;padding:24px 26px 28px}.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.story-heading small{display:block;color:#5e7c85;font-size:7px;font-weight:900;letter-spacing:.14em}.story-heading h2{margin:5px 0 0;font-size:23px;letter-spacing:-.035em}.story-heading p{max-width:510px;margin:4px 0 0;color:#718a93;font-size:9px}.story-actions{display:flex;gap:7px}.story-btn{height:31px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;border:1px solid var(--line);border-radius:8px;color:#a8bcc2;background:#0d1d25;font-size:8px;font-weight:800}.story-btn.primary{border-color:transparent;color:#062219;background:var(--accent)}
.demo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.demo-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0d2028,#0b1b22);box-shadow:0 18px 55px rgba(0,0,0,.16)}.demo-card h3{margin:0;font-size:12px}.demo-card p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.55}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:1/-1}
.metric{display:grid;gap:7px}.metric small{color:#6f8790;font-size:7px;font-weight:850;letter-spacing:.07em}.metric strong{font-size:24px;letter-spacing:-.04em}.metric em{color:#739099;font-size:7px;font-style:normal}.metric .up{color:var(--accent)}
.demo-list{display:grid;margin-top:8px}.demo-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr) auto;gap:12px;align-items:center;min-height:47px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.055);font-size:8px}.demo-row:last-child{border-bottom:0}.demo-row strong{font-size:9px}.demo-row small{display:block;margin-top:3px;color:#6f8790;font-size:7px}.demo-row>span{color:#90a7ae}.status{display:inline-flex;align-items:center;justify-content:center;padding:5px 7px;border-radius:999px;color:#90efcf;background:rgba(105,232,197,.09);font-size:6.5px;font-weight:900}.status.amber{color:#f2c56d;background:rgba(242,197,109,.09)}.status.red{color:#ff9b9b;background:rgba(255,141,141,.09)}.status.blue{color:#a7c4ff;background:rgba(124,170,255,.11)}
.mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.mini-head span{color:#6f8790;font-size:7px}.bar{height:6px;border-radius:999px;background:#142b34;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--blue));transform-origin:left}.avatar-stack{display:flex}.avatar-stack b{width:26px;height:26px;display:grid;place-items:center;margin-left:-5px;border:2px solid #0d2028;border-radius:50%;color:#dbe9e8;background:#1b3944;font-size:6px}.avatar-stack b:first-child{margin-left:0}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.kanban-col{padding:10px;border:1px solid var(--line);border-radius:13px;background:#091820}.kanban-head{display:flex;justify-content:space-between;margin-bottom:8px;color:#718b94;font-size:7px;font-weight:850}.task-card{margin-top:8px;padding:11px;border:1px solid #24404a;border-radius:10px;background:#0e222b}.task-card strong{display:block;font-size:9px}.task-card p{margin:5px 0;color:#829aa2;font-size:7px}.task-meta{display:flex;justify-content:space-between;gap:8px;color:#6e8790;font-size:6.5px}
.invoice-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:12px}.invoice-lines{display:grid;gap:8px}.invoice-line{display:grid;grid-template-columns:1.6fr .55fr .55fr;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#0a1a21;font-size:8px}.invoice-line span:last-child{text-align:right}.invoice-total{display:grid;gap:9px}.total-row{display:flex;justify-content:space-between;color:#91a7ae;font-size:8px}.total-row.grand{padding-top:10px;border-top:1px solid var(--line);color:#fff;font-size:11px;font-weight:900}
.deadline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.deadline-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:#0b1c24}.deadline-card time{display:block;color:var(--accent);font-size:7px;font-weight:900}.deadline-card strong{display:block;margin-top:8px;font-size:9px}.deadline-card small{display:block;margin-top:4px;color:#718a93;font-size:7px}.deadline-card.urgent{border-color:rgba(255,141,141,.28);background:linear-gradient(180deg,rgba(255,141,141,.055),#0b1c24)}
.attendance-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.punch-card{display:grid;place-items:center;min-height:235px;text-align:center}.punch-clock{font-size:38px;font-weight:900;letter-spacing:-.055em}.punch-card p{max-width:260px;margin:6px auto 16px;color:#789099;font-size:8px}.punch-actions{display:flex;gap:8px}.attendance-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:13px}.attendance-days i{height:32px;border:1px solid var(--line);border-radius:8px;background:#0a1a21}.attendance-days i.on{border-color:rgba(105,232,197,.34);background:rgba(105,232,197,.12)}.attendance-days i.off{background:rgba(255,141,141,.055)}
.file-grid,.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.file-card,.report-card{min-height:125px;padding:15px;border:1px solid var(--line);border-radius:13px;background:#0b1c24}.file-icon,.report-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--accent);background:rgba(105,232,197,.09);font-size:9px;font-weight:950}.file-card strong,.report-card strong{display:block;margin-top:15px;font-size:10px}.file-card small,.report-card small{display:block;margin-top:5px;color:#78919a;font-size:7px;line-height:1.45}.report-card:nth-child(even) .report-icon{color:#aac5ff;background:rgba(124,170,255,.1)}
.corp-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px}.identity-card{min-height:240px}.corp-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.fake-field{padding:10px;border:1px solid var(--line);border-radius:9px;color:#9eb1b7;background:#091820;font-size:7px}.fake-field b{display:block;margin-bottom:4px;color:#607a83;font-size:6px}.swatches{display:flex;gap:8px;margin-top:12px}.swatches i{width:30px;height:30px;border-radius:9px;border:2px solid transparent;background:#69e8c5}.swatches i:nth-child(2){background:#7caaff}.swatches i:nth-child(3){background:#b58dff}.swatches i:nth-child(4){background:#efb55d}.swatches i.active{border-color:#fff}
.story-enter .fly{opacity:0;animation:flyUp .66s cubic-bezier(.16,.85,.24,1) both;animation-delay:var(--d,0ms)}.story-enter .fly-left{opacity:0;animation:flyLeft .72s cubic-bezier(.16,.85,.24,1) both;animation-delay:var(--d,0ms)}.story-enter .fly-right{opacity:0;animation:flyRight .72s cubic-bezier(.16,.85,.24,1) both;animation-delay:var(--d,0ms)}.story-enter .demo-row{opacity:0;animation:rowIn .55s ease both;animation-delay:var(--d,0ms)}.story-enter .bar i{animation:growBar .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes flyUp{from{opacity:0;transform:translate3d(0,70px,0) scale(.94)}to{opacity:1;transform:none}}@keyframes flyLeft{from{opacity:0;transform:translate3d(-90px,18px,0) rotate(-1.5deg) scale(.95)}to{opacity:1;transform:none}}@keyframes flyRight{from{opacity:0;transform:translate3d(90px,18px,0) rotate(1.5deg) scale(.95)}to{opacity:1;transform:none}}@keyframes rowIn{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:860px){.story-app{grid-template-columns:74px 1fr}.story-brand span,.story-nav div span,.story-nav-label{display:none}.story-brand{display:none}.story-nav div{justify-content:center;padding:0}.story-page{padding:18px}.demo-grid{gap:9px}.span-3{grid-column:span 6}.span-4{grid-column:span 6}.span-5,.span-6,.span-7,.span-8{grid-column:span 12}.kanban{grid-template-columns:1fr 1fr}.kanban-col:last-child{display:none}.invoice-layout,.attendance-grid,.corp-layout{grid-template-columns:1fr}.invoice-total,.attendance-grid>div:last-child,.corp-layout>div:last-child{display:none}.deadline-grid{grid-template-columns:1fr 1fr}.file-grid,.report-grid{grid-template-columns:1fr 1fr}.file-card:nth-child(3),.report-card:nth-child(n+5){display:none}}
@media(max-width:520px){.story-app{grid-template-columns:54px 1fr}.story-side{padding:14px 6px}.story-nav div{height:34px}.story-nav div i{width:24px;height:24px}.story-top{height:52px;flex-basis:52px;padding:0 10px}.story-search{width:64%;font-size:7px}.story-user span{display:none}.story-page{padding:12px 10px}.story-heading{margin-bottom:10px}.story-heading h2{font-size:18px}.story-heading p{font-size:7px}.story-actions{display:none}.demo-card{padding:11px}.metric strong{font-size:18px}.span-3,.span-4{grid-column:span 6}.demo-row{grid-template-columns:1.4fr .7fr auto;gap:5px;min-height:42px}.demo-row>span:nth-child(3){display:none}.kanban{gap:7px}.task-card{padding:8px}.deadline-grid{gap:6px}.deadline-card{padding:9px}.file-grid,.report-grid{gap:7px}.file-card,.report-card{min-height:102px;padding:10px}}
@media(prefers-reduced-motion:reduce){.story-enter .fly,.story-enter .fly-left,.story-enter .fly-right,.story-enter .demo-row,.story-enter .bar i{animation:none!important;opacity:1!important;transform:none!important}}

/* Story preview follows the parent site theme. */
html[data-color-scheme="light"]{--bg:#eef4f3;--panel:#fff;--panel2:#f7faf9;--line:#d6e3e1;--ink:#102027;--muted:#60747a;--accent:#087c62;--blue:#4e78c7;--amber:#a36a10;--red:#b94c4c;color-scheme:light}
html[data-color-scheme="light"] .story-preview{background:radial-gradient(circle at 78% 12%,rgba(78,120,199,.08),transparent 30%),var(--bg)}
html[data-color-scheme="light"] .story-side{border-right-color:#dbe7e5;background:linear-gradient(180deg,#f8fbfa,#edf4f3)}
html[data-color-scheme="light"] .story-brand{border-bottom-color:#dbe7e5}html[data-color-scheme="light"] .story-brand strong{color:#102027}html[data-color-scheme="light"] .story-brand small,html[data-color-scheme="light"] .story-nav-label{color:#6b8186}
html[data-color-scheme="light"] .story-nav div{color:#657a80}html[data-color-scheme="light"] .story-nav div i{background:#e5eeec}html[data-color-scheme="light"] .story-nav div.active{color:#0d2821;background:rgba(8,124,98,.11)}html[data-color-scheme="light"] .story-nav div.active i{color:#fff;background:#087c62}
html[data-color-scheme="light"] .story-top{border-bottom-color:#dbe7e5;background:rgba(250,252,252,.9)}html[data-color-scheme="light"] .story-search{border-color:#d4e1df;color:#718489;background:#f5f9f8}html[data-color-scheme="light"] .story-user{color:#587078}html[data-color-scheme="light"] .story-user b{color:#0a4f3e;background:#d9eee8}
html[data-color-scheme="light"] .demo-card,html[data-color-scheme="light"] .task-card,html[data-color-scheme="light"] .deadline-card,html[data-color-scheme="light"] .file-card,html[data-color-scheme="light"] .report-card{border-color:#d6e3e1;background:#fff;box-shadow:0 18px 50px rgba(27,70,67,.08)}
html[data-color-scheme="light"] .kanban-col,html[data-color-scheme="light"] .fake-field,html[data-color-scheme="light"] .invoice-line{border-color:#d6e3e1;background:#f7faf9}html[data-color-scheme="light"] .demo-row{border-bottom-color:#e3ecea}html[data-color-scheme="light"] .demo-row>span,html[data-color-scheme="light"] .mini-head span,html[data-color-scheme="light"] .story-heading p{color:#647b81}
html[data-color-scheme="light"] .story-btn{border-color:#d6e3e1;color:#385057;background:#f7faf9}html[data-color-scheme="light"] .story-btn.primary{color:#fff;background:#087c62}html[data-color-scheme="light"] .total-row.grand{color:#102027;border-top-color:#d6e3e1}
.finish-name{margin:0 auto 12px;color:var(--accent);font-size:9px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.story-enter{animation:sceneIn .48s cubic-bezier(.2,.8,.2,1) both}.story-enter .story-nav div.active{animation:navPop .5s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes sceneIn{from{opacity:.72;transform:scale(1.012)}to{opacity:1;transform:none}}@keyframes navPop{from{transform:translateX(-8px);opacity:.25}to{transform:none;opacity:1}}
@media(max-width:860px){.story-brand{display:none}.story-nav{margin-top:2px}}