/* ════════════════════════════════════════════════════════════════
   위장 껍데기 모양 (실제 앱에 맞춤)
   공용 구조(엔진 삽입): .dz-filler / .dz-convo>.dz-lines / .dz-entry
   ════════════════════════════════════════════════════════════════ */
.dz-convo.hidden{display:none}
.dz-pfx{white-space:pre}

/* ═══════════════ 구글 독스 ═══════════════ */
.skin-docs{background:#f9fbfd; color:#202124; font-family:"Google Sans",var(--font)}
.skin-docs .g-bar{display:flex; align-items:flex-start; gap:6px; padding:6px 14px 8px; background:#f9fbfd}
.skin-docs .g-logo{padding-top:4px}
.skin-docs .g-head{flex:1; min-width:0}
.skin-docs .g-row1{display:flex; align-items:center; gap:12px; height:30px}
.skin-docs .g-name{font-size:18px; color:#202124}
.skin-docs .g-star,.skin-docs .g-folder{color:#5f6368; font-size:15px}
.skin-docs .g-saved{font-size:12.5px; color:#5f6368; margin-left:4px}
.skin-docs .g-saved.busy{color:#1a73e8}
.skin-docs .g-menu{display:flex; gap:1px; font-size:13px; color:#3c4043; margin:-2px 0 0 -7px}
.skin-docs .g-right{display:flex; align-items:center; gap:14px; padding-top:2px}
.skin-docs .g-cam{color:#5f6368}
.skin-docs .g-share{display:flex; align-items:center; gap:7px; border:none; background:#c2e7ff; color:#001d35; font-size:14px; font-weight:600; padding:9px 18px; border-radius:20px}
.skin-docs .g-lock{font-size:12px}
.skin-docs .g-ava{width:30px; height:30px; border-radius:50%; background:#7b5ea7; color:#fff; display:grid; place-items:center; font-size:14px}
.skin-docs .g-toolwrap{padding:0 12px 8px; background:#f9fbfd}
.skin-docs .g-toolbar{display:flex; align-items:center; gap:3px; background:#edf2fa; border-radius:20px; padding:5px 14px; font-size:14px; color:#444746; height:40px}
.skin-docs .gt{min-width:26px; height:28px; display:grid; place-items:center; border-radius:4px; padding:0 4px}
.skin-docs .gt.wide{min-width:auto; padding:0 10px; font-size:13.5px}
.skin-docs .gt.num{min-width:34px; border:1px solid #dadce0; border-radius:4px; font-size:13px}
.skin-docs .gt.b{font-weight:700}.skin-docs .gt.i{font-style:italic}.skin-docs .gt.u{text-decoration:underline}
.skin-docs .gsep{width:1px; height:20px; background:#dadce0; margin:0 6px}
.skin-docs .g-area{flex:1; overflow-y:auto; padding:22px 0 90px; display:flex; justify-content:center; align-items:flex-start}
.skin-docs .g-page{width:min(816px,94%); background:#fff; box-shadow:0 1px 3px rgba(60,64,67,.25); padding:60px 72px; min-height:70vh; font-size:15px; line-height:2.0; color:#202124}
.skin-docs .dz-line{min-height:1.4em}
.skin-docs .dz-line.mine{padding-left:40px}
.skin-docs .dz-line.sub{color:#5f6368}
.skin-docs .dz-entry{display:flex; min-height:1.4em}
.skin-docs .dz-entry.mine{padding-left:40px}
.skin-docs .dz-input{font-size:15px; caret-color:#1a73e8; color:#202124}

/* ═══════════════ VS Code ═══════════════ */
.skin-vscode{background:#1e1e1e; color:#d4d4d4; font-family:var(--font)}
.skin-vscode .vs-titlebar{height:30px; background:#3c3c3c; color:#cccccc; display:flex; align-items:center; font-size:12px; padding:0 8px; gap:16px; flex:none}
.skin-vscode .vs-menus{display:flex; gap:0; height:100%; align-items:center}
.skin-vscode .vs-menus span{opacity:.86; padding:3px 7px; border-radius:5px; cursor:default}
.skin-vscode .vs-tt{flex:1; text-align:center; opacity:.75; font-size:12px}
.skin-vscode .vs-wc{display:flex; gap:16px}
.skin-vscode .vs-wc .x:hover{color:#fff}
.skin-vscode .vs-body{flex:1; display:flex; min-height:0}
.skin-vscode .vs-activity{width:48px; background:#333333; display:flex; flex-direction:column; align-items:center; color:#858585; flex:none}
.skin-vscode .vs-activity span{position:relative; width:48px; height:48px; display:grid; place-items:center; cursor:pointer}
.skin-vscode .vs-activity span.on{color:#fff; box-shadow:inset 2px 0 0 #fff}
.skin-vscode .vs-badge{position:absolute; right:8px; bottom:8px; background:#4d9bf0; color:#fff; font-size:9px; font-style:normal; min-width:15px; height:15px; border-radius:8px; display:grid; place-items:center; padding:0 3px}
.skin-vscode .vs-side{width:210px; background:#252526; color:#cccccc; display:flex; flex-direction:column; flex:none}
.skin-vscode .vs-side-h{font-size:11px; letter-spacing:.09em; color:#bbbbbb; padding:11px 18px 6px}
.skin-vscode .vs-proj{font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 12px; color:#cccccc}
.skin-vscode .vs-tree{font-size:13px; padding:2px 0}
.skin-vscode .vs-f{display:flex; align-items:center; gap:8px; padding:3px 12px 3px 26px; cursor:pointer; color:#cfcfcf}
.skin-vscode .vs-f.on{background:#37373d}
.skin-vscode .fi{width:14px; height:14px; border-radius:2px; display:inline-block; flex:none; background:#8a8a8a}
.skin-vscode .fi.html{background:#e44d26}.skin-vscode .fi.css{background:#2d9cdb}.skin-vscode .fi.js{background:#f0db4f}.skin-vscode .fi.md{background:#519aba}
.skin-vscode .vs-editor{flex:1; display:flex; flex-direction:column; min-width:0}
.skin-vscode .vs-tabs{height:36px; background:#252526; display:flex; flex:none}
.skin-vscode .vs-tab{display:flex; align-items:center; gap:8px; padding:0 12px; background:#1e1e1e; color:#fff; font-size:13px; border-top:1px solid #0a84ff; border-right:1px solid #191919}
.skin-vscode .vs-dot{font-style:normal; color:#c5c5c5; font-size:11px; margin-left:2px}
.skin-vscode .vs-dot.dirty{color:#fff; font-size:13px}
.skin-vscode .vs-code{flex:1; overflow-y:auto; padding:8px 0 90px; font-family:var(--mono); font-size:13.5px; line-height:1.62; counter-reset:ln}
.skin-vscode .dz-line,.skin-vscode .dz-entry{position:relative; padding-left:64px; white-space:pre-wrap; min-height:1.62em}
.skin-vscode .dz-line::before,.skin-vscode .dz-entry::before{counter-increment:ln; content:counter(ln); position:absolute; left:0; width:48px; text-align:right; color:#858585; font-variant-numeric:tabular-nums}
.skin-vscode .dz-filler .dz-line{color:#d4d4d4}
.skin-vscode .dz-filler .k{color:#569cd6}
.skin-vscode .dz-filler .f{color:#dcdcaa}
.skin-vscode .dz-filler .s{color:#ce9178}
.skin-vscode .dz-lines .dz-line{color:#6a9955}
.skin-vscode .dz-lines .dz-line.sub{color:#5a8a52}
.skin-vscode .dz-lines .dz-line.mine{padding-left:92px}
.skin-vscode .dz-entry{color:#6a9955}
.skin-vscode .dz-input{caret-color:#aeafad; color:#6a9955}
.skin-vscode .vs-status{height:22px; background:#007acc; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 10px; font-size:11.5px; flex:none}
.skin-vscode .vs-status .l,.skin-vscode .vs-status .r{display:flex; gap:15px; align-items:center}

/* ═══════════════ 메모장 (Windows 11) ═══════════════ */
.skin-notepad{background:#fff; color:#1b1b1b; font-family:var(--font)}
.skin-notepad .np-tabbar{height:40px; background:#dfe2e7; display:flex; align-items:flex-end; padding:0 4px; gap:2px; flex:none}
.skin-notepad .np-tab{display:flex; align-items:center; gap:10px; background:#fff; padding:7px 10px 8px 14px; border-radius:8px 8px 0 0; font-size:13px; color:#1b1b1b; min-width:150px}
.skin-notepad .np-tab-t{display:flex; align-items:center; gap:4px}
.skin-notepad .np-tab-t b{color:#1b1b1b; font-weight:400}
.skin-notepad .np-tab-x{margin-left:auto; color:#555; font-size:11px}
.skin-notepad .np-newtab{color:#444; font-size:16px; padding:0 10px; align-self:center}
.skin-notepad .np-wc{margin-left:auto; display:flex; gap:0; align-self:stretch}
.skin-notepad .np-wc span{width:46px; display:grid; place-items:center; font-size:11px; color:#1b1b1b}
.skin-notepad .np-wc .x:hover{background:#e81123; color:#fff}
.skin-notepad .np-menu{height:34px; background:#fff; display:flex; align-items:center; gap:4px; padding:0 10px; font-size:13px; color:#1b1b1b; border-bottom:1px solid #eee; flex:none}
.skin-notepad .np-menu span{padding:5px 9px; border-radius:5px}
.skin-notepad .np-gear{margin-left:auto}
.skin-notepad .np-paper{flex:1; overflow-y:auto; padding:8px 12px 90px; font-family:var(--mono); font-size:15px; line-height:1.7; color:#1b1b1b}
.skin-notepad .dz-line{min-height:1.3em}
.skin-notepad .dz-line.mine{padding-left:28px}
.skin-notepad .dz-line.sub{color:#777}
.skin-notepad .dz-entry{display:flex; min-height:1.3em}
.skin-notepad .dz-entry.mine{padding-left:28px}
.skin-notepad .dz-input{caret-color:#1b1b1b; color:#1b1b1b; font-family:var(--mono); font-size:15px}
.skin-notepad .np-status{height:26px; background:#f7f7f7; border-top:1px solid #e6e6e6; display:flex; align-items:center; gap:18px; padding:0 14px; font-size:12px; color:#555; flex:none}
.skin-notepad .np-status .sp{flex:1}

/* ═══════════════ 메모장 (Windows 10 · 클래식) ═══════════════ */
.skin-notepad10{background:#fff; color:#000; font-family:var(--font)}
.skin-notepad10 .n10-title{height:30px; background:#f0f0f0; border-bottom:1px solid #dcdcdc; display:flex; align-items:center; gap:8px; padding:0 0 0 8px}
.skin-notepad10 .n10-ic{font-size:13px}
.skin-notepad10 .n10-t{flex:1; font-size:12.5px; color:#000}
.skin-notepad10 .n10-wc{display:flex; height:30px}
.skin-notepad10 .n10-wc b{width:46px; display:grid; place-items:center; font-size:12px; color:#000; font-weight:400}
.skin-notepad10 .n10-wc .x:hover{background:#e81123; color:#fff}
.skin-notepad10 .n10-menu{height:24px; background:#fff; display:flex; align-items:center; padding:0 2px; font-size:12px; color:#000; border-bottom:1px solid #f0f0f0; flex:none}
.skin-notepad10 .n10-menu span{padding:3px 8px}
.skin-notepad10 .np-paper{flex:1; overflow-y:auto; padding:2px 5px 90px; font-family:"Consolas",var(--mono); font-size:15px; line-height:1.5; color:#000; background:#fff}
.skin-notepad10 .dz-line{min-height:1.5em}
.skin-notepad10 .dz-line.mine{padding-left:28px}
.skin-notepad10 .dz-line.sub{color:#777}
.skin-notepad10 .dz-entry{display:flex}
.skin-notepad10 .dz-entry.mine{padding-left:28px}
.skin-notepad10 .dz-input{caret-color:#000; color:#000; font-family:"Consolas",var(--mono); font-size:15px}
.skin-notepad10 .n10-status{height:22px; background:#f0f0f0; border-top:1px solid #dcdcdc; display:flex; justify-content:flex-end; gap:20px; align-items:center; padding:0 16px; font-size:12px; color:#000; flex:none}

/* ═══════════════ 상단 메뉴 드롭다운 (skinmenu.js) ═══════════════ */
.skin .mn{cursor:default; user-select:none}
.sk-dd{position:fixed; z-index:50; overflow:auto; user-select:none; cursor:default}
.sk-dd .sk-it{display:flex; align-items:center; white-space:nowrap}
.sk-dd .sk-ck{width:22px; flex:none; text-align:center}
.sk-dd .sk-lb{flex:1; padding-right:28px}
.sk-dd .sk-sc{flex:none; text-align:right}
.sk-dd .sk-it.dis{opacity:.42}

/* 구글 독스 */
.skin-docs .g-menu span{padding:2px 7px; border-radius:4px}
.skin-docs .g-menu span:hover,.skin-docs .g-menu span.mn-open{background:#e8eaed}
.skin-docs .sk-dd{background:#fff; color:#202124; border-radius:6px; box-shadow:0 2px 6px 2px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.3); padding:6px 0; font:14px/1 "Google Sans",Roboto,Arial,sans-serif; min-width:300px}
.skin-docs .sk-it{height:32px; padding:0 16px 0 6px}
.skin-docs .sk-it:not(.dis):hover{background:#f1f3f4}
.skin-docs .sk-sc{color:#80868b; font-size:13px}
.skin-docs .sk-sep{height:1px; background:#dadce0; margin:6px 0}
.skin-docs .gt{cursor:default; border-radius:4px}
.skin-docs .gt:hover{background:#e1e5ea}
.skin-docs .g-share:hover{background:#b4cdf6}

/* VS Code */
.skin-vscode .vs-menus span:hover,.skin-vscode .vs-menus span.mn-open{background:rgba(255,255,255,.1); opacity:1}
.skin-vscode .sk-dd{background:#252526; color:#cccccc; border:1px solid #454545; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,.36); padding:4px 0; font:13px/1 var(--font); min-width:260px}
.skin-vscode .sk-it{height:26px; padding:0 22px 0 4px; margin:0 4px; border-radius:3px}
.skin-vscode .sk-ck{width:20px}
.skin-vscode .sk-it:not(.dis):hover{background:#04395e; color:#fff}
.skin-vscode .sk-sc{font-size:12px; opacity:.9}
.skin-vscode .sk-sep{height:1px; background:#454545; margin:4px 0}
.skin-vscode .vs-wc span{cursor:default; padding:0 4px}
.skin-vscode .vs-activity span:hover{color:#fff}
.skin-vscode .vs-f:hover{background:#2a2d2e}
.skin-vscode .vs-status span{cursor:default}
.skin-vscode .vs-status span:hover{background:rgba(255,255,255,.12)}

/* 메모장 Win11 */
.skin-notepad .np-menu span{cursor:default}
.skin-notepad .np-menu span:hover,.skin-notepad .np-menu span.mn-open{background:#f0f0f0}
.skin-notepad .sk-dd{background:#f9f9f9; color:#1b1b1b; border:1px solid rgba(0,0,0,.1); border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,.14); padding:4px; font:14px/1 "Segoe UI Variable Text","Segoe UI",var(--font); min-width:260px; margin-top:2px}
.skin-notepad .sk-it{height:32px; padding:0 12px 0 6px; border-radius:4px}
.skin-notepad .sk-it:not(.dis):hover{background:rgba(0,0,0,.05)}
.skin-notepad .sk-sc{color:#5f5f5f; font-size:12px}
.skin-notepad .sk-sep{height:1px; background:rgba(0,0,0,.08); margin:2px -4px}
.skin-notepad .np-tab-x,.skin-notepad .np-newtab,.skin-notepad .np-gear{cursor:default; border-radius:4px}
.skin-notepad .np-newtab:hover,.skin-notepad .np-gear:hover{background:#ececec}
.skin-notepad .np-wc span{cursor:default}
.skin-notepad .np-wc span:not(.x):hover{background:rgba(0,0,0,.06)}

/* 메모장 Win10 (클래식) */
.skin-notepad10 .n10-menu span{cursor:default; border:1px solid transparent}
.skin-notepad10 .n10-menu span:hover{background:#e5f3ff; border-color:#cce8ff}
.skin-notepad10 .n10-menu span.mn-open{background:#cce8ff; border-color:#99d1ff}
.skin-notepad10 .sk-dd{background:#f2f2f2; color:#000; border:1px solid #ccc; box-shadow:2px 2px 3px rgba(0,0,0,.25); padding:2px; font:12px/1 "Segoe UI","Malgun Gothic","Yu Gothic UI",var(--font); min-width:240px}
.skin-notepad10 .sk-it{height:22px; padding:0 18px 0 6px}
.skin-notepad10 .sk-ck{width:24px}
.skin-notepad10 .sk-it:not(.dis):hover{background:#91c9f7}
.skin-notepad10 .sk-it.dis{opacity:1; color:#6d6d6d}
.skin-notepad10 .sk-sep{height:1px; background:#d7d7d7; margin:3px 2px 3px 30px}
.skin-notepad10 .n10-wc b{cursor:default}
.skin-notepad10 .n10-wc b:not(.x):hover{background:#e5e5e5}

/* 위장 화면의 사진·파일 줄: 평소엔 일반 글자, 마우스 올리면 밑줄(클릭하면 열림) */
.skin .dz-line.dz-file{cursor:pointer}
.skin .dz-line.dz-file:hover{text-decoration:underline}

/* ═══════════════ 메모 탭 (memotabs.js) ═══════════════ */
.memo-wrap{flex:1; display:flex; min-height:0}
.memo-wrap[hidden],.skin .np-paper[hidden],.skin .vs-code[hidden]{display:none}
.memo-ta{flex:1; border:none; outline:none; resize:none; margin:0; background:transparent; color:inherit; font:inherit; white-space:pre-wrap; overflow-y:auto}
.skin .np-tab,.skin .vs-tab{cursor:default; user-select:none}
/* 메모장 Win11 */
.skin-notepad .memo-ta{padding:8px 12px 40px; font-family:var(--mono); font-size:15px; line-height:1.7; color:#1b1b1b; background:#fff; caret-color:#1b1b1b}
.skin-notepad .np-tab:not(.on){background:transparent; color:#1b1b1b}
.skin-notepad .np-tab:not(.on):hover{background:rgba(255,255,255,.55)}
.skin-notepad .np-tab-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.skin-notepad .np-tab-x:hover{background:#e6e6e6}
/* VS Code */
.skin-vscode .memo-wrap{background:#1e1e1e}
.skin-vscode .memo-gut{width:56px; flex:none; overflow:hidden; padding:8px 0 40px; color:#858585; text-align:right; font-family:var(--mono); font-size:13.5px; line-height:1.62; font-variant-numeric:tabular-nums}
.skin-vscode .memo-gut div{padding-right:18px}
.skin-vscode .memo-ta{padding:8px 0 40px 8px; font-family:var(--mono); font-size:13.5px; line-height:1.62; color:#d4d4d4; caret-color:#aeafad; white-space:pre; overflow:auto}
.skin-vscode .vs-tab:not(.on){background:#2d2d2d; color:#969696; border-top-color:transparent}
.skin-vscode .vs-tab:not(.on) .vs-dot{visibility:hidden}
.skin-vscode .vs-tab:not(.on):hover .vs-dot{visibility:visible}
.skin-vscode .vs-tab-t{white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis}
.skin-vscode .vs-x{cursor:default; border-radius:3px; padding:1px 3px}
.skin-vscode .vs-x:hover{background:rgba(255,255,255,.1)}
.skin-vscode .vs-tabs{overflow-x:auto; scrollbar-width:none}
.skin-vscode .fi.txt{background:#a8a8a8}

/* ═══════════════ 문서 스킨: 진짜 편집 (docsedit.js) ═══════════════ */
.skin-docs .g-doc{outline:none; font-family:Arial, "Malgun Gothic", "Yu Gothic", sans-serif; font-size:11pt; line-height:1.6; min-height:40vh; caret-color:#202124; cursor:text}
.skin-docs .g-doc p,.skin-docs .g-doc div{margin:0}
.skin-docs .g-doc h1{font-size:20pt; font-weight:400; margin:14pt 0 4pt}
.skin-docs .g-doc h2{font-size:16pt; font-weight:400; margin:12pt 0 4pt}
.skin-docs .g-doc h3{font-size:14pt; font-weight:400; color:#434343; margin:10pt 0 4pt}
.skin-docs .g-doc ul,.skin-docs .g-doc ol{margin:0; padding-left:28px}
.skin-docs .gt.on{background:#d3e3fd; color:#0b57d0}
.skin-docs .gt.gsel{gap:2px; display:flex; align-items:center}
.skin-docs .gt.a{position:relative; flex-direction:column; line-height:1}
.skin-docs .g-cbar{display:block; width:14px; height:3px; margin-top:1px; background:#000}
.skin-docs .gt.num{cursor:pointer}
.g-dd{position:fixed; z-index:60; background:#fff; border-radius:6px; padding:6px 0; box-shadow:0 2px 6px 2px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.3); max-height:60vh; overflow:auto; min-width:120px; font:14px Arial, "Malgun Gothic", sans-serif; color:#202124}
.g-ddi{padding:7px 18px; cursor:default; white-space:nowrap}
.g-ddi:hover{background:#f1f3f4}
.g-sw{display:grid; grid-template-columns:repeat(6,20px); gap:6px; padding:8px 12px}
.g-sw i{width:20px; height:20px; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.g-sw i.none{background:linear-gradient(135deg,#fff 45%,#e5484d 47%,#e5484d 53%,#fff 55%) !important}
@media print{ body *{visibility:hidden} .skin-docs .g-doc, .skin-docs .g-doc *{visibility:visible} .skin-docs .g-doc{position:absolute; left:0; top:0} }

/* ═══════════════ VS Code: 실제 편집 (vscodex.js) ═══════════════ */
.skin-vscode .vs-side[hidden]{display:none}
.skin-vscode .vs-side [hidden]{display:none !important}
.skin-vscode .memo-hlbox{position:relative; flex:1; min-width:0; overflow:hidden}
.skin-vscode .memo-hl,.skin-vscode .memo-ta.on-hl{position:absolute; inset:0; margin:0; padding:8px 0 40px 8px; font-family:var(--mono); font-size:13.5px; line-height:1.62; white-space:pre; tab-size:2; overflow:auto; box-sizing:border-box; border:none}
.skin-vscode .memo-hl{color:#d4d4d4; pointer-events:none; overflow:hidden}
.skin-vscode .memo-ta.on-hl{color:transparent; background:transparent; caret-color:#aeafad; resize:none; outline:none}
.skin-vscode .memo-ta.on-hl::selection{background:rgba(38,79,120,.85); color:transparent}
.skin-vscode .memo-hl .k{color:#569cd6}.skin-vscode .memo-hl .f{color:#dcdcaa}.skin-vscode .memo-hl .s{color:#ce9178}.skin-vscode .memo-hl .c{color:#6a9955}.skin-vscode .memo-hl .n{color:#b5cea8}
.skin-vscode .memo-hl .t{color:#569cd6}.skin-vscode .memo-hl .a{color:#9cdcfe}.skin-vscode .memo-hl .pu{color:#808080}
.skin-vscode .memo-hl .sel{color:#d7ba7d}.skin-vscode .memo-hl .p{color:#9cdcfe}.skin-vscode .memo-hl .v{color:#ce9178}
.skin-vscode .dz-filler .c{color:#6a9955}.skin-vscode .dz-filler .n{color:#b5cea8}
.skin-vscode .fi.txt{background:#a8a8a8}
.skin-vscode .vsx-panel{display:flex; flex-direction:column; min-height:0; flex:1; overflow:auto}
.skin-vscode .vsx-sbox{padding:4px 12px 8px}
.skin-vscode .vsx-sbox input,.skin-vscode .vsx-note input{width:100%; box-sizing:border-box; background:#3c3c3c; border:1px solid #3c3c3c; color:#ccc; padding:4px 6px; font:13px var(--font); outline:none}
.skin-vscode .vsx-sbox input:focus,.skin-vscode .vsx-note input:focus{border-color:#007fd4}
.skin-vscode .vsx-rf{display:flex; align-items:center; gap:6px; padding:3px 12px; font-size:13px; color:#ccc}
.skin-vscode .vsx-rf em{margin-left:auto; font-style:normal; background:#4d4d4d; border-radius:9px; padding:0 6px; font-size:11px}
.skin-vscode .vsx-rl{padding:2px 12px 2px 34px; font-size:12.5px; color:#bbb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.skin-vscode .vsx-rl:hover{background:#2a2d2e}
.skin-vscode .vsx-rl mark{background:rgba(234,92,0,.33); color:inherit}
.skin-vscode .vsx-none{padding:6px 18px; font-size:12.5px; color:#999}
.skin-vscode .vsx-note{padding:4px 14px; font-size:12.5px; color:#bbb; display:flex; flex-direction:column; gap:8px}
.skin-vscode .vsx-btn{background:#0e639c; color:#fff; border:none; padding:6px; font:13px var(--font); cursor:pointer}
.skin-vscode .vsx-btn:hover{background:#1177bb}
.skin-vscode .vsx-sub{font-size:11px; letter-spacing:.04em; color:#bbb}
.skin-vscode .vsx-chg{display:flex; align-items:center; gap:6px; font-size:13px}
.skin-vscode .vsx-chg span{margin-left:auto; color:#e2c08d}
.skin-vscode .vsx-ext{display:flex; flex-direction:column; padding:4px 0; border-bottom:1px solid #2d2d2d}
.skin-vscode .vsx-ext span{font-size:11.5px; color:#999}
.skin-vscode .vsx-term{height:34%; min-height:120px; border-top:1px solid #414141; background:#1e1e1e; display:flex; flex-direction:column; flex:none}
.skin-vscode .vsx-term[hidden]{display:none}
.skin-vscode .vsx-th{display:flex; gap:18px; align-items:center; padding:0 14px; height:34px; font-size:11px; color:#969696; letter-spacing:.03em; flex:none}
.skin-vscode .vsx-th span.on{color:#e7e7e7; box-shadow:inset 0 -1px 0 #e7e7e7; padding:9px 0}
.skin-vscode .vsx-tx{margin-left:auto; font-weight:400; cursor:pointer; padding:2px 5px}
.skin-vscode .vsx-tx:hover{background:rgba(255,255,255,.1)}
.skin-vscode .vsx-tb{flex:1; overflow:auto; padding:2px 14px 8px; font:13px/1.45 Consolas,var(--mono); color:#ccc; cursor:text}
.skin-vscode .vsx-out{margin:0; font:inherit; white-space:pre-wrap}
.skin-vscode .vsx-line{display:flex}
.skin-vscode .vsx-ps{white-space:pre}
.skin-vscode .vsx-in{flex:1; background:transparent; border:none; outline:none; color:#ccc; font:inherit; padding:0; caret-color:#ccc}

/* Mac shells: intentionally scoped so existing skins retain their styling. */
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) {
  font-family:
    -apple-system,
    "SF Pro Text",
    "Hiragino Sans",
    "Apple SD Gothic Neo",
    sans-serif;
  font-size: 13px;
  --mac-bg:#fff;
  --mac-chrome:#f2f1ef;
  --mac-side:#e9e8e6;
  --mac-text:#282828;
  --mac-muted:#797979;
  --mac-line:#d7d6d3;
  --mac-selected:#d9d9d7;
  background: var(--mac-bg);
  color: var(--mac-text);
}
body.dark :is(.skin-macnotes, .skin-finder, .skin-chrome) {
  --mac-bg:#242424;
  --mac-chrome:#30302f;
  --mac-side:#282827;
  --mac-text:#e9e9e7;
  --mac-muted:#a4a4a0;
  --mac-line:#41413f;
  --mac-selected:#454543;
}
.mac-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--mac-side);
  padding: 18px 10px;
  color: var(--mac-text);
  border-right: 1px solid var(--mac-line);
  overflow: auto;
}
.mac-sidebar strong {
  display: block;
  font-size: 11px;
  color: var(--mac-muted);
  margin: 7px 10px 8px;
}
.mac-sidebar > div {
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.mac-sidebar strong:not(:first-child) {
  margin-top: 26px;
}
.mac-sidebar small {
  float: right;
}
.mac-selected {
  background: var(--mac-selected);
}
.mac-toolbar {
  height: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--mac-chrome);
  border-bottom: 1px solid var(--mac-line);
  color: var(--mac-muted);
}
.mac-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 26px;
  flex-shrink: 0;
  font-size: 18px;
}
.mac-tool svg,
.mac-board-search svg,
.mac-creative-options svg {
  width: 19px;
  height: 19px;
}
.mac-paper {
  padding: 22px 32px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  background: var(--mac-bg);
  color: var(--mac-text);
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mac-paper .dz-line {
  min-height: 1.85em;
}
.mac-paper .dz-entry {
  display: flex;
  margin-top: 12px;
  min-height: 28px;
}
.mac-paper .dz-input {
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
  min-width: 0;
  width: 100%;
  padding: 0;
}
.mac-paper .dz-pfx {
  font: inherit;
}
.mac-paper .dz-lines {
  padding-bottom: 4px;
}
.mac-notes-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.mac-note-list {
  width: 248px;
  flex-shrink: 0;
  border-right: 1px solid var(--mac-line);
  padding: 12px 10px;
  overflow: auto;
  background: var(--mac-bg);
}
.mac-note-list > div {
  padding: 16px 14px;
  border-radius: 7px;
  border-bottom: 1px solid var(--mac-line);
}
.mac-note-list b {
  font-size: 14px;
}
.mac-note-list p {
  font-size: 11px;
  color: var(--mac-muted);
  margin: 8px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mac-note-selected {
  background: #f7e3a7;
  color: #352d1b;
}
.mac-note-selected p {
  color: #776644;
}
.mac-note-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}
.mac-note-date {
  text-align: center;
  font-size: 11px;
  color: var(--mac-muted);
  padding-top: 18px;
}
.mac-note-main .mac-paper {
  padding-top: 18px;
}
.mac-finder-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.mac-finder-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.mac-finder-main .mac-toolbar b {
  margin-left: auto;
  color: var(--mac-text);
}
.mac-finder-content {
  display: flex;
  flex: 1;
  min-height: 0;
}
.mac-file-list {
  flex: 1;
  overflow: auto;
  min-width: 300px;
  padding: 0 8px;
}
.mac-file-row {
  display: grid;
  grid-template-columns: minmax(170px, 2fr) minmax(95px, 1fr) 70px 65px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 11px;
}
.mac-file-row:nth-child(odd):not(.mac-selected) {
  background: var(--mac-chrome);
}
.mac-file-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mac-file-heading {
  position: sticky;
  top: 0;
  background: var(--mac-chrome);
  color: var(--mac-muted);
  border-bottom: 1px solid var(--mac-line);
}
.mac-preview {
  display: flex;
  flex-direction: column;
  width: 39%;
  min-width: 280px;
  border-left: 1px solid var(--mac-line);
}
.mac-preview-label {
  padding: 20px 24px 4px;
  font-weight: 600;
}
.mac-preview .mac-paper {
  padding: 16px 24px;
  font-size: 13px;
}
.mac-finder-status {
  padding: 9px 16px;
  background: var(--mac-chrome);
  border-top: 1px solid var(--mac-line);
  font-size: 11px;
  color: var(--mac-muted);
}
.mac-finder-status span {
  float: right;
}

:is(.skin-photoshop, .skin-illustrator) {
  --mac-bg:#fff;
  --mac-text:#292929;
  --mac-chrome:#303030;
  --mac-side:#333;
  --mac-line:#171717;
  --mac-muted:#bbb;
  background: #292929;
  color: #ddd;
}
.mac-creative-menu {
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 12px;
  background: #333;
  font-size: 11px;
  color: #ddd;
}
.mac-creative-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #8bc6ed;
  color: #8bc6ed;
  background: #17212b;
}
.skin-illustrator .mac-creative-mark {
  color: #edba72;
  border-color: #edba72;
  background: #302516;
}
.mac-creative-options {
  height: 39px;
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-top: 1px solid #444;
  border-bottom: 1px solid #171717;
  background: #383838;
  color: #ccc;
  font-size: 11px;
}
.mac-creative-work {
  display: flex;
  flex: 1;
  min-height: 0;
}
.mac-creative-tools {
  width: 43px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
  padding-top: 13px;
  background: #333;
  border-right: 1px solid #171717;
  color: #ddd;
}
.mac-creative-tools .mac-tool {
  width: 30px;
  height: 29px;
}
.mac-creative-tools .mac-tool:first-child {
  background: #202020;
  outline: 1px solid #555;
}
.mac-color-chips {
  width: 23px;
  height: 23px;
  background: #222;
  border: 2px solid #ddd;
  box-shadow: 6px 6px 0 #ddd;
  margin-top: 18px;
}
.mac-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  background: #262626;
}
.mac-document-tab {
  height: 32px;
  min-height: 32px;
  padding: 9px 14px;
  background: #3b3b3b;
  border-bottom: 1px solid #161616;
  font-size: 11px;
  color: #ddd;
}
.mac-document-tab span {
  margin-left: 25px;
  color: #aaa;
}
.mac-ruler {
  height: 19px;
  min-height: 19px;
  white-space: nowrap;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      #666 9px 10px) bottom/100% 4px no-repeat,
    #343434;
  color: #aaa;
  font-size: 9px;
  padding-left: 12px;
}
.mac-artboard-area {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 34px 42px;
  overflow: auto;
  box-shadow: inset 0 0 20px #0003;
}
.mac-artboard {
  width: 100%;
  max-width: 800px;
  background: #fff;
  color: #292929;
  box-shadow: 0 5px 18px #0006;
  display: flex;
  flex-direction: column;
  min-height: 430px;
}
.mac-artboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 32px 0;
  border-bottom: 2px solid #292929;
  padding-bottom: 12px;
  letter-spacing: 2px;
  font-size: 10px;
}
.mac-artboard-head span {
  font-size: 23px;
}
.mac-artboard .mac-paper {
  overflow: auto;
  padding-top: 20px;
  font-size: 13px;
}
.mac-artboard-foot {
  margin: 10px 32px 24px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
  letter-spacing: 2px;
  font-size: 8px;
  color: #999;
}
.mac-creative-status {
  height: 23px;
  min-height: 23px;
  background: #333;
  padding: 5px 12px;
  color: #bbb;
  font-size: 10px;
}
.mac-creative-panels {
  width: 238px;
  flex-shrink: 0;
  background: #303030;
  border-left: 1px solid #171717;
  color: #ccc;
  font-size: 11px;
}
.mac-panel-tabs {
  padding: 13px 12px;
  background: #3b3b3b;
  border-bottom: 1px solid #222;
  font-weight: 600;
}
.mac-panel-content {
  padding: 20px 14px;
  min-height: 145px;
}
.mac-panel-content p {
  font-size: 10px;
  color: #aaa;
  margin-top: 20px;
}
.mac-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 17px;
  min-height: 110px;
}
.mac-swatches i {
  height: 24px;
  border: 1px solid #555;
}
.mac-layer {
  padding: 15px 12px;
  border-bottom: 1px solid #262626;
}
.mac-layer:nth-last-child(3) {
  background: #505050;
}
.mac-board-header {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 23px 5%;
  border-bottom: 1px solid var(--mac-line);
  font-size: 12px;
  background: var(--mac-bg);
}
.mac-board-header > b {
  font-size: 18px;
  letter-spacing: -.5px;
}
.mac-board-header > span {
  color: var(--mac-muted);
}
.mac-board-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mac-muted);
  background: var(--mac-chrome);
  padding: 10px 18px;
  border-radius: 30px;
  min-width: 210px;
}
.mac-board {
  flex: 1;
  overflow: auto;
  padding: 40px max(5%, calc((100% - 1160px)/2)) 60px;
  background: var(--mac-chrome);
}
.mac-board-heading small {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--mac-muted);
}
.mac-board-heading h1 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -1px;
  margin: 14px 0;
}
.mac-board-heading p {
  color: var(--mac-muted);
  font-size: 13px;
  margin-bottom: 34px;
}
.mac-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 26px;
}
.mac-board-notes {
  background: var(--mac-bg);
  border: 1px solid var(--mac-line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 520px;
}
.mac-board-notes > small {
  display: block;
  padding: 25px 32px 0;
  color: var(--mac-muted);
  letter-spacing: 2px;
  font-size: 10px;
}
.mac-board-notes .mac-paper {
  padding-top: 20px;
}
.mac-reference {
  height: 190px;
  padding: 25px;
  overflow: hidden;
  border-radius: 8px;
}
.mac-reference-one {
  background:
    radial-gradient(
      ellipse at 80% 70%,
      #bd745b 0 22%,
      transparent 22.5%),
    linear-gradient(
      130deg,
      #c9d1be,
      #eee4ca);
  color: #333e36;
  font-size: 36px;
  letter-spacing: -2px;
  line-height: .95;
}
.mac-reference-two {
  background: #343b5a;
  color: #e9e2cd;
  font-size: 55px;
  line-height: 1.1;
}
.mac-board-grid aside p {
  font-size: 11px;
  color: var(--mac-muted);
  margin: 12px 0 24px;
}
@media (max-width: 1000px) {
  .mac-note-list {
    width: 190px;
  }
  .mac-sidebar {
    width: 150px;
  }
  .mac-creative-panels {
    width: 190px;
  }
  .mac-artboard-area {
    padding: 24px;
  }
  .mac-file-row {
    grid-template-columns: minmax(160px, 1fr) 90px;
  }
  .mac-file-row span:nth-child(n+3) {
    display: none;
  }
  .mac-board-header > span {
    display: none;
  }
}
@media (max-width: 700px) {
  .mac-note-list,
  .mac-sidebar,
  .mac-creative-panels {
    display: none;
  }
  .mac-toolbar {
    gap: 13px;
    padding: 0 14px;
  }
  .mac-preview {
    width: 100%;
    border-left: 0;
    min-width: 0;
  }
  .mac-file-list {
    display: none;
  }
  .mac-finder-status span {
    display: none;
  }
  .mac-artboard-area {
    padding: 15px;
  }
  .mac-artboard-head {
    margin: 22px 20px 0;
  }
  .mac-artboard .mac-paper {
    padding: 18px 20px;
  }
  .mac-creative-menu {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
  }
  .mac-board-header {
    padding: 18px;
    gap: 12px;
  }
  .mac-board-search {
    min-width: 0;
    font-size: 0;
    padding: 8px;
  }
  .mac-board {
    padding: 26px 18px;
  }
  .mac-board-heading h1 {
    font-size: 24px;
  }
  .mac-board-grid {
    grid-template-columns: 1fr;
  }
  .mac-board-grid > aside {
    display: none;
  }
}

/* Interactive Mac apps. OS window chrome belongs exclusively to macOS/Chrome. */
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  padding: 6px 9px;
  text-align: left;
}
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button:hover {
  background: #8882;
}
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button:focus-visible {
  outline: 2px solid #b88c36;
  outline-offset: -2px;
}
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button.on {
  background: var(--mac-selected,#555);
  box-shadow: inset 0 0 0 1px #8884;
}
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button:active {
  filter: brightness(.86);
}
:is(.skin-macnotes, .skin-finder, .skin-photoshop, .skin-illustrator, .skin-chrome) button:disabled {
  opacity: .3;
  cursor: default;
}
.mac-toolbar > button {
  height: 31px;
  min-width: 30px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mac-toolbar > button svg {
  width: 20px;
  height: 20px;
}
.mac-toolbar {
  gap: 13px;
  overflow-x: auto;
}
.mac-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-width: 130px;
  max-width: 220px;
  padding: 5px 9px;
  border: 1px solid var(--mac-line);
  border-radius: 6px;
  background: var(--mac-bg);
}
.mac-search svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.mac-search input {
  border: 0;
  background: transparent;
  color: var(--mac-text);
  font: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
}
.mac-sidebar > button {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 8px 10px;
  white-space: nowrap;
}
.mac-note-list > button {
  width: 100%;
  padding: 16px 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--mac-line);
}
.mac-note-list > button p {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 8px 0 0;
  color: var(--mac-muted);
}
.mac-note-list > button b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mac-note-list.mac-gallery {
  width: 320px;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mac-gallery > button {
  min-height: 135px;
  box-shadow: 0 1px 5px #0001;
  border: 1px solid var(--mac-line);
}
.mac-note-list > button.mac-note-selected {
  background: #e9cb7c;
  color: #352d1b;
}
.mac-note-selected p {
  color: #776644 !important;
}
.mac-local-editor {
  flex: 1;
  min-height: 180px;
  overflow: auto;
  padding: 22px 32px;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: 0;
  background: var(--mac-bg);
  color: var(--mac-text);
}
.mac-paper #dz-filler {
  min-height: 180px;
  outline: 0;
  white-space: pre-wrap;
}
.mac-paper #dz-filler h1,
.mac-local-editor h1 {
  font-size: 26px;
}
.mac-paper #dz-filler h2,
.mac-local-editor h2 {
  font-size: 20px;
}
.mac-paper table,
.mac-local-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}
.mac-paper td,
.mac-local-editor td {
  border: 1px solid var(--mac-line);
  min-width: 60px;
  padding: 8px;
}
.mac-paper input[type=checkbox],
.mac-local-editor input[type=checkbox] {
  accent-color: #c59d3b;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.mac-chat-open #dz-filler {
  display: none;
}
.mac-empty {
  color: var(--mac-muted);
  font-size: 12px;
  padding: 20px;
}
.mac-file-row {
  width: 100%;
}
.mac-file-heading > button {
  font-size: 11px;
}
.mac-file-list {
  padding-top: 4px;
}
.mac-file-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 15px 6px;
}
.mac-file-icons .mac-file-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 120px;
  white-space: normal;
}
.mac-file-icons .mac-file-row > span:first-child {
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mac-file-icons .mac-file-row > span:nth-child(n+2) {
  font-size: 10px;
  color: var(--mac-muted);
}
.mac-preview {
  overflow: auto;
}
.mac-preview .mac-paper,
.mac-preview .mac-local-editor {
  min-height: 200px;
  flex: 1;
}
.mac-file-art {
  height: 200px;
  margin: 24px 24px 10px;
  display: grid;
  place-items: center;
  background: #343b5a;
  color: #e8dfce;
  font-size: 40px;
  letter-spacing: 3px;
  border-radius: 5px;
}
.mac-image-art {
  background:
    radial-gradient(
      circle at 70% 70%,
      #bd745b 0 23%,
      transparent 23.5%),
    linear-gradient(
      130deg,
      #c9d1be,
      #eee4ca);
  font-size: 25px;
  color: #343b3a;
}
.mac-preview [data-mac-file-info] p {
  margin: 12px 24px;
  color: var(--mac-muted);
  font-size: 11px;
}
.mac-creative-menu {
  gap: 2px;
  height: 34px;
  min-height: 34px;
}
.mac-creative-menu > button {
  font-size: 11px;
  white-space: nowrap;
  padding: 8px;
}
.mac-creative-options {
  gap: 16px;
}
.mac-creative-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mac-creative-options input[type=number] {
  width: 55px;
  background: #292929;
  border: 1px solid #555;
  color: #ddd;
  padding: 3px;
}
.mac-creative-tools {
  gap: 7px;
}
.mac-creative-tools > button {
  width: 32px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 5px;
}
.mac-creative-tools svg {
  width: 21px;
  height: 21px;
}
.mac-creative-tools > button.on {
  background: #171717;
  box-shadow: inset 0 0 0 1px #666;
}
.mac-foreground {
  display: block;
  margin-top: 17px;
  width: 27px;
  height: 27px;
}
.mac-foreground input {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid #888;
  background: transparent;
}
.mac-document-tabs {
  display: flex;
  min-height: 34px;
  overflow: auto;
  background: #252525;
  flex-shrink: 0;
}
.mac-document-tabs > .mac-document-tab {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 34px;
  padding: 0;
  border-right: 1px solid #222;
  background: #303030;
  color: #aaa;
}
.mac-document-tabs > .mac-document-tab.on {
  background: #444;
  color: #eee;
}
.mac-document-tab > button {
  font-size: 10px;
  padding: 8px;
  white-space: nowrap;
}
.mac-document-tabs > button {
  color: #bbb;
}
.mac-text-layer {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.mac-artboard {
  flex-shrink: 0;
  min-width: 480px;
  min-height: 520px;
}
.mac-artboard .mac-local-editor {
  font-size: 13px;
}
.mac-creative-status {
  height: 31px;
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 0;
}
.mac-creative-status > button {
  padding: 3px 7px;
  font-size: 10px;
}
.mac-no-background .mac-artboard {
  background: repeating-conic-gradient(#d2d2d2 0% 25%, #fff 0% 50%) 0 0/20px 20px;
}
.mac-no-background .mac-paper,
.mac-no-background .mac-local-editor {
  background: transparent;
}
.mac-creative-panels .mac-panel-tabs {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}
.mac-panel-tabs > button {
  font-size: 10px;
  border-radius: 0;
  padding: 11px 9px;
}
.mac-panel-tabs > button.on {
  background: #505050;
}
.mac-panel-content label {
  display: block;
  margin-top: 16px;
}
.mac-panel-content input[type=range] {
  max-width: 100%;
  accent-color: #aaa;
}
.mac-swatches > button {
  height: 24px;
  border: 1px solid #777;
  border-radius: 0;
  font-size: 0;
}
.mac-swatches > button.on {
  outline: 2px solid #eee;
  outline-offset: 1px;
}
.mac-layer {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
}
.mac-layer.on {
  background: #505050;
}
.mac-layer > button:last-child {
  flex: 1;
  font-size: 11px;
}
.mac-layer > button:first-child {
  font-size: 16px;
}
.mac-creative-panels [data-mac-layers] > button {
  display: block;
  width: 100%;
  padding: 14px;
}
.mac-creative-work {
  --mac-selected:#555;
}
.mac-artboard-area {
  align-items: flex-start;
}
.mac-panel-content {
  min-height: 145px;
}
.mac-board-header {
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 4%;
}
.mac-board-header > button {
  font-size: 12px;
}
.mac-board-header .mac-search {
  margin-left: auto;
}
.mac-board-grid {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.2fr);
  align-items: start;
}
.mac-board-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.mac-board-card > .mac-reference {
  width: 100%;
  min-height: 180px;
  height: auto;
  padding: 25px;
  font-size: 28px;
  letter-spacing: -1px;
  color: #202938;
  text-shadow: 0 1px 1px #fff7;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.mac-board-card > div {
  font-size: 10px;
  color: var(--mac-muted);
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mac-board-card > div > button {
  font-size: 18px;
  padding: 1px 5px;
}
.mac-board-notes {
  min-height: 520px;
}
.mac-board-notes .mac-paper {
  overflow: visible;
}
.mac-board [data-mac-work-card][hidden] {
  display: none !important;
}
.skin-chrome [data-mac-tab-notice] {
  padding: 10px;
  text-align: center;
  background: #e9cb7c;
  color: #352d1b;
  font-size: 12px;
}
.mac-popup {
  position: fixed;
  z-index: 500;
  background: var(--mac-bg);
  color: var(--mac-text);
  border: 1px solid var(--mac-line);
  border-radius: 8px;
  box-shadow: 0 12px 35px #0004;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  padding: 7px;
}
.mac-popup > button {
  display: block;
  width: 100%;
  font-size: 12px;
  padding: 9px 12px;
}
.mac-popup p {
  font-size: 12px;
  padding: 8px;
  max-width: 300px;
  line-height: 1.6;
}
.mac-popup.mac-modal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
  outline: 0;
}
.mac-modal form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
}
.mac-modal input:not([type=color]) {
  font: inherit;
  background: var(--mac-chrome);
  color: var(--mac-text);
  border: 1px solid var(--mac-line);
  border-radius: 5px;
  padding: 10px;
}
.mac-modal form button {
  background: var(--mac-chrome);
  margin: 10px 8px 0 0;
}
.mac-card-large {
  height: 380px;
  display: grid;
  place-items: center;
  padding: 30px;
  text-align: center;
  font-size: 48px;
  overflow-wrap: anywhere;
  color: #202938;
}
.skin-photoshop .mac-popup,
.skin-illustrator .mac-popup {
  --mac-bg:#333;
  --mac-text:#ddd;
  --mac-line:#555;
  --mac-chrome:#444;
}
.mac-popup:has([data-mac-card-form]) {
  width: 400px;
}
@media (max-width: 1000px) {
  .mac-board-header {
    gap: 8px;
  }
  .mac-board-header > b {
    font-size: 15px;
  }
  .mac-board-cards {
    grid-template-columns: 1fr;
  }
  .mac-creative-menu {
    overflow: auto;
  }
  .mac-creative-menu > button {
    font-size: 10px;
    padding: 7px;
  }
  .mac-file-row {
    grid-template-columns: minmax(140px, 1fr) 85px;
  }
  .mac-file-icons .mac-file-row > span:nth-child(n+3) {
    display: block;
  }
}
@media (max-width: 700px) {
  .mac-note-list.mac-gallery {
    width: 150px;
    grid-template-columns: 1fr;
  }
  .mac-board-grid {
    grid-template-columns: 1fr;
  }
  .mac-board-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mac-board-card > .mac-reference {
    font-size: 20px;
    min-height: 150px;
  }
  .mac-board-header .mac-search {
    min-width: 110px;
  }
  .mac-board-header > button {
    font-size: 10px;
  }
  .mac-local-editor {
    padding: 20px;
  }
  .mac-artboard {
    min-width: 400px;
  }
  .mac-card-large {
    height: 280px;
    font-size: 30px;
  }
  .mac-creative-status {
    gap: 4px;
  }
}

/* Fixed document surfaces keep the shared message scroller pinned inside the app. */
.mac-artboard{height:520px}
.mac-board-notes{display:flex;flex-direction:column;height:620px}
.mac-board-notes .mac-paper{overflow:auto;min-height:0}
.mac-paper .dz-line.mine{padding-left:20px}
/* Finder keeps all sortable columns accessible in narrower Mac windows. */
.skin-finder .mac-file-row{min-width:520px;grid-template-columns:minmax(175px,2fr) 110px 70px 65px}
.skin-finder .mac-file-row span:nth-child(n+3){display:block}
.skin-finder .mac-file-icons .mac-file-row{min-width:0}