/* Extracted from template */
@font-face {
  font-family: 'Hourglass';
  src: url('Hourglass.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root { --win-bg: #c0c0c0; --win-border-light: #ffffff; --win-border-dark: #808080; --win-blue: #000080; }
body { background: #008080; font-family: sans-serif; display: flex; gap: 20px; padding: 20px; margin: 0; font-size: 12px; box-sizing: border-box; }
.window { background: var(--win-bg); border: 2px solid; border-color: var(--win-border-light) var(--win-border-dark) var(--win-border-dark) var(--win-border-light); padding: 3px; box-shadow: 1px 1px 0 #000; }
.title-bar { background: var(--win-blue); color: white; padding: 3px 6px; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 10px; }
.content { padding: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
input[type="text"] { border: 2px solid; border-color: var(--win-border-dark) var(--win-border-light) var(--win-border-light) var(--win-border-dark); padding: 2px; outline: none; }
button { background: var(--win-bg); border: 2px solid; border-color: var(--win-border-light) var(--win-border-dark) var(--win-border-dark) var(--win-border-light); padding: 4px 10px; cursor: pointer; font-weight: bold; }
button:active { border-color: var(--win-border-dark) var(--win-border-light) var(--win-border-light) var(--win-border-dark); }
.preview-area {
    position: relative;
    width: 32em;
    height: 440px;
    box-sizing: border-box;
    font-size: 19px;
}
.preview-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.preview {
    width: 100%;
    height: 100%;
    background: var(--BACKGROUND);
    color: var(--FOREGROUND);
    border: 4px solid #000;
    position: relative;
    box-sizing: border-box;
    font-family: "Hourglass", "DejaVu Sans Mono", "Courier New", monospace;
    font-size: 19px;
    line-height: 1.0;
    letter-spacing: 0;
    white-space: pre;
    /* All three screens share this exact same position */
}
.preview::after { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%); background-size: 100% 4px; pointer-events: none; }
.preview .fg { color: var(--FOREGROUND); }
.preview .hi1 { color: var(--HICOLOR1); }
.preview .hi2 { color: var(--HICOLOR2); }
.preview .accent { color: var(--ACCENTCOLOR); }
.preview .accentalt { color: var(--ACCENTALTCOLOR); }
.preview .info { color: var(--INFOCOLOR); }
.preview .warn { color: var(--WARNCOLOR); }
.preview .error { color: var(--ERRORCOLOR); }
.preview .emphasis { color: var(--EMPHASISCOLOR); }
.preview .cursor {
    background: var(--HICOLOR2);
    color: var(--BACKGROUND);
    display: inline-block;
    width: 2ch;
    text-align: center;
    padding: 0;
}
.gallery { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.g-item { border: 1px solid #000; padding: 5px; font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; }