:root{--workspace-bg:#fff;--sidebar-bg:#f8f8f8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#202223}body{background:#fff;background-image:radial-gradient(#d7d9dc .75px,transparent .75px);background-size:22px 22px;padding:32px 24px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:100vh}#workspace-mat{min-width:0;max-width:100%;width:min(100%,1590px,calc((100vh - 92px)*1.6 + 28px));padding:14px;background:linear-gradient(180deg,rgba(246,247,250,0) 0%,rgba(243,244,247,.12) 26%,rgba(236,238,242,.36) 68%,rgba(229,231,236,.56) 100%);border-radius:34px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#viewport{position:relative;width:100%;overflow:hidden;border:1px solid rgba(218,220,226,.45);border-radius:20px;box-shadow:0 30px 80px rgba(15,17,21,.08),0 8px 24px rgba(15,17,21,.04);background:rgba(245,246,249,.76);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}#stage{position:relative;width:1562px;height:976.25px;transform-origin:top left;border-radius:var(--inner-corner,19px);overflow:hidden;background:var(--workspace-bg)}#sidebar{position:absolute;inset:0 auto 0 0;width:248px;padding-top:48px;background:var(--sidebar-bg);border-right:1px solid #e5e6eb;font-size:15px}.window-bar{position:absolute;inset:0 auto auto 0;width:247px;height:48px;background:var(--sidebar-bg);display:flex;align-items:center;justify-content:center;z-index:3}.traffic{position:absolute;left:16px;top:18px;display:flex;gap:8px}.traffic i{width:12px;height:12px;border-radius:50%;background:#ff6059}.traffic i:nth-child(2){background:#ffbd2e}.traffic i:nth-child(3){background:#28c840}.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.nav{height:34px;margin:0 8px 3px;padding:0 8px;display:flex;align-items:center;gap:9px;border-radius:11px}.nav.active{background:#ececec;font-weight:600}.section-label{margin:38px 16px 8px;color:#838383;display:flex;align-items:center;gap:5px}.section-label .icon{width:14px}.project{height:37px;padding:0 16px;display:flex;align-items:center;gap:9px}.project .chevron{width:14px;color:#888}.task{margin:2px 10px;padding:9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:9px;font-size:14px}.task.selected{background:#ececec}.more{padding:15px 20px;color:#888}.profile{position:absolute;bottom:0;width:100%;height:70px;border-top:1px solid #e4e5eb;display:flex;gap:9px;padding:15px 20px;align-items:center}.avatar{background:#fa4266;color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.profile small{display:block;color:#929292;font-size:12px;margin-top:3px}.profile>.icon{margin-left:auto;color:#888;width:17px}#content{position:absolute;left:248px;right:0;top:0;bottom:0}.page{position:absolute;inset:0;background:var(--workspace-bg)}.home{padding:120px 0 24px;overflow-y:auto;overflow-x:hidden}.welcome{width:880px;margin:auto}.wordmark{width:344px;height:66px;mix-blend-mode:multiply;margin:0 auto;background:url('assets/kuwork-dot-wordmark-latest.png') -34.9px -21.4px / 412.8px auto no-repeat}h1{font-size:28px;line-height:34px;text-align:center;font-weight:500;margin:21px 0 25px;letter-spacing:0}.composer-wrap{position:relative;height:174px}.composer{height:134px;border:1px solid #e6e6e6;border-radius:22px;background:#fff;padding:12px;position:relative;z-index:2;box-shadow:0 4px 10px #00000004}.entry{font-size:17px;line-height:26px;min-height:65px;white-space:pre-wrap}.entry.empty{color:#888}.composer-bottom{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;height:32px}.round{width:32px;height:32px;display:grid;place-items:center;border:1px solid #e9e9e9;border-radius:50%;color:#707373;background:#fff}.model{margin-left:auto;display:flex;align-items:center;gap:7px;color:#858585;font-size:17px;margin-right:17px}.model>.icon{width:14px}.model .whale{width:16px;height:16px;fill:#202223;stroke:none}.send{color:#929494}.send.ready{background:#202223;color:white;border-color:#202223}.tray{position:absolute;left:20px;right:20px;top:116px;height:58px;background:#f3f3f5;border:1px solid #ddd;border-radius:0 0 19px 19px;padding:28px 24px 12px;display:flex;gap:9px;align-items:center;color:#8a8a8a;font-size:15px}.tray .chevron{width:14px}.filters{display:flex;justify-content:center;gap:12px;margin:20px 0 24px}.pill{border:1px solid #e8e8e8;padding:10px 16px;border-radius:24px;font-size:15px;color:#888;display:flex;gap:8px;align-items:center;height:41px}.pill .icon{width:16px}.pill.current{background:#1b1e1f;color:#fff;border-color:#1b1e1f}.template-header{display:flex;justify-content:space-between;font-size:16px;margin-bottom:22px}.template-header span{color:#168cff;font-size:14px}.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.template{background:rgba(255,255,255,.85);border:1px solid #e6e6e6;border-radius:21px;overflow:hidden}.thumb{height:158px;background-image:url('assets/workspace-reference.png');background-size:1562px 1131px;background-repeat:no-repeat}.template-name{font-size:15px;font-weight:500;padding:16px}.refresh{text-align:right;color:#888;font-size:14px;margin:24px 10px}.refresh .icon{width:17px;margin-right:7px}.header{height:56px;background:var(--workspace-bg);border-bottom:1px solid #e5e6eb;display:flex;align-items:center;padding:0 28px;gap:10px;font-size:17px}.header>.icon{color:#9298a3;width:20px;height:20px}.header .muted{color:#929292}.library-body{padding:32px}.library-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.library-top h2{font-weight:600;font-size:24px;margin:0}.native-button{border:1px solid #e3e3e3;border-radius:9px;height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;font-size:14px}.native-button.dark{background:#202223;color:white;border-color:#202223}.search{border:1px solid #e4e4e4;border-radius:8px;color:#999;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;width:265px;font-size:14px}.library-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.library-card{background:rgba(255,255,255,.85);border:1px solid #e5e5e5;border-radius:12px;padding:22px;height:142px}.library-card .book-icon{width:36px;height:36px;background:#f2f2f2;border-radius:8px;display:grid;place-items:center;margin-bottom:18px}.library-card strong{font-size:16px;font-weight:500}.library-card.hover{background:#fafafa;border-color:#ccc}.toolbar{display:flex;gap:10px;align-items:center}.table{width:100%;border-collapse:collapse;font-size:14px;margin-top:24px;text-align:left}.table th{color:#888;font-weight:400;height:45px;border-bottom:1px solid #e6e6e6}.table td{height:60px;border-bottom:1px solid #eee;color:#777}.table td:first-child{color:#242424;width:41%}.table td .icon{width:17px;color:#939393;margin-right:10px}.status{color:#478b66;background:#f0f8f3;padding:4px 8px;border-radius:5px;font-size:12px}.footnote{font-size:12px;color:#989898;margin-top:12px}.chat-body{padding:28px 0 0;max-width:940px;margin:0 auto}.bubble{margin-left:auto;background:#f4f4f5;border-radius:23px;padding:19px 24px;max-width:650px;font-size:17px;line-height:28px;white-space:pre-wrap}.answer{margin-top:35px;font-size:17px;line-height:1.95}.answer p{margin:0 0 22px}.answer h3{font-size:19px;margin:26px 0 14px;font-weight:600}.answer li{padding-left:3px;margin:9px 0}.cite{display:inline-block;font-size:12px;color:#7290b2;background:#f3f5f9;border-radius:4px;margin-left:7px;padding:0 5px;line-height:21px;vertical-align:middle}.source{display:flex;align-items:center;gap:8px;color:#939393;font-size:14px;margin-top:22px}.source .icon{width:16px}.chat-compose{position:absolute;left:34px;right:34px;bottom:36px}.chat-compose .composer{height:126px;box-shadow:none}.disclaimer{text-align:center;color:#aaa;font-size:11px;margin-top:10px}.caret{border-right:1.5px solid #333;animation:blink 1s step-end infinite}#pointer{position:absolute;left:0;top:0;z-index:20;pointer-events:none;filter:drop-shadow(0 1px 1px #0002);opacity:0}.pressed{transform:scale(.94)}.page.enter{animation:appear 180ms ease-out}.fade-reset{opacity:0;transition:opacity 200ms ease}.nav.ui-hover,.library-card.ui-hover{background:#efefef}.native-button.ui-hover{background:#f0f0f2}.send.ready.ui-hover{background:#303234;border-color:#303234;color:#fff}.send.ready.pressing{transform:scale(.92);background:#161819;border-color:#161819;color:#fff}.send{transition:transform 140ms ease,background-color 140ms ease;border-width:1px}.send .icon{width:18px;height:18px;stroke-width:1.8}@keyframes appear{from{opacity:.2}to{opacity:1}}@keyframes blink{50%{border-color:transparent}}@media(max-width:700px){body{padding:12px 8px;min-height:auto}#workspace-mat{width:100%;padding:8px;border-radius:24px}#viewport{border-radius:16px;width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#pointer{display:none}}

/* Streamed reply follows the existing document flow. */
.answer [hidden]{display:none!important}.stream-caret{display:inline-block;width:2px;height:1em;background:#46494e;vertical-align:-.12em;margin-left:3px;animation:blink-stream 800ms steps(2,end) infinite}.send.generating{background:#202223;border-color:#202223;color:#fff}.page.enter .bubble{animation:message-in 180ms ease-out}.source:not([hidden]){animation:appear 180ms ease-out}@keyframes blink-stream{50%{opacity:0}}@keyframes message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Embed the approved desktop composition at every screen width. */
html.embedded,html.embedded body{min-height:0;background:transparent}
html.embedded body{padding:0;display:block}
.embedded #workspace-mat{width:100%;max-width:none}
@media(max-width:700px){
 .embedded #workspace-mat{padding:4px;border-radius:10px}
 .embedded #viewport{border-radius:clamp(5px,1.5vw,10px);box-shadow:0 8px 22px rgba(15,17,21,.08),0 2px 6px rgba(15,17,21,.04)}
}

/* The host paints the outer shadow; keep every pixel inside this iframe unclipped. */
.embedded #viewport{box-shadow:none}

/* 16:10 desktop window: scroll content without distorting the product UI. */
.chat-page{display:flex;flex-direction:column}
.chat-page>.header{flex:none}
.chat-page .chat-body{flex:1;min-height:0;width:calc(100% - 68px);overflow-y:auto;overflow-x:hidden;padding-bottom:20px}
.chat-page .chat-compose{position:static;flex:none;margin:20px 34px 36px}

/* Window controls belong to the sidebar, matching the supplied product reference. */
.window-bar .sidebar-collapse{position:absolute;left:80px;top:17px;width:15px;height:15px;color:#909294;stroke-width:1.9}

/* English demo: longer labels need room; keep product geometry and hierarchy. */
html[data-demo-locale="en"] #sidebar{width:264px;font-size:14px}
html[data-demo-locale="en"] .window-bar{width:263px}
html[data-demo-locale="en"] #content{left:264px}
html[data-demo-locale="en"] .nav{height:36px;margin:0 10px 3px;padding:0 10px;gap:10px;border-radius:8px}
html[data-demo-locale="en"] #sidebar .icon{flex-shrink:0;width:18px;height:18px}
html[data-demo-locale="en"] .section-label{margin:26px 20px 8px;font-size:12px;font-weight:500;color:#858585;gap:6px}
html[data-demo-locale="en"] .project{height:36px;padding:0 20px;gap:10px;white-space:nowrap}
html[data-demo-locale="en"] .project .chevron{margin-left:auto;width:12px!important}
html[data-demo-locale="en"] .task{font-size:13px;line-height:20px;margin:2px 10px;padding:7px 10px;border-radius:7px}
html[data-demo-locale="en"] .more{font-size:12px;padding-left:20px}
html[data-demo-locale="en"] .profile{font-size:13px}
html[data-demo-locale="en"] .answer strong{margin-right:.25em}
/* The source thumbnail sprite has Chinese type badges; cover those in English. */
html[data-demo-locale="en"] .thumb{position:relative}
html[data-demo-locale="en"] .thumb::after{content:"Website";position:absolute;left:10px;bottom:8px;width:118px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#f1f2f4;color:#4c5156;font-size:12px;font-weight:500}
html[data-demo-locale="en"] .template:nth-child(1) .thumb::after{content:"Slides"}
html[data-demo-locale="en"] .template:nth-child(3) .thumb::after,html[data-demo-locale="en"] .template:nth-child(6) .thumb::after{content:"Document"}
html[data-demo-locale="en"] .template:nth-child(4) .thumb::after{content:"Dashboard"}