:root { color-scheme: dark; font-family: Arial, sans-serif; background: #08090a; color: #f1f1ef; }
* { box-sizing: border-box; }
body { margin: 0; }
#compi-library-status { position:fixed;top:74px;right:16px;z-index:50;display:flex;gap:12px;align-items:center;max-width:min(560px,calc(100vw - 32px));padding:12px 16px;border:1px solid #42434a;border-radius:10px;background:#1b1e24;box-shadow:0 8px 28px #0006;font-size:13px; }
#compi-library-status button { font-size:12px;flex-shrink:0; }
[hidden] { display: none !important; }
.studio-bar { height: 58px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #27282c; }
.studio-bar a { color: #aaaab1; text-decoration: none; font-size: 12px; letter-spacing: .08em; }
button { font: inherit; cursor: pointer; border: 1px solid #44454b; border-radius: 6px; background: #18191c; color: #f1f1ef; padding: 10px 14px; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #f41b89; outline-offset: 4px; }
#gate { max-width: 540px; margin: 12vh auto; padding: 24px; text-align: center; }
h1 { font-size: 40px; letter-spacing: -.05em; }
h1 span { color: #f41b89; font-size: 12px; letter-spacing: .1em; vertical-align: top; }
p { color: #aaaab1; line-height: 1.5; }
#login { margin: 16px 0; background: #f41b89; border-color: #f41b89; color: white; font-size: 12px; font-weight: bold; letter-spacing: .05em; }
.note { font-size: 12px; }
#workspace iframe { width: 100%; height: calc(100dvh - 54px); border: 0; display: block; background: #08090a; }
@media (max-width: 600px) { .studio-bar { padding: 0 12px; } #gate { margin-top: 6vh; } }