/* Claude study copies — screen layout only (where each part sits). The parts themselves come from ../claude/claude.css.
   Positions were measured on the real pictures (see each replica's header comment). */
html, body { margin: 0; height: 100%; }
body { background: var(--cl-page); }
.scr { position: relative; overflow: hidden; }
.scr [hidden] { display: none !important; }

/* ---------- home (new chat) ---------- */
.home-top { position: absolute; top: 10px; left: 10px; z-index: 3; }
.home-top.gone { display: none; }
.cl-home { padding-top: 165px; }
.cl-home .cl-greet { margin: 0 0 22px; height: 40px; }
.cl-home .cl-greet .cl-spark { width: 28px; height: 28px; margin-top: -1px; }
.cl-home .cl-composer { width: 579px; max-width: 100%; }
.cl-composer textarea { padding: 12px 16px 17px; min-height: 53px; }
.cl-composer-bar { padding: 0 9px 9px; gap: 2px; }
.cl-composer-bar .cl-icon-btn { color: var(--cl-text); }
.cl-home .cl-composer-bar .cl-ico, .convo .cl-composer-bar .cl-ico { width: 18px; height: 18px; }
.cl-home .cl-composer-bar { padding-right: 14px; }
.cl-home .cl-composer-bar .voice { margin-left: 4px; }
.cl-composer-bar .caret { width: 18px; margin-left: -6px; color: var(--cl-text-2); }
.cl-under { width: 579px; max-width: 100%; padding: 9px 0 0 8px; gap: 10px; }
.cl-under .cl-pick { height: 28px; font-size: 15px; letter-spacing: 0; }
.cl-under .cl-pick .cl-ico-sm { width: 14px; height: 14px; }
.cl-under .cl-model { padding: 0 6px; gap: 9px; font-size: 14px; }
.cl-menu--out { width: 347px; padding: 8px; border-radius: var(--cl-radius-menu); font-size: 15px; }
.cl-menu--out .cl-menu-item { font-size: 15px; }
.cl-menu--out .cl-menu-item { min-height: 38px; gap: 12px; padding: 0 8px; }
.cl-menu--out .cl-tile { width: 24px; height: 24px; border-radius: 6px; }
.cl-menu--out .cl-badge { margin-left: 2px; }
.cl-menu--out .cl-menu-sep { margin: 3px -8px 2px 28px; }
.cl-menu--out .cl-menu-item:last-child { min-height: 32px; }
.cl-menu--out .cl-menu-item:last-child .cl-ico { margin: 0 2px; }
.cl-menu--out .end { margin-left: 4px; }

/* conversation that grows out of the home screen (streaming answer) */
.convo { position: absolute; inset: 0; display: flex; flex-direction: column; }
.convo-scroll { flex: 1; min-height: 0; overflow: auto; padding-top: 48px; }
.convo .cl-thread { max-width: 680px; }
.convo-dock { flex: none; padding: 0 16px 14px; display: flex; flex-direction: column; align-items: center; }
.convo-dock .cl-composer { max-width: 680px; }
.convo-dock .cl-composer textarea { padding: 14px 16px 6px; min-height: 48px; }

