/* Adapted from the approved RoCode 7 release-master styles.css and header-artwork.css.
   Original source: RoboThink, MIT. See docs/ROCODE-LICENSE.txt and docs/reuse.md. */
@font-face{font-family:Pretendard;font-style:normal;font-weight:45 920;font-display:swap;src:url('/assets/fonts/PretendardVariable.woff2') format('woff2')}
:root{--rocode-font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--rocode-action:#4f80ff;--rocode-action-hover:#3568e6;--rocode-action-pressed:#2854c7;--rocode-action-soft:#eef4ff;--rocode-focus:#1f4fbf;--rocode-danger:#c43d3d;--rocode-header-height:52px;--rocode-header-control-height:32px;--rocode-header-control-radius:9px;font-family:var(--rocode-font-family);color:#17324d;background:#fff}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--rocode-focus);outline-offset:2px}button{transition:background-color .12s,border-color .12s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}
.rocodeHeader{background:#4f95ff url('/assets/brand/header-artwork.png') no-repeat max(240px,calc(50% - 392px)) top;background-size:auto 90px;color:#fff}
.rocodeAppHeader{display:flex;position:relative;z-index:30;width:100%;height:var(--rocode-header-height);align-items:center;gap:8px;padding:0 16px}
.roboThinkLogo{position:relative;width:148px;height:40px;flex:0 0 148px;border-radius:8px}
.roboThinkLogo:after{position:absolute;top:6px;left:2px;width:140px;height:28px;content:'';background:url('/assets/brand/rocode-logo.png') no-repeat center/contain}
.rocodeProjectIdentity{display:flex;width:clamp(132px,18vw,220px);min-width:112px;height:44px;flex:0 1 220px;flex-direction:column;justify-content:center;gap:3px;margin-left:10px;padding:3px 8px 2px}
.rocodeProjectName{width:100%;height:23px;padding:1px 5px;border:1px solid transparent;border-radius:5px;color:#fff;background:transparent;font-size:14px;font-weight:700;line-height:19px;text-overflow:ellipsis}
.rocodeProjectName:hover{border-color:#ffffff99;background:#ffffff1f}.rocodeProjectName:focus{background:#f7faff;color:#173452;outline:2px solid #163d79;outline-offset:-2px}
.rocodeProjectSaveState{display:flex;gap:5px;align-items:center;padding:0 5px;font-size:10px;font-weight:650;line-height:13px;white-space:nowrap}.save-dot{width:6px;height:6px;border-radius:50%;background:#ffffffaa;box-shadow:0 0 0 1px #ffffffd9}
.header-spacer{flex:1}.rocodeHeaderButton{display:inline-flex;height:32px;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid #ffffff94;border-radius:9px;color:white;background:#ffffff42;backdrop-filter:blur(5px) saturate(115%);box-shadow:inset 0 1px 0 #ffffff40,0 1px 3px #163d791a;font-size:13px;font-weight:650;white-space:nowrap}
.rocodeHeaderButton img{width:17px;height:17px;filter:brightness(0) invert(1)}.rocodeHeaderButton:hover,.rocodeHeaderButton[aria-expanded=true]{background:#ffffff7a;border-color:#ffffffd9}.help-icon{width:17px;height:17px;border:1.5px solid white;border-radius:50%;font-size:12px}
.file-control{position:relative}.rocodeHeaderMenu{position:absolute;top:40px;right:0;width:275px;padding:7px;background:white;border:1px solid #d9e1eb;border-radius:12px;box-shadow:0 12px 35px #17324d26;color:#17324d}.rocodeHeaderMenu button{display:flex;width:100%;align-items:center;gap:10px;padding:11px 10px;border:0;border-radius:7px;background:white;text-align:left;font-size:13px}.rocodeHeaderMenu button:hover{background:var(--rocode-action-soft)}.rocodeHeaderMenu img{width:20px;height:20px}.rocodeHeaderMenu kbd{font-size:10px;color:#7a8796;margin-left:auto}.rocodeHeaderMenu hr{border:0;border-top:1px solid #e7ecf2;margin:5px}
.workspace-strip{display:flex;height:38px;align-items:center;padding:0 20px;gap:20px;border-bottom:1px solid #3568b52e}.studio-tab{display:flex;height:34px;margin-top:4px;align-items:center;gap:9px;padding:0 15px;border-radius:8px 8px 0 0;background:#fff;color:#284567;font-size:13px;font-weight:750}.studio-tab>span:first-child{color:var(--rocode-action)}.beta-pill{font-size:8px;letter-spacing:.6px;color:#58708a;background:#edf2f8;padding:3px 5px;border-radius:4px}.workspace-caption{font-size:12px;font-weight:550;text-shadow:0 1px 2px #2a579877}.course-link{margin-left:auto;color:white;font-size:12px;font-weight:650;border:0;background:none}.course-link:hover{text-decoration:underline}