initial commit

public/styles.css

@@ -0,0 +1,177 @@
+:root {
+  color-scheme: light;
+  font-family: Arial, Helvetica, sans-serif;
+  background: #f4f6f8;
+  color: #1d252d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.app {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 32px;
+}
+
+.shell {
+  width: min(920px, 100%);
+}
+
+.panel {
+  display: grid;
+  gap: 20px;
+  padding: 28px;
+  border: 1px solid #d9e0e7;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 14px 38px rgb(18 28 45 / 10%);
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 28px;
+  line-height: 1.15;
+}
+
+form {
+  display: grid;
+  gap: 14px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+
+input,
+select,
+button {
+  min-height: 42px;
+  border: 1px solid #c8d2dc;
+  border-radius: 6px;
+  font: inherit;
+}
+
+input,
+select {
+  width: 100%;
+  padding: 0 12px;
+  background: #fff;
+}
+
+button {
+  padding: 0 18px;
+  border-color: #153f66;
+  background: #153f66;
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  align-items: end;
+}
+
+.controls label:last-child {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  gap: 8px;
+}
+
+.controls input[type="checkbox"] {
+  width: 16px;
+  min-height: 16px;
+}
+
+code {
+  font-family: "Cascadia Mono", Consolas, monospace;
+}
+
+.graphic {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--chroma);
+}
+
+.graphic.transparent {
+  background: transparent;
+}
+
+.stage {
+  position: relative;
+  display: grid;
+  width: min(100vw, var(--stage-width));
+  height: min(100vh, var(--stage-height));
+  margin: 0 auto;
+  place-items: center;
+  overflow: hidden;
+}
+
+.embed {
+  display: grid;
+  max-width: 92%;
+  max-height: 92%;
+  place-items: center;
+  transform: scale(var(--scale));
+  transform-origin: center;
+}
+
+.embed > iframe,
+.embed > blockquote,
+.embed > img,
+.embed > video {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  border: 0;
+}
+
+.fit-cover .embed > iframe,
+.fit-cover .embed > img,
+.fit-cover .embed > video {
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+}
+
+.error {
+  border-color: #d77;
+}
+
+@media (max-width: 720px) {
+  .app {
+    padding: 16px;
+  }
+
+  .row,
+  .controls {
+    grid-template-columns: 1fr;
+  }
+}