/* ---------- chat with the artifact panel (desktop window, Sep 2026 video) ---------- */
.win { background: var(--cl-page); }
.chatcol { flex: none; width: 475px; height: 100%; display: flex; flex-direction: column; }
.win-top { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 20px; }
.lights { display: inline-flex; gap: 8px; margin-right: 10px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
html.cl-dark .lights i { filter: saturate(.9) brightness(.95); }
.win-top .cl-title-btn { font-size: 15px; gap: 8px; }
.chat-scroll { flex: 1; min-height: 0; overflow: auto; }
.chatcol .cl-thread { padding: 40px 24px 24px; gap: 24px; max-width: none; }
.chatcol .cl-msg-user { max-width: 325px; padding: 12px 18px; }
.chatcol .cl-msg-claude ul { padding-left: 1.4em; }
.chatcol .cl-msg-claude > p:first-child { margin-bottom: 14px; }
.chatcol .cl-step { margin-bottom: 14px; font-size: 15px; }
.chatcol .cl-art-card { margin-bottom: 18px; padding: 10px 12px 10px 14px; }
.chatcol .cl-art-card .cl-tile.big { width: 36px; height: 36px; border-radius: 8px; }
.chatcol .sp { margin-top: 16px; }
.chatcol .convo-dock { padding: 0 20px 34px; align-items: stretch; }
.chatcol .cl-composer { max-width: none; border-radius: 14px; }
.chatcol .cl-composer textarea { padding: 16px 16px 16px; min-height: 56px; }
.chatcol .cl-composer .cl-composer-bar { display: none; }
.chatcol .cl-composer { display: flex; align-items: center; }
.chatcol .cl-composer textarea { flex: 1; }
.chatcol .cl-composer .ret { flex: none; display: grid; place-items: center; width: 40px; color: var(--cl-text-2); }
.chat-under .cl-icon-btn { color: var(--cl-text-2); }
.chat-under .caret { width: 14px; margin-left: -6px; }
.chat-under .cl-model { font-size: 14px; gap: 8px; }
.chatcol .convo-dock::after { content: none; }
.chat-under { display: flex; align-items: center; gap: 2px; padding: 8px 4px 0; }
.cl-panel { margin: 14px 17px 17px 0; }
.cl-panel-head { height: 53px; padding: 0 10px 0 14px; }
.cl-panel-head .cl-title-btn { font-size: 15px; }
.cl-panel-tools.left { left: 8px; top: 64px; }
.cl-panel-tools.right { right: 8px; top: 64px; }
.cl-panel-body { padding: 175px 116px 105px 80px; place-items: start center; }
.slide { position: relative; width: 1302px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: #121618; color: #eef0ee; box-shadow: 0 10px 30px rgb(0 0 0 / .18); overflow: hidden; font-family: var(--cl-font-sans); }
.slide .s-brand { position: absolute; left: 76px; top: 64px; display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .32em; font-size: 18px; }
.slide .s-mark { width: 14px; height: 18px; border-radius: 2px; background: #2fb3cf; }
.slide .s-tag { position: absolute; right: 76px; top: 66px; font-size: 12px; letter-spacing: .14em; color: #8d9496; }
.slide .s-big { position: absolute; left: 72px; top: 300px; font-size: 150px; line-height: 1; font-weight: 700; font-stretch: 85%; letter-spacing: -.035em; }
.slide .s-big em, .slide .s-foot em { font-style: normal; color: #2fb3cf; }
.slide .s-line { position: absolute; left: 76px; right: 76px; bottom: 120px; height: 1px; background: #2a3033; }
.slide .s-foot { position: absolute; left: 76px; right: 76px; bottom: 76px; display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .16em; color: #8d9496; }
.slide .s-mid { position: absolute; left: 76px; top: 220px; right: 76px; font-size: 76px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.slide .s-sub { position: absolute; left: 80px; top: 420px; right: 300px; font-size: 26px; line-height: 1.4; color: #b8bebf; }
.cl-panel-strip { display: block; padding: 6px 16px 18px; }
.strip-tools { display: flex; align-items: center; gap: 4px; height: 36px; }
.strip-tools .grow { flex: 1; }
.thumbs { display: flex; gap: 12px; padding-top: 10px; }
.cl-thumb { width: 144px; height: 81px; }
.cl-thumb .tt { position: absolute; left: 8px; top: 30px; right: 8px; color: #eef0ee; font: 700 11px/1.1 var(--cl-font-sans); text-align: left; }
.scr.panel-full .chatcol { display: none; }

/* ---------- projects ---------- */
.cl-page-in { padding-top: 56px; }

/* ---------- settings (dialog, claude.com 2026 picture) ---------- */
.cl-settings .cl-set-nav { padding: 10px 13px 10px 11px; background: var(--cl-surface); }
.cl-settings .cl-set-nav .cl-side-label { padding: 22px 8px 9px; }
.cl-settings .cl-set-nav .cl-nav-item { padding: 0 9px 0 10px; gap: 12px; }
.cl-settings .cl-set-nav .cl-nav-item[aria-current="page"] { font-weight: 500; }
.cl-settings .cl-set-head { padding: 0 16px 0 29px; height: 52px; }
.cl-settings .cl-set-body { padding: 0 18px 0 29px; }
.cl-settings .cl-set-row { padding: 12px 0 13px; margin-right: 11px; }
.cl-settings .cl-set-row.noline { box-shadow: none; }
.cl-settings .cl-set-row span { margin-top: 3px; }
.cl-settings .cl-set-row a { color: var(--cl-text-2); text-decoration: underline; }
.cl-settings .cl-set-row .cl-btn { font-weight: 500; }
.cl-settings .cl-set-h { margin-top: 30px; padding-bottom: 10px; }
.cl-settings .cl-set-h + .cl-set-table + .cl-set-h { margin-top: 22px; }
.cl-settings .cl-set-table td.k { width: 209px; }
.cl-settings .cl-set-table td.d { width: 163px; }
.cl-settings .cl-set-table { width: calc(100% + 11px); }
.cl-settings .cl-set-table td.v { padding-right: 24px; }
.cl-settings .cl-set-ask { margin: 8px 17px 23px 25px; height: 48px; border-radius: 24px; }
.cl-set-ask .cl-send { border-radius: 50%; width: 30px; height: 30px; }
.cl-set-ask .cl-send:disabled { background: var(--cl-control); color: var(--cl-text-3); opacity: 1; }

/* ---------- login (real values: live page computed styles, 12 Oct 2026) ---------- */
.lg { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 0 64px; height: 100%; }
.lg-logo { position: absolute; left: 64px; z-index: 1; top: 0; height: 84px; display: flex; align-items: center; color: var(--cl-text); }
.lg-left { display: flex; flex-direction: column; align-items: center; padding-top: 223px; }
.lg-h { margin: 0; font-family: var(--cl-font-serif); font-weight: 330; font-size: var(--cl-fs-hero); line-height: var(--cl-lh-hero); letter-spacing: 0; text-align: center; font-variation-settings: "opsz" 18; }
.lg-sub { margin: 16px 0 0; font-family: var(--cl-font-response); font-weight: 400; letter-spacing: 0; font-variation-settings: "opsz" 15; font-size: 18px; line-height: 24.75px; text-align: center; }
.cl-login-card { margin-top: 32px; padding: 28px; box-shadow: inset 0 0 0 .5px var(--cl-border-strong), 0 4px 24px 0 rgb(0 0 0 / .016), 0 4px 32px 0 rgb(0 0 0 / .016), 0 2px 64px 0 rgb(0 0 0 / .012), 0 16px 32px 0 rgb(0 0 0 / .012); }
.lg-btns { display: grid; gap: 12px; }
.lg-btns .cl-btn, .lg-dl { gap: 4px; }
.cl-login-or { margin: 12px 0; text-transform: uppercase; }
.lg-form { display: flex; flex-direction: column; gap: 16px; }
.lg-err { margin: -8px 0 0; color: var(--cl-danger-text); font-size: 13px; }
.lg-legal { margin: 8px 0 0; color: var(--cl-text-3); font-size: 12px; line-height: 19.5px; text-align: center; }
.lg-legal .cl-link { text-decoration-color: currentColor; }
.lg-dl { margin-top: 24px; }
html.cl-dark .lg-btns img.apple, html.cl-dark .lg-dl img.win { filter: invert(1); }
.lg-art { margin: 90px 22px 54px 22px; border-radius: 24px; background: linear-gradient(160deg, #e9e4dc, #cfc6b8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #5f5e5a; font-size: 13px; }
html.cl-dark .lg-art { background: linear-gradient(160deg, #3a3631, #26231f); color: #b4b3a8; }
.lg-art img { width: 120px; height: 120px; opacity: .7; }
html.cl-dark .lg-art img { filter: invert(1); }
@media (max-width: 760px) { .lg { grid-template-columns: 1fr; } .lg-art { display: none; } }