:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#111;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}button{color:#333;text-align:center;padding:6px 16px;background:linear-gradient(to bottom,#e5e5e5,#e4e4e4);border:1px solid #b8b8b8;border-radius:12px;-webkit-user-select:none;user-select:none;text-transform:uppercase}button:active{background:linear-gradient(to bottom,#e4e4e4,#e5e5e5);box-shadow:inset 0 1px #0000001a,0 1px 1px #0000001a}button:focus{outline:none}button:hover{background:linear-gradient(to bottom,#e4e4e4,#e5e5e5);border:1px solid #646cff;color:#646cff}.remove-button{margin-top:11px}.remove-button:hover{border:solid 1px #ffa011;color:#ffa011}.add-button{margin:0 12px}.screen-list-container{background-color:#222831;padding:12px 0;display:flex;flex-direction:column;gap:16px;max-width:300px;height:100vh}.screen-item{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:6px;align-items:center;color:#333;margin:0 12px;padding:12px;background-color:#111;border-radius:16px}@media (max-width: 800px){.screen-list-container{max-width:100%}.screen-item:first-child{margin-top:48px}}.input-group{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.input-group label{font-size:.9em;margin-bottom:-10px;background-color:#1b1b1b;z-index:1;padding:0 4px;border-radius:8px;border:solid 1px #b8b8b8;color:#c2c2c2}input{width:85%;border:solid 1px #b8b8b8;border-radius:8px;padding:12px 8px 4px;background-color:#f5f5f5;color:#c2c2c2;font-size:1em;background-color:#1b1b1b}input:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 2px #646cff33}input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:31px;border-radius:12px;padding:0;cursor:pointer;background:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:12px}input[type=color]::-moz-color-swatch{border:none;border-radius:12px}.screen-footer{display:flex;justify-content:space-between;font-size:.8em;color:#aaa}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:8px}.toolbar button{margin:0 4px;min-height:32px}
