/* TopCoder Competition Arena inspired theme (cleaner). */ /* Dark is the default. Light is opt-in via . */ :root { color-scheme: dark; --bg: #000000; --panel: #101010; --panel-body: #060606; --raised: #0c0c0c; --bevel-light: #4a4a4a; --bevel-dark: #0a0a0a; --border: #333333; --text: #e0e0e0; --text-dim: #cccccc; --muted: #8f8f8f; --strong: #ffffff; /* high-emphasis text */ --green: #33cc33; /* system messages */ --label: #99cc00; /* panel titles, table headers */ --link-hover: #ccff33; --em: #cccc88; /* italics, notes */ --lcd: #b8f0a0; /* LCD digits */ --red: #cc0000; /* logo, menu highlight */ --on-red: #ffffff; --sans: Verdana, Geneva, Tahoma, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* chrome */ --logo-dim: #bbbbbb; --logo-red: #dd2222; --menubar-bg: #1b1b1b; --menubar-edge: #3a3a3a; --menubar-shadow: #000000; --menubar-text: #e8e8e8; --arena-top: #3d3d3d; --arena-bottom: #101010; --arena-border: #000000; --arena-title: #d6d6d6; --arena-title-shadow: #000000; --footer-text: #777777; --footer-link: #999999; /* panels */ --title-top: #2f2f2f; --title-bottom: #191919; --title-border: #000000; --defbar-top: #1c2414; --defbar-bottom: #0a0a0a; /* tables */ --thead-bg: #1c1c1c; --thead-border: #000000; --row-border: #1b1b1b; --row-alt: #0c0c0c; --row-hover: #141b0c; --you-row: #1a2410; --you-row-hover: #22300f; --you-outline: #557722; /* forms */ --input-bg: #000000; --caret: #66ff33; --focus-ring: #557722; --btn-text: #111111; --btn-top: #eef4e2; --btn-bottom: #b9c9a2; --btn-top-hover: #ffffff; --btn-bottom-hover: #cfe0b6; --btn-border: #222222; --btn-shadow: #000000; --switch-bg: #181818; --switch-border: #555555; --switch-knob: #888888; --switch-on-bg: #17230d; --switch-on-border: #669922; /* LCD */ --lcd-bg: #040604; --lcd-border: #44aa44; --lcd-glow: #00330066; --lcd-inner: #001a00; --lcd-label: #77aa66; --lcd-text-shadow: #33cc3355; /* code / preformatted */ --pre-bg: #0c0c0c; --pre-border: #222222; --code-bg: #000000; --code-text: #dddddd; /* ratings */ --rt-gray: #999999; --rt-green: #00c000; --rt-blue: #7777ff; --rt-yellow: #dddd00; --rt-red: #ee2222; --rt-unrated: #cccccc; --partial: #cccc44; --fail: #ff4444; /* verdicts */ --verdict-bg: #050505; --v-ac: #44ee44; --v-ac-glow: #33cc3388; --v-wa: #ff4444; --v-tle: #ffcc33; --v-re: #ff9944; --v-ce: #aaaaaa; --v-je: #cc88ff; --v-pending: #88aacc; } :root[data-theme="light"] { color-scheme: light; --bg: #e8e8e2; --panel: #d9d9d2; --panel-body: #ffffff; --raised: #ffffff; --bevel-light: #ffffff; --bevel-dark: #9a9a92; --border: #b8b8b0; --text: #1c1c1c; --text-dim: #3c3c3c; --muted: #5f5f5a; --strong: #000000; --green: #157a15; --label: #4d6600; --link-hover: #2f4d00; --em: #7a6512; --lcd: #14380a; --red: #bb0000; --on-red: #ffffff; --logo-dim: #56564f; --logo-red: #bb1111; --menubar-bg: #d2d2ca; --menubar-edge: #ffffff; --menubar-shadow: #9a9a92; --menubar-text: #1c1c1c; --arena-top: #ffffff; --arena-bottom: #cfcfc7; --arena-border: #a8a8a0; --arena-title: #3a3a34; --arena-title-shadow: #ffffff; --footer-text: #66665f; --footer-link: #4d6600; --title-top: #e6e6de; --title-bottom: #cfcfc6; --title-border: #a8a8a0; --defbar-top: #eef3e0; --defbar-bottom: #ffffff; --thead-bg: #e0e0d8; --thead-border: #a8a8a0; --row-border: #e2e2da; --row-alt: #f4f4ee; --row-hover: #eaf0d8; --you-row: #e7efd0; --you-row-hover: #dfe9c0; --you-outline: #8aa855; --input-bg: #ffffff; --caret: #4d7a00; --focus-ring: #7a9933; --btn-text: #111111; --btn-top: #fbfdf6; --btn-bottom: #cbd9b4; --btn-top-hover: #ffffff; --btn-bottom-hover: #dcead9; --btn-border: #6d7a5c; --btn-shadow: #9a9a92; --switch-bg: #dededa; --switch-border: #a8a8a0; --switch-knob: #8c8c86; --switch-on-bg: #dfeac0; --switch-on-border: #7d9c33; --lcd-bg: #cfe0ae; --lcd-border: #6d8f4a; --lcd-glow: #00000014; --lcd-inner: #b6cc94; --lcd-label: #4a6b33; --lcd-text-shadow: transparent; --pre-bg: #f5f5ee; --pre-border: #d4d4cc; --code-bg: #ffffff; --code-text: #1c1c1c; --rt-gray: #6f6f6f; --rt-green: #007a00; --rt-blue: #2222cc; --rt-yellow: #8a7300; --rt-red: #cc1111; --rt-unrated: #555555; --partial: #8a7300; --fail: #cc1111; --verdict-bg: #ffffff; --v-ac: #0a7a0a; --v-ac-glow: transparent; --v-wa: #cc1111; --v-tle: #8a6200; --v-re: #a85200; --v-ce: #666660; --v-je: #7a33bb; --v-pending: #35648f; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 12px; line-height: 1.5; } .frame { max-width: 66rem; margin: 0 auto; padding: 0 0.8rem; } /* ---- header / logo ---- */ header.top { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.3rem 0.5rem; } .logo { font-size: 20px; font-weight: bold; color: var(--logo-dim); letter-spacing: 1px; } .logo-white { color: var(--strong); } .logo-red { color: var(--logo-red); } .conn { color: var(--text-dim); font-size: 10px; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #99ff99, #009900); box-shadow: 0 0 5px #33ff33; vertical-align: middle; margin-left: 2px; } .top-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem 0.75rem; } .signed-in { color: var(--muted); font-size: 10px; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login-link { color: var(--label); font-size: 10px; font-weight: bold; text-decoration: none; } .login-link:hover { color: var(--link-hover); text-decoration: underline; } .logout-form { margin: 0; } .link-button { background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--label); cursor: pointer; display: inline; font-family: var(--sans); font-size: 10px; font-variant: normal; font-weight: bold; letter-spacing: 0; padding: 0; } .link-button:hover { background: none; color: var(--link-hover); text-decoration: underline; } .link-button:focus-visible { outline: 1px solid var(--label); outline-offset: 2px; } /* ---- menu bar ---- */ .menubar { background: var(--menubar-bg); border-top: 1px solid var(--menubar-edge); border-bottom: 2px solid var(--menubar-shadow); display: flex; } .menubar a { color: var(--menubar-text); text-decoration: none; padding: 0.35rem 1.1rem; } .menubar a:hover { background: var(--red); color: var(--on-red); } /* ---- arena title bar ---- */ .arena-bar { background: linear-gradient(var(--arena-top), var(--arena-bottom)); border: 1px solid var(--arena-border); border-bottom: 2px solid var(--arena-border); padding: 0.45rem 0.8rem; margin-top: 3px; } .arena-title { color: var(--arena-title); font-weight: bold; text-transform: uppercase; letter-spacing: 0.35em; text-shadow: 1px 1px 1px var(--arena-title-shadow); } .arena-crumb { color: var(--strong); margin-left: 0.6rem; } main { padding: 1rem 0.2rem 2.5rem; } footer { border-top: 1px solid var(--border); color: var(--footer-text); font-size: 10px; padding: 0.6rem 0.3rem 1.2rem; } footer a { color: var(--footer-link); } /* ---- panels (beveled, green title strip) ---- */ .panel { margin: 1rem 0; border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); background: var(--panel); } .panel-title { background: linear-gradient(var(--title-top), var(--title-bottom)); color: var(--label); font-weight: bold; font-size: 11px; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--title-border); letter-spacing: 0.05em; } .panel-body { padding: 0.7rem; background: var(--panel-body); } /* ---- status message bar (like the arena broadcast bar) ---- */ .status-msg { border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); border-radius: 10px; background: var(--raised); color: var(--strong); padding: 0.45rem 0.9rem; margin-bottom: 1rem; } /* ---- definition bar (coding phase header) ---- */ .defbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 2rem; border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); border-radius: 8px; background: linear-gradient(var(--defbar-top), var(--defbar-bottom)); padding: 0.5rem 0.9rem; margin: 1rem 0; max-width: 40rem; } .defbar .k { color: var(--strong); } .defbar .v { color: var(--green); font-family: var(--mono); font-weight: bold; } /* ---- tables ---- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.3rem 0.55rem; vertical-align: top; } thead th { color: var(--label); background: var(--thead-bg); border-bottom: 1px solid var(--thead-border); font-size: 11px; } tbody td { border-bottom: 1px solid var(--row-border); } tbody tr:nth-child(even) { background: var(--row-alt); } tbody tr:hover { background: var(--row-hover); } td.num, th.num { text-align: right; white-space: nowrap; } td.points { color: var(--label); font-family: var(--mono); font-weight: bold; font-size: 13px; } td.categories { color: var(--muted); font-size: 11px; } .category-cell, .category-inline { display: none; } body.show-categories .category-cell { display: table-cell; } body.show-categories .category-inline { display: inline; } .mono { font-family: var(--mono); } table.definition { width: auto; } table.definition th { color: var(--label); padding-right: 1.5rem; background: none; } table.definition td, table.definition th { border-bottom: none; } table.definition tr { background: none !important; } /* ---- links ---- */ a { color: var(--label); } a:hover { color: var(--link-hover); } .problem-link { color: var(--strong); font-weight: bold; text-decoration: none; } .problem-link:hover { color: var(--label); text-decoration: underline; } .problem-link.solved, .problem-link.complete { color: var(--green); } .problem-link.partial { color: var(--partial); } .muted { color: var(--muted); } .system { color: var(--green); font-family: var(--mono); font-weight: bold; } /* ---- forms ---- */ input[type="text"], textarea { font-family: var(--mono); font-size: 13px; background: var(--input-bg); color: var(--text); caret-color: var(--caret); border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); padding: 0.4rem 0.55rem; } input[type="text"]:focus, textarea:focus { outline: 1px solid var(--focus-ring); } textarea { width: 100%; resize: vertical; line-height: 1.4; } /* light capsule buttons with dark small-caps text, like Save/Compile/Submit */ button, .button { font-family: var(--sans); font-size: 11px; font-weight: bold; font-variant: small-caps; letter-spacing: 0.05em; color: var(--btn-text); background: linear-gradient(var(--btn-top), var(--btn-bottom)); border: 1px solid var(--btn-border); border-radius: 9px; padding: 0.3rem 1.1rem; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px var(--btn-shadow); cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .button:hover { background: linear-gradient(var(--btn-top-hover), var(--btn-bottom-hover)); color: #000; } button:active, .button:active { box-shadow: inset 0 1px 3px #445533; } .search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.2rem 0 0.8rem; } .search input { flex: 1; max-width: 24rem; } .table-options { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; margin: -0.35rem 0 0.6rem; } .print-only { display: none; } .category-toggle { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); cursor: pointer; font-size: 11px; white-space: nowrap; } .category-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; } .category-switch { position: relative; width: 2rem; height: 1rem; background: var(--switch-bg); border: 1px solid var(--switch-border); border-radius: 1rem; box-shadow: inset 0 1px 2px var(--btn-shadow); } .category-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--switch-knob); border-radius: 50%; transition: transform 120ms ease, background 120ms ease; } .category-toggle input:checked + .category-switch { background: var(--switch-on-bg); border-color: var(--switch-on-border); } .category-toggle input:checked + .category-switch::after { background: var(--label); transform: translateX(16px); } .category-toggle input:focus-visible + .category-switch { outline: 2px solid var(--label); outline-offset: 2px; } .submit-row { margin-top: 0.6rem; display: flex; gap: 0.6rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .submit-user { color: var(--muted); font-size: 11px; } .pager { display: flex; gap: 1rem; align-items: center; margin-top: 0.8rem; } /* ---- LCD status (like the arena clock) ---- */ .lcd-row { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 0.4rem; } .lcd { display: inline-block; background: var(--lcd-bg); border: 1px dashed var(--lcd-border); border-radius: 3px; padding: 0.35rem 1.2rem; text-align: center; box-shadow: 0 0 6px var(--lcd-glow), inset 0 0 8px var(--lcd-inner); } .lcd-label { color: var(--lcd-label); font-size: 9px; text-transform: uppercase; letter-spacing: 0.25em; } .lcd-value { color: var(--lcd); font-family: var(--mono); font-size: 16px; font-weight: bold; letter-spacing: 0.15em; text-shadow: 0 0 4px var(--lcd-text-shadow); } /* ---- problem statement ---- */ .statement { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--text); padding: 1.25rem 1.4rem; } .statement-content { max-width: 90ch; margin-inline: auto; } .statement p { margin: 0 0 1em; } .statement h3 { color: var(--strong); font-size: 14px; margin: 1.8em 0 0.7em; } .statement h3:first-child { margin-top: 0; } .statement b { color: var(--strong); } .statement i { color: var(--em); } .statement type, .statement code { color: var(--green); font-family: var(--mono); font-style: normal; } .statement pre { background: var(--pre-bg); border: 1px solid var(--pre-border); padding: 0.7rem; overflow-x: auto; white-space: pre-wrap; } .statement ul { margin: 0 0 1em; padding-left: 1.6em; } .statement li { margin: 0.3em 0; } /* ---- examples ---- */ .example { margin-bottom: 1.1em; } .example:last-of-type { margin-bottom: 0.4em; } .example-num { color: var(--green); font-weight: bold; margin-bottom: 0.25em; } .example-io { background: var(--pre-bg); border: 1px solid var(--pre-border); padding: 0.5rem 0.7rem; margin: 0; overflow-x: auto; white-space: pre-wrap; } .example-note { color: var(--em); margin: 0.35em 0 0; white-space: pre-line; } /* ---- code / detail panes ---- */ pre.code, pre.detail { margin: 0; padding: 0.7rem 0.8rem; font-family: var(--mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; background: var(--code-bg); border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); } pre.code { color: var(--code-text); } pre.detail { color: var(--green); } /* ---- virtual contest scoreboard ---- */ /* TopCoder rating colors */ .handle { font-weight: bold; } .rt-gray { color: var(--rt-gray); } .rt-green { color: var(--rt-green); } .rt-blue { color: var(--rt-blue); } .rt-yellow { color: var(--rt-yellow); } .rt-red { color: var(--rt-red); } .rt-unrated { color: var(--rt-unrated); } .rt-you { color: var(--strong); } tbody tr.you-row { background: var(--you-row); outline: 1px solid var(--you-outline); } tbody tr.you-row:hover { background: var(--you-row-hover); } .cell-failed { color: var(--fail); } /* ---- verdicts (terminal-style chips) ---- */ .verdict { display: inline-block; padding: 0.05rem 0.55rem; font-family: var(--mono); font-size: 12px; font-weight: bold; border: 1px solid; border-radius: 3px; background: var(--verdict-bg); } .verdict.v-AC { color: var(--v-ac); border-color: var(--v-ac); text-shadow: 0 0 5px var(--v-ac-glow); } .verdict.v-WA { color: var(--v-wa); border-color: var(--v-wa); } .verdict.v-TLE { color: var(--v-tle); border-color: var(--v-tle); } .verdict.v-RE { color: var(--v-re); border-color: var(--v-re); } .verdict.v-CE { color: var(--v-ce); border-color: var(--v-ce); } .verdict.v-JE { color: var(--v-je); border-color: var(--v-je); } .verdict.pending { color: var(--v-pending); border-color: var(--v-pending); } /* ---- responsive ---- */ .panel-body { overflow-x: auto; } @media (max-width: 768px) { body { font-size: 13px; } .frame { padding: 0 0.5rem; } header.top { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .top-right { width: 100%; justify-content: flex-start; } .menubar { flex-wrap: wrap; } .menubar a { padding: 0.45rem 0.8rem; } .arena-bar { padding: 0.35rem 0.6rem; } .arena-title { letter-spacing: 0.15em; font-size: 12px; } .arena-crumb { display: block; margin-left: 0; font-size: 11px; } .defbar { grid-template-columns: 1fr; max-width: none; gap: 0.25rem; font-size: 11px; } .lcd-row { flex-wrap: wrap; gap: 0.6rem; } .lcd { padding: 0.3rem 0.8rem; } .search { flex-direction: column; align-items: stretch; } .search input { max-width: none; } .table-options { justify-content: flex-start; flex-wrap: wrap; } .submit-row { justify-content: flex-start; } textarea { font-size: 12px; } .statement { padding: 0.8rem 0.6rem; font-size: 13px; } .statement pre, .example-io { font-size: 11px; } pre.code, pre.detail { font-size: 11px; } th, td { padding: 0.3rem 0.4rem; font-size: 12px; } } @media (max-width: 480px) { .logo { font-size: 17px; } .menubar a { padding: 0.4rem 0.6rem; font-size: 11px; } .lcd-value { font-size: 14px; } th, td { padding: 0.25rem 0.3rem; font-size: 11px; } .statement { padding: 0.6rem 0.4rem; font-size: 12px; line-height: 1.6; } } /* ---- print-friendly problem statements ---- */ @media print { @page { margin: 9mm 11mm; } :root, :root[data-theme="light"] { --text: #111; --muted: #444; --strong: #000; --green: #000; --label: #000; --em: #333; --pre-bg: transparent; --pre-border: #aaa; } body { background: #fff; color: #111; font-family: Georgia, "Times New Roman", serif; font-size: 8.5pt; line-height: 1.28; } .frame { max-width: none; margin: 0; padding: 0; } header.top, .menubar, .arena-bar, .status-msg, .table-options, .coding-area, .contest-ended-message, footer { display: none !important; } .print-only { display: block; } .print-header { border-bottom: 1px solid #000; margin-bottom: 2mm; padding-bottom: 1.5mm; } .print-header h1 { font-family: var(--sans); font-size: 15pt; line-height: 1.1; margin: 0 0 0.5mm; } .print-header p { color: #333; font-size: 8pt; margin: 0; } main { padding: 0; } a { color: inherit; text-decoration: none; } .defbar { background: none; border: 1px solid #777; border-radius: 0; break-inside: avoid; color: #000; max-width: none; font-size: 8pt; gap: 0 5mm; margin: 2mm 0; padding: 1.5mm 2mm; } .defbar .k, .defbar .v { color: #000; } .panel { background: none; border: 0; margin: 2.5mm 0; } .panel-title { background: none; border-bottom: 1px solid #000; color: #000; font-family: var(--sans); font-size: 9pt; padding: 0 0 0.5mm; } .panel-body { background: none; padding: 1.5mm 0 0; } .statement { color: #111; font-family: Georgia, "Times New Roman", serif; font-size: 8.5pt; line-height: 1.28; } .statement-content { max-width: none; } .statement-content > h3:first-child { display: none; } .statement p { margin: 0 0 0.45em; } .statement ul { margin: 0 0 0.45em; padding-left: 1.25em; } .statement li { margin: 0.08em 0; } .statement h3 { break-after: avoid; color: #000; font-family: var(--sans); font-size: 9pt; margin: 0.7em 0 0.25em; } .statement pre, .example-io { background: none; border: 1px solid #aaa; color: #000; font-family: var(--mono); font-size: 7.5pt; line-height: 1.2; padding: 1.5mm 2mm; white-space: pre-wrap; } .example { break-inside: avoid; margin-bottom: 1.5mm; } .example-num { color: #000; margin-bottom: 0.5mm; } .example-note { margin-top: 0.5mm; } .muted { color: #444; font-size: 7.5pt; } }