.studio-os { --os-accent: #375879; --os-border: #b9bdc0; background-color: #eeefeb; background-image: linear-gradient(#f1f2eea6,#f1f2eea6),url('assets/paper-texture.png'); color: #212629; }
.studio-os *, .studio-os *::before, .studio-os *::after { box-sizing: border-box; letter-spacing: 0; }
.studio-os [hidden] { display: none !important; }
.studio-os button, .studio-os input, .studio-os textarea { font: inherit; color: inherit; }
.studio-os button { cursor: pointer; border: 0; background: transparent; }
.studio-os button:focus-visible, .studio-os input:focus-visible, .studio-os textarea:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 3px; }
.studio-os button:disabled { cursor: default; opacity: .4; }
.studio-os button img, .studio-os label > img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.os-shell { height: 100dvh; min-height: 420px; padding: 12px 24px; overflow: hidden; position: relative; }
.os-menubar { position: relative; z-index: 30; height: 38px; background: #b8c0c7d9; border: 1px solid #a8b3bc; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; gap: 28px; font-size: 14px; box-shadow: 0 1px 0 #fff9 inset; }
.os-brand { white-space: nowrap; font-weight: 600; }
.os-brand span { font-weight: 400; opacity: .6; margin-left: 8px; }
.os-menubar nav, .os-menubar-end { display: flex; align-items: center; gap: 18px; }
.os-menubar nav button { padding: 6px 0; }
.os-menubar-end { margin-left: auto; gap: 12px; }
.os-menubar-end > button { display: flex; align-items: center; justify-content: center; min-height: 28px; gap: 8px; }
.os-profile-trigger span { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-time { font-size: 12px; opacity: .7; }
.os-shortcuts { position: absolute; top: 91px; left: 27px; width: 90px; max-height: calc(100dvh - 160px); overflow-y: auto; z-index: 5; display: flex; flex-direction: column; gap: 20px; }
.os-shortcuts button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 2px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; }
.os-shortcuts button img { width: 38px; height: 38px; filter: drop-shadow(1px 2px 0 #fff); opacity: .85; }
.os-shortcuts button:hover, .os-shortcuts button.active { background: #c0cbd899; border-color: #94a5b78c; }
.os-desktop { position: absolute; inset: 75px 165px 76px 150px; }
.os-desktop-label { position: absolute; top: 32px; left: 30px; z-index: 1; }
.os-desktop-label > span { font-size: 11px; opacity: .6; }
.os-desktop-label h1 { margin: 12px 0 9px; color: var(--os-accent); font-size: 34px; font-weight: 500; }
.os-desktop-label p { font-size: 14px; max-width: 220px; line-height: 1.5; }
.os-character { position: absolute; width: min(320px,46%); height: min(70%,590px); overflow: hidden; left: 50%; bottom: 74px; transform: translateX(-35%); filter: drop-shadow(5px 12px 9px #1111); }
.os-character img { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: 100%; transform: translateX(-50%); }
.os-character img[src$="s2-4.png"] { height: 110%; }
.os-class-switch { position: absolute; bottom: 20px; left: 50%; transform: translateX(-40%); display: flex; align-items: center; gap: 18px; color: var(--os-accent) !important; font-size: 22px !important; white-space: nowrap; }
.os-class-switch img { width: 25px !important; height: 25px !important; }
.os-desktop-folder { position: absolute; left: 35px; bottom: 90px; display: flex; flex-direction: column; gap: 7px; align-items: center; width: 140px; }
.os-desktop-folder img { width: 68px !important; height: 68px !important; opacity: .65; }
.os-desktop-folder small { font-size: 10px; opacity: .5; }
.os-hud { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 105px; padding: 12px 10px; background: #496484; border: 1px solid #617b98; border-radius: 8px; color: white; display: flex; align-items: center; flex-direction: column; z-index: 25; box-shadow: 0 6px 20px #26354020; }
.os-album { width: 77px; height: 77px; border-radius: 6px; object-fit: cover; margin-bottom: 10px; }
.os-hud strong { font-size: 12px; font-weight: 500; white-space: nowrap; }
.os-hud > span { font-size: 10px; opacity: .7; margin-top: 3px; }
.os-music-controls { display: flex; margin-top: 12px; gap: 1px; }
.os-music-controls button { width: 28px; height: 32px; padding: 4px; }
.os-hud button img, .os-volume img { filter: brightness(0) invert(1); width: 19px; height: 19px; }
.os-hud button:hover { background: #ffffff25; border-radius: 4px; }
.os-volume { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 5px; }
.os-volume > img { width: 14px !important; height: 14px !important; }
.os-volume input { min-width: 0; width: 100%; accent-color: #dde9eb; height: 18px; }
.os-context-tools { border-top: 1px solid #ffffff3b; padding-top: 10px; margin-top: 10px; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.os-context-tools button { display: grid; place-items: center; height: 42px; border-radius: 5px; }
.os-context-tools button img { width: 28px; height: 28px; }
.os-context-tools button[aria-pressed=true] { background: #edeeee; }
.os-context-tools button[aria-pressed=true] img { filter: none; }
.os-taskbar { position: absolute; bottom: 14px; left: 24px; right: 24px; height: 46px; display: flex; align-items: center; border: 1px solid #aab5be; background: #bdc6cdbf; border-radius: 8px; padding: 5px 10px; gap: 20px; z-index: 30; backdrop-filter: blur(12px); }
.os-taskbar button { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; min-height: 32px; border-radius: 4px; }
.os-taskbar button:hover { background: #ffffff6b; }
.os-taskbar > button:last-child { margin-left: auto; }
.os-running button { background: #f7f8f499; border-bottom: 2px solid var(--os-accent); }
.os-window { position: absolute; inset: 76px 147px 81px 143px; background: #f7f8f7; border: 1px solid #a6b0b8; border-radius: 8px; box-shadow: 0 20px 45px #30394524,0 2px 4px #3039451a; z-index: 15; display: flex; flex-direction: column; overflow: hidden; animation: os-appear 200ms ease-out; }
.os-window.is-maximized { left: 24px; }
.os-window-bar { height: 42px; min-height: 42px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: #bcc7d2; border-bottom: 1px solid #a8b4be; }
.os-window-controls { display: flex; align-items: center; gap: 8px; }
.os-window-controls button { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #9dabb3; border-radius: 50%; padding: 2px; background: #dce2e5; }
.os-window-controls button:first-child { background: #e97072; border-color: #c56363; }
.os-window-controls button:nth-child(2) { background: #e8c571; border-color: #c4a55e; }
.os-window-controls button img { width: 10px; height: 10px; opacity: .7; }
.os-window-title { font-weight: 500; font-size: 14px; }
.os-window-profile { margin-left: auto; font-size: 11px; opacity: .65; }
.os-window-toolbar { min-height: 48px; display: flex; gap: 12px; align-items: center; padding: 7px 16px; border-bottom: 1px solid #d1d5d8; background: #ecf0f1; }
.os-window-toolbar > button { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; }
.os-breadcrumb { font-size: 11px; line-height: 1.4; }
.os-search { display: flex; align-items: center; gap: 7px; background: #fafcfc; padding: 5px 8px; border: 1px solid #c1c9cf; border-radius: 5px; margin-left: auto; width: 190px; flex-shrink: 0; }
.os-search img { width: 14px !important; height: 14px !important; }
.os-search input { background: none; border: 0; width: 100%; min-width: 0; outline: 0; font-size: 12px; }
.os-window-body { flex: 1; min-height: 0; display: flex; }
.os-sidebar { width: 190px; flex-shrink: 0; background: #e0e5e8; border-right: 1px solid #c5ccd2; overflow: auto; padding: 22px 10px; }
.os-sidebar-heading { display: block; font-size: 10px; opacity: .55; padding: 0 8px 15px; }
.os-sidebar button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 11px 8px; font-size: 12px; line-height: 1.3; text-align: left; border-radius: 5px; margin-bottom: 3px; }
.os-sidebar button img { width: 17px; height: 17px; opacity: .6; }
.os-sidebar button:hover { background: #cbd5dd; }
.os-sidebar button[aria-current=page] { color: #fff; background: var(--os-accent); }
.os-sidebar button[aria-current=page] img { filter: brightness(0) invert(1); opacity: 1; }
.os-content { flex: 1; min-width: 0; overflow: auto; background: #fcfcfb; }
.os-directory-heading { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px 14px; }
.os-directory-heading span, .os-eyebrow { font-size: 10px; color: #69757c; }
.os-directory-heading h2 { font-size: 23px; font-weight: 500; margin: 6px 0; }
.os-directory-heading > img { width: 20px; opacity: .4; }
.os-directory-heading > button { width: 36px; height: 36px; background: #e5ebef; border-radius: 5px; }
.os-files { display: grid; grid-template-columns: repeat(auto-fill,minmax(138px,1fr)); gap: 16px; padding: 20px 25px; align-content: start; }
.os-file { min-width: 0; position: relative; border-radius: 6px; padding: 8px 5px; border: 1px solid transparent; }
.os-file:hover { background: #eef2f5; border-color: #c9d5de; }
.os-file-open { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; gap: 9px; padding: 14px 5px; }
.os-file-open > img { width: 66px !important; height: 66px !important; opacity: .76; }
.os-file-open > strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.os-file-open > small { font-size: 10px; opacity: .65; line-height: 1.4; }
.os-file > button:last-child { position: absolute; top: 0; right: 0; padding: 5px; opacity: .4; }
.os-file > button:last-child img { width: 16px; height: 16px; }
.os-file > button[aria-pressed=true] { background: #efda88; opacity: 1; border-radius: 3px; }
.os-empty { text-align: center; padding: 50px 20px; }
.os-empty > img { width: 65px; height: 65px; opacity: .25; }
.os-empty h3 { font-size: 18px; font-weight: 500; margin: 20px 0 10px; }
.os-empty p { font-size: 13px; line-height: 1.5; color: #6a747b; }
.os-command { display: inline-flex; align-items: center; padding: 10px 18px !important; border: 1px solid #bac5cd !important; background: #e6edf1 !important; border-radius: 5px; font-size: 13px !important; margin-top: 14px; }
.os-command:hover { background: #d6e1e7 !important; }
.os-window-status { min-height: 27px; border-top: 1px solid #ccd3d8; background: #e9edf0; padding: 6px 14px; display: flex; justify-content: space-between; gap: 15px; font-size: 10px; color: #63717c; }
.os-reading { padding: 40px; max-width: 760px; margin: 0 auto; line-height: 1.8; font-size: 15px; }
.os-attachments { display: grid; gap: 8px; margin: 25px 0; }
.os-attachments h3 { margin: 0; }
.os-attachments a, .os-reading a { color: var(--os-accent); text-decoration: underline; overflow-wrap: anywhere; }
.os-reading h2 { font-size: 30px; line-height: 1.2; font-weight: 500; margin: 12px 0 28px; }
.os-reading h3 { font-size: 18px; font-weight: 500; }
.os-document-text { white-space: pre-line; }
.os-news-feed { padding: 0 28px 24px; }
.os-update { max-width: 860px; border-block: 1px solid #d6dadd; padding: 18px 0 22px; margin: 0 auto 18px; overflow-wrap: anywhere; }
.os-update h3 { margin: 10px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 500; }
.os-update p { max-width: 72ch; margin: 0 0 10px; font-size: 13px; line-height: 1.6; font-weight: 400; white-space: pre-line; }
.os-update-summary { color: #45525a; font-weight: 500 !important; }
.os-update-body p + p { margin-top: 10px; }
.os-update-sources { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.os-update-sources a { max-width: 100%; color: #315d8b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.os-tag { font-size: 10px; color: #3e735a; border: 1px solid #b6d1c3; border-radius: 3px; padding: 3px 6px; background: #eef6f1; }
.os-about { display: flex; align-items: center; gap: 35px; }
.os-about > img { width: 32%; max-height: 390px; object-fit: contain; }
.os-about > div { flex: 1; }
.os-editor { display: flex; height: 100%; min-height: 260px; flex-direction: column; padding: 20px 28px; }
.os-editor header { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 10px; color: #718079; }
.os-editor header div { display: flex; gap: 14px; }
.os-editor input { border: 0; border-bottom: 1px solid #d6dddf; background: transparent; padding: 15px 0; font-size: 24px; width: 100%; margin: 15px 0; }
.os-editor textarea { resize: none; border: 0; background: transparent; flex: 1; width: 100%; line-height: 1.8; font-size: 15px; outline: 0; }
.os-preview-body .os-content { display: flex; flex-direction: column; overflow: hidden; }
.os-preview-tools { height: 48px; min-height: 48px; padding: 6px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ced5da; }
.os-preview-tools > span { font-size: 13px; }
.os-preview-tools small { font-size: 10px; margin-left: 10px; color: #80888c; }
.os-segment { display: flex; border: 1px solid #bac5cd; border-radius: 5px; padding: 2px; gap: 3px; }
.os-segment button { padding: 4px 12px; height: 28px; display: grid; place-items: center; border-radius: 3px; }
.os-segment button img { width: 18px; height: 18px; }
.os-segment button[aria-pressed=true] { background: #cbd8e1; }
.os-preview-stage { display: flex; min-height: 0; flex: 1; position: relative; background: #cfd5d6; overflow: hidden; }
.os-preview-viewport { width: 100%; height: 100%; min-width: 0; margin: 0 auto; background: white; transition: width 240ms ease; }
.os-preview-viewport.is-mobile { width: min(390px,100%); box-shadow: 0 0 0 1px #a9b3bc; }
.os-preview-viewport iframe { width: 100%; height: 100%; border: 0; display: block; }
.os-project-info { position: absolute; right: 0; top: 0; bottom: 0; width: min(315px,90%); overflow: auto; padding: 20px; background: #f4f6f7f5; border-left: 1px solid #bec8cf; backdrop-filter: blur(10px); box-shadow: -10px 0 25px #1111; }
.os-project-info header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.os-project-info h3 { margin: 0; font-size: 20px; }
.os-project-info h4 { margin: 25px 0 8px; font-size: 14px; font-weight: 500; }
.os-project-info p { font-size: 12px; line-height: 1.6; color: #525f68; }
.os-profiles { position: absolute; z-index: 40; right: 24px; top: 59px; width: 360px; max-width: calc(100% - 30px); border: 1px solid #a6b5c0; background: #f4f6f7f5; padding: 15px; border-radius: 8px; box-shadow: 0 15px 40px #1a2c4233; backdrop-filter: blur(12px); }
.os-profiles > header { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px 15px; }
.os-profiles > header strong { font-size: 15px; font-weight: 500; }
.os-profiles > button { display: flex; align-items: center; text-align: left; width: 100%; min-height: 90px; padding: 8px 12px; gap: 16px; border-radius: 6px; margin-bottom: 4px; border: 1px solid transparent; }
.os-profiles > button[aria-pressed=true] { border-color: #8fa6b8; background: #dce6ed; }
.os-profile-art { position: relative; display: block; flex: none; width: 44px; height: 72px; overflow: hidden; }
.studio-os .os-profile-art img { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none; height: 100%; transform: translateX(-50%); }
.studio-os .os-profile-art img[src$="s2-4.png"] { height: 110%; }
.os-profiles > button > img:last-child { margin-left: auto; width: 18px; opacity: 0; }
.os-profiles > button[aria-pressed=true] > img:last-child { opacity: 1; }
.os-profiles strong { display: block; font-size: 14px; font-weight: 500; }
.os-profiles small { display: block; font-size: 10px; color: #627582; margin-top: 5px; line-height: 1.5; }
.os-toast { position: absolute; z-index: 50; bottom: 78px; left: 50%; transform: translate(-50%,10px); background: #293e51; color: white; padding: 12px 20px; font-size: 13px; line-height: 1.5; border-radius: 6px; opacity: 0; pointer-events: none; max-width: 80%; transition: 180ms ease; }
.os-toast.visible { opacity: 1; transform: translate(-50%,0); }
@keyframes os-appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 1050px) {
 .os-menubar { gap: 16px; }.os-brand span,.os-time { display: none; }.os-menubar nav { gap: 12px; }
 .os-window { left: 115px; right: 125px; }.os-shortcuts { left: 16px; width: 80px; }.os-hud { right: 12px; width: 95px; }
 .os-sidebar { width: 160px; }.os-search { width: 145px; }.os-breadcrumb { font-size: 10px; }.os-directory-heading { padding: 22px 20px 10px; }
 .os-desktop { left: 110px; right: 115px; }.os-desktop-label { left: 12px; }.os-desktop-label h1 { font-size: 28px; }
}
@media (max-width: 760px) {
 .os-shell { padding: 8px; min-height: 420px; }.os-menubar { height: 40px; padding: 0 8px; gap: 8px; }.os-menubar nav,.os-menubar-end > button[data-os=news] { display: none; }.os-menubar-end { gap: 6px; }.os-profile-trigger span { font-size: 11px; max-width: 130px; }
 .os-shortcuts { top: 60px; left: 12px; right: 12px; width: auto; max-height: none; overflow-x: auto; overflow-y: hidden; flex-direction: row; justify-content: flex-start; gap: 3px; }.os-shortcuts button { width: 65px; flex-shrink: 0; font-size: 10px; gap: 3px; padding: 5px 2px; }.os-shortcuts button img { width: 26px; height: 26px; }
 .os-desktop { inset: 128px 16px 148px; }.os-desktop-label { top: 0; left: 10px; }.os-desktop-label > span { font-size: 9px; }.os-desktop-label h1 { font-size: 26px; margin-top: 6px; }.os-desktop-label p { font-size: 11px; max-width: 150px; }.os-character { width: min(56%,260px); height: 68%; left: 54%; bottom: 47px; }.os-class-switch { bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 18px !important; gap: 12px; }.os-desktop-folder { left: 0; bottom: 90px; width: 100px; font-size: 12px; }.os-desktop-folder img { width: 44px !important; height: 44px !important; }.os-desktop-folder small { font-size: 8px; }
 .os-hud { top: auto; bottom: 64px; right: 10px; left: 10px; width: auto; height: 61px; transform: none; flex-direction: row; padding: 7px 10px; gap: 8px; }.os-album { width: 43px; height: 43px; margin: 0; }.os-hud strong { font-size: 11px; }.os-hud > span { display: none; }.os-music-controls { margin: 0 0 0 auto; }.os-music-controls button { width: 27px; }.os-volume { display: none; }.os-context-tools { width: auto; margin: 0 0 0 3px; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid #ffffff3b; flex-direction: row; gap: 2px; }.os-context-tools button { width: 33px; height: 36px; }.os-context-tools button img { width: 22px; height: 22px; }
 .os-taskbar { bottom: 8px; left: 8px; right: 8px; height: 46px; padding: 4px; gap: 4px; }.os-taskbar button { gap: 5px; font-size: 10px; padding: 5px; }.os-taskbar button img { width: 18px; height: 18px; }.os-running button span { max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .os-window,.os-window.is-maximized { inset: 130px 8px 136px; }.os-window-bar { min-height: 34px; height: 34px; padding: 0 10px; gap: 12px; }.os-window-profile { display: none; }.os-window-title { font-size: 12px; }.os-window-toolbar { min-height: 43px; padding: 5px 8px; gap: 4px; flex-wrap: wrap; }.os-breadcrumb { flex: 1; font-size: 9px; }.os-search { width: 120px; padding: 5px; }.os-search input { font-size: 10px; }
 .os-window-body { flex-direction: column; }.os-sidebar { display: flex; width: 100%; flex-shrink: 0; border-right: 0; border-bottom: 1px solid #c5ccd2; padding: 6px; gap: 4px; overflow: auto; }.os-sidebar-heading { display: none; }.os-sidebar button { width: auto; flex-shrink: 0; font-size: 10px; padding: 8px; margin: 0; gap: 5px; }.os-sidebar button img { width: 14px; height: 14px; }
 .os-directory-heading { padding: 15px 15px 5px; }.os-directory-heading h2 { font-size: 20px; }.os-files { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); padding: 10px; gap: 8px; }.os-file-open img { width: 46px !important; height: 46px !important; }.os-file-open strong { font-size: 12px; }.os-file-open small { font-size: 9px; }.os-empty { padding: 25px 15px; }.os-empty > img { width: 40px; height: 40px; }.os-empty h3 { font-size: 16px; margin-top: 12px; }.os-empty p { font-size: 11px; }.os-window-status { font-size: 8px; min-height: 24px; padding: 6px 8px; }.os-status-profile { display: none; }
 .os-news-feed { padding: 0 15px 18px; }.os-update { padding: 14px 0 18px; margin-bottom: 12px; }.os-update h3 { font-size: 16px; }.os-update p { font-size: 12px; }
 .os-reading { padding: 22px 18px; font-size: 13px; }.os-reading h2 { font-size: 24px; }.os-about { gap: 15px; }.os-about > img { width: 28%; }.os-editor { padding: 14px; }.os-editor input { font-size: 21px; }.os-editor textarea { font-size: 13px; }.os-preview-tools { min-height: 42px; height: 42px; padding: 5px 9px; }.os-preview-tools small { display: none; }.os-preview-stage { width: 100%; }.os-preview-viewport.is-mobile { width: min(320px,100%); }
 .os-toast { bottom: 145px; width: max-content; font-size: 11px; }.os-profiles { top: 56px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .studio-os *, .studio-os *::before, .studio-os *::after { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
 .studio-os.os-has-window .os-shortcuts { display: none; }
 .studio-os.os-has-window .os-window { top: 60px; }
}