body {
color: #ffffff;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #00c3ff 0%, #1affb2 100%);
background-attachment: fixed;
}
:root,
body.is-fullscreen {
background: linear-gradient(160deg, #008cff, #00ffaa);
}
[hidden] {
display: none !important;
}
h1 {
font-weight: normal;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}
a {
color: #ffffff;
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease;
}
a:hover {
color: #ffff99;
}
#app,
#loading,
#error,
#launch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: default;
user-select: none;
-webkit-user-select: none;
background: radial-gradient(circle at center, rgba(0, 195, 255, 0.7), rgba(0, 0, 0, 0.85));
}
#launch {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
cursor: pointer;
}
.green-flag {
width: 80px;
height: 80px;
padding: 16px;
border-radius: 50%;
background: linear-gradient(145deg, #ffffff, #d6f9ff);
border: 3px solid #00c3ff;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
box-shadow: 0 6px 12px rgba(0, 195, 255, 0.5);
}
.progress-bar-outer {
border-radius: 999px;
border: 2px solid #ffffffaa;
height: 14px;
width: 220px;
background: rgba(255, 255, 255, 0.25);
overflow: hidden;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
.progress-bar-inner {
height: 100%;
width: 0;
background: linear-gradient(90deg, #00c3ff, #00ffaa);
transition: width 0.4s ease-out;
}
.loading-text,
noscript {
font-weight: normal;
font-size: 36px;
margin: 0 0 16px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.loading-image {
margin: 0 0 16px;
}
#error-message,
#error-stack {
font-family: monospace;
max-width: 600px;
white-space: pre-wrap;
user-select: text;
-webkit-user-select: text;
color: #ffeeee;
text-shadow: 0 1px 3px #000;
}
#error-stack {
text-align: left;
max-height: 200px;
overflow: auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 8px;
}
/* ----------- Shiny Orb Buttons ----------- */
.control-button {
width: 3rem;
height: 3rem;
margin: 0.5rem;
cursor: pointer;
border: none;
border-radius: 50%; /* circle */
background: linear-gradient(145deg, #00c3ff, #00ffaa);
position: relative;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.4), /* outer shadow */
inset 0 -4px 8px rgba(0, 0, 0, 0.3); /* inner shading */
overflow: hidden;
transition: all 0.2s ease;
}
/* Shine overlay */
.control-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
border-radius: 50% 50% 0 0;
background: radial-gradient(
circle at 50% 30%,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0) 70%
);
pointer-events: none;
}
/* Hover effect */
.control-button:hover {
background: linear-gradient(145deg, #00ffaa, #00c3ff);
transform: translateY(-3px);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.5),
inset 0 -4px 8px rgba(0, 0, 0, 0.25);
}
/* Active press effect */
.control-button:active {
transform: translateY(1px);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
}
/* ----------- Scratch Monitor Styling (glossy too) ----------- */
.sc-canvas {
cursor: auto;
}
.sc-monitor-root[data-opcode^="data_"] .sc-monitor-value-color {
background: linear-gradient(90deg, #ff8c1a, #ffcc33);
color: #000;
border-radius: 6px;
padding: 2px 4px;
}
.sc-monitor-row-value-outer {
background: linear-gradient(90deg, #fc662c, #ff9933);
border-radius: 6px;
}
.sc-monitor-row-value-editing .sc-monitor-row-value-outer {
background: linear-gradient(90deg, #e25b27, #ff7f50);
}
