/* Landing-only Studio concept. Uses the demo's existing theme and completion controls. */
.cx .cx-demo-wrap .cs-window{padding:0;border:1px solid #d8deeb;border-radius:22px;background:#fff;box-shadow:0 30px 90px #17264c18;overflow:hidden}
.cs-frame{height:49px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 22px;background:#fff;color:#7c869d;border-bottom:1px solid #e5e8f0;font:14px 'Space Grotesk',sans-serif;letter-spacing:.1em}
.cs-frame>span:nth-child(2){display:flex;align-items:center;gap:12px}.cs-frame b{font-weight:500;color:#9aa3b4}.cs-frame-status{font:14px 'Pretendard Variable',sans-serif;padding:4px 9px;background:#eef0fa;border-radius:20px;color:#6574a7}.cs-frame-dots{display:flex;gap:6px}.cs-frame-dots i{width:7px;height:7px;background:#d3d9e6;border-radius:50%}.cs-frame-dots i:first-child{background:#b9c5df}
.cx .cx-demo-wrap .cs-app{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;border-radius:0;background:var(--demo-base);color:var(--demo-ink);--demo-base:#f6f7fb;--demo-surface:#fff;--demo-elevated:#f0f2f8;--demo-line:#e2e6ef;--demo-line-soft:#eceef5;--demo-ink:#25314d;--demo-soft:#66718b;--demo-faint:#7a859c;--demo-dim:#bec7d8;--demo-accent:#6979bd;--demo-meeting:#a58bbd;--demo-work:#788bc7;--demo-money:#af9968;--demo-personal:#6f9f87;--demo-others:#9a8da9;--demo-radius:16px}
.cs-sidebar{padding:30px 20px;display:flex;flex-direction:column;border-right:1px solid var(--demo-line);background:var(--demo-surface)}
.cs-brand{display:flex;align-items:center;gap:11px}.cs-brand>span{width:34px;height:36px;display:grid;place-items:center;border:1px solid var(--demo-accent);border-top:6px solid var(--demo-accent);border-radius:8px;color:var(--demo-accent);font:500 16px 'Space Grotesk',sans-serif}.cs-brand>b{font:600 14px 'Space Grotesk',sans-serif}.cs-brand b span{display:block;font:14px 'Space Grotesk',sans-serif;font-weight:400;letter-spacing:.02em;color:var(--demo-faint);margin-top:2px}
.cs-navigation{display:grid;gap:9px;margin:31px -7px 29px}.cs-navigation>span{display:flex;align-items:center;gap:8px;border-radius:8px;padding:9px 10px;font-size:14px;color:var(--demo-soft)}.cs-navigation .is-active{background:color-mix(in srgb,var(--demo-accent) 11%,var(--demo-surface));color:var(--demo-accent);font-weight:650}.cs-navigation i{font:16px/1 'Space Grotesk',sans-serif;width:19px;text-align:center}.cs-navigation b{margin-left:auto;font:14px 'Space Grotesk',sans-serif}
.cs-month>strong{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--demo-soft)}.cs-month>strong>span{font-size:14px;color:var(--demo-faint)}.cs-mini-week,.cs-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:5px 3px;font:14px 'Space Grotesk',sans-serif;color:var(--demo-soft)}.cs-mini-week{margin-block:17px 9px;color:var(--demo-faint);font-family:inherit;font-size:14px}.cs-mini-grid>span{aspect-ratio:1;display:grid;place-items:center}.cs-mini-grid .is-today{background:var(--demo-accent);color:#fff;border-radius:6px}
.cs-calendars{display:grid;gap:14px;margin-top:29px}.cx .cs-calendars p{font:14px 'Space Grotesk',sans-serif;letter-spacing:.13em;color:var(--demo-faint);margin-bottom:1px}.cs-calendars>span{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--demo-soft)}.cs-calendars i{width:7px;height:7px;flex:none;border-radius:3px}.cs-dot--work{background:var(--demo-work)}.cs-dot--meeting{background:var(--demo-meeting)}.cs-dot--personal{background:var(--demo-personal)}
.cs-sidebar-note{display:flex;align-items:center;gap:12px;padding-top:42px;margin-top:auto;color:var(--demo-faint)}.cs-sidebar-note>span{font-size:24px;color:var(--demo-accent)}.cx .cs-sidebar-note p{font-size:14px;line-height:1.8}.cs-sidebar-note b{color:var(--demo-soft);font-weight:500}
.cs-board{min-width:0;padding:22px 29px 29px}.cs-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--demo-line);font:14px 'Space Grotesk',sans-serif;letter-spacing:.1em;color:var(--demo-faint)}.cs-toolbar i{font-style:normal;margin-inline:9px;color:var(--demo-dim)}.cs-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--demo-elevated);color:var(--demo-accent);font-size:14px}
.cs-board-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-top:26px;gap:18px}.cx .cs-board-heading p{font:14px 'Space Grotesk',sans-serif;letter-spacing:.15em;color:var(--demo-faint);margin-bottom:8px}.cx .cs-board-heading h3{font-family:var(--demo-display,inherit);font-size:31px;font-weight:650;letter-spacing:-.06em;line-height:1.2}.cs-board-heading h3>span{color:var(--demo-accent)}.cs-view{display:flex;padding:3px;border:1px solid var(--demo-line);border-radius:9px;gap:2px;background:var(--demo-surface)}.cs-view>span{min-width:34px;padding:5px 9px;border-radius:6px;font-size:14px;text-align:center;color:var(--demo-faint)}.cs-view .is-active{background:var(--demo-elevated);color:var(--demo-ink);font-weight:650}
.cs-board-summary{display:flex;justify-content:space-between;gap:15px;margin-top:13px;color:var(--demo-faint);font-size:14px}.cs-board-summary b{color:var(--demo-accent);margin-left:4px;font:500 14px 'Space Grotesk',sans-serif}
.cs-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.cs-day{min-width:0}.cs-day-heading{display:flex;align-items:center;gap:11px;padding:0 3px}.cs-day-heading>b{font:500 34px/1 'Space Grotesk',sans-serif;letter-spacing:-.06em}.cs-day:first-child .cs-day-heading>b{color:var(--demo-accent)}.cs-day-heading>span{font-size:14px;color:var(--demo-soft);line-height:1.5}.cs-day-heading small{display:block;color:var(--demo-faint);font-size:14px}.cs-day-heading>i{font:16px 'Space Grotesk',sans-serif;margin-left:auto;color:var(--demo-faint);letter-spacing:1px}
.cs-progress{display:flex;align-items:center;gap:11px;margin:16px 3px 20px}.cs-progress>span:first-child{font-size:14px;white-space:nowrap;color:var(--demo-faint)}.cs-progress-track{height:3px;flex:1;overflow:hidden;border-radius:4px;background:var(--demo-line)}.cs-progress-track>i{display:block;width:0;height:100%;border-radius:4px;background:var(--demo-accent);transition:width .2s}
.cs-task-list{display:grid;gap:10px}.cs-task{--task-cat:var(--demo-work);position:relative;display:block;width:100%;border:1px solid var(--demo-line);border-radius:var(--demo-radius);padding:15px 14px 16px;min-height:110px;background:var(--demo-surface);color:var(--demo-ink);text-align:left;font-family:inherit;box-shadow:0 3px 6px #111d3903;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.cs-task[data-cat=meeting]{--task-cat:var(--demo-meeting)}.cs-task[data-cat=personal]{--task-cat:var(--demo-personal)}.cs-task[data-cat=others]{--task-cat:var(--demo-others)}.cs-app[data-card-fill=true] .cs-task{background:var(--cs-card-bg,color-mix(in srgb,var(--task-cat) 18%,var(--demo-surface)));border-color:transparent;color:var(--cs-card-ink,var(--demo-ink))}.cs-app[data-demo-theme=studio] .cs-task[data-cat=work]{--cs-card-bg:#dfe5fc;--cs-card-ink:#2d3c63}.cs-app[data-demo-theme=studio] .cs-task[data-cat=meeting]{--cs-card-bg:#e9dff5;--cs-card-ink:#53416b}.cs-app[data-demo-theme=studio] .cs-task[data-cat=personal]{--cs-card-bg:#d8eddf;--cs-card-ink:#315848}.cs-app[data-demo-theme=studio] .cs-task[data-cat=others]{--cs-card-bg:#f0e9dc;--cs-card-ink:#685441}
.cs-task:hover{transform:translateY(-3px);box-shadow:0 7px 15px #15264c12}.cs-task:focus-visible{outline:2px solid var(--demo-accent);outline-offset:3px}.cs-task-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font:14px 'Space Grotesk',sans-serif}.cs-task-top time{display:flex;align-items:center;gap:6px}.cs-task-top time::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--task-cat)}.cs-task-top>span{padding:3px 6px;border-radius:5px;background:#ffffff55;font:14px 'Pretendard Variable',sans-serif;color:inherit}.cs-task>strong{display:block;font-size:14px;line-height:1.5;font-weight:650;letter-spacing:-.035em;margin-top:11px;padding-right:17px;word-break:keep-all;overflow-wrap:anywhere}.cs-task-meta{display:block;font-size:14px;line-height:1.65;margin-top:5px;padding-right:14px;opacity:.7;word-break:keep-all;overflow-wrap:anywhere}.cs-task-check{position:absolute;right:12px;bottom:14px;display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;color:transparent;box-shadow:inset 0 0 0 1px #63749866;font-size:14px}.cs-task.done{opacity:.65;min-height:91px}.cs-task.done>strong{text-decoration:line-through}.cs-task.done .cs-task-check{color:#fff;background:var(--demo-accent);border-color:var(--demo-accent);box-shadow:none}.cs-task.done .cs-task-meta{display:none}
.cs-completed{padding-top:16px;margin-top:17px;border-top:1px dashed var(--demo-line)}.cs-completed-label{display:flex;justify-content:space-between;margin-bottom:10px;font-size:14px;color:var(--demo-faint)}.cs-completed-label>b{font-weight:500}.cs-completed[hidden],.cs-task-list[hidden]{display:none}
.cs-customize{grid-column:1/-1;padding:23px 27px 24px;border-top:1px solid var(--demo-line);background:var(--demo-surface)}.cs-customize-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.cs-customize-heading>div{display:flex;align-items:center;gap:17px}.cs-customize-heading b{font-size:14px;font-weight:650}.cs-customize-heading>div>span{font-size:14px;color:var(--demo-faint)}.cs-fill{display:flex;align-items:center;gap:10px;flex:none;border:0;background:transparent;color:var(--demo-soft);font-size:14px;padding:7px 0}.cs-fill>i{width:29px;height:17px;background:var(--demo-dim);padding:2px;border-radius:30px}.cs-fill>i::after{content:"";display:block;width:13px;height:13px;background:#fff;border-radius:50%;transition:transform .2s}.cs-fill[aria-checked=true]>i{background:var(--demo-accent)}.cs-fill[aria-checked=true]>i::after{transform:translateX(12px)}
.cs-theme-list{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:9px}.cs-theme{min-width:0;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--demo-soft);padding:5px;cursor:pointer}.cs-theme[aria-pressed=true]{border-color:var(--demo-accent);background:color-mix(in srgb,var(--demo-accent) 7%,transparent)}.cs-theme-preview{height:39px;display:flex;align-items:center;gap:4px;padding:7px;border:1px solid #8e9aac33;border-radius:6px;background:var(--p-bg)}.cs-theme-preview>i{flex:1;min-width:0;height:100%;background:var(--p-a);border-radius:3px}.cs-theme-preview>i:nth-child(2){background:var(--p-b)}.cs-theme-preview>i:nth-child(3){background:var(--p-c)}.cs-theme strong{display:block;margin-top:7px;font-size:14px;font-weight:500;white-space:nowrap;letter-spacing:-.03em}
@media(max-width:1100px){.cx .cx-demo-wrap .cs-app{grid-template-columns:155px minmax(0,1fr)}.cs-sidebar{padding:25px 15px}.cs-board{padding:20px}.cs-days{gap:10px}.cs-task{padding:12px 10px;min-height:110px}.cs-task>strong{font-size:14px}.cs-task-meta{font-size:14px}.cs-theme-list{gap:4px}.cs-theme-preview{padding:5px;gap:3px}.cs-customize-heading>div{gap:12px}.cs-customize-heading>div>span{font-size:14px}}
@media(max-width:800px){.cx .cx-demo-wrap .cs-app{display:block}.cs-sidebar{display:none}.cs-board{padding:20px}.cs-task{padding:14px 12px}.cs-theme-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.cs-customize-heading>div{display:block}.cs-customize-heading>div>span{display:block;margin-top:5px}.cs-days{gap:12px}.cs-board-heading{margin-top:22px}.cs-customize{padding:20px}}
@media(max-width:600px){.cx .cx-demo-wrap .cs-window{padding:0;border-radius:14px}.cx .cx-demo-wrap .cs-app{border-radius:0}.cs-frame{height:39px;padding-inline:15px;font-size:14px;gap:10px}.cs-frame b{display:none}.cs-frame-status{font-size:14px;padding:3px 6px}.cs-frame-dots{gap:4px}.cs-frame-dots i{width:5px;height:5px}.cs-board{padding:17px}.cs-toolbar{font-size:14px;padding-bottom:13px}.cs-avatar{width:22px;height:22px}.cs-board-heading{margin-top:20px}.cx .cs-board-heading h3{font-size:27px}.cs-view>span{min-width:27px;padding:5px 7px;font-size:14px}.cs-board-summary{font-size:14px}.cs-days{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:90%;gap:15px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:4px 3px 15px;margin-top:22px;scrollbar-width:thin;scrollbar-color:var(--demo-dim) transparent}.cs-day{scroll-snap-align:start;scroll-margin-left:3px}.cs-day-heading>b{font-size:31px}.cs-day-heading>span{font-size:14px}.cs-day-heading small{font-size:14px}.cs-progress{margin-bottom:15px}.cs-progress>span:first-child{font-size:14px}.cs-task{min-height:111px;padding:15px;border-radius:min(var(--demo-radius),14px)}.cs-task>strong{font-size:14px}.cs-task-top{font-size:14px}.cs-task-top>span{font-size:14px}.cs-task-meta{font-size:14px}.cs-task-check{right:14px;bottom:16px}.cs-customize{padding:20px 15px}.cs-customize-heading{gap:12px;align-items:flex-start}.cs-customize-heading>div>span{font-size:14px;line-height:1.6;max-width:195px;word-break:keep-all}.cs-customize-heading b{font-size:14px}.cs-fill{font-size:14px;gap:6px}.cs-theme-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cs-theme strong{font-size:14px}.cs-theme-preview{height:36px}.cs-sidebar-note{display:none}}
/* The animated desktop and phone show the same Studio design. */
.cc-is-animated .cc-devices{top:42%}
.cc-device-bar{padding-bottom:12px}.cc-device-date{margin:18px 0 13px;line-height:1.25}.cc-mini-card{padding:10px}.cc-desktop-grid>div>b{line-height:1.1}.cc-device-foot{margin-top:12px}
.cx .cc-phone>p{margin-top:16px}.cc-phone .cc-mini-card{padding:10px}.cc-phone-sync{margin-top:16px}
.cc-device-logo{display:inline-grid;place-items:center;width:22px;height:23px;border:1px solid #8d9bcb;border-top:4px solid #8d9bcb;border-radius:5px;font:14px/1 'Space Grotesk',sans-serif;color:#7384b8}
.cc-device-date{position:relative}.cc-device-date .cc-device-month{float:none;display:block;font:14px 'Space Grotesk',sans-serif;letter-spacing:.15em;color:#8b96ad;margin:0 0 7px}.cc-device-date .cc-device-view{position:absolute;right:0;bottom:0;font:14px 'Pretendard Variable',sans-serif;background:#fff;border:1px solid #dfe4ef;border-radius:6px;padding:5px 7px;color:#8b96ad;margin:0}.cc-device-view>b{background:#edf0f8;padding:3px 6px;border-radius:3px;color:#5f6f9c;font-weight:500}
.cc-desktop-grid>div>b{display:flex;align-items:center;gap:7px;font-size:24px;color:#3c4864;letter-spacing:-.055em}.cc-desktop-grid>div:first-child>b{color:#7889bf}.cc-desktop-grid>div>b>small{font:14px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:#8c98b1}
.cc-mini-card-meta{display:flex;align-items:center;justify-content:space-between;font:14px 'Space Grotesk',sans-serif;opacity:.8;gap:3px}.cc-mini-card-meta>i{font:14px 'Pretendard Variable',sans-serif;float:none;padding:2px 4px;border-radius:3px;background:#ffffff66;opacity:1}.cc-mini-card>strong{display:block;margin-top:7px;font-weight:600;font-size:14px;letter-spacing:-.035em;line-height:1.4;white-space:nowrap}
.cc-device-foot{display:flex;justify-content:space-between;gap:8px;margin-top:16px;font-size:14px;color:#929cb1}.cc-device-foot>span:last-child{font:14px 'Space Grotesk',sans-serif;letter-spacing:.1em}
.cc-phone-date{display:flex;align-items:center;gap:12px}.cc-phone-date>span{font:500 14px 'Pretendard Variable',sans-serif;letter-spacing:-.03em}.cc-phone-date small{display:block;font-size:14px;color:#929cb1;font-weight:400;margin-top:5px}
.cc-phone-progress{display:flex;align-items:center;gap:5px;font-size:14px;color:#8793a9;margin-bottom:11px}.cc-phone-progress>b{font:14px 'Space Grotesk',sans-serif;color:#7587bd}.cc-phone-progress>i{height:2px;flex:1;background:#e0e5ef;margin-left:8px;border-radius:5px}
@media(max-width:800px){.cc-device-logo{width:17px;height:18px;font-size:14px;border-radius:4px;border-top-width:3px}.cc-device-date .cc-device-month{font-size:14px;margin-bottom:5px}.cc-device-date .cc-device-view{font-size:14px;padding:4px}.cc-desktop-grid>div>b{font-size:19px}.cc-mini-card-meta{font-size:14px}.cc-mini-card-meta>i{font-size:14px;padding:1px 3px}.cc-mini-card>strong{font-size:14px;margin-top:5px}.cc-phone-date>span{font-size:14px}.cc-phone-date small{font-size:14px}.cc-phone-progress{font-size:14px;margin-bottom:8px}.cc-phone-progress>b{font-size:14px}.cc-device-foot{font-size:14px;margin-top:12px}.cc-device-foot>span:last-child{font-size:14px}}
@media(max-width:600px){.cc-device-logo{width:13px;height:14px;font-size:14px;border-radius:3px;border-top-width:2px}.cc-device-bar b{gap:4px}.cc-device-date .cc-device-month{font-size:14px;margin-bottom:4px}.cc-device-date .cc-device-view{font-size:14px;padding:3px}.cc-device-view>b{padding:1px 3px}.cc-desktop-grid>div>b{font-size:15px;gap:4px}.cc-desktop-grid>div>b>small{font-size:14px}.cc-mini-card-meta{font-size:14px}.cc-mini-card-meta>i{display:none}.cc-mini-card>strong{font-size:14px;margin-top:4px}.cc-phone-date{gap:7px}.cc-phone-date>span{font-size:14px}.cc-phone-date small{display:none}.cc-phone-progress{font-size:14px;margin-bottom:7px}.cc-phone-progress>b{font-size:14px}.cc-device-foot{font-size:14px;margin-top:9px}.cc-device-foot>span:last-child{font-size:14px}}
@media(max-height:860px) and (min-width:801px){.cc-device-logo{width:16px;height:17px;font-size:14px;border-top-width:3px;border-radius:4px}.cc-device-date .cc-device-month{font-size:14px;margin-bottom:4px}.cc-device-date .cc-device-view{font-size:14px;padding:4px}.cc-mini-card-meta{font-size:14px}.cc-mini-card-meta>i{font-size:14px;padding:1px 3px}.cc-mini-card>strong{font-size:14px;margin-top:4px}.cc-phone-date>span{font-size:14px}.cc-phone-date small{font-size:14px}.cc-phone-progress{margin-bottom:8px;font-size:14px}}
@media(max-height:720px) and (max-width:800px){.cc-device-logo{width:11px;height:12px;font-size:14px}.cc-device-date .cc-device-month{display:none}.cc-device-date .cc-device-view{font-size:14px;padding:2px}.cc-desktop-grid>div>b{font-size:14px}.cc-mini-card-meta{font-size:14px}.cc-mini-card>strong{font-size:14px;margin-top:3px}.cc-phone-date>span{font-size:14px}.cc-phone-progress{font-size:14px;margin-bottom:5px}.cc-phone-progress>b{font-size:14px}.cc-device-foot{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.cs-app *{transition:none!important}}

/* The finished devices stay above the chapter controls, including short screens. */
@media(max-width:800px){.cc-is-animated .cc-devices{top:46%}.cc-device-date{margin:13px 0 10px}.cc-mini-card{padding:9px 7px}.cc-phone .cc-mini-card{padding:9px 7px}.cc-phone-sync{margin-top:12px}.cx .cc-phone>p{margin-top:15px}}
@media(max-width:600px){.cc-is-animated .cc-devices{top:48%}.cc-phone{right:3%}.cc-device-date{margin:9px 0 7px}.cc-mini-card{padding:7px 5px}.cc-phone .cc-mini-card{padding:7px 5px}.cc-phone-sync{margin-top:9px}.cx .cc-phone>p{margin-top:12px}}
@media(max-height:860px) and (min-width:801px){.cc-is-animated .cc-devices{top:44%}.cc-device-bar{padding-bottom:8px;font-size:14px}.cc-device-date{font-size:15px;line-height:1.2;margin:12px 0 10px}.cc-desktop-grid>div>b{font-size:20px;line-height:1.1}.cc-mini-card{padding:6px 8px;margin-top:6px}.cc-device-foot{margin-top:10px;font-size:14px}.cc-phone .cc-mini-card{padding:6px 8px}.cc-phone-sync{margin-top:9px;font-size:14px}.cx .cc-phone>p{margin-top:12px}.cc-phone-date{font-size:36px;margin-block:9px}}
@media(max-height:720px) and (max-width:800px){.cc-is-animated .cc-devices{top:47%;scale:.87;transform-origin:50% 0}.cc-device-bar{padding-bottom:6px}.cc-device-date{margin:6px 0;font-size:14px}.cc-mini-card{padding:4px;margin-top:4px}.cc-desktop-grid>div>b{font-size:14px;line-height:1.1}.cc-phone{padding-top:20px}.cx .cc-phone>p{margin-top:10px}.cc-phone-date{font-size:26px;margin-block:6px}.cc-phone .cc-mini-card{padding:5px 4px}.cc-phone-sync{margin-top:6px;padding:3px;font-size:14px}.cc-device-foot{margin-top:7px}}
@media(max-height:860px) and (min-width:801px){.cc-desktop{padding:12px}.cc-device-foot{display:none}}