/* Cardclops: the More themes (Settings → Appearance → More themes). Neon, Light and Dark live in styles.css with the rest of the page. Every theme here is a set of colors on :root[data-theme="…"], then, for most, the changes to the page's chrome that make the look: its scenery, top bar, tabs, panels, headings, buttons and type. Each section names what it is going for. Every rule is scoped to its theme, so none can leak into another. Contrast holds in every theme: the accents are both fills behind black text and text on the panels, so a light theme's accents keep 3:1 on its panels and 4.5:1 behind black, and a dark theme's keep 4.5:1 behind black and 3:1 on its panels. Scenery stays behind the panels, where it never sits under text. */ /* Moving scenery (snow, embers, stars) stands still when motion is reduced, in Settings or on the device. */ :root[data-motion="reduce"] body::before, :root[data-motion="reduce"] body::after { animation: none !important; } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } } /* The footer sits on a plate of panel color in every More theme, so scenery at the foot of the screen (a hill, a running track, a forest) never sits under its text. */ :root:not([data-theme="neon"], [data-theme="light"], [data-theme="dark"]) .site-footer { margin: 28px max(var(--gutter), calc((100% - 900px) / 2)) 22px; padding: 12px 18px; background: var(--panel); border: var(--line); border-radius: var(--blob-sm); color: var(--muted); } /* A deck-shape tile keeps its colored top edge (on target, close, under or over) in every More theme, whatever border the theme gives its buttons. */ :root:not([data-theme="neon"], [data-theme="light"], [data-theme="dark"]) button.shape-tile { border-top: 6px solid var(--state); } /* ==== Lollipop ==================================================================================== A candy shop. Bubblegum walls hung with lollipops and wrapped sweets, bubbles drifting up, a raspberry awning with a candy-cane edge, gumdrop tabs in five flavors, glossy candy buttons that sit on a sugar shadow, sprinkles along the top of every panel, a lollipop before each heading, piped-icing text boxes and rounded type. Light: the accents keep Light's contrast. */ :root[data-theme="lollipop"] { --bg: #ffd9ec; --bg-deep: #c4115f; --bg-blob: #ffe6f2; --panel: #fff7fb; --panel-2: #ffeaf4; --panel-3: #ffd3e8; --well: #fffafd; --text: #44092f; --muted: #7f3f68; --faint: #b07a9c; --pink: #ec1a78; --lime: #459600; --cyan: #0b8fd0; --violet: #a05cec; --orange: #f0650c; --yellow: #b98600; --mint: #00a383; --peach: #ec6f58; --pink-text: #c4115f; --pink-soft: #a80f52; --flat: #f7cfe2; --tile-uncommon: #e6f3ff; --tile-rare: #fff3d6; --tile-mythic: #ffe4d6; --zebra: #fff0f7; --grid: #ffd1e6; --grid-2: #f5b6d4; --drop: #ffe1ef; --hatch: #f7c6de; --tint-pink: #ffd0e5; --tint-magenta: #f8d2f0; --tint-green: #dcf5c4; --legend-miss: #ecc9da; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --mana-W: #f3e27a; --mana-C: #d9c4d3; --mana-N: #e2cfdb; --r-common: #e2c3d6; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --line: 2px solid #44092f; --line-thick: 3px solid #44092f; --shadow: 0 6px 0 #f0a3c6; --shadow-sm: 0 3px 0 #f0a3c6; --blob: 26px; --blob-sm: 16px; --pill: 999px; --font-display: 'Arial Rounded MT Bold', 'Varela Round', Nunito, 'Trebuchet MS', sans-serif; --font-body: 'Trebuchet MS', 'Segoe UI', sans-serif; --gloss: radial-gradient(ellipse 70% 55% at 30% 18%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%); --sugar: 0 3px 0 #8a1048; } :root[data-theme="lollipop"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M70 112V200' stroke='%23fff3f9' stroke-width='7'/%3E%3Ccircle cx='70' cy='80' r='34' fill='%23ffbfdc'/%3E%3Cpath d='M70 80m-22 0a22 22 0 1 0 44 0a15 15 0 1 0 -30 0a8 8 0 1 0 16 0' fill='none' stroke='%23ffe3f0' stroke-width='5'/%3E%3Cpath d='M250 262V330' stroke='%23fff3f9' stroke-width='7'/%3E%3Ccircle cx='250' cy='235' r='28' fill='%23c4ecdf'/%3E%3Cpath d='M250 235m-18 0a18 18 0 1 0 36 0a12 12 0 1 0 -24 0a6 6 0 1 0 12 0' fill='none' stroke='%23e6f8f2' stroke-width='4'/%3E%3C/g%3E%3Cg fill='%23fff0a3'%3E%3Cellipse cx='240' cy='80' rx='22' ry='14'/%3E%3Cpath d='M218 80l-16-12v24zM262 80l16-12v24z'/%3E%3C/g%3E%3Cg fill='%23e3d6ff'%3E%3Cellipse cx='96' cy='272' rx='18' ry='12'/%3E%3Cpath d='M78 272l-13-10v20zM114 272l13-10v20z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 340px 340px, radial-gradient(ellipse 60% 45% at 88% 0%, #fff1a8, transparent 70%), radial-gradient(ellipse 55% 45% at 0% 100%, #c9f3ff, transparent 70%), #ffd9ec; background-attachment: fixed; } /* bubbles rising past the shelves */ :root[data-theme="lollipop"] body::before { content: ''; position: fixed; inset: 0 0 -320px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23ffffff' fill-opacity='.28' stroke='%23ffffff' stroke-opacity='.85' stroke-width='2'%3E%3Ccircle cx='40' cy='60' r='10'/%3E%3Ccircle cx='150' cy='200' r='16'/%3E%3Ccircle cx='262' cy='92' r='7'/%3E%3Ccircle cx='212' cy='292' r='12'/%3E%3Ccircle cx='92' cy='252' r='6'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='36' cy='56' r='2.5'/%3E%3Ccircle cx='144' cy='194' r='4'/%3E%3Ccircle cx='207' cy='287' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 320px; animation: lollipop-bubbles 46s linear infinite; } @keyframes lollipop-bubbles { to { transform: translateY(-320px); } } :root[data-theme="lollipop"] * { text-shadow: none !important; } :root[data-theme="lollipop"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #c4115f; letter-spacing: 0; } :root[data-theme="lollipop"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #c4115f; } :root[data-theme="lollipop"] .dh-name h1 { color: #44092f; text-shadow: 3px 3px 0 #ffb3d1 !important; } :root[data-theme="lollipop"] ::selection { background: #ec1a78; color: #fff; } :root[data-theme="lollipop"] :focus-visible { outline: 3px solid #0b8fd0; outline-offset: 2px; } :root[data-theme="lollipop"] a { color: #0a6ea8; } /* the awning: raspberry with a candy-cane edge */ :root[data-theme="lollipop"] .topbar { background: repeating-linear-gradient(135deg, #ffffff 0 9px, #ec1a78 9px 18px) bottom / 100% 10px no-repeat, linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), #c4115f; border-bottom: 0; box-shadow: 0 4px 0 #f0a3c6; padding-bottom: 20px; } :root[data-theme="lollipop"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); } :root[data-theme="lollipop"] .logo-text .l2-card { color: #ffe066; } :root[data-theme="lollipop"] .header-stats { color: #ffe3f0; } :root[data-theme="lollipop"] .header-stats b { color: #ffffff; } :root[data-theme="lollipop"] .bell { background: var(--gloss), #fff7fb; border: 2px solid #44092f; box-shadow: var(--sugar); } /* gumdrop tabs, five flavors; the open page is the cherry */ :root[data-theme="lollipop"] :is(.tabs > a, .tools-btn) { background: var(--gloss), #ffb3d1; color: #44092f; border: 2px solid #44092f; border-radius: 999px; box-shadow: var(--sugar); font-family: var(--font-display); } :root[data-theme="lollipop"] .tabs > a:nth-child(5n+2) { background: var(--gloss), #c9f3e6; } :root[data-theme="lollipop"] .tabs > a:nth-child(5n+3) { background: var(--gloss), #fff1a8; } :root[data-theme="lollipop"] .tabs > a:nth-child(5n+4) { background: var(--gloss), #e3d6ff; } :root[data-theme="lollipop"] .tabs > a:nth-child(5n) { background: var(--gloss), #ffd1b3; } :root[data-theme="lollipop"] :is(.tabs > a, .tools-btn):hover { color: #44092f; transform: translateY(-2px); box-shadow: 0 5px 0 #8a1048; } :root[data-theme="lollipop"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--gloss), #c4115f; color: #ffffff; } /* panels: a strip of sprinkles across the top */ :root[data-theme="lollipop"] :is(.panel, .dialog-card) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='16'%3E%3Cg stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 10l8-4' stroke='%23ec1a78'/%3E%3Cpath d='M26 5l7 6' stroke='%230b8fd0'/%3E%3Cpath d='M46 12l9-3' stroke='%23459600'/%3E%3Cpath d='M68 4l6 7' stroke='%23f0650c'/%3E%3Cpath d='M88 11l8-5' stroke='%23a05cec'/%3E%3Cpath d='M108 6l8 5' stroke='%23e8b400'/%3E%3Cpath d='M126 12l7-6' stroke='%23ec1a78'/%3E%3C/g%3E%3C/svg%3E") 14px 10px / 140px 16px repeat-x, var(--panel); padding-top: 34px; border: 2px solid #44092f; box-shadow: 0 6px 0 #f0a3c6; } :root[data-theme="lollipop"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1em; height: 1.25em; margin-right: .4em; vertical-align: -.25em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M10 12v12' stroke='%2344092f' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='9' r='8' fill='%23ec1a78' stroke='%2344092f' stroke-width='1.5'/%3E%3Cpath d='M10 9m-4.5 0a4.5 4.5 0 1 0 9 0a3 3 0 1 0 -6 0a1.5 1.5 0 1 0 3 0' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* candy buttons: glossy, on a sugar shadow */ :root[data-theme="lollipop"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background-image: var(--gloss); border: 2px solid #44092f; border-radius: 999px; box-shadow: var(--sugar); filter: none; } :root[data-theme="lollipop"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { transform: translateY(-2px); box-shadow: 0 5px 0 #8a1048; filter: none; } :root[data-theme="lollipop"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile, .tabs > a):active { transform: translateY(2px); box-shadow: 0 1px 0 #8a1048; } :root[data-theme="lollipop"] .shape-tile { border-radius: 18px; } :root[data-theme="lollipop"] .seg { border: 2px solid #44092f; box-shadow: var(--sugar); } :root[data-theme="lollipop"] .seg-btn + .seg-btn { border-left: 2px solid #44092f; } /* piped icing */ :root[data-theme="lollipop"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #fffafd; color: #44092f; border: 2px dashed #ec1a78; border-radius: 16px; box-shadow: none; } :root[data-theme="lollipop"] :is(.tile, .deck-tile) { border: 2px solid #44092f; border-radius: 22px; box-shadow: 0 5px 0 #f0a3c6; } :root[data-theme="lollipop"] :is(.tile, .deck-tile):hover { box-shadow: 0 8px 0 #ec1a78; } :root[data-theme="lollipop"] .bignum { border: 2px solid #44092f; border-radius: 22px; box-shadow: 0 5px 0 rgba(68, 9, 47, .35); background-image: var(--gloss); } :root[data-theme="lollipop"] .tools-list { background: var(--gloss), #fff7fb; border: 2px solid #44092f; border-radius: 22px; box-shadow: 0 6px 0 #f0a3c6; } :root[data-theme="lollipop"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 14px; } :root[data-theme="lollipop"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #ffd3e8; color: #44092f; } :root[data-theme="lollipop"] .toast { background: var(--gloss), #c9f3e6; color: #44092f; border: 2px solid #44092f; border-radius: 999px; box-shadow: var(--sugar); } /* ==== Astronaut =================================================================================== Out on a spacewalk. A starfield that twinkles, a violet nebula, and Earth's blue limb glowing along the bottom of the screen; the logo worn as a mission patch; a heads-up display for the rest: a ruled HUD bar, tabs and panels framed by targeting brackets, a faint grid, monospace readouts, an orbit before each heading, and the suit's safety orange for whatever is chosen. */ :root[data-theme="astronaut"] { --bg: #070b17; --bg-deep: #04060e; --bg-blob: #0c1326; --panel: #121b33; --panel-2: #0e1529; --panel-3: #1c2847; --well: #0a1022; --text: #eef3ff; --muted: #aab7d6; --faint: #6c7a9e; --pink: #ff5f6d; --lime: #6fe28f; --cyan: #4fd3ff; --violet: #9d8cff; --orange: #ff6b2c; --yellow: #f4c542; --mint: #5fe6d2; --peach: #ffab8a; --pink-text: #ff8a95; --pink-soft: #ffb0b8; --flat: #26325a; --tile-uncommon: #132444; --tile-rare: #221f33; --tile-mythic: #2a1a26; --zebra: #101830; --grid: #1b2645; --grid-2: #28365e; --drop: #152040; --hatch: #060a15; --tint-pink: #3a1622; --tint-magenta: #2c1a3e; --tint-green: #123024; --legend-miss: #39456a; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(79, 211, 255, .35); --line-thick: 1px solid rgba(79, 211, 255, .55); --shadow: 0 10px 30px rgba(0, 0, 0, .55); --shadow-sm: 0 3px 10px rgba(0, 0, 0, .5); --blob: 4px; --blob-sm: 3px; --pill: 3px; --font-display: Bahnschrift, Eurostile, 'DIN Alternate', 'Segoe UI', sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-readout: Consolas, 'Lucida Console', 'Courier New', monospace; --hud: #4fd3ff; --suit: #ff6b2c; /* targeting brackets at the four corners of a box, large and small, cyan and orange */ --brackets: linear-gradient(var(--hud), var(--hud)) top left / 16px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) top left / 2px 16px no-repeat, linear-gradient(var(--hud), var(--hud)) top right / 16px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) top right / 2px 16px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom left / 16px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom left / 2px 16px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 16px 2px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 2px 16px no-repeat; --brackets-sm: linear-gradient(var(--hud), var(--hud)) top left / 7px 1.5px no-repeat, linear-gradient(var(--hud), var(--hud)) top left / 1.5px 7px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 7px 1.5px no-repeat, linear-gradient(var(--hud), var(--hud)) bottom right / 1.5px 7px no-repeat; --brackets-suit: linear-gradient(var(--suit), var(--suit)) top left / 7px 2px no-repeat, linear-gradient(var(--suit), var(--suit)) top left / 2px 7px no-repeat, linear-gradient(var(--suit), var(--suit)) bottom right / 7px 2px no-repeat, linear-gradient(var(--suit), var(--suit)) bottom right / 2px 7px no-repeat; } :root[data-theme="astronaut"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='22' r='.9' fill-opacity='.7'/%3E%3Ccircle cx='58' cy='140' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='128' cy='48' r='1.1' fill-opacity='.8'/%3E%3Ccircle cx='206' cy='14' r='.8' fill-opacity='.6'/%3E%3Ccircle cx='246' cy='158' r='1' fill-opacity='.7'/%3E%3Ccircle cx='164' cy='236' r='.8' fill-opacity='.5'/%3E%3Ccircle cx='36' cy='232' r='1.2' fill-opacity='.8'/%3E%3Ccircle cx='98' cy='206' r='.6' fill-opacity='.5'/%3E%3Ccircle cx='188' cy='112' r='.7' fill-opacity='.6'/%3E%3Ccircle cx='280' cy='276' r='.9' fill-opacity='.7'/%3E%3Ccircle cx='270' cy='70' r='.6' fill-opacity='.5'/%3E%3Ccircle cx='80' cy='86' r='.5' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23cfe9ff'%3E%3Ccircle cx='30' cy='60' r='.6' fill-opacity='.45'/%3E%3Ccircle cx='150' cy='30' r='.5' fill-opacity='.4'/%3E%3Ccircle cx='190' cy='170' r='.6' fill-opacity='.45'/%3E%3Ccircle cx='90' cy='150' r='.5' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E") 40px 70px / 220px 220px, radial-gradient(ellipse 140% 55% at 50% 138%, #0b2552 0 54%, #2a7fd4 57%, #9be3ff 58.2%, rgba(79, 211, 255, .3) 59.6%, transparent 64%), radial-gradient(ellipse 50% 35% at 82% 14%, rgba(157, 140, 255, .2), transparent 70%), radial-gradient(ellipse 40% 30% at 12% 34%, rgba(255, 107, 44, .07), transparent 70%), #070b17; background-attachment: fixed; } /* the brighter stars twinkle */ :root[data-theme="astronaut"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='60' cy='90' r='1.6'/%3E%3Ccircle cx='300' cy='40' r='1.4'/%3E%3Ccircle cx='220' cy='260' r='1.8'/%3E%3Ccircle cx='380' cy='330' r='1.3'/%3E%3Ccircle cx='110' cy='360' r='1.5'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='.5' stroke-width='.8'%3E%3Cpath d='M220 252v16M212 260h16'/%3E%3Cpath d='M60 83v14M53 90h14'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px; animation: astronaut-twinkle 5s ease-in-out infinite; } @keyframes astronaut-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } :root[data-theme="astronaut"] * { text-shadow: none !important; } :root[data-theme="astronaut"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #eef3ff; } :root[data-theme="astronaut"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #eef3ff; } :root[data-theme="astronaut"] .dh-name h1 { text-transform: none; letter-spacing: .04em; } :root[data-theme="astronaut"] ::selection { background: rgba(79, 211, 255, .45); color: #fff; } :root[data-theme="astronaut"] :focus-visible { outline: 1px solid var(--hud); outline-offset: 3px; } :root[data-theme="astronaut"] a { color: #8fe2ff; } /* the HUD bar, ruled along its foot; the logo is the mission patch */ :root[data-theme="astronaut"] .topbar { background: repeating-linear-gradient(90deg, rgba(79, 211, 255, .6) 0 1px, transparent 1px 14px) bottom / 100% 6px no-repeat, linear-gradient(rgba(79, 211, 255, .6), rgba(79, 211, 255, .6)) bottom / 100% 1px no-repeat, rgba(4, 6, 14, .86); border-bottom: 0; box-shadow: 0 0 26px rgba(79, 211, 255, .12); padding-bottom: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-theme="astronaut"] .logo-mark { border-radius: 50%; background: #0a1022; padding: 3px; box-shadow: 0 0 0 3px #f4c542, 0 0 0 5px #04060e, 0 0 0 7px var(--hud); } :root[data-theme="astronaut"] .logo-text .l2 { color: #eef3ff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 1.2rem; } :root[data-theme="astronaut"] .logo-text .l2-card { color: var(--suit); } :root[data-theme="astronaut"] .header-stats { font-family: var(--font-readout); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; color: #aab7d6; } :root[data-theme="astronaut"] .header-stats b { color: #f4c542; } :root[data-theme="astronaut"] .bell { background: var(--brackets-sm), rgba(10, 16, 34, .9); border: 1px solid rgba(79, 211, 255, .35); box-shadow: none; } /* tabs are HUD readouts in brackets; the open page is marked in suit orange */ :root[data-theme="astronaut"] :is(.tabs > a, .tools-btn) { background: var(--brackets-sm), rgba(18, 27, 51, .55); color: #cfe9ff; border: 0; box-shadow: none; font-family: var(--font-readout); font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; } :root[data-theme="astronaut"] :is(.tabs > a, .tools-btn):hover { background: var(--brackets-sm), rgba(79, 211, 255, .14); color: #ffffff; transform: none; box-shadow: none; } :root[data-theme="astronaut"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--brackets-suit), rgba(255, 107, 44, .16); color: #ffd2bd; text-shadow: 0 0 8px rgba(255, 107, 44, .75) !important; } /* panels: bracketed HUD frames over a faint grid */ :root[data-theme="astronaut"] :is(.panel, .dialog-card) { background: var(--brackets), repeating-linear-gradient(0deg, rgba(79, 211, 255, .045) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(79, 211, 255, .045) 0 1px, transparent 1px 28px), rgba(18, 27, 51, .9); border: 1px solid rgba(79, 211, 255, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } :root[data-theme="astronaut"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .5em; vertical-align: -.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='11' ry='4.5' fill='none' stroke='%234fd3ff' stroke-width='1.6' transform='rotate(-20 12 12)'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23ff6b2c'/%3E%3Ccircle cx='21.5' cy='8.6' r='1.6' fill='%23f4c542'/%3E%3C/svg%3E") center / contain no-repeat; } /* controls: bracketed readouts; the go button is the suit's safety orange */ :root[data-theme="astronaut"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--brackets-sm), rgba(10, 16, 34, .85); color: #cfe9ff; border: 1px solid rgba(79, 211, 255, .3); box-shadow: none; filter: none; letter-spacing: .05em; } :root[data-theme="astronaut"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: var(--brackets-sm), rgba(79, 211, 255, .12); color: #ffffff; border-color: var(--hud); transform: none; box-shadow: 0 0 12px rgba(79, 211, 255, .35); } :root[data-theme="astronaut"] .btn.go, :root[data-theme="astronaut"] .btn.go:hover { background: var(--suit); color: #000; border-color: #ffa070; } :root[data-theme="astronaut"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--brackets-suit), rgba(255, 107, 44, .2); color: #ffffff; border-color: var(--suit); } :root[data-theme="astronaut"] .seg { border: 1px solid rgba(79, 211, 255, .3); box-shadow: none; background: rgba(10, 16, 34, .85); } :root[data-theme="astronaut"] .seg-btn { color: #cfe9ff; } :root[data-theme="astronaut"] .seg-btn + .seg-btn { border-left: 1px solid rgba(79, 211, 255, .3); } :root[data-theme="astronaut"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: rgba(4, 6, 14, .92); color: #eef3ff; border: 0; border-bottom: 2px solid var(--hud); box-shadow: inset 3px 0 0 rgba(79, 211, 255, .45); font-family: var(--font-readout); caret-color: var(--suit); } :root[data-theme="astronaut"] :is(.tile, .deck-tile) { border: 1px solid rgba(79, 211, 255, .22); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); } :root[data-theme="astronaut"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 1px var(--hud), 0 0 18px rgba(79, 211, 255, .35); } :root[data-theme="astronaut"] .bignum { border: 1px solid rgba(0, 0, 0, .4); border-radius: 4px; box-shadow: 0 0 16px rgba(79, 211, 255, .12); } :root[data-theme="astronaut"] .tools-list { background: var(--brackets), rgba(10, 16, 34, .96); border: 1px solid rgba(79, 211, 255, .35); border-radius: 4px; box-shadow: 0 0 30px rgba(79, 211, 255, .15); } :root[data-theme="astronaut"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 2px; } :root[data-theme="astronaut"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: rgba(79, 211, 255, .12); } :root[data-theme="astronaut"] .toast { background: #f4c542; color: #000; border: 0; border-radius: 3px; font-family: var(--font-readout); } /* ==== Necronomicon ================================================================================ A grimoire bound in something it shouldn't be. Grained dark leather, a ritual circle scratched faintly behind everything, candlelight guttering in two corners, a stitched leather band for the top bar, tabs that hang like the book's blood-red ribbon markers, pages framed in a double rule with brass studs at the corners, a drop of blood before each heading, blackletter headings where the computer has a blackletter face, stitched leather buttons, and bone-white old-book type. */ :root[data-theme="necronomicon"] { --bg: #110807; --bg-deep: #0a0404; --bg-blob: #1a0d0b; --panel: #23140f; --panel-2: #1c100c; --panel-3: #342019; --well: #140a08; --text: #eadcbf; --muted: #b9a582; --faint: #7d6a50; --pink: #e0314a; --lime: #9ad14a; --cyan: #56c2a8; --violet: #a274e0; --orange: #e58a2c; --yellow: #d8b25c; --mint: #7fcf9e; --peach: #d99a7a; --pink-text: #f06a7b; --pink-soft: #f59aa6; --flat: #3d2a22; --tile-uncommon: #1e1c1a; --tile-rare: #2a1d12; --tile-mythic: #2e1414; --zebra: #1d110d; --grid: #2e1c16; --grid-2: #44291f; --drop: #261611; --hatch: #0a0504; --tint-pink: #3d1216; --tint-magenta: #33142a; --tint-green: #1d2a12; --legend-miss: #4a3a30; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #5a4636; --line-thick: 2px solid #6b5440; --shadow: 0 10px 28px rgba(0, 0, 0, .7); --shadow-sm: 0 3px 8px rgba(0, 0, 0, .6); --blob: 4px; --blob-sm: 3px; --pill: 3px; --font-display: 'Old English Text MT', UnifrakturCook, 'Luminari', 'Palatino Linotype', 'Book Antiqua', serif; --font-body: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --bone: #eadcbf; --blood: #8a1020; --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); --studs: radial-gradient(circle, #e6c46e 0 1.6px, #8a6a26 2.6px 3.6px, #2a1a0c 4px, transparent 5px) 6px 6px / 12px 12px no-repeat, radial-gradient(circle, #e6c46e 0 1.6px, #8a6a26 2.6px 3.6px, #2a1a0c 4px, transparent 5px) calc(100% - 6px) 6px / 12px 12px no-repeat, radial-gradient(circle, #e6c46e 0 1.6px, #8a6a26 2.6px 3.6px, #2a1a0c 4px, transparent 5px) 6px calc(100% - 6px) / 12px 12px no-repeat, radial-gradient(circle, #e6c46e 0 1.6px, #8a6a26 2.6px 3.6px, #2a1a0c 4px, transparent 5px) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat; } :root[data-theme="necronomicon"] body { background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .7)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%232e1813' stroke-width='1.4'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Ccircle cx='100' cy='100' r='82'/%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3Cpath d='M100 18L171 141H29Z'/%3E%3Cpath d='M100 182L29 59H171Z'/%3E%3Cpath d='M100 5v10M100 185v10M5 100h10M185 100h10M33 33l7 7M160 160l7 7M167 33l-7 7M40 160l-7 7'/%3E%3C/g%3E%3C/svg%3E") center / min(80vmin, 760px) no-repeat, var(--leather) 0 0 / 220px 220px, #110807; background-attachment: fixed; } /* candlelight, guttering */ :root[data-theme="necronomicon"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 7% 10%, rgba(229, 138, 44, .2), transparent 30%), radial-gradient(circle at 93% 90%, rgba(229, 138, 44, .15), transparent 32%); animation: necronomicon-candle 3.4s infinite; } @keyframes necronomicon-candle { 0%, 100% { opacity: .85; } 12% { opacity: .6; } 20% { opacity: .95; } 34% { opacity: .7; } 50% { opacity: 1; } 63% { opacity: .72; } 78% { opacity: .92; } } :root[data-theme="necronomicon"] * { text-shadow: none !important; } :root[data-theme="necronomicon"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; color: var(--bone); letter-spacing: .01em; } :root[data-theme="necronomicon"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: var(--bone); } :root[data-theme="necronomicon"] :is(.bn-value, .shape-count, .combo-count b) { font-family: var(--font-body); font-weight: 700; } /* blackletter numbers are hard to read */ :root[data-theme="necronomicon"] .dh-name h1 { text-shadow: 2px 2px 0 #5a0d16 !important; } :root[data-theme="necronomicon"] ::selection { background: var(--blood); color: var(--bone); } :root[data-theme="necronomicon"] :focus-visible { outline: 2px solid #d8b25c; outline-offset: 2px; } :root[data-theme="necronomicon"] a { color: #e6c46e; } /* the top bar: a band of stitched leather */ :root[data-theme="necronomicon"] .topbar { background: linear-gradient(90deg, rgba(234, 220, 191, .5) 0 10px, transparent 10px 18px) 0 7px / 18px 2px repeat-x, linear-gradient(90deg, rgba(234, 220, 191, .5) 0 10px, transparent 10px 18px) 0 calc(100% - 7px) / 18px 2px repeat-x, var(--leather) 0 0 / 220px 220px, linear-gradient(#2a1510, #170a07); border-bottom: 3px solid #3d2a22; box-shadow: 0 6px 18px rgba(0, 0, 0, .65); } :root[data-theme="necronomicon"] .logo-text .l2 { color: var(--bone); font-family: var(--font-display); font-weight: 400; } :root[data-theme="necronomicon"] .logo-text .l2-card { color: #e0314a; } :root[data-theme="necronomicon"] .header-stats { color: #b9a582; font-family: var(--font-body); } :root[data-theme="necronomicon"] .header-stats b { color: #e6c46e; } :root[data-theme="necronomicon"] .bell { background: var(--leather), #2a1712; border: 1px solid #5a4636; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); } /* tabs hang like the book's ribbon markers; the open page's ribbon is gilt */ :root[data-theme="necronomicon"] :is(.tabs > a, .tools-btn) { background: linear-gradient(#a0182a, #6a0b17); color: #f4e8d0; border: 0; border-radius: 0; box-shadow: none; padding: 7px 14px 17px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); font-family: var(--font-body); font-weight: 700; letter-spacing: .03em; } :root[data-theme="necronomicon"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(#c02035, #7e101c); color: #fff4e0; transform: translateY(2px); box-shadow: none; } :root[data-theme="necronomicon"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(#ecc970, #8a6a26); color: #1a0c09; } /* pages: double-ruled, with brass studs at the corners */ :root[data-theme="necronomicon"] :is(.panel, .dialog-card) { background: var(--studs), var(--leather) 0 0 / 220px 220px, var(--panel); border: 1px solid #050202; box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 6px #6b5440, inset 0 0 0 9px var(--panel), inset 0 0 0 10px #4a3828, 0 10px 28px rgba(0, 0, 0, .7); } :root[data-theme="necronomicon"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .7em; height: 1em; margin-right: .45em; vertical-align: -.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 1C8 1 2 10 2 14a6 6 0 0 0 12 0C14 10 8 1 8 1Z' fill='%23b0162a'/%3E%3Cpath d='M5.2 14.2a2.8 2.8 0 0 0 2.8 2.8' stroke='%23f59aa6' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* buttons: stitched leather; the go button is blood */ :root[data-theme="necronomicon"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: linear-gradient(#3a2219, #24140f); color: var(--bone); border: 1px solid #050202; outline: 1px dashed rgba(234, 220, 191, .38); outline-offset: -5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); filter: none; font-family: var(--font-body); font-weight: 700; } :root[data-theme="necronomicon"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: linear-gradient(#4a2a1f, #2c1812); color: #fff4e0; transform: none; box-shadow: 0 0 14px rgba(224, 49, 74, .3); } :root[data-theme="necronomicon"] .btn.go, :root[data-theme="necronomicon"] .btn.go:hover { background: linear-gradient(#a0182a, #6a0b17); color: #f4e8d0; } :root[data-theme="necronomicon"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: linear-gradient(#ecc970, #8a6a26); color: #1a0c09; } :root[data-theme="necronomicon"] .seg { border: 1px solid #050202; box-shadow: none; background: #1c100c; } :root[data-theme="necronomicon"] .seg-btn { color: var(--bone); } :root[data-theme="necronomicon"] .seg-btn + .seg-btn { border-left: 1px solid #5a4636; } :root[data-theme="necronomicon"] :focus-visible:is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { outline: 2px solid #d8b25c; outline-offset: 2px; } :root[data-theme="necronomicon"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #140a08; color: var(--bone); border: 1px solid #5a4636; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); font-family: var(--font-body); } :root[data-theme="necronomicon"] :is(.tile, .deck-tile) { border: 1px solid #5a4636; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); } :root[data-theme="necronomicon"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 1px #d8b25c, 0 0 22px rgba(224, 49, 74, .35); } :root[data-theme="necronomicon"] .bignum { border: 1px solid #050202; border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .6); } :root[data-theme="necronomicon"] .tools-list { background: var(--studs), var(--leather), #1c100c; border: 1px solid #6b5440; border-radius: 3px; box-shadow: 0 12px 30px rgba(0, 0, 0, .75); } :root[data-theme="necronomicon"] .tools-list :is(a, button) { background: transparent; border: 0; outline: 0; } :root[data-theme="necronomicon"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #3a2219; color: var(--bone); } :root[data-theme="necronomicon"] .toast { background: linear-gradient(#ecc970, #8a6a26); color: #1a0c09; border: 1px solid #050202; border-radius: 3px; font-family: var(--font-body); } /* ==== Stovepipe =================================================================================== A cast-iron wood stove against a sooty brick wall. The firebox glows at the foot of the screen and embers drift up past the bricks; the top bar is an iron plate with a row of brass rivets and a brass trim; tabs are brass nameplates screwed on at both ends, the open one glowing hot; panels are riveted iron plates under a brass rail; a flame before each heading, and slab-serif type. */ :root[data-theme="stovepipe"] { --bg: #12100e; --bg-deep: #0a0908; --bg-blob: #1a1714; --panel: #221e1a; --panel-2: #1b1815; --panel-3: #322c26; --well: #15120f; --text: #f1e6d2; --muted: #bfae93; --faint: #81735f; --pink: #e8523a; --lime: #7cc9a6; --cyan: #7fb3c9; --violet: #b39ad6; --orange: #f08a2b; --yellow: #d9aa4a; --mint: #a3c98a; --peach: #e0a07a; --pink-text: #f07d68; --pink-soft: #f5a595; --flat: #3a332c; --tile-uncommon: #1f2427; --tile-rare: #2a2419; --tile-mythic: #2e1d16; --zebra: #1e1a17; --grid: #2e2823; --grid-2: #433a31; --drop: #26211c; --hatch: #0c0a09; --tint-pink: #3a1a14; --tint-magenta: #33202a; --tint-green: #1e2a1c; --legend-miss: #4a4238; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid #0c0a09; --line-thick: 3px solid #0c0a09; --shadow: 0 8px 20px rgba(0, 0, 0, .6); --shadow-sm: 0 3px 8px rgba(0, 0, 0, .55); --blob: 6px; --blob-sm: 4px; --pill: 4px; --font-display: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'Sitka Heading', Cambria, Georgia, serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --brass: linear-gradient(#f4d68e, #d9aa4a 45%, #a87a28); --ember: linear-gradient(#ffd27a, #f08a2b 50%, #c2471a); --iron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .2 0 0 0 0 .18 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); --rivet: radial-gradient(circle, #f4d68e 0 1.5px, #a87a28 2.5px 3.5px, #2a1d0c 4px, transparent 5px); --rivets: var(--rivet) 4px 4px / 12px 12px no-repeat, var(--rivet) calc(100% - 4px) 4px / 12px 12px no-repeat, var(--rivet) 4px calc(100% - 4px) / 12px 12px no-repeat, var(--rivet) calc(100% - 4px) calc(100% - 4px) / 12px 12px no-repeat; } :root[data-theme="stovepipe"] body { background: radial-gradient(ellipse 70% 42% at 50% 115%, rgba(240, 138, 43, .42), rgba(232, 82, 58, .12) 45%, transparent 72%), linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23120e0c'/%3E%3Cg fill='%231f1613'%3E%3Crect x='1' y='1' width='58' height='27' rx='1.5'/%3E%3Crect x='61' y='1' width='58' height='27' rx='1.5'/%3E%3Crect x='-29' y='31' width='58' height='27' rx='1.5'/%3E%3Crect x='31' y='31' width='58' height='27' rx='1.5'/%3E%3Crect x='91' y='31' width='58' height='27' rx='1.5'/%3E%3C/g%3E%3Cg fill='%23241915'%3E%3Crect x='61' y='1' width='58' height='27' rx='1.5'/%3E%3Crect x='-29' y='31' width='58' height='27' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 60px, #120e0c; background-attachment: fixed; } /* embers rising from the firebox, two drifts at different speeds */ :root[data-theme="stovepipe"] body::before, :root[data-theme="stovepipe"] body::after { content: ''; position: fixed; inset: 0 0 -400px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400'%3E%3Cg fill='%23ffb347'%3E%3Ccircle cx='40' cy='380' r='2'/%3E%3Ccircle cx='150' cy='300' r='1.5'/%3E%3Ccircle cx='250' cy='200' r='2.2'/%3E%3Ccircle cx='90' cy='120' r='1.4'/%3E%3C/g%3E%3Cg fill='%23f0612b'%3E%3Ccircle cx='200' cy='350' r='1.8'/%3E%3Ccircle cx='20' cy='220' r='1.5'/%3E%3Ccircle cx='280' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 400px; animation: stovepipe-embers 24s linear infinite; } :root[data-theme="stovepipe"] body::after { background-position: 150px 120px; opacity: .55; animation-duration: 37s; } @keyframes stovepipe-embers { to { transform: translateY(-400px); } } :root[data-theme="stovepipe"] * { text-shadow: none !important; } :root[data-theme="stovepipe"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #f1e6d2; letter-spacing: .03em; } :root[data-theme="stovepipe"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { text-transform: uppercase; } :root[data-theme="stovepipe"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #f1e6d2; } :root[data-theme="stovepipe"] .dh-name h1 { text-shadow: 2px 2px 0 #6b2a12 !important; } :root[data-theme="stovepipe"] ::selection { background: #c2471a; color: #fff6e6; } :root[data-theme="stovepipe"] :focus-visible { outline: 2px solid #f4d68e; outline-offset: 2px; } :root[data-theme="stovepipe"] a { color: #f4c36e; } /* the top bar: an iron plate with a row of brass rivets and a brass trim */ :root[data-theme="stovepipe"] .topbar { background: radial-gradient(circle, #f4d68e 0 1.6px, #a87a28 2.6px 3.4px, #2a1d0c 3.8px, transparent 4.8px) 12px calc(100% - 4px) / 44px 10px repeat-x, var(--iron) 0 0 / 200px 200px, linear-gradient(#2d2823, #171412); border-bottom: 3px solid #d9aa4a; box-shadow: 0 4px 0 #0c0a09, 0 10px 22px rgba(0, 0, 0, .6); padding-bottom: 18px; } :root[data-theme="stovepipe"] .logo-text .l2 { color: #f1e6d2; font-family: var(--font-display); } :root[data-theme="stovepipe"] .logo-text .l2-card { color: #f08a2b; } :root[data-theme="stovepipe"] .header-stats b { color: #f4d68e; } :root[data-theme="stovepipe"] .bell { background: var(--brass); border: 1px solid #5a4018; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #0c0a09; } /* tabs: brass nameplates, screwed on; the open page glows hot */ :root[data-theme="stovepipe"] :is(.tabs > a, .tools-btn) { background: radial-gradient(circle, #5a4018 0 1.5px, transparent 2px) 7px 50% / 6px 6px no-repeat, radial-gradient(circle, #5a4018 0 1.5px, transparent 2px) calc(100% - 7px) 50% / 6px 6px no-repeat, var(--brass); color: #2a1d0c; border: 1px solid #5a4018; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #0c0a09; padding-left: 20px; padding-right: 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } :root[data-theme="stovepipe"] :is(.tabs > a, .tools-btn):hover { color: #2a1d0c; transform: none; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #0c0a09; } :root[data-theme="stovepipe"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(circle, #5a2008 0 1.5px, transparent 2px) 7px 50% / 6px 6px no-repeat, radial-gradient(circle, #5a2008 0 1.5px, transparent 2px) calc(100% - 7px) 50% / 6px 6px no-repeat, var(--ember); color: #1a0c04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 16px rgba(240, 138, 43, .65); } /* panels: riveted iron plates under a brass rail */ :root[data-theme="stovepipe"] :is(.panel, .dialog-card) { background: var(--rivets), linear-gradient(#d9aa4a, #a87a28) top / 100% 4px no-repeat, var(--iron) 0 0 / 200px 200px, var(--panel); border: 2px solid #0c0a09; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 0, 0, .6); } :root[data-theme="stovepipe"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .8em; height: 1em; margin-right: .45em; vertical-align: -.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 1c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-6 1 2 2 2 2 2 0-3 1-5 2-7Z' fill='%23f08a2b'/%3E%3Cpath d='M8 9c.5 2 3 3 3 5.5a3 3 0 0 1-6 0c0-1.5 1-2 1-3 .6 1 1 1 1 1 0-1.5.5-2.5 1-3.5Z' fill='%23ffd27a'/%3E%3C/svg%3E") center / contain no-repeat; } /* buttons: brass plates; the go button is hot iron */ :root[data-theme="stovepipe"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--brass); color: #2a1d0c; border: 1px solid #5a4018; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #0c0a09; filter: none; font-weight: 700; } :root[data-theme="stovepipe"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { color: #2a1d0c; transform: none; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #0c0a09; } :root[data-theme="stovepipe"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); } :root[data-theme="stovepipe"] .btn.go, :root[data-theme="stovepipe"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--ember); color: #1a0c04; } :root[data-theme="stovepipe"] .seg { border: 1px solid #5a4018; box-shadow: 0 2px 0 #0c0a09; background: #1b1815; } :root[data-theme="stovepipe"] .seg-btn { color: #f1e6d2; } :root[data-theme="stovepipe"] .seg-btn + .seg-btn { border-left: 1px solid #5a4018; } :root[data-theme="stovepipe"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #15120f; color: #f1e6d2; border: 2px solid #0c0a09; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 0 1px #a87a28; } :root[data-theme="stovepipe"] :is(.tile, .deck-tile) { border: 2px solid #0c0a09; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .6); } :root[data-theme="stovepipe"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 2px #d9aa4a, 0 0 20px rgba(240, 138, 43, .4); } :root[data-theme="stovepipe"] .bignum { border: 2px solid #0c0a09; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 5px 0 #0c0a09; } :root[data-theme="stovepipe"] .tools-list { background: var(--rivets), var(--iron), #1b1815; border: 2px solid #0c0a09; border-top: 4px solid #d9aa4a; border-radius: 4px; box-shadow: 0 12px 28px rgba(0, 0, 0, .7); } :root[data-theme="stovepipe"] .tools-list :is(a, button) { background: transparent; border: 0; } :root[data-theme="stovepipe"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #322c26; color: #f4d68e; } :root[data-theme="stovepipe"] .toast { background: var(--brass); color: #2a1d0c; border: 1px solid #5a4018; border-radius: 4px; } /* ==== Gamma ======================================================================================= A lab accident in progress. Dark green wall tiles, pools of radioactive glow that pulse slowly, a huge faint trefoil behind everything and hazard tape along the floor; the top bar is a steel lip over hazard tape; tabs are yellow warning labels, the open one glowing green; panels are containment units with a lit inner edge and a strip of hazard tape at the corner; the radiation trefoil before each heading, stencil lettering, and terminal-green text boxes. */ :root[data-theme="gamma"] { --bg: #07110b; --bg-deep: #040a06; --bg-blob: #0c1a11; --panel: #0f1f15; --panel-2: #0b1810; --panel-3: #18301f; --well: #08140c; --text: #e6ffe9; --muted: #a3cdb0; --faint: #5f8a6d; --pink: #ff5f7a; --lime: #7dff3a; --cyan: #3fe3ff; --violet: #b077ff; --orange: #ffa12e; --yellow: #ffe23d; --mint: #5affb5; --peach: #ffb08a; --pink-text: #ff8ea0; --pink-soft: #ffb3c0; --flat: #1f3a28; --tile-uncommon: #0e2226; --tile-rare: #1f2412; --tile-mythic: #271820; --zebra: #0d1b12; --grid: #173021; --grid-2: #23462f; --drop: #11261a; --hatch: #050c07; --tint-pink: #33141d; --tint-magenta: #271733; --tint-green: #123a16; --legend-miss: #2e4a37; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(125, 255, 58, .35); --line-thick: 2px solid #ffe23d; --shadow: 0 0 22px rgba(125, 255, 58, .12), 0 10px 24px rgba(0, 0, 0, .6); --shadow-sm: 0 3px 8px rgba(0, 0, 0, .6); --blob: 2px; --blob-sm: 2px; --pill: 2px; --font-display: Stencil, 'Stencil Std', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-terminal: Consolas, 'Lucida Console', 'Courier New', monospace; --hazard: repeating-linear-gradient(-45deg, #ffe23d 0 10px, #111111 10px 20px); --trefoil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='66' fill='%23ffe23d' stroke='%23000' stroke-width='6'/%3E%3Cg fill='%23000'%3E%3Cpath d='M76.5 58.7L95 26.6A50 50 0 0 1 120 70L83 70A13 13 0 0 0 76.5 58.7ZM76.5 81.3L95 113.4A50 50 0 0 1 45 113.4L63.5 81.3A13 13 0 0 0 76.5 81.3ZM57 70L20 70A50 50 0 0 1 45 26.6L63.5 58.7A13 13 0 0 0 57 70Z'/%3E%3Ccircle cx='70' cy='70' r='8'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-theme="gamma"] body { background: var(--hazard) bottom / 100% 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='%23102519'%3E%3Cpath d='M76.5 58.7L95 26.6A50 50 0 0 1 120 70L83 70A13 13 0 0 0 76.5 58.7ZM76.5 81.3L95 113.4A50 50 0 0 1 45 113.4L63.5 81.3A13 13 0 0 0 76.5 81.3ZM57 70L20 70A50 50 0 0 1 45 26.6L63.5 58.7A13 13 0 0 0 57 70Z'/%3E%3Ccircle cx='70' cy='70' r='8'/%3E%3C/g%3E%3C/svg%3E") center / min(70vmin, 640px) no-repeat, radial-gradient(ellipse 40% 30% at 10% 95%, rgba(125, 255, 58, .16), transparent 70%), radial-gradient(ellipse 35% 28% at 92% 70%, rgba(176, 119, 255, .12), transparent 70%), repeating-linear-gradient(0deg, rgba(125, 255, 58, .05) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(125, 255, 58, .05) 0 1px, transparent 1px 48px), #07110b; background-attachment: fixed; } /* the glow breathes */ :root[data-theme="gamma"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 50% 105%, rgba(125, 255, 58, .3), transparent 70%); animation: gamma-pulse 4s ease-in-out infinite alternate; } @keyframes gamma-pulse { from { opacity: .35; } to { opacity: 1; } } :root[data-theme="gamma"] * { text-shadow: none !important; } :root[data-theme="gamma"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; color: #e6ffe9; letter-spacing: .05em; } :root[data-theme="gamma"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { text-transform: uppercase; } :root[data-theme="gamma"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #e6ffe9; } :root[data-theme="gamma"] .dh-name h1 { text-shadow: 0 0 12px rgba(125, 255, 58, .55) !important; } :root[data-theme="gamma"] ::selection { background: #7dff3a; color: #000; } :root[data-theme="gamma"] :focus-visible { outline: 2px solid #7dff3a; outline-offset: 2px; } :root[data-theme="gamma"] a { color: #9dff6a; } /* the top bar: a steel lip over hazard tape */ :root[data-theme="gamma"] .topbar { background: var(--hazard) bottom / 100% 10px no-repeat, linear-gradient(#1c2a21, #0c140f); border-bottom: 0; padding-bottom: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); } :root[data-theme="gamma"] .logo-text .l2 { color: #e6ffe9; font-family: var(--font-display); letter-spacing: .06em; } :root[data-theme="gamma"] .logo-text .l2-card { color: #7dff3a; text-shadow: 0 0 10px rgba(125, 255, 58, .7) !important; } :root[data-theme="gamma"] .header-stats b { color: #ffe23d; } :root[data-theme="gamma"] .bell { background: #101a13; border: 2px solid #ffe23d; box-shadow: none; } /* tabs: yellow warning labels; the open page glows */ :root[data-theme="gamma"] :is(.tabs > a, .tools-btn) { background: #ffe23d; color: #000; border: 2px solid #000; box-shadow: 0 0 0 2px #ffe23d, 0 4px 0 #000; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; } :root[data-theme="gamma"] :is(.tabs > a, .tools-btn):hover { background: #fff07a; color: #000; transform: none; box-shadow: 0 0 0 2px #fff07a, 0 4px 0 #000; } :root[data-theme="gamma"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: #7dff3a; color: #000; box-shadow: 0 0 0 2px #7dff3a, 0 0 20px rgba(125, 255, 58, .85); } /* panels: containment units, lit inside, tape at the corner */ :root[data-theme="gamma"] :is(.panel, .dialog-card) { background: var(--hazard) 0 0 / 76px 9px no-repeat, var(--panel); border: 1px solid rgba(125, 255, 58, .35); padding-top: 22px; box-shadow: inset 0 0 22px rgba(125, 255, 58, .12), 0 10px 24px rgba(0, 0, 0, .6); } :root[data-theme="gamma"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.12em; background: var(--trefoil) center / contain no-repeat; } /* controls: dark with a warning-yellow rim; they glow under the pointer */ :root[data-theme="gamma"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: #101a13; color: #e6ffe9; border: 2px solid #ffe23d; box-shadow: none; filter: none; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } :root[data-theme="gamma"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { color: #ffffff; border-color: #7dff3a; transform: none; box-shadow: 0 0 14px rgba(125, 255, 58, .6); } :root[data-theme="gamma"] .btn.go, :root[data-theme="gamma"] .btn.go:hover { background: #ffe23d; color: #000; } :root[data-theme="gamma"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: #7dff3a; color: #000; } :root[data-theme="gamma"] .seg { border: 2px solid #ffe23d; box-shadow: none; background: #101a13; } :root[data-theme="gamma"] .seg-btn { color: #e6ffe9; } :root[data-theme="gamma"] .seg-btn + .seg-btn { border-left: 2px solid #ffe23d; } :root[data-theme="gamma"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #020604; color: #7dff3a; border: 1px solid rgba(125, 255, 58, .6); box-shadow: inset 0 0 10px rgba(125, 255, 58, .15); font-family: var(--font-terminal); caret-color: #7dff3a; } :root[data-theme="gamma"] :is(.tile, .deck-tile) { border: 1px solid rgba(125, 255, 58, .3); border-radius: 2px; box-shadow: 0 8px 18px rgba(0, 0, 0, .6); } :root[data-theme="gamma"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 1px #7dff3a, 0 0 22px rgba(125, 255, 58, .45); } :root[data-theme="gamma"] .bignum { border: 2px solid #000; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255, 226, 61, .5), 0 0 18px rgba(125, 255, 58, .15); } :root[data-theme="gamma"] .tools-list { background: #0b1810; border: 2px solid #ffe23d; border-radius: 2px; box-shadow: 0 0 28px rgba(125, 255, 58, .2); } :root[data-theme="gamma"] .tools-list :is(a, button) { background: transparent; border: 0; } :root[data-theme="gamma"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #18301f; color: #e6ffe9; box-shadow: inset 3px 0 0 #7dff3a; } :root[data-theme="gamma"] .toast { background: #ffe23d; color: #000; border: 2px solid #000; border-radius: 2px; } /* ==== Galactus ==================================================================================== A cosmic comic: the Devourer of Worlds' corner of the universe, drawn like 1960s comics. Kirby crackle (black bubbles in cosmic energy) across a deep indigo sky, a world glowing gold as it is consumed, rays of the Power Cosmic turning slowly behind everything; the top bar is helmet-purple metal edged in crackle and gold; tabs, and every heading, are yellow caption boxes; panels are comic panels with heavy black borders, offset shadows and halftone dots; buttons punch out of the page; text boxes are speech balloons; Impact for the lettering. */ :root[data-theme="galactus"] { --bg: #0a0720; --bg-deep: #05040f; --bg-blob: #120d30; --panel: #1a1340; --panel-2: #140f33; --panel-3: #2a1f5c; --well: #0f0b27; --text: #f3efff; --muted: #b9aee0; --faint: #7466a6; --pink: #ff4fb8; --lime: #5ef2c2; --cyan: #4cb8ff; --violet: #a77bff; --orange: #ff8f45; --yellow: #ffd23f; --mint: #7ff0e0; --peach: #ffb08f; --pink-text: #ff86cc; --pink-soft: #ffb0dd; --flat: #2e2560; --tile-uncommon: #16204a; --tile-rare: #2a2040; --tile-mythic: #321a44; --zebra: #171138; --grid: #2a2152; --grid-2: #3a2e70; --drop: #1e1648; --hatch: #07051a; --tint-pink: #3a1440; --tint-magenta: #301a4a; --tint-green: #12303a; --legend-miss: #3c3464; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 3px solid #000; --line-thick: 4px solid #000; --shadow: 6px 6px 0 #000; --shadow-sm: 3px 3px 0 #000; --blob: 4px; --blob-sm: 3px; --pill: 999px; --font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --halftone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23a77bff' fill-opacity='0.16'%3E%3Ccircle cx='3.5' cy='3.5' r='1.35'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.35'/%3E%3Ccircle cx='3.5' cy='10.5' r='1.35'/%3E%3Ccircle cx='10.5' cy='10.5' r='1.35'/%3E%3C/svg%3E") 0 0 / 14px 14px; } :root[data-theme="galactus"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cdefs%3E%3CradialGradient id='e'%3E%3Cstop offset='0' stop-color='%23ff4fb8' stop-opacity='.5'/%3E%3Cstop offset='.6' stop-color='%23a77bff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23a77bff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='70' r='48' fill='url(%23e)'/%3E%3Ccircle cx='200' cy='190' r='42' fill='url(%23e)'/%3E%3Cg fill='%2305040f'%3E%3Ccircle cx='52' cy='62' r='9'/%3E%3Ccircle cx='68' cy='76' r='6'/%3E%3Ccircle cx='60' cy='89' r='4'/%3E%3Ccircle cx='42' cy='80' r='5'/%3E%3Ccircle cx='77' cy='58' r='3'/%3E%3Ccircle cx='38' cy='64' r='2.5'/%3E%3Ccircle cx='196' cy='182' r='8'/%3E%3Ccircle cx='211' cy='198' r='5'/%3E%3Ccircle cx='186' cy='200' r='4'/%3E%3Ccircle cx='215' cy='176' r='3'/%3E%3Ccircle cx='200' cy='208' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffd23f'%3E%3Ccircle cx='150' cy='40' r='1.5'/%3E%3Ccircle cx='120' cy='150' r='1.2'/%3E%3Ccircle cx='240' cy='90' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px, radial-gradient(circle at 84% 86%, #fff2b8 0 1.4%, #ffd23f 3.5%, #ff8f45 6%, rgba(255, 79, 184, .35) 11%, rgba(167, 123, 255, .18) 18%, transparent 28%), radial-gradient(ellipse 70% 60% at 25% 15%, #2a1060, transparent 70%), #0a0720; background-attachment: fixed; } /* the Power Cosmic, turning slowly */ :root[data-theme="galactus"] body::before { content: ''; position: fixed; inset: -50%; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(167, 123, 255, .07) 0deg 4deg, transparent 4deg 14deg); animation: galactus-rays 180s linear infinite; } @keyframes galactus-rays { to { transform: rotate(360deg); } } :root[data-theme="galactus"] * { text-shadow: none !important; } :root[data-theme="galactus"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; color: #f3efff; } :root[data-theme="galactus"] .dh-name h1 { text-shadow: 3px 3px 0 #000, 0 0 16px rgba(167, 123, 255, .6) !important; } /* every heading is a caption box */ :root[data-theme="galactus"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title, .dash-grid .panel h2, .br-why, .dialog-card h2) { display: inline-block; width: fit-content; background: #ffd23f; color: #000 !important; padding: 2px 10px 1px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; text-transform: uppercase; letter-spacing: .05em; } :root[data-theme="galactus"] ::selection { background: #ffd23f; color: #000; } :root[data-theme="galactus"] :focus-visible { outline: 3px solid #ff4fb8; outline-offset: 2px; } :root[data-theme="galactus"] a { color: #ffd23f; } /* the top bar: helmet-purple metal, edged in crackle and gold */ :root[data-theme="galactus"] .topbar { background: radial-gradient(circle, #05040f 0 4px, transparent 4.5px) 0 calc(100% - 2px) / 22px 12px repeat-x, radial-gradient(circle, #05040f 0 2.5px, transparent 3px) 11px calc(100% - 12px) / 22px 10px repeat-x, linear-gradient(#6a3ad0, #2a1666 62%, #1a1340); border-bottom: 4px solid #000; box-shadow: 0 4px 0 #ffd23f; padding-bottom: 24px; } :root[data-theme="galactus"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); letter-spacing: .04em; font-size: 1.6rem; } :root[data-theme="galactus"] .logo-text .l2-card { color: #ffd23f; } :root[data-theme="galactus"] .header-stats { color: #e2d9ff; } :root[data-theme="galactus"] .header-stats b { color: #ffd23f; } :root[data-theme="galactus"] .bell { background: #ffd23f; border: 3px solid #000; box-shadow: 3px 3px 0 #000; } /* tabs are caption boxes; the open page crackles with the Power Cosmic */ :root[data-theme="galactus"] :is(.tabs > a, .tools-btn) { background: #ffd23f; color: #000; border: 3px solid #000; border-radius: 0; box-shadow: 4px 4px 0 #000; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; } :root[data-theme="galactus"] :is(.tabs > a, .tools-btn):hover { background: #ffe175; color: #000; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; } :root[data-theme="galactus"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(circle at 30% 40%, #ffffff, #ffe8a0 45%, #ffd23f); color: #000; box-shadow: 4px 4px 0 #ff4fb8, 0 0 22px rgba(255, 210, 63, .85); } /* panels: comic panels, inked heavy, with halftone dots */ :root[data-theme="galactus"] :is(.panel, .dialog-card) { background: var(--halftone), var(--panel); border: 3px solid #000; box-shadow: 6px 6px 0 #000; } /* buttons punch out of the page */ :root[data-theme="galactus"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { border: 3px solid #000; box-shadow: 4px 4px 0 #000; filter: none; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; } :root[data-theme="galactus"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; filter: none; } :root[data-theme="galactus"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile, .tabs > a):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; } :root[data-theme="galactus"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: #ffd23f; color: #000; } :root[data-theme="galactus"] .seg { border: 3px solid #000; box-shadow: 3px 3px 0 #000; } :root[data-theme="galactus"] .seg-btn + .seg-btn { border-left: 3px solid #000; } /* speech balloons */ :root[data-theme="galactus"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #000; border: 3px solid #000; border-radius: 18px; box-shadow: 3px 3px 0 #000; } :root[data-theme="galactus"] :is(.tile, .deck-tile) { border: 3px solid #000; border-radius: 4px; box-shadow: 5px 5px 0 #000; } :root[data-theme="galactus"] :is(.tile, .deck-tile):hover { box-shadow: 7px 7px 0 #ffd23f; } :root[data-theme="galactus"] .bignum { border: 3px solid #000; border-radius: 3px; box-shadow: 5px 5px 0 #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23000000' fill-opacity='0.12'%3E%3Ccircle cx='3.5' cy='3.5' r='1.35'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.35'/%3E%3Ccircle cx='3.5' cy='10.5' r='1.35'/%3E%3Ccircle cx='10.5' cy='10.5' r='1.35'/%3E%3C/svg%3E"); background-size: 14px 14px; } :root[data-theme="galactus"] .tools-list { background: var(--halftone), #1a1340; border: 3px solid #000; border-radius: 4px; box-shadow: 6px 6px 0 #ffd23f; } :root[data-theme="galactus"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 0; } :root[data-theme="galactus"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #ffd23f; color: #000; } :root[data-theme="galactus"] .tools-list :is(a, button):is(:hover, :focus-visible) span { color: #2a1a00; } :root[data-theme="galactus"] .toast { background: #ffd23f; color: #000; border: 3px solid #000; border-radius: 0; box-shadow: 4px 4px 0 #000; font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; } /* ==== Unicorn ===================================================================================== A pastel sky: soft clouds, a rainbow arching up from the corner and sparkles twinkling across the page; an iridescent top bar; tabs that are puffy pills ringed in rainbow, the open one filled with it; panels ringed in rainbow with a sparkle in the corner; a gradient sparkle before each heading, glossy buttons, rainbow-underlined text boxes and rounded type. Light: the accents keep Light's contrast. */ :root[data-theme="unicorn"] { --bg: #f4ecff; --bg-deep: #ead9ff; --bg-blob: #fbe8f6; --panel: #fffcff; --panel-2: #f8f0ff; --panel-3: #ecdcff; --well: #fffaff; --text: #2e1446; --muted: #6b4f8c; --faint: #9b86b6; --pink: #e2449c; --lime: #469c38; --cyan: #1c8fc4; --violet: #9d62e6; --orange: #e5702e; --yellow: #b08400; --mint: #16a086; --peach: #e57a66; --pink-text: #c01f78; --pink-soft: #a8186a; --flat: #e6d8f5; --tile-uncommon: #e8f2ff; --tile-rare: #fff4dc; --tile-mythic: #ffe6f0; --zebra: #faf3ff; --grid: #eadcff; --grid-2: #d8c4f5; --drop: #f1e4ff; --hatch: #e0cff5; --tint-pink: #ffd6ec; --tint-magenta: #f1d8fb; --tint-green: #ddf4d6; --legend-miss: #d9cce8; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --mana-W: #f3e27a; --mana-C: #c9bfd9; --mana-N: #d3c9e3; --r-common: #cdc2e2; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --line: 2px solid #e2d2f5; --line-thick: 3px solid #d8c4f5; --shadow: 0 8px 24px rgba(157, 98, 230, .18); --shadow-sm: 0 3px 10px rgba(157, 98, 230, .16); --blob: 24px; --blob-sm: 16px; --pill: 999px; --font-display: 'Arial Rounded MT Bold', 'Varela Round', Nunito, 'Trebuchet MS', sans-serif; --font-body: 'Trebuchet MS', 'Segoe UI', sans-serif; --rainbow: linear-gradient(90deg, #ff9ecf, #ffc59e, #fff09e, #b8f0b0, #9ed8ff, #c9a8ff); --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7fbf'/%3E%3Cstop offset='.5' stop-color='%23b38aff'/%3E%3Cstop offset='1' stop-color='%236ec6ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 0l2.6 7.4L20 10l-7.4 2.6L10 20l-2.6-7.4L0 10l7.4-2.6Z' fill='url(%23r)'/%3E%3C/svg%3E"); --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cg fill='%23ffffff' fill-opacity='.85'%3E%3Ccircle cx='50' cy='60' r='28'/%3E%3Ccircle cx='88' cy='42' r='36'/%3E%3Ccircle cx='130' cy='55' r='30'/%3E%3Ccircle cx='160' cy='66' r='22'/%3E%3Crect x='40' y='60' width='130' height='28' rx='14'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-theme="unicorn"] body { background: var(--cloud) 6% 14% / 260px auto no-repeat, var(--cloud) 90% 26% / 200px auto no-repeat, var(--cloud) 58% 6% / 150px auto no-repeat, radial-gradient(circle at 0% 100%, transparent 0 30vmin, #ffc2e0 30vmin 33vmin, #ffd9b8 33vmin 36vmin, #fff4b8 36vmin 39vmin, #d2f3cc 39vmin 42vmin, #c2e6ff 42vmin 45vmin, #e0cbff 45vmin 48vmin, transparent 48vmin), linear-gradient(#efe4ff, #fde8f4 50%, #fff2e6); background-attachment: fixed; } /* sparkles, twinkling in two offset sets */ :root[data-theme="unicorn"] body::before, :root[data-theme="unicorn"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg%3E%3Cpath d='M60 40l3 9 9 3-9 3-3 9-3-9-9-3 9-3Z' fill='%23ffb3dc'/%3E%3Cpath d='M250 90l2 6 6 2-6 2-2 6-2-6-6-2 6-2Z' fill='%23c6a8ff'/%3E%3Cpath d='M170 250l3 8 8 3-8 3-3 8-3-8-8-3 8-3Z' fill='%23a8dcff'/%3E%3Cpath d='M320 300l2 5 5 2-5 2-2 5-2-5-5-2 5-2Z' fill='%23ffd59e'/%3E%3Cpath d='M30 300l2 6 6 2-6 2-2 6-2-6-6-2 6-2Z' fill='%23b8f0b0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 360px; animation: unicorn-twinkle 4.5s ease-in-out infinite alternate; } :root[data-theme="unicorn"] body::after { background-position: 180px 170px; animation-delay: -2.25s; } @keyframes unicorn-twinkle { from { opacity: .25; } to { opacity: 1; } } :root[data-theme="unicorn"] * { text-shadow: none !important; } :root[data-theme="unicorn"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #7a3fb8; letter-spacing: 0; } :root[data-theme="unicorn"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #7a3fb8; } :root[data-theme="unicorn"] .dh-name h1 { color: #2e1446; text-shadow: 3px 3px 0 #ffc2e0 !important; } :root[data-theme="unicorn"] ::selection { background: #c9a8ff; color: #2e1446; } :root[data-theme="unicorn"] :focus-visible { outline: 3px solid #b38aff; outline-offset: 2px; } :root[data-theme="unicorn"] a { color: #8a3cc8; } /* the top bar: iridescent, with a rainbow along its foot */ :root[data-theme="unicorn"] .topbar { background: var(--rainbow) bottom / 100% 4px no-repeat, linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%), linear-gradient(90deg, #ffd6ec, #e8dcff, #d6efff, #dcf7e6, #fff4cc, #ffd6ec); border-bottom: 0; box-shadow: 0 6px 22px rgba(157, 98, 230, .18); } :root[data-theme="unicorn"] .logo-text .l2 { color: #2e1446; font-family: var(--font-display); } :root[data-theme="unicorn"] .logo-text .l2-card { color: #c01f78; } :root[data-theme="unicorn"] .header-stats { color: #6b4f8c; } :root[data-theme="unicorn"] .header-stats b { color: #2e1446; } :root[data-theme="unicorn"] .bell { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--rainbow) border-box; border: 2px solid transparent; box-shadow: var(--shadow-sm); } /* tabs: puffy pills ringed in rainbow; the open page is filled with it */ :root[data-theme="unicorn"] :is(.tabs > a, .tools-btn) { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--rainbow) border-box; color: #2e1446; border: 2px solid transparent; border-radius: 999px; box-shadow: 0 3px 10px rgba(157, 98, 230, .18); font-family: var(--font-display); } :root[data-theme="unicorn"] :is(.tabs > a, .tools-btn):hover { color: #2e1446; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(226, 68, 156, .25); } :root[data-theme="unicorn"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(90deg, #ffd6ec, #e2d6ff, #d6efff) padding-box, var(--rainbow) border-box; color: #2e1446; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 4px 16px rgba(226, 68, 156, .3); } /* panels: ringed in rainbow, with a sparkle in the corner */ :root[data-theme="unicorn"] :is(.panel, .dialog-card) { background: var(--sparkle) top 12px right 14px / 20px 20px no-repeat padding-box, linear-gradient(var(--panel), var(--panel)) padding-box, var(--rainbow) border-box; border: 2px solid transparent; border-radius: 24px; box-shadow: var(--shadow); } :root[data-theme="unicorn"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.1em; background: var(--sparkle) center / contain no-repeat; } /* buttons keep their colors, glossed and softened */ :root[data-theme="unicorn"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%); border: 2px solid rgba(46, 20, 70, .18); border-radius: 999px; box-shadow: 0 4px 12px rgba(157, 98, 230, .22); filter: none; } :root[data-theme="unicorn"] .shape-tile { border-radius: 16px; } :root[data-theme="unicorn"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(226, 68, 156, .3); filter: none; } :root[data-theme="unicorn"] .seg { border: 2px solid #e2d2f5; box-shadow: var(--shadow-sm); } :root[data-theme="unicorn"] .seg-btn + .seg-btn { border-left: 2px solid #e2d2f5; } /* text boxes: a rainbow underline */ :root[data-theme="unicorn"] :is(.text-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--rainbow) border-box; color: #2e1446; border: 0; border-bottom: 3px solid transparent; border-radius: 12px 12px 4px 4px; box-shadow: 0 2px 8px rgba(157, 98, 230, .12); } :root[data-theme="unicorn"] .select { background-color: #ffffff; color: #2e1446; border: 2px solid #e2d2f5; border-radius: 999px; box-shadow: none; } :root[data-theme="unicorn"] :is(.tile, .deck-tile) { border: 2px solid #ece0fa; border-radius: 18px; box-shadow: 0 6px 18px rgba(157, 98, 230, .16); } :root[data-theme="unicorn"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 3px rgba(255, 158, 207, .55), 0 10px 24px rgba(226, 68, 156, .25); } :root[data-theme="unicorn"] .bignum { border: 2px solid rgba(255, 255, 255, .8); border-radius: 20px; box-shadow: 0 6px 18px rgba(157, 98, 230, .2); background-image: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%); } :root[data-theme="unicorn"] .tools-list { background: linear-gradient(#fffcff, #fffcff) padding-box, var(--rainbow) border-box; border: 2px solid transparent; border-radius: 20px; box-shadow: 0 12px 30px rgba(157, 98, 230, .25); } :root[data-theme="unicorn"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 12px; } :root[data-theme="unicorn"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #f1e4ff; color: #2e1446; } :root[data-theme="unicorn"] .toast { background: linear-gradient(90deg, #ffd6ec, #e2d6ff, #d6efff); color: #2e1446; border: 2px solid #ffffff; border-radius: 999px; box-shadow: var(--shadow); } /* ==== Lemonhead =================================================================================== The retro candy box. Lemon yellow sanded with sugar and printed with halftone dots, big lemon slices in the corners and a sunburst turning slowly overhead; the top bar is the box's red with a scalloped edge; tabs are round lemon candies, the open one cherry red; panels are candy boxes with thick red rims and a polka-dot band across the top; a lemon slice before each heading, red candy buttons, and Cooper Black for the lettering where the computer has it. Light: the accents keep Light's contrast. */ :root[data-theme="lemonhead"] { --bg: #fff5b3; --bg-deep: #c0201c; --bg-blob: #fffbd6; --panel: #fffdeb; --panel-2: #fff8cc; --panel-3: #ffef99; --well: #fffef5; --text: #3a2600; --muted: #6e5418; --faint: #a08a4e; --pink: #e0312c; --lime: #4f9a00; --cyan: #1780c2; --violet: #8f55dc; --orange: #e0650c; --yellow: #a88000; --mint: #0e9a72; --peach: #e0745a; --pink-text: #b81e1a; --pink-soft: #a01814; --flat: #f5e6a0; --tile-uncommon: #eef6ff; --tile-rare: #fff0c2; --tile-mythic: #ffe2cc; --zebra: #fffae0; --grid: #f5e7a6; --grid-2: #e8d47a; --drop: #fff3b8; --hatch: #f0df8f; --tint-pink: #ffd9d0; --tint-magenta: #f5dcef; --tint-green: #e2f5c8; --legend-miss: #e6d9a6; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --mana-W: #f3e27a; --mana-C: #c9bfd9; --mana-N: #d3c9e3; --r-common: #cdc2e2; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --line: 3px solid #b81e1a; --line-thick: 4px solid #b81e1a; --shadow: 0 6px 0 #b81e1a; --shadow-sm: 0 3px 0 #b81e1a; --blob: 22px; --blob-sm: 14px; --pill: 999px; --font-display: 'Cooper Black', 'Cooper Std', 'Bookman Old Style', Georgia, serif; --font-body: 'Trebuchet MS', 'Segoe UI', sans-serif; --box-red: #c0201c; --lemon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23f2cd2a'/%3E%3Ccircle cx='50' cy='50' r='42' fill='%23fff7c2'/%3E%3Ccircle cx='50' cy='50' r='38' fill='%23ffe866'/%3E%3Cg stroke='%23fff7c2' stroke-width='3'%3E%3Cpath d='M50 12V88M12 50H88M23 23L77 77M77 23L23 77'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23fff7c2'/%3E%3C/svg%3E"); --candy-gloss: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%); } :root[data-theme="lemonhead"] body { background: var(--lemon) right -70px top 90px / 280px 280px no-repeat, var(--lemon) left -90px bottom -60px / 320px 320px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='10' cy='14' r='1.3'/%3E%3Ccircle cx='62' cy='30' r='1'/%3E%3Ccircle cx='100' cy='8' r='1.2'/%3E%3Ccircle cx='34' cy='70' r='1.1'/%3E%3Ccircle cx='88' cy='92' r='1.3'/%3E%3Ccircle cx='14' cy='104' r='.9'/%3E%3Ccircle cx='70' cy='58' r='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='%23e0312c' fill-opacity='0.07'%3E%3Ccircle cx='7' cy='7' r='1.85'/%3E%3Ccircle cx='21' cy='7' r='1.85'/%3E%3Ccircle cx='7' cy='21' r='1.85'/%3E%3Ccircle cx='21' cy='21' r='1.85'/%3E%3C/svg%3E") 0 0 / 28px 28px, #fff5b3; background-attachment: fixed; } /* a sunburst turning slowly overhead */ :root[data-theme="lemonhead"] body::before { content: ''; position: fixed; left: 50%; top: -60vmax; width: 120vmax; height: 120vmax; margin-left: -60vmax; z-index: -1; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .32) 0deg 7deg, transparent 7deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: lemonhead-sunburst 240s linear infinite; } @keyframes lemonhead-sunburst { to { transform: rotate(360deg); } } :root[data-theme="lemonhead"] * { text-shadow: none !important; } :root[data-theme="lemonhead"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; color: #b81e1a; letter-spacing: .01em; } :root[data-theme="lemonhead"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #b81e1a; } :root[data-theme="lemonhead"] .dh-name h1 { color: #3a2600; text-shadow: 3px 3px 0 #ffe766 !important; } :root[data-theme="lemonhead"] ::selection { background: #c0201c; color: #ffe766; } :root[data-theme="lemonhead"] :focus-visible { outline: 3px solid #1780c2; outline-offset: 2px; } :root[data-theme="lemonhead"] a { color: #a01814; } /* the top bar: the box's red, with a scalloped edge */ :root[data-theme="lemonhead"] .topbar { background: radial-gradient(circle at 10px 0, var(--box-red) 9.5px, #fff5b3 10px) bottom / 20px 10px repeat-x, radial-gradient(circle, #e8433c 0 3px, transparent 3.5px) 0 0 / 16px 16px, linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%), var(--box-red); border-bottom: 0; box-shadow: none; padding-bottom: 20px; } :root[data-theme="lemonhead"] .logo-text .l2 { color: #ffe766; font-family: var(--font-display); } :root[data-theme="lemonhead"] .logo-text .l2-card { color: #ffffff; } :root[data-theme="lemonhead"] .header-stats { color: #ffe9b0; } :root[data-theme="lemonhead"] .header-stats b { color: #ffffff; } :root[data-theme="lemonhead"] .bell { background: var(--candy-gloss), #ffe766; border: 2px solid #8a1210; box-shadow: 0 3px 0 #8a1210; } /* tabs: round lemon candies; the open page is a cherry one */ :root[data-theme="lemonhead"] :is(.tabs > a, .tools-btn) { background: var(--candy-gloss), linear-gradient(#fff3a0, #ffe766 55%, #f5cf2a); color: #8a1210; border: 2px solid #8a1210; border-radius: 999px; box-shadow: 0 3px 0 #8a1210; font-family: var(--font-display); } :root[data-theme="lemonhead"] :is(.tabs > a, .tools-btn):hover { color: #8a1210; transform: translateY(-2px); box-shadow: 0 5px 0 #8a1210; } :root[data-theme="lemonhead"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--candy-gloss), linear-gradient(#ff6a5e, #c0201c 60%, #8a1210); color: #ffe766; } /* panels: candy boxes with a polka-dot band across the top */ :root[data-theme="lemonhead"] :is(.panel, .dialog-card) { background: radial-gradient(circle, #ffe766 0 2.6px, transparent 3.1px) 0 0 / 14px 14px repeat-x, linear-gradient(var(--box-red), var(--box-red)) top / 100% 14px no-repeat, var(--panel); border: 3px solid var(--box-red); border-radius: 22px; box-shadow: 0 6px 0 #8a1210; padding-top: 30px; } :root[data-theme="lemonhead"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.12em; background: var(--lemon) center / contain no-repeat; } /* buttons: red candy; the go button is sour green */ :root[data-theme="lemonhead"] :is(.btn, .icon-btn, .page-chip, .mini-chip) { background: var(--candy-gloss), var(--box-red); color: #ffffff; border: 2px solid #8a1210; border-radius: 999px; box-shadow: 0 3px 0 #8a1210; filter: none; font-family: var(--font-display); font-weight: 400; } :root[data-theme="lemonhead"] :is(.btn, .icon-btn, .page-chip, .mini-chip):hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 5px 0 #8a1210; filter: none; } :root[data-theme="lemonhead"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .tabs > a):active { transform: translateY(2px); box-shadow: 0 1px 0 #8a1210; } :root[data-theme="lemonhead"] .btn.go, :root[data-theme="lemonhead"] .btn.go:hover { background: var(--candy-gloss), #3f7f00; border-color: #2a5800; box-shadow: 0 3px 0 #2a5800; } :root[data-theme="lemonhead"] .btn.ghost { background: var(--candy-gloss), #fffdeb; color: #a01814; } :root[data-theme="lemonhead"] .shape-tile { border: 3px solid var(--box-red); border-radius: 16px; box-shadow: 0 3px 0 #8a1210; } :root[data-theme="lemonhead"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--candy-gloss), #ffe766; color: #8a1210; } :root[data-theme="lemonhead"] .seg { border: 2px solid #8a1210; box-shadow: 0 3px 0 #8a1210; background: #fffdeb; } :root[data-theme="lemonhead"] .seg-btn { color: #8a1210; } :root[data-theme="lemonhead"] .seg-btn + .seg-btn { border-left: 2px solid #8a1210; } :root[data-theme="lemonhead"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #3a2600; border: 2px solid var(--box-red); border-radius: 999px; box-shadow: none; } :root[data-theme="lemonhead"] textarea { border-radius: 16px; } :root[data-theme="lemonhead"] :is(.tile, .deck-tile) { border: 3px solid var(--box-red); border-radius: 18px; box-shadow: 0 5px 0 #8a1210; } :root[data-theme="lemonhead"] :is(.tile, .deck-tile):hover { box-shadow: 0 8px 0 #3f7f00; } :root[data-theme="lemonhead"] .bignum { border: 3px solid #8a1210; border-radius: 18px; box-shadow: 0 4px 0 #8a1210; background-image: var(--candy-gloss); } :root[data-theme="lemonhead"] .tools-list { background: radial-gradient(circle, #ffe766 0 2.6px, transparent 3.1px) 0 0 / 14px 14px repeat-x, linear-gradient(var(--box-red), var(--box-red)) top / 100% 14px no-repeat, #fffdeb; border: 3px solid var(--box-red); border-radius: 20px; padding-top: 22px; box-shadow: 0 6px 0 #8a1210; } :root[data-theme="lemonhead"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 12px; } :root[data-theme="lemonhead"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #ffef99; color: #3a2600; } :root[data-theme="lemonhead"] .toast { background: var(--candy-gloss), var(--box-red); color: #ffe766; border: 2px solid #8a1210; border-radius: 999px; box-shadow: 0 3px 0 #8a1210; font-family: var(--font-display); font-weight: 400; } /* ==== Olympic ===================================================================================== Race day in the stadium, in the five Olympic colors (blue, yellow, black, green, red; the rings themselves are a protected emblem, so they stay out). A bright sky over the curve of a red running track with its white lane lines; a white top bar with the five colors as a ribbon along its foot; tabs that are race bibs, safety-pinned, the open one a gold medal; white cards edged in the five colors in turn; a medal before each heading; slanted, sprinting buttons and condensed sports type. Light: the accents keep Light's contrast. */ :root[data-theme="olympic"] { --bg: #eef4fb; --bg-deep: #ffffff; --bg-blob: #f8fafd; --panel: #ffffff; --panel-2: #f4f7fc; --panel-3: #e3ebf7; --well: #fbfcfe; --text: #0b1b33; --muted: #44536e; --faint: #7f8aa0; --pink: #e8173a; --lime: #009f3d; --cyan: #0085c7; --violet: #8a62e6; --orange: #e0660c; --yellow: #a88400; --mint: #00968a; --peach: #e07a5a; --pink-text: #c40e2c; --pink-soft: #a80c26; --flat: #dfe6f2; --tile-uncommon: #e8f3fc; --tile-rare: #fdf6dc; --tile-mythic: #fde8e6; --zebra: #f6f9fd; --grid: #e2e9f4; --grid-2: #c9d5e8; --drop: #eaf0f9; --hatch: #d6dfed; --tint-pink: #fcdde2; --tint-magenta: #ece0f6; --tint-green: #d8f2e0; --legend-miss: #d3dbe8; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --mana-W: #f3e27a; --mana-C: #c9bfd9; --mana-N: #d3c9e3; --r-common: #cdc2e2; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --line: 1px solid #c9d5e8; --line-thick: 2px solid #b4c4dc; --shadow: 0 10px 26px rgba(11, 27, 51, .1); --shadow-sm: 0 3px 8px rgba(11, 27, 51, .12); --blob: 10px; --blob-sm: 6px; --pill: 999px; --font-display: Bahnschrift, 'DIN Alternate', 'Segoe UI Semibold', 'Arial Narrow', sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --ring-blue: #0085c7; --ring-yellow: #f4c300; --ring-black: #0b1b33; --ring-green: #009f3d; --ring-red: #e8173a; --ribbon: linear-gradient(90deg, var(--ring-blue) 0 20%, var(--ring-yellow) 20% 40%, var(--ring-black) 40% 60%, var(--ring-green) 60% 80%, var(--ring-red) 80%); --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M5 0h4l3 9H8Z' fill='%230085c7'/%3E%3Cpath d='M15 0h-4l-3 9h4Z' fill='%23e8173a'/%3E%3Ccircle cx='10' cy='17' r='8' fill='%23e0b21a' stroke='%23b8860b' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='17' r='4.5' fill='none' stroke='%23fff3c4' stroke-width='1.2'/%3E%3C/svg%3E"); --gold: linear-gradient(#ffe27a, #e0b21a 60%, #b8860b); } :root[data-theme="olympic"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240V96Q600 -14 1200 96V240Z' fill='%23d9765f'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-opacity='.9'%3E%3Cpath d='M0 124Q600 14 1200 124'/%3E%3Cpath d='M0 152Q600 42 1200 152'/%3E%3Cpath d='M0 180Q600 70 1200 180'/%3E%3Cpath d='M0 208Q600 98 1200 208'/%3E%3C/g%3E%3Cpath d='M0 240V226Q600 132 1200 226V240Z' fill='%236fbf87'/%3E%3C/svg%3E") bottom / 100% 26vh no-repeat, radial-gradient(ellipse 50% 40% at 85% 0%, #ffffff, transparent 70%), linear-gradient(#dcebf8, #f2f7fc 55%, #ffffff); background-attachment: fixed; } :root[data-theme="olympic"] * { text-shadow: none !important; } :root[data-theme="olympic"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #0b1b33; letter-spacing: .02em; } :root[data-theme="olympic"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { text-transform: uppercase; letter-spacing: .05em; } :root[data-theme="olympic"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #0b1b33; } :root[data-theme="olympic"] .dh-name h1 { text-shadow: 3px 3px 0 #b8dbf2 !important; } :root[data-theme="olympic"] ::selection { background: var(--ring-blue); color: #ffffff; } :root[data-theme="olympic"] :focus-visible { outline: 3px solid var(--ring-blue); outline-offset: 2px; } :root[data-theme="olympic"] a { color: #006aa0; } /* the top bar: white, with the five colors as a ribbon along its foot */ :root[data-theme="olympic"] .topbar { background: var(--ribbon) bottom / 100% 6px no-repeat, #ffffff; border-bottom: 0; box-shadow: 0 4px 18px rgba(11, 27, 51, .08); padding-bottom: 16px; } :root[data-theme="olympic"] .logo-text .l2 { color: #0b1b33; font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; } :root[data-theme="olympic"] .logo-text .l2-card { color: var(--ring-blue); } :root[data-theme="olympic"] .header-stats { color: #44536e; } :root[data-theme="olympic"] .header-stats b { color: #0b1b33; } :root[data-theme="olympic"] .bell { background: #ffffff; border: 1px solid #c9d5e8; box-shadow: var(--shadow-sm); } /* tabs: race bibs, safety-pinned, a band of color across the top; the open page wins gold */ :root[data-theme="olympic"] :is(.tabs > a, .tools-btn) { --bib: var(--ring-blue); background: radial-gradient(circle, #8a96aa 0 1.4px, transparent 1.9px) 5px 9px / 5px 5px no-repeat, radial-gradient(circle, #8a96aa 0 1.4px, transparent 1.9px) calc(100% - 5px) 9px / 5px 5px no-repeat, linear-gradient(var(--bib), var(--bib)) top / 100% 5px no-repeat, #ffffff; color: #0b1b33; border: 1px solid #c9d5e8; border-radius: 4px; box-shadow: 0 2px 6px rgba(11, 27, 51, .12); padding-top: 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } :root[data-theme="olympic"] .tabs > a:nth-child(5n+2) { --bib: var(--ring-yellow); } :root[data-theme="olympic"] .tabs > a:nth-child(5n+3) { --bib: var(--ring-black); } :root[data-theme="olympic"] .tabs > a:nth-child(5n+4) { --bib: var(--ring-green); } :root[data-theme="olympic"] .tabs > a:nth-child(5n) { --bib: var(--ring-red); } :root[data-theme="olympic"] :is(.tabs > a, .tools-btn):hover { color: #0b1b33; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11, 27, 51, .16); } :root[data-theme="olympic"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(circle, #7a5a08 0 1.4px, transparent 1.9px) 5px 9px / 5px 5px no-repeat, radial-gradient(circle, #7a5a08 0 1.4px, transparent 1.9px) calc(100% - 5px) 9px / 5px 5px no-repeat, var(--gold); color: #2a1d00; border-color: #b8860b; } /* cards edged in the five colors in turn */ :root[data-theme="olympic"] :is(.panel, .dialog-card) { background: var(--panel); border: 1px solid #dfe6f2; border-left: 5px solid var(--ring-blue); box-shadow: var(--shadow); } :root[data-theme="olympic"] .panel:nth-child(5n+2) { border-left-color: var(--ring-yellow); } :root[data-theme="olympic"] .panel:nth-child(5n+3) { border-left-color: var(--ring-black); } :root[data-theme="olympic"] .panel:nth-child(5n+4) { border-left-color: var(--ring-green); } :root[data-theme="olympic"] .panel:nth-child(5n) { border-left-color: var(--ring-red); } :root[data-theme="olympic"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .85em; height: 1.1em; margin-right: .45em; vertical-align: -.2em; background: var(--medal) center / contain no-repeat; } /* buttons sprint: slanted, flat and bold */ :root[data-theme="olympic"] :is(.btn, .page-chip) { clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); border: 0; border-radius: 0; box-shadow: none; padding-left: 20px; padding-right: 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; filter: none; } :root[data-theme="olympic"] :is(.btn, .page-chip):hover { transform: translateX(2px); box-shadow: none; filter: brightness(1.08); } :root[data-theme="olympic"] :is(.btn, .page-chip):focus-visible { outline-offset: -4px; outline-color: #0b1b33; } :root[data-theme="olympic"] :is(.icon-btn, .mini-chip, .shape-tile) { border: 1px solid #c9d5e8; box-shadow: var(--shadow-sm); filter: none; } :root[data-theme="olympic"] :is(.icon-btn, .mini-chip, .shape-tile):hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(11, 27, 51, .16); } :root[data-theme="olympic"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--gold); color: #2a1d00; } :root[data-theme="olympic"] .seg { border: 1px solid #c9d5e8; box-shadow: var(--shadow-sm); background: #ffffff; } :root[data-theme="olympic"] .seg-btn + .seg-btn { border-left: 1px solid #c9d5e8; } :root[data-theme="olympic"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #0b1b33; border: 1px solid #c9d5e8; border-bottom: 2px solid var(--ring-blue); border-radius: 4px; box-shadow: none; } :root[data-theme="olympic"] :is(.tile, .deck-tile) { border: 1px solid #dfe6f2; border-radius: 8px; box-shadow: 0 6px 16px rgba(11, 27, 51, .1); } :root[data-theme="olympic"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 2px var(--ring-blue), 0 10px 24px rgba(11, 27, 51, .14); } :root[data-theme="olympic"] .bignum { border: 0; border-radius: 8px; box-shadow: 0 6px 16px rgba(11, 27, 51, .14); } :root[data-theme="olympic"] .tools-list { background: var(--ribbon) top / 100% 5px no-repeat, #ffffff; border: 1px solid #c9d5e8; border-radius: 8px; padding-top: 13px; box-shadow: 0 14px 34px rgba(11, 27, 51, .16); } :root[data-theme="olympic"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 6px; } :root[data-theme="olympic"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #eaf0f9; color: #0b1b33; } :root[data-theme="olympic"] .toast { background: #0b1b33; color: #ffffff; border: 0; border-radius: 6px; box-shadow: var(--shadow); } /* ==== SPQR ======================================================================================== Imperial Rome. A veined marble floor with Ionic columns standing at either side of the page; the top bar is a band of Tyrian purple under a gold Greek-key frieze; tabs are carved stone tablets, the open one purple and gold; panels are marble slabs with a double gold rule and a key pattern along the top; a laurel sprig before each heading; spaced Roman capitals for the lettering, and book type for the rest. Light: the accents keep Light's contrast. */ :root[data-theme="spqr"] { --bg: #f1ebe0; --bg-deep: #4a1240; --bg-blob: #f7f2e9; --panel: #fcf9f3; --panel-2: #f5efe4; --panel-3: #e9dfcd; --well: #fdfbf7; --text: #2a1020; --muted: #5e4652; --faint: #8f7c82; --pink: #e03a50; --lime: #5f8f2a; --cyan: #2f86b3; --violet: #a855c0; --orange: #d2692e; --yellow: #a88418; --mint: #2f9a7a; --peach: #d98a6a; --pink-text: #b41e36; --pink-soft: #9c1a2e; --flat: #e6dccb; --tile-uncommon: #e9f1f5; --tile-rare: #f7eed5; --tile-mythic: #f5e2dc; --zebra: #f8f3ea; --grid: #e6dccb; --grid-2: #d6c7ad; --drop: #efe6d6; --hatch: #dccfb8; --tint-pink: #f6d9dc; --tint-magenta: #eedbf2; --tint-green: #e2edd2; --legend-miss: #dcd1c2; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --mana-W: #f3e27a; --mana-C: #c9bfd9; --mana-N: #d3c9e3; --r-common: #cdc2e2; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --line: 1px solid #c9b48a; --line-thick: 2px solid #a88418; --shadow: 0 10px 24px rgba(42, 16, 32, .14); --shadow-sm: 0 3px 8px rgba(42, 16, 32, .14); --blob: 3px; --blob-sm: 2px; --pill: 2px; --font-display: 'Trajan Pro', 'Perpetua Titling MT', Cinzel, 'Sitka Heading', 'Palatino Linotype', 'Book Antiqua', serif; --font-body: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --tyrian: linear-gradient(#6a1f56, #4a1240); --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 11H23V1H5V8H17V4H10' fill='none' stroke='%23e2c26a' stroke-width='1.6'/%3E%3C/svg%3E"); --meander-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 11H23V1H5V8H17V4H10' fill='none' stroke='%23cdb98a' stroke-width='1.4'/%3E%3C/svg%3E"); --marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23m)'/%3E%3Cg fill='none' stroke='%23d8cbb3' stroke-width='1.1'%3E%3Cpath d='M-10 80C60 60 90 130 170 110S280 40 410 70'/%3E%3Cpath d='M-10 290C80 260 120 330 210 300S320 250 410 280'/%3E%3Cpath d='M120 -10C110 60 170 90 150 170'/%3E%3C/g%3E%3C/svg%3E"); --laurel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 18C7 12 14 7 22 4' stroke='%237a6a1a' stroke-width='1.4' fill='none'/%3E%3Cg fill='%23a88418'%3E%3Cellipse cx='7' cy='13' rx='3.2' ry='1.5' transform='rotate(-50 7 13)'/%3E%3Cellipse cx='11' cy='9.5' rx='3.2' ry='1.5' transform='rotate(-40 11 9.5)'/%3E%3Cellipse cx='15.5' cy='7' rx='3.2' ry='1.5' transform='rotate(-30 15.5 7)'/%3E%3Cellipse cx='10' cy='15' rx='3.2' ry='1.5' transform='rotate(20 10 15)'/%3E%3Cellipse cx='14.5' cy='11.5' rx='3.2' ry='1.5' transform='rotate(10 14.5 11.5)'/%3E%3Cellipse cx='19' cy='8.5' rx='3.2' ry='1.5'/%3E%3C/g%3E%3C/svg%3E"); --column: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 400' preserveAspectRatio='none'%3E%3Cg fill='%23e6dccb' stroke='%23d3c3a6' stroke-width='1'%3E%3Crect x='2' y='8' width='56' height='6'/%3E%3Ccircle cx='10' cy='20' r='7'/%3E%3Ccircle cx='50' cy='20' r='7'/%3E%3Crect x='8' y='14' width='44' height='10'/%3E%3Crect x='12' y='26' width='36' height='350'/%3E%3Crect x='6' y='376' width='48' height='8'/%3E%3Crect x='2' y='384' width='56' height='10'/%3E%3C/g%3E%3Cpath d='M18 28V374M24 28V374M30 28V374M36 28V374M42 28V374' stroke='%23d3c3a6' stroke-width='1'/%3E%3C/svg%3E"); } :root[data-theme="spqr"] body { background: var(--column) left 6px top 0 / 70px 100vh no-repeat, var(--column) right 6px top 0 / 70px 100vh no-repeat, var(--marble) 0 0 / 400px 400px, #f1ebe0; background-attachment: fixed; } :root[data-theme="spqr"] * { text-shadow: none !important; } :root[data-theme="spqr"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 600; color: #5c1a4a; letter-spacing: .08em; } :root[data-theme="spqr"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { text-transform: uppercase; letter-spacing: .12em; } :root[data-theme="spqr"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #5c1a4a; } :root[data-theme="spqr"] .dh-name h1 { text-shadow: 0 1px 0 #ffffff, 2px 2px 0 #e2c26a !important; } :root[data-theme="spqr"] ::selection { background: #5c1a4a; color: #f4e6c4; } :root[data-theme="spqr"] :focus-visible { outline: 2px solid #a88418; outline-offset: 2px; } :root[data-theme="spqr"] a { color: #7a2a66; } /* the top bar: Tyrian purple under a gold Greek-key frieze */ :root[data-theme="spqr"] .topbar { background: var(--meander) 0 calc(100% - 5px) / 24px 12px repeat-x, linear-gradient(#e2c26a, #e2c26a) bottom / 100% 2px no-repeat, var(--tyrian); border-bottom: 0; box-shadow: 0 6px 18px rgba(42, 16, 32, .25); padding-bottom: 24px; } :root[data-theme="spqr"] .logo-text .l2 { color: #f4e6c4; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 1.25rem; } :root[data-theme="spqr"] .logo-text .l2-card { color: #e2c26a; } :root[data-theme="spqr"] .header-stats { color: #e8d5e6; } :root[data-theme="spqr"] .header-stats b { color: #f4e6c4; } :root[data-theme="spqr"] .bell { background: linear-gradient(#fbf7ef, #ece2cf); border: 1px solid #a88418; box-shadow: var(--shadow-sm); } /* tabs: carved stone tablets; the open page is purple and gold */ :root[data-theme="spqr"] :is(.tabs > a, .tools-btn) { background: var(--marble) 0 0 / 400px 400px, linear-gradient(#fbf7ef, #ebe1cd); color: #2a1020; border: 1px solid #c9b48a; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 2px 4px rgba(42, 16, 32, .2); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 1px 0 #ffffff !important; } :root[data-theme="spqr"] :is(.tabs > a, .tools-btn):hover { color: #5c1a4a; transform: none; } :root[data-theme="spqr"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--tyrian); color: #f4e6c4; border-color: #a88418; text-shadow: none !important; box-shadow: inset 0 0 0 1px rgba(226, 194, 106, .5), 0 2px 4px rgba(42, 16, 32, .25); } /* panels: marble slabs with a double gold rule and a key pattern along the top */ :root[data-theme="spqr"] :is(.panel, .dialog-card) { background: var(--meander-muted) 12px 9px / 24px 12px repeat-x, var(--marble) 0 0 / 400px 400px, var(--panel); border: 1px solid #c9b48a; padding-top: 30px; box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px #dccaa0, var(--shadow); } :root[data-theme="spqr"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1.2em; height: 1em; margin-right: .45em; vertical-align: -.1em; background: var(--laurel) center / contain no-repeat; } /* buttons: stone with a gold edge; the go button is the emperor's purple */ :root[data-theme="spqr"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: linear-gradient(#fbf7ef, #ece2cf); color: #2a1020; border: 1px solid #a88418; box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(42, 16, 32, .18); filter: none; font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; } :root[data-theme="spqr"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { color: #5c1a4a; transform: none; box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px #e2c26a, 0 3px 8px rgba(42, 16, 32, .2); } :root[data-theme="spqr"] .btn.go, :root[data-theme="spqr"] .btn.go:hover, :root[data-theme="spqr"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--tyrian); color: #f4e6c4; } :root[data-theme="spqr"] .seg { border: 1px solid #a88418; box-shadow: var(--shadow-sm); background: #fbf7ef; } :root[data-theme="spqr"] .seg-btn { color: #2a1020; } :root[data-theme="spqr"] .seg-btn + .seg-btn { border-left: 1px solid #c9b48a; } /* engraved text boxes */ :root[data-theme="spqr"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #fdfbf7; color: #2a1020; border: 1px solid #c9b48a; box-shadow: inset 0 2px 4px rgba(42, 16, 32, .12); font-family: var(--font-body); } :root[data-theme="spqr"] :is(.tile, .deck-tile) { border: 1px solid #c9b48a; border-radius: 3px; box-shadow: 0 6px 14px rgba(42, 16, 32, .14); } :root[data-theme="spqr"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 2px #e2c26a, 0 10px 22px rgba(42, 16, 32, .18); } :root[data-theme="spqr"] .bignum { border: 1px solid rgba(42, 16, 32, .25); border-radius: 2px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3), 0 4px 10px rgba(42, 16, 32, .16); } :root[data-theme="spqr"] .tools-list { background: var(--meander-muted) 10px 8px / 24px 12px repeat-x, var(--marble), #fcf9f3; border: 1px solid #a88418; border-radius: 2px; padding-top: 26px; box-shadow: 0 14px 30px rgba(42, 16, 32, .22); } :root[data-theme="spqr"] .tools-list :is(a, button) { background: transparent; border: 0; } :root[data-theme="spqr"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #efe6d6; color: #5c1a4a; } :root[data-theme="spqr"] .toast { background: var(--tyrian); color: #f4e6c4; border: 1px solid #a88418; border-radius: 2px; font-family: var(--font-display); letter-spacing: .06em; } /* ==== Magna Carta ================================================================================= Runnymede, June 1215. A summer sky with clouds drifting over; along the bottom of the screen the water-meadow by the Thames, far hills and a castle beyond the river, oaks, and the barons' round pavilions in striped cloth, their pennants fluttering and the river glinting. The top bar is a pavilion's valance in red, edged in gold and dagged along its hem, the name in blackletter gold; tabs are swallowtail banners in the heraldic colors, the open page's gold. Panels are vellum ruled in red, each heading rubricated in blackletter with its first letter illuminated, gold on blue. Buttons are vellum framed in red ink; go is red with gold, a chosen one blue with gold. The totals are fields of heraldic color framed in gold, the More menu marks each entry with a red or blue paragraph sign and gilds the one under the pointer, a message arrives as a writ with its green wax seal hanging from cords, and the busy sign is an hourglass turning. Type is Grenze Gotisch and Grenze, served with the app, with Palatino for text. The phone's bars follow the red valance and the green meadow, so Settings counts this among the dark themes although its panels are light. No royal arms and no real seal are drawn. */ :root[data-theme="magna"] { --bg: #2f4a22; --bg-deep: #7d1717; --bg-blob: #2f4a22; --panel: #f6ecd2; --panel-2: #efe2c2; --panel-3: #e6d5ad; --well: #fbf4e0; --text: #2b1c10; --muted: #5e4a33; --faint: #7e6a4b; --paper: #fbf4e0; --paper-ink: #2b1c10; --pink: #d63a5c; --lime: #3d8a2c; --cyan: #3f7bcb; --violet: #8e60c8; --orange: #c8601a; --yellow: #977616; --mint: #12867a; --peach: #c2663f; --pink-text: #a8241c; --pink-soft: #8e1b1b; --flat: #e6d5ad; --tile-uncommon: #edf0f0; --tile-rare: #f7ecd0; --tile-mythic: #f6e0d2; --zebra: #f2e6c9; --grid: #e6d5ad; --grid-2: #d2bd90; --drop: #efe2c2; --hatch: #e0cda2; --tint-pink: #f4d8cf; --tint-magenta: #ecd9e6; --tint-green: #dde9c8; --legend-miss: #d2bd90; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #c8ad7c; --line-thick: 2px solid #a3221b; --shadow: 0 8px 20px rgba(40, 30, 10, .35); --shadow-sm: 0 3px 8px rgba(40, 30, 10, .3); --blob: 4px; --blob-sm: 4px; --pill: 4px; --font-display: Grenze, 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --font-gothic: 'Grenze Gotisch', 'Old English Text MT', Grenze, serif; --font-body: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --gules: #a3221b; --valance: #7d1717; --azure: #24408e; --or: #d8a93a; --gold: #f3d27a; --rubric: #9e1f18; --ink: #3a2414; --gold-leaf: linear-gradient(#fbe7a6, #e2b84f 45%, #c4922c 70%, #f0d27e); --meadow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240'%3E%3Cpath d='M0 150Q120 112 260 132T560 124T860 136T1180 118T1460 130T1600 150V162H0Z' fill='%239db9a3'/%3E%3Cpath d='M0 156Q200 132 420 146T820 142T1240 140T1600 156V162H0Z' fill='%2386a98a'/%3E%3Crect x='1064' y='112' width='18' height='38' fill='%23a7aaa6'/%3E%3Crect x='1064' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1071' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1078' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1071.5' y='122' width='3' height='6' fill='%2355595a'/%3E%3Crect x='1138' y='112' width='18' height='38' fill='%23a7aaa6'/%3E%3Crect x='1138' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1145' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1152' y='107' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1145.5' y='122' width='3' height='6' fill='%2355595a'/%3E%3Crect x='1080' y='122' width='58' height='28' fill='%237e827f'/%3E%3Crect x='1080' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1087' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1094' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1101' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1108' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1115' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1122' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1129' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1136' y='117' width='4' height='5' fill='%237e827f'/%3E%3Crect x='1096' y='96' width='26' height='54' fill='%23a7aaa6'/%3E%3Crect x='1096' y='91' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1103' y='91' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1110' y='91' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1117' y='91' width='4' height='5' fill='%23a7aaa6'/%3E%3Crect x='1107.5' y='106' width='3' height='6' fill='%2355595a'/%3E%3Cpath d='M1109 91V76' stroke='%234a4a46' stroke-width='1.5'/%3E%3Cpath d='M1110 77h12l-3 3 3 3h-12z' fill='%23a3221b'/%3E%3Cpath d='M0 158Q400 154 800 159T1600 158V172Q1200 175 800 171T0 172Z' fill='%236f9cc0'/%3E%3Cpath d='M0 159Q400 155 800 160T1600 159' fill='none' stroke='%23a9c7dc' stroke-width='1.5'/%3E%3Cpath d='M0 171Q400 175 800 171T1600 171V240H0Z' fill='%237aa64c'/%3E%3Cpath d='M0 214Q300 206 640 212T1300 208T1600 214V240H0Z' fill='%23628f3b'/%3E%3Crect y='232' width='1600' height='8' fill='%234f7a2f'/%3E%3Cpath d='M706 225l2-5M709 225l-1-6M711 225l3-4M634 197l2-5M637 197l-1-6M639 197l3-4M1134 229l2-5M1137 229l-1-6M1139 229l3-4M885 203l2-5M888 203l-1-6M890 203l3-4M921 196l2-5M924 196l-1-6M926 196l3-4M1042 188l2-5M1045 188l-1-6M1047 188l3-4M1093 216l2-5M1096 216l-1-6M1098 216l3-4M644 233l2-5M647 233l-1-6M649 233l3-4M1478 190l2-5M1481 190l-1-6M1483 190l3-4M409 200l2-5M412 200l-1-6M414 200l3-4M598 189l2-5M601 189l-1-6M603 189l3-4M79 198l2-5M82 198l-1-6M84 198l3-4M246 208l2-5M249 208l-1-6M251 208l3-4M642 234l2-5M645 234l-1-6M647 234l3-4M831 209l2-5M834 209l-1-6M836 209l3-4M423 234l2-5M426 234l-1-6M428 234l3-4M148 211l2-5M151 211l-1-6M153 211l3-4M1215 192l2-5M1218 192l-1-6M1220 192l3-4M333 230l2-5M336 230l-1-6M338 230l3-4M1001 215l2-5M1004 215l-1-6M1006 215l3-4M427 222l2-5M430 222l-1-6M432 222l3-4M1516 183l2-5M1519 183l-1-6M1521 183l3-4M1205 236l2-5M1208 236l-1-6M1210 236l3-4M521 178l2-5M524 178l-1-6M526 178l3-4M126 235l2-5M129 235l-1-6M131 235l3-4M251 198l2-5M254 198l-1-6M256 198l3-4M624 232l2-5M627 232l-1-6M629 232l3-4M1566 227l2-5M1569 227l-1-6M1571 227l3-4M367 212l2-5M370 212l-1-6M372 212l3-4M1089 223l2-5M1092 223l-1-6M1094 223l3-4M1454 207l2-5M1457 207l-1-6M1459 207l3-4M836 189l2-5M839 189l-1-6M841 189l3-4M1432 222l2-5M1435 222l-1-6M1437 222l3-4M970 212l2-5M973 212l-1-6M975 212l3-4M528 228l2-5M531 228l-1-6M533 228l3-4M301 210l2-5M304 210l-1-6M306 210l3-4M248 220l2-5M251 220l-1-6M253 220l3-4M1595 197l2-5M1598 197l-1-6M1600 197l3-4M1093 180l2-5M1096 180l-1-6M1098 180l3-4M575 196l2-5M578 196l-1-6M580 196l3-4M344 190l2-5M347 190l-1-6M349 190l3-4M1547 228l2-5M1550 228l-1-6M1552 228l3-4M1450 212l2-5M1453 212l-1-6M1455 212l3-4M400 212l2-5M403 212l-1-6M405 212l3-4M709 215l2-5M712 215l-1-6M714 215l3-4M1000 224l2-5M1003 224l-1-6M1005 224l3-4M656 202l2-5M659 202l-1-6M661 202l3-4M1175 184l2-5M1178 184l-1-6M1180 184l3-4M294 222l2-5M297 222l-1-6M299 222l3-4M931 212l2-5M934 212l-1-6M936 212l3-4M241 194l2-5M244 194l-1-6M246 194l3-4M331 221l2-5M334 221l-1-6M336 221l3-4M263 234l2-5M266 234l-1-6M268 234l3-4M1097 190l2-5M1100 190l-1-6M1102 190l3-4M912 191l2-5M915 191l-1-6M917 191l3-4M1092 219l2-5M1095 219l-1-6M1097 219l3-4M539 227l2-5M542 227l-1-6M544 227l3-4M1373 186l2-5M1376 186l-1-6M1378 186l3-4M614 187l2-5M617 187l-1-6M619 187l3-4M1538 184l2-5M1541 184l-1-6M1543 184l3-4M1429 205l2-5M1432 205l-1-6M1434 205l3-4M1417 181l2-5M1420 181l-1-6M1422 181l3-4M1421 216l2-5M1424 216l-1-6M1426 216l3-4M811 198l2-5M814 198l-1-6M816 198l3-4M1491 188l2-5M1494 188l-1-6M1496 188l3-4M146 221l2-5M149 221l-1-6M151 221l3-4M1041 230l2-5M1044 230l-1-6M1046 230l3-4M25 216l2-5M28 216l-1-6M30 216l3-4M1326 186l2-5M1329 186l-1-6M1331 186l3-4M1163 190l2-5M1166 190l-1-6M1168 190l3-4M508 212l2-5M511 212l-1-6M513 212l3-4M834 200l2-5M837 200l-1-6M839 200l3-4M1199 229l2-5M1202 229l-1-6M1204 229l3-4M1450 221l2-5M1453 221l-1-6M1455 221l3-4M297 229l2-5M300 229l-1-6M302 229l3-4M1126 196l2-5M1129 196l-1-6M1131 196l3-4M1094 212l2-5M1097 212l-1-6M1099 212l3-4M1231 179l2-5M1234 179l-1-6M1236 179l3-4M338 209l2-5M341 209l-1-6M343 209l3-4M1526 188l2-5M1529 188l-1-6M1531 188l3-4M1556 234l2-5M1559 234l-1-6M1561 234l3-4M1017 184l2-5M1020 184l-1-6M1022 184l3-4M747 202l2-5M750 202l-1-6M752 202l3-4M433 186l2-5M436 186l-1-6M438 186l3-4M867 181l2-5M870 181l-1-6M872 181l3-4M407 181l2-5M410 181l-1-6M412 181l3-4M395 192l2-5M398 192l-1-6M400 192l3-4M539 187l2-5M542 187l-1-6M544 187l3-4M40 185l2-5M43 185l-1-6M45 185l3-4M1459 181l2-5M1462 181l-1-6M1464 181l3-4' stroke='%234f7a2f' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Crect x='37' y='180' width='5' height='20' fill='%235a4126'/%3E%3Ccircle cx='31' cy='173' r='13' fill='%233e6a2c'/%3E%3Ccircle cx='49' cy='171' r='14' fill='%233e6a2c'/%3E%3Ccircle cx='40' cy='162' r='14' fill='%234b7a33'/%3E%3Ccircle cx='36' cy='175' r='11' fill='%234b7a33'/%3E%3Ccircle cx='47' cy='178' r='10' fill='%2356883a'/%3E%3Crect x='638' y='180' width='4' height='16' fill='%235a4126'/%3E%3Ccircle cx='632' cy='174' r='10' fill='%233e6a2c'/%3E%3Ccircle cx='648' cy='172' r='11' fill='%233e6a2c'/%3E%3Ccircle cx='640' cy='164' r='12' fill='%234b7a33'/%3E%3Ccircle cx='637' cy='175' r='9' fill='%234b7a33'/%3E%3Ccircle cx='646' cy='178' r='8' fill='%2356883a'/%3E%3Crect x='877' y='182' width='6' height='22' fill='%235a4126'/%3E%3Ccircle cx='870' cy='174' r='14' fill='%233e6a2c'/%3E%3Ccircle cx='890' cy='172' r='15' fill='%233e6a2c'/%3E%3Ccircle cx='880' cy='162' r='16' fill='%234b7a33'/%3E%3Ccircle cx='876' cy='176' r='12' fill='%234b7a33'/%3E%3Ccircle cx='888' cy='180' r='11' fill='%2356883a'/%3E%3Crect x='1317' y='179' width='5' height='19' fill='%235a4126'/%3E%3Ccircle cx='1312' cy='172' r='12' fill='%233e6a2c'/%3E%3Ccircle cx='1328' cy='171' r='13' fill='%233e6a2c'/%3E%3Ccircle cx='1320' cy='162' r='14' fill='%234b7a33'/%3E%3Ccircle cx='1317' cy='174' r='10' fill='%234b7a33'/%3E%3Ccircle cx='1327' cy='178' r='9' fill='%2356883a'/%3E%3Crect x='1557' y='183' width='6' height='23' fill='%235a4126'/%3E%3Ccircle cx='1550' cy='174' r='15' fill='%233e6a2c'/%3E%3Ccircle cx='1570' cy='172' r='16' fill='%233e6a2c'/%3E%3Ccircle cx='1560' cy='162' r='17' fill='%234b7a33'/%3E%3Ccircle cx='1556' cy='177' r='13' fill='%234b7a33'/%3E%3Ccircle cx='1568' cy='181' r='12' fill='%2356883a'/%3E%3Cdefs%3E%3CclipPath id='p0'%3E%3Crect x='102.0' y='185' width='96' height='37'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='150' cy='223' rx='56.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p0)'%3E%3Crect x='102.0' y='185' width='12.3' height='37' fill='%23f6efe0'/%3E%3Crect x='114.0' y='185' width='12.3' height='37' fill='%23a3221b'/%3E%3Crect x='126.0' y='185' width='12.3' height='37' fill='%23f6efe0'/%3E%3Crect x='138.0' y='185' width='12.3' height='37' fill='%23a3221b'/%3E%3Crect x='150.0' y='185' width='12.3' height='37' fill='%23f6efe0'/%3E%3Crect x='162.0' y='185' width='12.3' height='37' fill='%23a3221b'/%3E%3Crect x='174.0' y='185' width='12.3' height='37' fill='%23f6efe0'/%3E%3Crect x='186.0' y='185' width='12.3' height='37' fill='%23a3221b'/%3E%3Crect x='102.0' y='185' width='21' height='37' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M143 222L150 198L157 222Z' fill='%233a2a1c'/%3E%3Cpath d='M150 148L96.0 185H109.5Z' fill='%23a3221b'/%3E%3Cpath d='M150 148L109.5 185H123.0Z' fill='%23f6efe0'/%3E%3Cpath d='M150 148L123.0 185H136.5Z' fill='%23a3221b'/%3E%3Cpath d='M150 148L136.5 185H150.0Z' fill='%23f6efe0'/%3E%3Cpath d='M150 148L150.0 185H163.5Z' fill='%23a3221b'/%3E%3Cpath d='M150 148L163.5 185H177.0Z' fill='%23f6efe0'/%3E%3Cpath d='M150 148L177.0 185H190.5Z' fill='%23a3221b'/%3E%3Cpath d='M150 148L190.5 185H204.0Z' fill='%23f6efe0'/%3E%3Ccircle cx='101' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='111' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='121' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='131' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='141' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='151' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='161' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='171' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='181' cy='185' r='5' fill='%23a3221b'/%3E%3Ccircle cx='191' cy='185' r='5' fill='%23a3221b'/%3E%3Cpath d='M150 148V128' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='150' cy='127' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p1'%3E%3Crect x='290.0' y='191' width='80' height='31'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='330' cy='223' rx='48.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p1)'%3E%3Crect x='290.0' y='191' width='13.6' height='31' fill='%23d8a93a'/%3E%3Crect x='303.3' y='191' width='13.6' height='31' fill='%232a4b9b'/%3E%3Crect x='316.7' y='191' width='13.6' height='31' fill='%23d8a93a'/%3E%3Crect x='330.0' y='191' width='13.6' height='31' fill='%232a4b9b'/%3E%3Crect x='343.3' y='191' width='13.6' height='31' fill='%23d8a93a'/%3E%3Crect x='356.7' y='191' width='13.6' height='31' fill='%232a4b9b'/%3E%3Crect x='290.0' y='191' width='18' height='31' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M323 222L330 202L337 222Z' fill='%233a2a1c'/%3E%3Cpath d='M330 160L284.0 191H299.3Z' fill='%232a4b9b'/%3E%3Cpath d='M330 160L299.3 191H314.7Z' fill='%23d8a93a'/%3E%3Cpath d='M330 160L314.7 191H330.0Z' fill='%232a4b9b'/%3E%3Cpath d='M330 160L330.0 191H345.3Z' fill='%23d8a93a'/%3E%3Cpath d='M330 160L345.3 191H360.7Z' fill='%232a4b9b'/%3E%3Cpath d='M330 160L360.7 191H376.0Z' fill='%23d8a93a'/%3E%3Ccircle cx='289' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='299' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='309' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='319' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='329' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='339' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='349' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='359' cy='191' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='369' cy='191' r='5' fill='%232a4b9b'/%3E%3Cpath d='M330 160V140' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='330' cy='139' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p2'%3E%3Crect x='465.0' y='180' width='110' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='520' cy='223' rx='63.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p2)'%3E%3Crect x='465.0' y='180' width='12.5' height='42' fill='%23f6efe0'/%3E%3Crect x='477.2' y='180' width='12.5' height='42' fill='%232f6b34'/%3E%3Crect x='489.4' y='180' width='12.5' height='42' fill='%23f6efe0'/%3E%3Crect x='501.7' y='180' width='12.5' height='42' fill='%232f6b34'/%3E%3Crect x='513.9' y='180' width='12.5' height='42' fill='%23f6efe0'/%3E%3Crect x='526.1' y='180' width='12.5' height='42' fill='%232f6b34'/%3E%3Crect x='538.3' y='180' width='12.5' height='42' fill='%23f6efe0'/%3E%3Crect x='550.6' y='180' width='12.5' height='42' fill='%232f6b34'/%3E%3Crect x='562.8' y='180' width='12.5' height='42' fill='%23f6efe0'/%3E%3Crect x='465.0' y='180' width='24' height='42' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M513 222L520 195L527 222Z' fill='%233a2a1c'/%3E%3Cpath d='M520 138L459.0 180H472.6Z' fill='%232f6b34'/%3E%3Cpath d='M520 138L472.6 180H486.1Z' fill='%23f6efe0'/%3E%3Cpath d='M520 138L486.1 180H499.7Z' fill='%232f6b34'/%3E%3Cpath d='M520 138L499.7 180H513.2Z' fill='%23f6efe0'/%3E%3Cpath d='M520 138L513.2 180H526.8Z' fill='%232f6b34'/%3E%3Cpath d='M520 138L526.8 180H540.3Z' fill='%23f6efe0'/%3E%3Cpath d='M520 138L540.3 180H553.9Z' fill='%232f6b34'/%3E%3Cpath d='M520 138L553.9 180H567.4Z' fill='%23f6efe0'/%3E%3Cpath d='M520 138L567.4 180H581.0Z' fill='%232f6b34'/%3E%3Ccircle cx='464' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='474' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='484' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='494' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='504' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='514' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='524' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='534' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='544' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='554' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='564' cy='180' r='5' fill='%232f6b34'/%3E%3Ccircle cx='574' cy='180' r='5' fill='%232f6b34'/%3E%3Cpath d='M520 138V118' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='520' cy='117' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p3'%3E%3Crect x='716.0' y='187' width='88' height='35'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='760' cy='223' rx='52.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p3)'%3E%3Crect x='716.0' y='187' width='12.9' height='35' fill='%23d8a93a'/%3E%3Crect x='728.6' y='187' width='12.9' height='35' fill='%23a3221b'/%3E%3Crect x='741.1' y='187' width='12.9' height='35' fill='%23d8a93a'/%3E%3Crect x='753.7' y='187' width='12.9' height='35' fill='%23a3221b'/%3E%3Crect x='766.3' y='187' width='12.9' height='35' fill='%23d8a93a'/%3E%3Crect x='778.9' y='187' width='12.9' height='35' fill='%23a3221b'/%3E%3Crect x='791.4' y='187' width='12.9' height='35' fill='%23d8a93a'/%3E%3Crect x='716.0' y='187' width='19' height='35' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M753 222L760 200L767 222Z' fill='%233a2a1c'/%3E%3Cpath d='M760 152L710.0 187H724.3Z' fill='%23a3221b'/%3E%3Cpath d='M760 152L724.3 187H738.6Z' fill='%23d8a93a'/%3E%3Cpath d='M760 152L738.6 187H752.9Z' fill='%23a3221b'/%3E%3Cpath d='M760 152L752.9 187H767.1Z' fill='%23d8a93a'/%3E%3Cpath d='M760 152L767.1 187H781.4Z' fill='%23a3221b'/%3E%3Cpath d='M760 152L781.4 187H795.7Z' fill='%23d8a93a'/%3E%3Cpath d='M760 152L795.7 187H810.0Z' fill='%23a3221b'/%3E%3Ccircle cx='715' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='725' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='735' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='745' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='755' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='765' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='775' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='785' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='795' cy='187' r='5' fill='%23a3221b'/%3E%3Ccircle cx='805' cy='187' r='5' fill='%23a3221b'/%3E%3Cpath d='M760 152V132' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='760' cy='131' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p4'%3E%3Crect x='928.0' y='182' width='104' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='980' cy='223' rx='60.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p4)'%3E%3Crect x='928.0' y='182' width='13.3' height='40' fill='%23f6efe0'/%3E%3Crect x='941.0' y='182' width='13.3' height='40' fill='%236b3a7a'/%3E%3Crect x='954.0' y='182' width='13.3' height='40' fill='%23f6efe0'/%3E%3Crect x='967.0' y='182' width='13.3' height='40' fill='%236b3a7a'/%3E%3Crect x='980.0' y='182' width='13.3' height='40' fill='%23f6efe0'/%3E%3Crect x='993.0' y='182' width='13.3' height='40' fill='%236b3a7a'/%3E%3Crect x='1006.0' y='182' width='13.3' height='40' fill='%23f6efe0'/%3E%3Crect x='1019.0' y='182' width='13.3' height='40' fill='%236b3a7a'/%3E%3Crect x='928.0' y='182' width='23' height='40' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M973 222L980 196L987 222Z' fill='%233a2a1c'/%3E%3Cpath d='M980 142L922.0 182H936.5Z' fill='%236b3a7a'/%3E%3Cpath d='M980 142L936.5 182H951.0Z' fill='%23f6efe0'/%3E%3Cpath d='M980 142L951.0 182H965.5Z' fill='%236b3a7a'/%3E%3Cpath d='M980 142L965.5 182H980.0Z' fill='%23f6efe0'/%3E%3Cpath d='M980 142L980.0 182H994.5Z' fill='%236b3a7a'/%3E%3Cpath d='M980 142L994.5 182H1009.0Z' fill='%23f6efe0'/%3E%3Cpath d='M980 142L1009.0 182H1023.5Z' fill='%236b3a7a'/%3E%3Cpath d='M980 142L1023.5 182H1038.0Z' fill='%23f6efe0'/%3E%3Ccircle cx='927' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='937' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='947' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='957' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='967' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='977' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='987' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='997' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='1007' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='1017' cy='182' r='5' fill='%236b3a7a'/%3E%3Ccircle cx='1027' cy='182' r='5' fill='%236b3a7a'/%3E%3Cpath d='M980 142V122' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='980' cy='121' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p5'%3E%3Crect x='1168.0' y='190' width='84' height='32'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='1210' cy='223' rx='50.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p5)'%3E%3Crect x='1168.0' y='190' width='12.3' height='32' fill='%23f6efe0'/%3E%3Crect x='1180.0' y='190' width='12.3' height='32' fill='%232a4b9b'/%3E%3Crect x='1192.0' y='190' width='12.3' height='32' fill='%23f6efe0'/%3E%3Crect x='1204.0' y='190' width='12.3' height='32' fill='%232a4b9b'/%3E%3Crect x='1216.0' y='190' width='12.3' height='32' fill='%23f6efe0'/%3E%3Crect x='1228.0' y='190' width='12.3' height='32' fill='%232a4b9b'/%3E%3Crect x='1240.0' y='190' width='12.3' height='32' fill='%23f6efe0'/%3E%3Crect x='1168.0' y='190' width='18' height='32' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M1203 222L1210 202L1217 222Z' fill='%233a2a1c'/%3E%3Cpath d='M1210 158L1162.0 190H1175.7Z' fill='%232a4b9b'/%3E%3Cpath d='M1210 158L1175.7 190H1189.4Z' fill='%23f6efe0'/%3E%3Cpath d='M1210 158L1189.4 190H1203.1Z' fill='%232a4b9b'/%3E%3Cpath d='M1210 158L1203.1 190H1216.9Z' fill='%23f6efe0'/%3E%3Cpath d='M1210 158L1216.9 190H1230.6Z' fill='%232a4b9b'/%3E%3Cpath d='M1210 158L1230.6 190H1244.3Z' fill='%23f6efe0'/%3E%3Cpath d='M1210 158L1244.3 190H1258.0Z' fill='%232a4b9b'/%3E%3Ccircle cx='1167' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1177' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1187' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1197' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1207' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1217' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1227' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1237' cy='190' r='5' fill='%232a4b9b'/%3E%3Ccircle cx='1247' cy='190' r='5' fill='%232a4b9b'/%3E%3Cpath d='M1210 158V138' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='1210' cy='137' r='2' fill='%23d8a93a'/%3E%3Cdefs%3E%3CclipPath id='p6'%3E%3Crect x='1371.0' y='184' width='98' height='38'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='1420' cy='223' rx='57.0' ry='4' fill='%23000' fill-opacity='.18'/%3E%3Cg clip-path='url(%23p6)'%3E%3Crect x='1371.0' y='184' width='12.6' height='38' fill='%23d8a93a'/%3E%3Crect x='1383.2' y='184' width='12.6' height='38' fill='%23a3221b'/%3E%3Crect x='1395.5' y='184' width='12.6' height='38' fill='%23d8a93a'/%3E%3Crect x='1407.8' y='184' width='12.6' height='38' fill='%23a3221b'/%3E%3Crect x='1420.0' y='184' width='12.6' height='38' fill='%23d8a93a'/%3E%3Crect x='1432.2' y='184' width='12.6' height='38' fill='%23a3221b'/%3E%3Crect x='1444.5' y='184' width='12.6' height='38' fill='%23d8a93a'/%3E%3Crect x='1456.8' y='184' width='12.6' height='38' fill='%23a3221b'/%3E%3Crect x='1371.0' y='184' width='22' height='38' fill='%23000' fill-opacity='.12'/%3E%3C/g%3E%3Cpath d='M1413 222L1420 198L1427 222Z' fill='%233a2a1c'/%3E%3Cpath d='M1420 146L1365.0 184H1378.8Z' fill='%23a3221b'/%3E%3Cpath d='M1420 146L1378.8 184H1392.5Z' fill='%23d8a93a'/%3E%3Cpath d='M1420 146L1392.5 184H1406.2Z' fill='%23a3221b'/%3E%3Cpath d='M1420 146L1406.2 184H1420.0Z' fill='%23d8a93a'/%3E%3Cpath d='M1420 146L1420.0 184H1433.8Z' fill='%23a3221b'/%3E%3Cpath d='M1420 146L1433.8 184H1447.5Z' fill='%23d8a93a'/%3E%3Cpath d='M1420 146L1447.5 184H1461.2Z' fill='%23a3221b'/%3E%3Cpath d='M1420 146L1461.2 184H1475.0Z' fill='%23d8a93a'/%3E%3Ccircle cx='1370' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1380' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1390' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1400' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1410' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1420' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1430' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1440' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1450' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1460' cy='184' r='5' fill='%23a3221b'/%3E%3Ccircle cx='1470' cy='184' r='5' fill='%23a3221b'/%3E%3Cpath d='M1420 146V126' stroke='%235a4126' stroke-width='2'/%3E%3Ccircle cx='1420' cy='125' r='2' fill='%23d8a93a'/%3E%3C/svg%3E"); --flutter-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240'%3E%3Cpath d='M151 108Q162 105 176 110L168 113L175 117Q162 117 151 117Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M331 120Q342 117 356 122L348 125L355 129Q342 129 331 129Z' fill='%23a3221b' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M521 98Q532 95 546 100L538 103L545 107Q532 107 521 107Z' fill='%23f6efe0' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M761 112Q772 109 786 114L778 117L785 121Q772 121 761 121Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M981 102Q992 99 1006 104L998 107L1005 111Q992 111 981 111Z' fill='%23a3221b' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M1211 118Q1222 115 1236 120L1228 123L1235 127Q1222 127 1211 127Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M1421 106Q1432 103 1446 108L1438 111L1445 115Q1432 115 1421 115Z' fill='%23f6efe0' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M518 162h13M116 166h10M93 166h6M694 162h7M679 168h7M357 167h15M923 165h16M75 169h9M231 162h9M1306 163h12M1022 164h11M100 162h8M1089 165h9M937 165h9M1271 167h8M919 166h15M1167 164h16M189 165h14M243 165h6M1069 168h12M1401 164h13M951 166h11M1344 170h11M1063 162h13M1035 170h14M455 164h13M36 165h8M187 162h14M207 163h10M1394 162h10M879 169h14M1382 164h10M574 169h16M241 163h8M373 165h12M420 161h10M591 166h16M1105 166h12M1082 161h15M1248 169h14' stroke='%23e6f1f7' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.8'/%3E%3C/svg%3E"); --flutter-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240'%3E%3Cpath d='M151 108Q162 112 175 109L169 113L174 118Q162 114 151 117Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M331 120Q342 124 355 121L349 125L354 130Q342 126 331 129Z' fill='%23a3221b' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M521 98Q532 102 545 99L539 103L544 108Q532 104 521 107Z' fill='%23f6efe0' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M761 112Q772 116 785 113L779 117L784 122Q772 118 761 121Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M981 102Q992 106 1005 103L999 107L1004 112Q992 108 981 111Z' fill='%23a3221b' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M1211 118Q1222 122 1235 119L1229 123L1234 128Q1222 124 1211 127Z' fill='%23d8a93a' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M1421 106Q1432 110 1445 107L1439 111L1444 116Q1432 112 1421 115Z' fill='%23f6efe0' stroke='%235a3a1c' stroke-width='.6'/%3E%3Cpath d='M363 170h7M1128 162h8M1599 163h12M735 165h11M308 168h7M375 161h9M652 169h10M182 163h16M101 167h10M1057 164h13M796 167h15M930 162h7M1514 165h8M1514 166h13M1410 164h10M1405 162h14M156 167h13M1520 169h11M316 162h11M816 162h15M812 167h8M390 161h9M427 165h10M1335 169h8M634 162h13M1560 163h14M480 161h14M547 163h10M371 165h10M669 166h9M152 162h7M834 164h14M808 167h16M101 161h7M618 166h13M562 170h6M1337 163h15M53 170h14M1585 166h8M1552 165h7' stroke='%23e6f1f7' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.8'/%3E%3C/svg%3E"); --clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='260'%3E%3Cellipse cx='120' cy='70' rx='49' ry='37' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='153' cy='55' rx='40' ry='31' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='184' cy='70' rx='43' ry='33' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='89' cy='77' rx='31' ry='24' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='212' cy='79' rx='29' ry='22' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='151' cy='88' rx='86' ry='13' fill='%23e4eef3' fill-opacity='.9'/%3E%3Cellipse cx='520' cy='40' rx='35' ry='27' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='544' cy='29' rx='29' ry='22' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='566' cy='40' rx='31' ry='24' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='498' cy='45' rx='23' ry='18' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='587' cy='46' rx='21' ry='16' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='542' cy='53' rx='62' ry='10' fill='%23e4eef3' fill-opacity='.9'/%3E%3Cellipse cx='860' cy='110' rx='57' ry='44' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='899' cy='92' rx='47' ry='36' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='935' cy='110' rx='51' ry='39' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='824' cy='118' rx='37' ry='29' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='969' cy='120' rx='34' ry='26' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='896' cy='131' rx='101' ry='16' fill='%23e4eef3' fill-opacity='.9'/%3E%3Cellipse cx='1250' cy='60' rx='40' ry='31' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1277' cy='47' rx='33' ry='25' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1302' cy='60' rx='35' ry='27' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1225' cy='65' rx='26' ry='20' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1326' cy='67' rx='23' ry='18' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1275' cy='74' rx='70' ry='11' fill='%23e4eef3' fill-opacity='.9'/%3E%3Cellipse cx='1480' cy='140' rx='31' ry='24' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1501' cy='130' rx='25' ry='20' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1521' cy='140' rx='27' ry='21' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1460' cy='144' rx='20' ry='15' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1539' cy='146' rx='18' ry='14' fill='%23ffffff' fill-opacity='.85'/%3E%3Cellipse cx='1500' cy='151' rx='55' ry='8' fill='%23e4eef3' fill-opacity='.9'/%3E%3C/svg%3E"); --dagging: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Cpath d='M0 0H28V1A14 11 0 0 1 0 1Z' fill='%237d1717' stroke='%23d8a93a' stroke-width='1.6'/%3E%3C/svg%3E"); --hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Crect x='2' y='1' width='18' height='3' rx='1' fill='%236b4224'/%3E%3Crect x='2' y='24' width='18' height='3' rx='1' fill='%236b4224'/%3E%3Cpath d='M5 4h12c0 6-4 7-4 10s4 4 4 10H5c0-6 4-7 4-10S5 10 5 4Z' fill='%23eaf2f4' fill-opacity='.85' stroke='%235a4126' stroke-width='1'/%3E%3Cpath d='M7.5 22.6c.6-3 3.5-3.6 3.5-5.2 0 1.6 2.9 2.2 3.5 5.2Z' fill='%23d8a93a'/%3E%3Cpath d='M8 7h6c-.6 2-2.4 2.8-3 4.6C10.4 9.8 8.6 9 8 7Z' fill='%23d8a93a'/%3E%3Cpath d='M11 12v6' stroke='%23d8a93a' stroke-width='.8'/%3E%3C/svg%3E"); --seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='48' viewBox='0 0 34 48'%3E%3Cpath d='M12 0C11 8 14 14 13 22M22 0C23 8 20 14 21 22' fill='none' stroke='%23a3221b' stroke-width='2'/%3E%3Cpath d='M12 0C11 8 14 14 13 22M22 0C23 8 20 14 21 22' fill='none' stroke='%23d8a93a' stroke-width='.8' stroke-dasharray='2 2'/%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.34' r='.8'%3E%3Cstop offset='0' stop-color='%236f9a52'/%3E%3Cstop offset='.6' stop-color='%233f6a2c'/%3E%3Cstop offset='1' stop-color='%2326421a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M29.4 33.0L29.8 35.0L28.8 36.8L27.5 38.4L26.5 39.9L25.3 41.3L23.8 42.3L22.3 43.5L20.9 45.0L19.1 45.9L17.0 45.3L15.3 43.8L13.6 43.3L11.5 43.7L9.4 43.5L8.0 42.0L7.3 40.0L6.6 38.3L5.9 36.6L5.6 34.8L5.4 33.0L4.8 31.1L4.6 29.0L5.7 27.2L7.8 26.3L9.4 25.4L10.2 23.6L11.2 21.6L13.0 20.7L15.1 21.0L17.0 21.3L18.8 21.4L20.6 21.9L22.2 22.8L24.1 23.3L26.1 23.9L27.5 25.4L27.5 27.6L27.2 29.7L28.0 31.3Z' fill='url(%23g)'/%3E%3Ccircle cx='17' cy='33' r='7.5' fill='none' stroke='%23203a15' stroke-width='1' stroke-opacity='.7'/%3E%3Cpath d='M17 28.5v9M12.5 33h9' stroke='%23203a15' stroke-width='1.2' stroke-opacity='.7'/%3E%3C/svg%3E"); --mottling: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23a07a3a' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23a07a3a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='185' cy='149' rx='50' ry='82' fill='url(%23s)'/%3E%3Cellipse cx='3' cy='201' rx='103' ry='35' fill='url(%23s)'/%3E%3Cellipse cx='222' cy='247' rx='43' ry='53' fill='url(%23s)'/%3E%3Cellipse cx='281' cy='181' rx='91' ry='39' fill='url(%23s)'/%3E%3Cellipse cx='95' cy='44' rx='75' ry='85' fill='url(%23s)'/%3E%3Cellipse cx='236' cy='310' rx='67' ry='75' fill='url(%23s)'/%3E%3Cellipse cx='41' cy='116' rx='87' ry='74' fill='url(%23s)'/%3E%3Cellipse cx='169' cy='35' rx='59' ry='43' fill='url(%23s)'/%3E%3Cellipse cx='112' cy='324' rx='54' ry='83' fill='url(%23s)'/%3E%3Cpath d='M210 28h1v1h-1zM193 251h1v1h-1zM71 12h1v1h-1zM121 217h1v1h-1zM376 57h1v1h-1zM305 1h1v1h-1zM62 391h1v1h-1zM296 101h1v1h-1zM103 169h1v1h-1zM4 42h1v1h-1zM68 276h1v1h-1zM8 256h1v1h-1zM43 293h1v1h-1zM254 275h1v1h-1zM101 215h1v1h-1zM35 203h1v1h-1zM98 327h1v1h-1zM391 47h1v1h-1zM358 296h1v1h-1zM74 88h1v1h-1zM311 368h1v1h-1zM21 27h1v1h-1zM138 284h1v1h-1zM349 310h1v1h-1zM76 381h1v1h-1zM137 377h1v1h-1zM294 17h1v1h-1zM62 361h1v1h-1zM206 121h1v1h-1zM82 312h1v1h-1zM258 22h1v1h-1zM376 187h1v1h-1zM345 267h1v1h-1zM302 289h1v1h-1zM396 352h1v1h-1zM44 177h1v1h-1zM56 299h1v1h-1zM187 231h1v1h-1zM107 205h1v1h-1zM101 294h1v1h-1zM381 9h1v1h-1zM194 311h1v1h-1zM168 0h1v1h-1zM221 57h1v1h-1zM109 113h1v1h-1zM227 138h1v1h-1zM166 45h1v1h-1zM157 322h1v1h-1zM145 52h1v1h-1zM264 28h1v1h-1zM13 195h1v1h-1zM399 286h1v1h-1zM219 254h1v1h-1zM177 363h1v1h-1zM398 127h1v1h-1zM289 377h1v1h-1zM33 217h1v1h-1zM331 118h1v1h-1zM49 389h1v1h-1zM205 261h1v1h-1zM190 286h1v1h-1zM189 71h1v1h-1zM341 148h1v1h-1zM87 354h1v1h-1zM132 15h1v1h-1zM25 88h1v1h-1zM134 84h1v1h-1zM61 310h1v1h-1zM75 6h1v1h-1zM24 31h1v1h-1zM230 106h1v1h-1zM199 150h1v1h-1zM313 7h1v1h-1zM181 145h1v1h-1zM72 246h1v1h-1zM287 142h1v1h-1zM70 44h1v1h-1zM382 284h1v1h-1zM151 356h1v1h-1zM60 33h1v1h-1zM215 231h1v1h-1zM72 360h1v1h-1zM287 391h1v1h-1zM196 301h1v1h-1zM86 339h1v1h-1zM366 140h1v1h-1zM395 305h1v1h-1zM311 253h1v1h-1zM178 50h1v1h-1zM24 141h1v1h-1z' fill='%237a5a30' fill-opacity='.18'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5-5.6' fill='none' stroke='%23d8a93a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23a3221b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --ruling: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='26'%3E%3Crect y='25' width='8' height='1' fill='%23b89a6a' fill-opacity='.45'/%3E%3C/svg%3E"); } /* the sky over Runnymede, and the meadow along the bottom */ :root[data-theme="magna"] body { background: var(--meadow) left bottom / 1600px 240px repeat-x, linear-gradient(#7fb0da 0%, #a9cbe6 40%, #d6e6ee 75%, #eef0e2 100%); background-attachment: fixed; } /* clouds drifting across, and the pennants and the river's glints flickering between two positions */ :root[data-theme="magna"] body::before { content: ''; position: fixed; left: 0; top: 40px; width: calc(100% + 1600px); height: 260px; z-index: -1; pointer-events: none; background: var(--clouds) 0 0 / 1600px 260px repeat-x; animation: magna-clouds 180s linear infinite; } :root[data-theme="magna"] body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 240px; z-index: -1; pointer-events: none; background: var(--flutter-a) left bottom / 1600px 240px repeat-x; animation: magna-flutter .9s steps(1) infinite; } @keyframes magna-clouds { to { transform: translateX(-1600px); } } @keyframes magna-flutter { 50% { background-image: var(--flutter-b); } } @media (max-width: 700px) { :root[data-theme="magna"] body { background-size: 1040px 156px, auto; } :root[data-theme="magna"] body::after { height: 156px; background-size: 1040px 156px; } } :root[data-theme="magna"] * { text-shadow: none !important; } :root[data-theme="magna"] :is(h1, h2, h3, h4) { font-family: var(--font-gothic); font-weight: 600; color: #5a1010; letter-spacing: .01em; } :root[data-theme="magna"] :is(.panel, .dialog-card, .modal-card, .tools-list) :is(h1, h2, h3, h4) { color: var(--rubric); } /* each heading's first letter is illuminated: gold on a blue ground, framed in gold */ :root[data-theme="magna"] :is(.panel-head h2, .stat-panel > h3, .dialog-card h2)::first-letter { color: var(--gold); background: radial-gradient(circle at 30% 30%, #3557ad, var(--azure) 70%); padding: 0 .16em; margin-right: .06em; border: 1px solid var(--or); border-radius: 2px; font-weight: 700; } /* text out on the sky stands on a vellum banderole or label */ :root[data-theme="magna"] :is(h2.area-title, h3.year-head) { display: inline-block; width: fit-content; padding: 5px 30px 4px; color: var(--rubric); background: var(--well); border-top: 2px solid var(--gules); border-bottom: 2px solid var(--gules); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); } :root[data-theme="magna"] :is(.result-count, .sort-caption) { display: inline-block; padding: 0 12px; color: var(--ink); background: var(--well); border: 1px solid var(--gules); border-radius: 2px; box-shadow: inset 0 0 0 2px var(--well), inset 0 0 0 3px rgba(163, 34, 27, .5), var(--shadow-sm); font-family: var(--font-display); font-weight: 600; } :root[data-theme="magna"] :is(.result-count .muted, .result-count b) { color: var(--ink); } :root[data-theme="magna"] ::selection { background: rgba(216, 169, 58, .55); color: #2b1c10; } :root[data-theme="magna"] :focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; } :root[data-theme="magna"] .topbar :focus-visible { outline-color: var(--gold); } :root[data-theme="magna"] a { color: #1f4596; } /* the top bar: a pavilion's valance, red edged in gold, dagged along its hem */ :root[data-theme="magna"] .topbar { background: linear-gradient(#8e1d1d, var(--valance) 60%, #6a1212); border-bottom: 2px solid var(--or); box-shadow: inset 0 3px 0 rgba(216, 169, 58, .8), inset 0 5px 0 #6a1212, inset 0 6px 0 rgba(216, 169, 58, .5); } :root[data-theme="magna"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 12px; pointer-events: none; background: var(--dagging) 0 0 / 28px 12px repeat-x; filter: drop-shadow(0 3px 2px rgba(40, 20, 10, .35)); } :root[data-theme="magna"] .logo-text .l2 { font-family: var(--font-gothic); font-weight: 700; font-size: 1.85rem; color: var(--gold); letter-spacing: 0; } :root[data-theme="magna"] .logo-text .l2-card { color: #ffe9b0; } :root[data-theme="magna"] .header-stats { color: #f6e7c4; font-family: var(--font-display); font-weight: 500; } :root[data-theme="magna"] .header-stats b { color: var(--gold); } /* the bell and gear: gold roundels */ :root[data-theme="magna"] .bell { background: radial-gradient(circle at 40% 35%, #fff6dc, #f0deb0 75%); border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--or), 0 0 0 4px #5a1010, 0 4px 8px rgba(40, 10, 5, .45); } :root[data-theme="magna"] :is(.bell, .bell.gear):hover { background: radial-gradient(circle at 40% 35%, #ffffff, #f6e8c2 75%); } :root[data-theme="magna"] .bell[aria-current] { background: radial-gradient(circle at 40% 35%, #fff2c4, var(--or) 80%); } /* tabs: swallowtail banners in the heraldic colors; the open page's is gold */ :root[data-theme="magna"] :is(.tabs > a, .tools-btn) { background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .12)), var(--azure); color: #fbf1d6; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(216, 169, 58, .9), inset 0 0 0 2px rgba(0, 0, 0, .25); filter: none; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .03em; padding: 5px 16px 11px; clip-path: polygon(-10000px -10000px, calc(100% + 10000px) -10000px, calc(100% + 10000px) calc(100% + 10000px), 100% calc(100% + 10000px), 100% 100%, 50% calc(100% - 7px), 0 100%, 0 calc(100% + 10000px), -10000px calc(100% + 10000px)); } :root[data-theme="magna"] .tabs > a:nth-child(5n + 2) { background-color: #2f6b34; } :root[data-theme="magna"] .tabs > a:nth-child(5n + 3) { background-color: #6b3a7a; } :root[data-theme="magna"] .tabs > a:nth-child(5n + 4) { background-color: #2a2420; } :root[data-theme="magna"] .tabs > a:nth-child(5n + 5) { background-color: #2f6b34; } :root[data-theme="magna"] .tabs .tools-btn { background-color: #6b3a7a; } :root[data-theme="magna"] :is(.tabs > a, .tools-btn):hover { color: #ffffff; transform: translateY(1px); filter: brightness(1.15); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 2px rgba(0, 0, 0, .25); } :root[data-theme="magna"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--gold-leaf); color: #2a1a0a; box-shadow: inset 0 0 0 1px #8a5a14, 0 0 10px rgba(255, 220, 130, .5); } /* panels: vellum, ruled in red ink */ :root[data-theme="magna"] :is(.panel, .dialog-card, .modal-card) { background: var(--mottling) 0 0 / 400px 400px, var(--panel); border: 1px solid #c8ad7c; border-radius: 3px; box-shadow: inset 0 0 0 6px var(--panel), inset 0 0 0 7px rgba(163, 34, 27, .45), inset 0 0 0 9px var(--panel), inset 0 0 0 10px rgba(163, 34, 27, .3), var(--shadow); } :root[data-theme="magna"] :is(.panel, .dialog-card) { padding: 20px 22px; } :root[data-theme="magna"] .modal-top { background: linear-gradient(#8e1d1d, var(--valance)); border-bottom: 2px solid var(--or); color: var(--gold); } :root[data-theme="magna"] .modal-top .nav-count { color: var(--gold); } :root[data-theme="magna"] .modal-backdrop { background: rgba(30, 18, 8, .75); } /* buttons: vellum framed in red ink; go is red with gold; a chosen one is blue with gold */ :root[data-theme="magna"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--well); color: var(--ink); border: 1px solid var(--gules); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--well), inset 0 0 0 3px rgba(163, 34, 27, .55), 0 2px 3px rgba(40, 30, 10, .25); filter: none; font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; } :root[data-theme="magna"] .icon-btn { border-radius: 50%; } :root[data-theme="magna"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: #fff9ea; color: var(--rubric); transform: translateY(-1px); filter: none; box-shadow: inset 0 0 0 2px #fff9ea, inset 0 0 0 3px var(--gules), 0 3px 6px rgba(40, 30, 10, .3); } :root[data-theme="magna"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(1px); } :root[data-theme="magna"] :is(.btn.go, .btn.go:hover) { background: linear-gradient(#b42a22, #8e1b1b); color: var(--gold); border-color: #5a1010; box-shadow: inset 0 0 0 2px #9c2018, inset 0 0 0 3px rgba(243, 210, 122, .8), 0 2px 4px rgba(40, 30, 10, .3); } :root[data-theme="magna"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: radial-gradient(circle at 50% 30%, #3557ad, var(--azure) 75%); color: var(--gold); border-color: var(--azure); outline: 0; box-shadow: inset 0 0 0 2px var(--azure), inset 0 0 0 3px rgba(243, 210, 122, .75); } :root[data-theme="magna"] :is(.icon-btn.close, .icon-btn.close:hover) { background: radial-gradient(circle at 40% 35%, #c0362c, #8e1b1b 75%); color: var(--gold); border-color: var(--or); box-shadow: 0 0 0 2px var(--or), 0 2px 4px rgba(40, 30, 10, .35); } :root[data-theme="magna"] .seg { background: var(--well); border: 1px solid var(--gules); border-radius: 3px; box-shadow: 0 2px 3px rgba(40, 30, 10, .2); } :root[data-theme="magna"] .seg-btn { color: var(--ink); font-family: var(--font-display); font-weight: 600; } :root[data-theme="magna"] .seg-btn:hover { background: #fff9ea; } :root[data-theme="magna"] .seg-btn + .seg-btn { border-left: 1px solid rgba(163, 34, 27, .6); } /* text boxes: vellum with a scribe's ruling; a check box is checked in gold on blue */ :root[data-theme="magna"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #fffaea; color: var(--text); border: 1px solid #b79a6a; border-bottom: 2px solid #7a5a30; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(90, 60, 20, .12); font-family: var(--font-body); } :root[data-theme="magna"] :is(.text-input, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"])::placeholder { color: var(--faint); font-style: italic; } :root[data-theme="magna"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 2px solid var(--azure); outline-offset: 1px; } :root[data-theme="magna"] .select { background-image: var(--chevron); background-position: right 10px center; background-size: 12px 8px; background-repeat: no-repeat; } :root[data-theme="magna"] textarea { background: var(--ruling) left top 4px / 8px 26px repeat, #fffaea; background-attachment: local; line-height: 26px; padding-top: 4px; } :root[data-theme="magna"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: #fffaea; border: 1px solid var(--gules); border-radius: 2px; box-shadow: inset 0 0 0 2px #fffaea, inset 0 0 0 3px rgba(163, 34, 27, .4); } :root[data-theme="magna"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, var(--azure); border-color: var(--azure); box-shadow: inset 0 0 0 1px var(--or); } /* the totals: fields of heraldic color framed in gold */ :root[data-theme="magna"] .bignum { position: relative; color: var(--gold); border: 0; border-radius: 3px; background-color: #2a2420; background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .14)); box-shadow: 0 0 0 2px var(--or), 0 0 0 3px #5a3a10, var(--shadow-sm); } :root[data-theme="magna"] .bignum::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(243, 210, 122, .55); border-radius: 2px; pointer-events: none; } :root[data-theme="magna"] .bignum.c-pink { background-color: #8e1b1b; } :root[data-theme="magna"] .bignum.c-lime { background-color: #245428; } :root[data-theme="magna"] .bignum.c-cyan { background-color: #24408e; } :root[data-theme="magna"] .bignum.c-yellow { background-color: #7a4a18; } :root[data-theme="magna"] .bignum.c-violet { background-color: #5e3070; } :root[data-theme="magna"] .bignum.c-orange { background-color: #8a3e12; } :root[data-theme="magna"] .bignum.c-mute { background-color: #2a2420; color: var(--gold); } /* the big totals size their type to their tile; Grenze isn't monospace, so it doesn't trip Chrome's repainting */ :root[data-theme="magna"] .bn-value { font-family: var(--font-display); font-weight: 700; } :root[data-theme="magna"] .bn-label { font-family: var(--font-display); letter-spacing: .05em; } /* the rest: vellum tiles, red bands, the hourglass, a rubricated menu, a sealed writ */ :root[data-theme="magna"] :is(.tile, .deck-tile) { border: 1px solid #c8ad7c; border-radius: 3px; box-shadow: 0 4px 10px rgba(40, 30, 10, .35); } :root[data-theme="magna"] .tile:is(:hover, :focus-within), :root[data-theme="magna"] .deck-tile:hover { box-shadow: 0 0 0 3px var(--or), 0 6px 14px rgba(40, 30, 10, .4); } :root[data-theme="magna"] .deck-tile:hover { transform: translateY(-3px); } :root[data-theme="magna"] .ring { background: var(--well); } :root[data-theme="magna"] :is(.bar-track, .part-track, .cb-track, .fit-track, .progress, .stack-bar, .cast-bar) { background-color: #fffaea; border: 1px solid #a8885a; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(90, 60, 20, .15); } :root[data-theme="magna"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: linear-gradient(#8e1d1d, var(--valance)); color: #f6e7c4; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--or), var(--shadow-sm); } :root[data-theme="magna"] .job-banner:not(.good, .bad) .link-btn { color: var(--gold); } :root[data-theme="magna"] .job-banner:is(.good, .bad) { border: 0; border-radius: 3px; box-shadow: var(--shadow-sm); } :root[data-theme="magna"] .spinner { width: 22px; height: 28px; border: 0; border-radius: 0; background: var(--hourglass) center / 22px 28px no-repeat; animation: magna-turn 2.4s ease-in-out infinite; } @keyframes magna-turn { 0%, 70% { transform: rotate(0deg); } 90%, 100% { transform: rotate(180deg); } } :root[data-theme="magna"] .tools-list { background: var(--mottling) 0 0 / 400px 400px, var(--panel); border: 1px solid #c8ad7c; border-radius: 3px; padding: 10px 12px; gap: 0; box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgba(163, 34, 27, .45), 0 16px 32px rgba(40, 30, 10, .45); } :root[data-theme="magna"] .tools-list :is(a, button) { position: relative; background: transparent; border: 0; border-radius: 2px; box-shadow: none; color: var(--text); padding: 6px 8px 6px 26px; } :root[data-theme="magna"] .tools-list :is(a, button)::before { content: '¶' / ''; position: absolute; left: 8px; top: 5px; color: var(--rubric); font: 700 1rem var(--font-body); } :root[data-theme="magna"] .tools-list :is(a, button):nth-of-type(even)::before { color: #2f5fc0; } :root[data-theme="magna"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; } :root[data-theme="magna"] .tools-list :is(a, button) span { color: var(--muted); font-style: italic; } :root[data-theme="magna"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="magna"] .tools-list a[aria-current="page"] { background: var(--gold-leaf); color: #2a1a0a; outline: 0; } :root[data-theme="magna"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="magna"] .tools-list a[aria-current="page"] span { color: #4a3216; } :root[data-theme="magna"] .tools-sep { height: 0; margin: 6px 4px; border: 0; border-top: 1px solid rgba(163, 34, 27, .55); box-shadow: 0 2px 0 var(--panel), 0 3px 0 rgba(163, 34, 27, .35); } :root[data-theme="magna"] .toast { background: var(--seal) 12px 0 / 34px 48px no-repeat, var(--mottling) 0 0 / 400px 400px, var(--panel); color: var(--text); border: 1px solid #c8ad7c; border-radius: 3px; box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgba(163, 34, 27, .45), 0 12px 26px rgba(40, 30, 10, .45); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 14px 22px 14px 60px; min-height: 52px; } :root[data-theme="magna"] .site-footer { background: var(--mottling) 0 0 / 400px 400px, var(--panel); border: 1px solid #c8ad7c; border-radius: 3px; color: var(--muted); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgba(163, 34, 27, .4), var(--shadow-sm); } /* scroll bars: a red thumb, on the meadow's green for the page and on vellum inside panels */ :root[data-theme="magna"]::-webkit-scrollbar, :root[data-theme="magna"] ::-webkit-scrollbar { width: 13px; height: 13px; } :root[data-theme="magna"]::-webkit-scrollbar-track { background: #4f7a2f; } :root[data-theme="magna"] ::-webkit-scrollbar-track { background: var(--panel-2); } :root[data-theme="magna"]::-webkit-scrollbar-thumb, :root[data-theme="magna"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #b42a22, #8e1b1b); border: 3px solid transparent; border-radius: 7px; background-clip: padding-box; } /* ==== Habeas Corpus =============================================================================== The Great Writ, heard in a courtroom of the 1950s. The page is the walnut paneling of the court's law library, afternoon light falling through tall windows in slow shafts with dust drifting in them; along the bottom of the screen runs a bookcase of law reports in buckram and calf, gilt bands and spine labels, with a brass rail along its top where a rolling library ladder glides from end to end. The top bar is the bench, walnut over a brass rail, the name in gilt capitals; tabs are engraved brass nameplates, the open page's polished bright. Panels are pleading paper, the lines numbered down the left margin beside a double rule, each heading in engraved capitals after a section sign. Buttons are rubber-stamp impressions in blue ink and go is oxblood leather tooled in gilt; text boxes are typewritten form fields and a long one is a yellow legal pad. The totals are leather-bound volumes, each with its exhibit sticker; the More menu is a table of contents that highlights in yellow; a message arrives stamped FILED, a check box is ticked in red pen, the close button is a wax seal, and the busy sign is a gavel striking its block. Type is Cinzel and Special Elite, served with the app, with Century Schoolbook for text where it's installed. The phone's bars follow the walnut, so Settings counts this among the dark themes although its panels are light. */ :root[data-theme="habeas"] { --bg: #2a1a10; --bg-deep: #3b2416; --bg-blob: #2a1a10; --panel: #fbf7ea; --panel-2: #f3ecd8; --panel-3: #e9dfc4; --well: #fffdf6; --text: #1f1a14; --muted: #5b5143; --faint: #7d7262; --paper: #fffdf6; --paper-ink: #1f1a14; --pink: #db3d62; --lime: #3b8a2e; --cyan: #3f76c8; --violet: #8e63c9; --orange: #c8621c; --yellow: #9a7a1a; --mint: #13897a; --peach: #c4694a; --pink-text: #a8271e; --pink-soft: #8e1f17; --flat: #e9dfc4; --tile-uncommon: #eef1f4; --tile-rare: #f8efd4; --tile-mythic: #f8e3d6; --zebra: #f5eedb; --grid: #e6dcc2; --grid-2: #d3c6a6; --drop: #f3ecd8; --hatch: #e3d7b9; --tint-pink: #f6dcd6; --tint-magenta: #eedcea; --tint-green: #dfeccf; --legend-miss: #d3c6a6; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #c9bb9b; --line-thick: 2px solid #8a6a24; --shadow: 0 8px 22px rgba(10, 5, 2, .5); --shadow-sm: 0 3px 8px rgba(10, 5, 2, .38); --blob: 3px; --blob-sm: 3px; --pill: 3px; --font-display: Cinzel, 'Copperplate Gothic Bold', 'Perpetua Titling MT', Georgia, serif; --font-body: 'Century Schoolbook', 'Century Schoolbook L', 'TeX Gyre Schola', Georgia, 'Times New Roman', serif; --font-typewriter: 'Special Elite', 'Courier Prime', 'Courier New', Courier, monospace; --walnut: #3b2416; --walnut-dark: #24150c; --ink: #2a1d12; --ink-blue: #1f3f8a; --stamp-red: #b3261e; --oxblood: #6e1d17; --gilt: #f3dc96; --gilt-deep: #d8b45a; --rule: #d4a79c; --brass: linear-gradient(#f6e3a0, #d8b45a 40%, #b08a3a 68%, #e9cd7e); --bronze: linear-gradient(#c8a86c, #a3814a 45%, #84642f 72%, #b39459); --walnut-bar: linear-gradient(#4a2d1a, #3b2416 55%, #2a180d); /* two screw heads, one at each end of a nameplate */ --screws: radial-gradient(circle at 8px 50%, #4d3a1c 0 1.3px, #f6e2a4 1.5px 2.1px, transparent 2.5px), radial-gradient(circle at calc(100% - 8px) 50%, #4d3a1c 0 1.3px, #f6e2a4 1.5px 2.1px, transparent 2.5px); --walnut-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Crect width='260' height='320' fill='%233a2315'/%3E%3Cpath d='M117.6 0Q118.2 20.0 119.7 40Q117.3 60.0 117.7 80Q118.5 100.0 116.0 120Q117.7 140.0 118.3 160Q120.5 180.0 115.6 200Q115.7 220.0 115.6 240Q120.7 260.0 118.6 280Q113.0 300.0 117.6 320' fill='none' stroke='%23331d10' stroke-width='1.8' stroke-opacity='0.56'/%3E%3Cpath d='M160.0 0Q156.6 20.0 157.6 40Q160.3 60.0 157.8 80Q156.9 100.0 158.8 120Q155.3 140.0 159.9 160Q159.5 180.0 161.8 200Q160.2 220.0 160.7 240Q160.0 260.0 160.9 280Q159.6 300.0 160.0 320' fill='none' stroke='%234f301d' stroke-width='1.1' stroke-opacity='0.52'/%3E%3Cpath d='M242.2 0Q238.1 20.0 241.0 40Q244.8 60.0 242.3 80Q237.5 100.0 242.6 120Q238.3 140.0 240.3 160Q240.1 180.0 240.1 200Q237.4 220.0 243.2 240Q239.4 260.0 244.4 280Q237.8 300.0 242.2 320' fill='none' stroke='%23331d10' stroke-width='1.8' stroke-opacity='0.46'/%3E%3Cpath d='M19.0 0Q20.3 20.0 20.4 40Q16.7 60.0 16.9 80Q17.3 100.0 21.3 120Q21.6 140.0 17.1 160Q16.5 180.0 17.0 200Q14.6 220.0 20.5 240Q15.8 260.0 19.3 280Q18.5 300.0 19.0 320' fill='none' stroke='%232d1a0e' stroke-width='1.8' stroke-opacity='0.61'/%3E%3Cpath d='M109.0 0Q107.8 20.0 108.5 40Q113.9 60.0 106.5 80Q112.6 100.0 111.4 120Q109.9 140.0 111.5 160Q104.2 180.0 107.4 200Q114.0 220.0 109.5 240Q109.8 260.0 106.7 280Q105.5 300.0 109.0 320' fill='none' stroke='%23331d10' stroke-width='0.9' stroke-opacity='0.61'/%3E%3Cpath d='M85.5 0Q83.5 20.0 83.4 40Q81.4 60.0 85.9 80Q83.0 100.0 86.0 120Q84.2 140.0 85.3 160Q90.1 180.0 85.4 200Q86.3 220.0 87.4 240Q82.4 260.0 83.8 280Q89.6 300.0 85.5 320' fill='none' stroke='%232d1a0e' stroke-width='1.5' stroke-opacity='0.36'/%3E%3Cpath d='M163.5 0Q164.1 20.0 164.5 40Q162.4 60.0 163.4 80Q159.3 100.0 161.3 120Q159.6 140.0 163.6 160Q161.1 180.0 164.7 200Q162.5 220.0 163.1 240Q167.6 260.0 163.5 280Q163.7 300.0 163.5 320' fill='none' stroke='%2347291a' stroke-width='0.8' stroke-opacity='0.49'/%3E%3Cpath d='M169.9 0Q171.1 20.0 167.8 40Q167.0 60.0 172.0 80Q172.4 100.0 167.8 120Q169.0 140.0 168.7 160Q165.4 180.0 168.8 200Q170.2 220.0 172.3 240Q165.8 260.0 168.1 280Q169.4 300.0 169.9 320' fill='none' stroke='%234f301d' stroke-width='1.4' stroke-opacity='0.58'/%3E%3Cpath d='M152.0 0Q148.4 20.0 149.6 40Q147.1 60.0 154.0 80Q154.0 100.0 154.3 120Q147.2 140.0 152.6 160Q151.8 180.0 153.1 200Q150.1 220.0 154.5 240Q147.7 260.0 152.2 280Q154.3 300.0 152.0 320' fill='none' stroke='%232d1a0e' stroke-width='1.6' stroke-opacity='0.67'/%3E%3Cpath d='M91.5 0Q93.3 20.0 93.5 40Q95.2 60.0 91.1 80Q94.4 100.0 93.3 120Q92.2 140.0 92.1 160Q90.3 180.0 91.9 200Q92.6 220.0 89.4 240Q92.9 260.0 93.9 280Q95.3 300.0 91.5 320' fill='none' stroke='%234f301d' stroke-width='1.1' stroke-opacity='0.59'/%3E%3Cpath d='M151.0 0Q150.5 20.0 152.7 40Q146.9 60.0 152.3 80Q146.3 100.0 151.6 120Q150.9 140.0 149.7 160Q153.0 180.0 151.0 200Q152.2 220.0 153.2 240Q148.6 260.0 148.6 280Q149.1 300.0 151.0 320' fill='none' stroke='%232d1a0e' stroke-width='1.2' stroke-opacity='0.60'/%3E%3Cpath d='M89.1 0Q93.4 20.0 89.0 40Q86.5 60.0 88.6 80Q86.6 100.0 89.7 120Q92.1 140.0 90.3 160Q86.1 180.0 87.6 200Q86.3 220.0 91.2 240Q86.2 260.0 87.2 280Q87.6 300.0 89.1 320' fill='none' stroke='%2347291a' stroke-width='1.5' stroke-opacity='0.68'/%3E%3Cpath d='M72.0 0Q68.7 20.0 71.7 40Q69.7 60.0 70.5 80Q71.1 100.0 72.6 120Q71.9 140.0 71.0 160Q75.4 180.0 74.4 200Q71.5 220.0 69.8 240Q67.3 260.0 73.8 280Q67.4 300.0 72.0 320' fill='none' stroke='%234f301d' stroke-width='1.3' stroke-opacity='0.42'/%3E%3Cpath d='M205.8 0Q201.0 20.0 204.0 40Q205.3 60.0 203.4 80Q209.1 100.0 204.5 120Q202.2 140.0 203.5 160Q207.1 180.0 205.5 200Q207.1 220.0 206.6 240Q208.9 260.0 208.1 280Q207.6 300.0 205.8 320' fill='none' stroke='%232d1a0e' stroke-width='1.6' stroke-opacity='0.40'/%3E%3Cpath d='M185.7 0Q188.2 20.0 185.9 40Q181.1 60.0 184.3 80Q188.5 100.0 185.9 120Q190.2 140.0 185.7 160Q190.7 180.0 184.0 200Q189.2 220.0 186.7 240Q182.9 260.0 185.3 280Q189.6 300.0 185.7 320' fill='none' stroke='%23331d10' stroke-width='0.8' stroke-opacity='0.48'/%3E%3Cpath d='M162.6 0Q166.7 20.0 162.0 40Q163.3 60.0 164.5 80Q165.6 100.0 164.9 120Q162.3 140.0 163.4 160Q159.7 180.0 163.8 200Q165.8 220.0 163.4 240Q164.8 260.0 161.2 280Q166.6 300.0 162.6 320' fill='none' stroke='%2347291a' stroke-width='1.8' stroke-opacity='0.51'/%3E%3Cpath d='M205.6 0Q203.8 20.0 207.7 40Q209.2 60.0 204.8 80Q201.4 100.0 205.3 120Q206.1 140.0 206.9 160Q205.5 180.0 203.2 200Q208.7 220.0 203.4 240Q208.6 260.0 204.0 280Q204.0 300.0 205.6 320' fill='none' stroke='%232d1a0e' stroke-width='1.2' stroke-opacity='0.70'/%3E%3Cpath d='M234.1 0Q234.3 20.0 235.0 40Q233.5 60.0 236.0 80Q234.9 100.0 235.1 120Q236.7 140.0 233.8 160Q234.7 180.0 235.8 200Q234.8 220.0 232.5 240Q234.3 260.0 236.2 280Q231.7 300.0 234.1 320' fill='none' stroke='%23331d10' stroke-width='1.7' stroke-opacity='0.65'/%3E%3Cpath d='M158.5 0Q156.5 20.0 156.7 40Q158.9 60.0 157.3 80Q158.4 100.0 158.0 120Q154.6 140.0 156.0 160Q157.2 180.0 158.6 200Q153.9 220.0 160.5 240Q158.9 260.0 160.9 280Q154.7 300.0 158.5 320' fill='none' stroke='%2347291a' stroke-width='1.4' stroke-opacity='0.33'/%3E%3Cpath d='M140.1 0Q139.2 20.0 142.4 40Q144.3 60.0 138.9 80Q139.8 100.0 138.2 120Q139.4 140.0 141.6 160Q144.1 180.0 139.9 200Q138.2 220.0 138.5 240Q141.2 260.0 142.2 280Q136.4 300.0 140.1 320' fill='none' stroke='%2347291a' stroke-width='0.6' stroke-opacity='0.36'/%3E%3Cpath d='M3.1 0Q0.9 20.0 4.2 40Q0.5 60.0 3.1 80Q3.1 100.0 3.5 120Q6.6 140.0 3.7 160Q5.3 180.0 4.1 200Q6.9 220.0 0.7 240Q4.4 260.0 4.7 280Q4.2 300.0 3.1 320' fill='none' stroke='%232d1a0e' stroke-width='1.6' stroke-opacity='0.51'/%3E%3Cpath d='M56.8 0Q53.9 20.0 57.0 40Q57.6 60.0 55.0 80Q60.9 100.0 57.4 120Q55.2 140.0 55.2 160Q57.8 180.0 58.7 200Q53.7 220.0 58.2 240Q53.7 260.0 54.8 280Q60.7 300.0 56.8 320' fill='none' stroke='%232d1a0e' stroke-width='1.5' stroke-opacity='0.40'/%3E%3Cpath d='M25.2 0Q28.5 20.0 24.8 40Q28.1 60.0 23.4 80Q24.3 100.0 26.2 120Q20.4 140.0 23.7 160Q27.0 180.0 27.3 200Q29.9 220.0 23.3 240Q25.3 260.0 26.5 280Q25.3 300.0 25.2 320' fill='none' stroke='%232d1a0e' stroke-width='1.6' stroke-opacity='0.49'/%3E%3Cpath d='M6.3 0Q8.9 20.0 6.9 40Q10.4 60.0 6.2 80Q3.2 100.0 4.4 120Q3.0 140.0 4.6 160Q4.2 180.0 7.2 200Q7.1 220.0 4.5 240Q8.1 260.0 4.2 280Q2.3 300.0 6.3 320' fill='none' stroke='%23331d10' stroke-width='1.2' stroke-opacity='0.51'/%3E%3Cpath d='M111.8 0Q112.8 20.0 109.4 40Q113.8 60.0 113.5 80Q108.6 100.0 111.6 120Q114.2 140.0 111.3 160Q108.8 180.0 110.1 200Q111.9 220.0 109.4 240Q115.8 260.0 113.3 280Q113.9 300.0 111.8 320' fill='none' stroke='%23331d10' stroke-width='1.3' stroke-opacity='0.38'/%3E%3Cpath d='M152.0 0Q150.4 20.0 153.3 40Q149.8 60.0 150.1 80Q154.4 100.0 150.3 120Q156.3 140.0 150.2 160Q150.3 180.0 152.2 200Q150.7 220.0 151.7 240Q148.8 260.0 150.5 280Q148.8 300.0 152.0 320' fill='none' stroke='%234f301d' stroke-width='1.0' stroke-opacity='0.34'/%3E%3Crect x='26' y='30' width='208' height='260' fill='none' stroke='%235b3b23' stroke-width='2'/%3E%3Crect x='28.5' y='32.5' width='203' height='255' fill='none' stroke='%231a0e06' stroke-width='2'/%3E%3Cpath d='M30 34H230L214 50H46Z' fill='%235a3922'/%3E%3Cpath d='M30 34L46 50V270L30 286Z' fill='%234c2f1c'/%3E%3Cpath d='M30 286L46 270H214L230 286Z' fill='%2324140a'/%3E%3Cpath d='M230 34V286L214 270V50Z' fill='%232b180c'/%3E%3Cg transform='translate(46 50)'%3E%3Crect width='168' height='220' fill='%2340271a'/%3E%3Cpath d='M104.6 0Q107.1 19.0 106.1 38Q109.1 57.0 105.8 76Q108.9 95.0 102.3 114Q104.3 133.0 106.9 152Q106.1 171.0 106.7 190' fill='none' stroke='%234a2c1b' stroke-width='1.0' stroke-opacity='0.65'/%3E%3Cpath d='M64.0 0Q60.0 19.0 62.7 38Q66.3 57.0 63.5 76Q60.8 95.0 65.8 114Q62.9 133.0 65.3 152Q59.7 171.0 64.6 190' fill='none' stroke='%2333200f' stroke-width='0.8' stroke-opacity='0.30'/%3E%3Cpath d='M146.4 0Q143.5 19.0 145.0 38Q151.2 57.0 148.3 76Q144.3 95.0 148.7 114Q146.8 133.0 147.3 152Q143.4 171.0 148.6 190' fill='none' stroke='%234a2c1b' stroke-width='1.8' stroke-opacity='0.66'/%3E%3Cpath d='M50.2 0Q48.8 19.0 48.5 38Q46.7 57.0 48.0 76Q48.2 95.0 50.7 114Q45.2 133.0 51.1 152Q48.6 171.0 49.2 190' fill='none' stroke='%2333200f' stroke-width='1.2' stroke-opacity='0.43'/%3E%3Cpath d='M80.8 0Q82.9 19.0 78.6 38Q85.6 57.0 78.5 76Q83.3 95.0 82.6 114Q76.0 133.0 82.3 152Q79.5 171.0 81.2 190' fill='none' stroke='%234a2c1b' stroke-width='1.1' stroke-opacity='0.58'/%3E%3Cpath d='M104.8 0Q109.3 19.0 102.9 38Q102.2 57.0 106.4 76Q104.4 95.0 104.8 114Q108.7 133.0 103.5 152Q104.4 171.0 105.2 190' fill='none' stroke='%2333200f' stroke-width='1.6' stroke-opacity='0.31'/%3E%3Cpath d='M158.9 0Q154.8 19.0 158.1 38Q160.0 57.0 161.0 76Q157.3 95.0 161.0 114Q159.3 133.0 158.0 152Q157.1 171.0 157.3 190' fill='none' stroke='%234a2c1b' stroke-width='1.4' stroke-opacity='0.59'/%3E%3Cpath d='M52.0 0Q51.8 19.0 53.1 38Q47.8 57.0 52.5 76Q56.2 95.0 49.6 114Q54.4 133.0 51.2 152Q49.5 171.0 52.7 190' fill='none' stroke='%234a2c1b' stroke-width='0.7' stroke-opacity='0.67'/%3E%3Cpath d='M5.5 0Q5.4 19.0 7.2 38Q1.8 57.0 6.7 76Q10.0 95.0 6.1 114Q8.4 133.0 3.5 152Q4.8 171.0 3.7 190' fill='none' stroke='%2333200f' stroke-width='1.0' stroke-opacity='0.48'/%3E%3Cpath d='M167.9 0Q171.4 19.0 170.3 38Q167.4 57.0 167.8 76Q170.2 95.0 167.8 114Q165.8 133.0 167.4 152Q164.3 171.0 167.3 190' fill='none' stroke='%234a2c1b' stroke-width='1.4' stroke-opacity='0.50'/%3E%3Cpath d='M56.9 0Q52.8 19.0 55.7 38Q59.7 57.0 58.7 76Q55.5 95.0 58.3 114Q59.6 133.0 57.8 152Q58.5 171.0 58.2 190' fill='none' stroke='%2333200f' stroke-width='1.3' stroke-opacity='0.57'/%3E%3Cpath d='M140.3 0Q138.0 19.0 142.7 38Q142.5 57.0 142.6 76Q138.7 95.0 138.7 114Q143.8 133.0 140.2 152Q143.1 171.0 139.4 190' fill='none' stroke='%2333200f' stroke-width='1.2' stroke-opacity='0.63'/%3E%3C/g%3E%3C/svg%3E"); --walnut-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='320'%3E%3Cpath d='M61.9 0Q62.3 20.0 61.2 40Q62.9 60.0 62.5 80Q57.5 100.0 59.4 120Q65.2 140.0 60.7 160Q59.2 180.0 64.3 200Q61.6 220.0 63.6 240Q61.6 260.0 62.6 280Q58.4 300.0 61.9 320' fill='none' stroke='%2324140a' stroke-width='1.6' stroke-opacity='0.51'/%3E%3Cpath d='M192.7 0Q194.4 20.0 190.5 40Q195.3 60.0 193.2 80Q190.7 100.0 190.4 120Q196.4 140.0 192.6 160Q194.9 180.0 194.6 200Q194.9 220.0 194.8 240Q191.7 260.0 194.2 280Q192.2 300.0 192.7 320' fill='none' stroke='%2324140a' stroke-width='1.7' stroke-opacity='0.34'/%3E%3Cpath d='M35.4 0Q32.5 20.0 37.7 40Q34.7 60.0 36.0 80Q33.4 100.0 35.4 120Q34.2 140.0 34.6 160Q36.2 180.0 35.8 200Q39.4 220.0 36.3 240Q39.6 260.0 37.1 280Q40.3 300.0 35.4 320' fill='none' stroke='%2324140a' stroke-width='1.4' stroke-opacity='0.43'/%3E%3Cpath d='M140.9 0Q141.6 20.0 138.9 40Q142.4 60.0 141.5 80Q145.7 100.0 139.7 120Q137.1 140.0 140.8 160Q142.2 180.0 140.8 200Q139.3 220.0 138.7 240Q144.8 260.0 138.5 280Q140.1 300.0 140.9 320' fill='none' stroke='%232e1b0f' stroke-width='1.6' stroke-opacity='0.32'/%3E%3Cpath d='M159.8 0Q155.2 20.0 160.9 40Q158.1 60.0 161.7 80Q164.6 100.0 159.8 120Q164.8 140.0 158.8 160Q155.5 180.0 160.3 200Q155.1 220.0 158.3 240Q158.9 260.0 160.3 280Q156.3 300.0 159.8 320' fill='none' stroke='%235a3820' stroke-width='1.8' stroke-opacity='0.44'/%3E%3Cpath d='M93.7 0Q90.0 20.0 95.5 40Q92.4 60.0 95.5 80Q92.5 100.0 95.5 120Q95.5 140.0 91.7 160Q98.4 180.0 95.2 200Q91.4 220.0 94.3 240Q95.8 260.0 95.8 280Q93.0 300.0 93.7 320' fill='none' stroke='%234a2d1a' stroke-width='1.2' stroke-opacity='0.52'/%3E%3Cpath d='M3.0 0Q2.1 20.0 3.4 40Q-1.8 60.0 3.6 80Q4.3 100.0 0.8 120Q4.3 140.0 2.8 160Q4.8 180.0 2.2 200Q5.0 220.0 4.2 240Q-1.8 260.0 0.8 280Q4.7 300.0 3.0 320' fill='none' stroke='%234a2d1a' stroke-width='0.9' stroke-opacity='0.48'/%3E%3Cpath d='M154.1 0Q152.3 20.0 153.4 40Q152.2 60.0 153.4 80Q155.1 100.0 153.1 120Q152.9 140.0 155.5 160Q149.4 180.0 154.4 200Q156.4 220.0 153.1 240Q151.3 260.0 155.6 280Q151.5 300.0 154.1 320' fill='none' stroke='%2324140a' stroke-width='1.4' stroke-opacity='0.56'/%3E%3Cpath d='M25.2 0Q26.2 20.0 27.5 40Q27.0 60.0 23.8 80Q28.3 100.0 27.5 120Q21.0 140.0 26.4 160Q22.4 180.0 25.6 200Q22.9 220.0 26.7 240Q20.6 260.0 27.5 280Q23.4 300.0 25.2 320' fill='none' stroke='%2324140a' stroke-width='1.6' stroke-opacity='0.44'/%3E%3Cpath d='M215.3 0Q211.1 20.0 215.9 40Q216.2 60.0 214.9 80Q215.5 100.0 217.0 120Q214.9 140.0 215.9 160Q213.2 180.0 215.6 200Q210.6 220.0 214.8 240Q212.3 260.0 215.2 280Q218.6 300.0 215.3 320' fill='none' stroke='%232e1b0f' stroke-width='1.3' stroke-opacity='0.69'/%3E%3Cpath d='M186.5 0Q181.8 20.0 186.3 40Q189.0 60.0 187.7 80Q191.1 100.0 186.7 120Q190.4 140.0 188.3 160Q190.1 180.0 188.8 200Q182.7 220.0 185.2 240Q181.8 260.0 188.0 280Q186.6 300.0 186.5 320' fill='none' stroke='%2324140a' stroke-width='1.7' stroke-opacity='0.66'/%3E%3Cpath d='M150.0 0Q145.1 20.0 151.2 40Q146.7 60.0 149.0 80Q151.6 100.0 150.1 120Q149.1 140.0 152.2 160Q151.1 180.0 149.2 200Q147.5 220.0 151.8 240Q149.8 260.0 151.4 280Q148.5 300.0 150.0 320' fill='none' stroke='%2324140a' stroke-width='0.7' stroke-opacity='0.66'/%3E%3Cpath d='M31.0 0Q28.4 20.0 29.9 40Q34.9 60.0 29.1 80Q35.2 100.0 30.9 120Q31.7 140.0 30.5 160Q33.6 180.0 29.7 200Q32.2 220.0 31.1 240Q26.5 260.0 30.1 280Q34.2 300.0 31.0 320' fill='none' stroke='%235a3820' stroke-width='1.5' stroke-opacity='0.32'/%3E%3Cpath d='M13.0 0Q12.8 20.0 10.6 40Q15.1 60.0 13.0 80Q12.9 100.0 11.2 120Q8.7 140.0 12.4 160Q11.9 180.0 12.0 200Q10.6 220.0 15.4 240Q12.2 260.0 11.1 280Q8.0 300.0 13.0 320' fill='none' stroke='%232e1b0f' stroke-width='1.6' stroke-opacity='0.53'/%3E%3Cpath d='M11.2 0Q10.8 20.0 11.9 40Q11.6 60.0 11.9 80Q6.6 100.0 13.1 120Q6.7 140.0 11.8 160Q13.8 180.0 10.2 200Q15.7 220.0 10.8 240Q6.3 260.0 9.8 280Q8.9 300.0 11.2 320' fill='none' stroke='%235a3820' stroke-width='1.6' stroke-opacity='0.39'/%3E%3Cpath d='M33.9 0Q29.2 20.0 33.0 40Q38.6 60.0 34.2 80Q37.6 100.0 32.0 120Q35.8 140.0 36.1 160Q36.2 180.0 35.6 200Q34.2 220.0 33.3 240Q30.0 260.0 33.0 280Q34.2 300.0 33.9 320' fill='none' stroke='%235a3820' stroke-width='1.2' stroke-opacity='0.39'/%3E%3Cpath d='M101.1 0Q101.3 20.0 101.4 40Q102.6 60.0 100.4 80Q104.2 100.0 100.3 120Q104.6 140.0 98.7 160Q97.2 180.0 101.0 200Q103.0 220.0 100.0 240Q99.0 260.0 99.0 280Q106.0 300.0 101.1 320' fill='none' stroke='%2324140a' stroke-width='0.7' stroke-opacity='0.60'/%3E%3Cpath d='M243.0 0Q238.6 20.0 242.1 40Q243.6 60.0 244.6 80Q240.4 100.0 241.4 120Q240.5 140.0 243.6 160Q245.5 180.0 242.5 200Q241.7 220.0 242.5 240Q241.5 260.0 242.6 280Q238.8 300.0 243.0 320' fill='none' stroke='%2324140a' stroke-width='1.8' stroke-opacity='0.47'/%3E%3Cpath d='M194.3 0Q190.9 20.0 195.3 40Q196.9 60.0 195.2 80Q194.5 100.0 194.2 120Q195.8 140.0 196.3 160Q190.8 180.0 192.3 200Q196.8 220.0 196.4 240Q194.5 260.0 194.0 280Q196.5 300.0 194.3 320' fill='none' stroke='%2324140a' stroke-width='0.8' stroke-opacity='0.60'/%3E%3Cpath d='M38.1 0Q38.3 20.0 40.3 40Q41.6 60.0 38.3 80Q40.9 100.0 39.0 120Q41.7 140.0 38.6 160Q39.0 180.0 40.5 200Q42.0 220.0 37.1 240Q35.8 260.0 39.6 280Q35.1 300.0 38.1 320' fill='none' stroke='%234a2d1a' stroke-width='0.9' stroke-opacity='0.49'/%3E%3Cpath d='M224.6 0Q223.8 20.0 225.6 40Q226.6 60.0 223.1 80Q225.4 100.0 226.6 120Q226.1 140.0 222.2 160Q229.5 180.0 222.5 200Q229.1 220.0 226.0 240Q228.4 260.0 222.3 280Q228.7 300.0 224.6 320' fill='none' stroke='%2324140a' stroke-width='1.4' stroke-opacity='0.61'/%3E%3Cpath d='M18.0 0Q15.2 20.0 16.8 40Q21.9 60.0 19.4 80Q14.4 100.0 18.6 120Q19.8 140.0 15.7 160Q22.3 180.0 16.4 200Q13.5 220.0 16.4 240Q13.9 260.0 19.5 280Q14.2 300.0 18.0 320' fill='none' stroke='%234a2d1a' stroke-width='1.6' stroke-opacity='0.42'/%3E%3Cpath d='M92.7 0Q93.5 20.0 93.6 40Q87.8 60.0 91.9 80Q92.1 100.0 92.7 120Q89.8 140.0 93.2 160Q97.3 180.0 92.2 200Q93.2 220.0 90.8 240Q90.5 260.0 93.6 280Q88.9 300.0 92.7 320' fill='none' stroke='%234a2d1a' stroke-width='0.7' stroke-opacity='0.68'/%3E%3Cpath d='M97.3 0Q100.0 20.0 98.6 40Q95.3 60.0 98.2 80Q98.8 100.0 98.8 120Q95.0 140.0 98.6 160Q101.9 180.0 98.2 200Q97.7 220.0 95.4 240Q97.2 260.0 96.6 280Q99.5 300.0 97.3 320' fill='none' stroke='%2324140a' stroke-width='1.4' stroke-opacity='0.59'/%3E%3Cpath d='M38.9 0Q37.6 20.0 41.0 40Q38.4 60.0 36.9 80Q39.5 100.0 41.0 120Q40.3 140.0 39.6 160Q38.1 180.0 37.9 200Q35.7 220.0 38.8 240Q41.7 260.0 39.9 280Q35.0 300.0 38.9 320' fill='none' stroke='%2324140a' stroke-width='1.5' stroke-opacity='0.52'/%3E%3Cpath d='M192.3 0Q190.9 20.0 191.1 40Q191.1 60.0 194.2 80Q187.7 100.0 192.3 120Q189.8 140.0 193.7 160Q190.8 180.0 191.5 200Q191.3 220.0 192.5 240Q195.0 260.0 191.6 280Q195.8 300.0 192.3 320' fill='none' stroke='%235a3820' stroke-width='0.8' stroke-opacity='0.54'/%3E%3Cpath d='M177.2 0Q177.8 20.0 179.2 40Q173.3 60.0 178.2 80Q177.9 100.0 178.0 120Q176.1 140.0 179.6 160Q173.5 180.0 177.7 200Q180.8 220.0 178.7 240Q177.6 260.0 175.5 280Q174.0 300.0 177.2 320' fill='none' stroke='%234a2d1a' stroke-width='1.0' stroke-opacity='0.42'/%3E%3Cpath d='M219.0 0Q218.4 20.0 218.5 40Q222.1 60.0 218.1 80Q223.1 100.0 218.0 120Q219.0 140.0 219.1 160Q221.1 180.0 221.0 200Q220.7 220.0 216.6 240Q215.9 260.0 219.7 280Q215.1 300.0 219.0 320' fill='none' stroke='%2324140a' stroke-width='1.2' stroke-opacity='0.51'/%3E%3Cpath d='M119.7 0Q116.7 20.0 119.9 40Q115.1 60.0 119.7 80Q121.2 100.0 119.5 120Q120.4 140.0 122.0 160Q123.7 180.0 117.9 200Q122.7 220.0 120.4 240Q115.2 260.0 119.0 280Q117.1 300.0 119.7 320' fill='none' stroke='%235a3820' stroke-width='1.2' stroke-opacity='0.31'/%3E%3Cpath d='M88.3 0Q86.6 20.0 87.5 40Q90.2 60.0 86.2 80Q91.7 100.0 89.7 120Q83.6 140.0 86.2 160Q93.2 180.0 90.8 200Q85.4 220.0 86.1 240Q85.3 260.0 89.3 280Q85.5 300.0 88.3 320' fill='none' stroke='%234a2d1a' stroke-width='0.7' stroke-opacity='0.32'/%3E%3C/svg%3E"); --bookcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190'%3E%3Cdefs%3E%3ClinearGradient id='brass' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e3a0'/%3E%3Cstop offset='.45' stop-color='%23d8b45a'/%3E%3Cstop offset='1' stop-color='%238a6a24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='20' width='1200' height='150' fill='%231a0e06'/%3E%3Crect x='8' y='63' width='21' height='107' fill='%236b4224'/%3E%3Crect x='8' y='63' width='1.6' height='107' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='26.8' y='63' width='2.2' height='107' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='8' y='63' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='9' y='70' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='9' y='73' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='9' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='9' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='10.5' y='79' width='16' height='15' fill='%231b1512'/%3E%3Crect x='10.5' y='98' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='13' y='84' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='14' y='88' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='15.5' y='102' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='15.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='29.5' y='68' width='27' height='102' fill='%236b4224'/%3E%3Crect x='29.5' y='68' width='1.6' height='102' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='54.3' y='68' width='2.2' height='102' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='29.5' y='68' width='27' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='30.5' y='75' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='30.5' y='78' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='30.5' y='157' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='30.5' y='160' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='32.0' y='84' width='22' height='15' fill='%231b1512'/%3E%3Crect x='32.0' y='103' width='22' height='10' fill='%238e1f17'/%3E%3Crect x='34.5' y='89' width='17' height='1.4' fill='%23f3dc96'/%3E%3Crect x='35.5' y='93' width='15' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='40.0' y='107' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='39.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='57.5' y='34' width='21' height='136' fill='%236b4224'/%3E%3Crect x='57.5' y='34' width='1.6' height='136' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='76.3' y='34' width='2.2' height='136' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='57.5' y='34' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='58.5' y='41' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='58.5' y='44' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='58.5' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='58.5' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='60.0' y='50' width='16' height='15' fill='%231b1512'/%3E%3Crect x='60.0' y='69' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='62.5' y='55' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='63.5' y='59' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='65.0' y='73' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='64.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='79.0' y='39' width='22' height='131' fill='%236b4224'/%3E%3Crect x='79.0' y='39' width='1.6' height='131' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='98.8' y='39' width='2.2' height='131' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='79.0' y='39' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='80.0' y='46' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='80.0' y='49' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='80.0' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='80.0' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='81.5' y='55' width='17' height='15' fill='%231b1512'/%3E%3Crect x='81.5' y='74' width='17' height='10' fill='%238e1f17'/%3E%3Crect x='84.0' y='60' width='12' height='1.4' fill='%23f3dc96'/%3E%3Crect x='85.0' y='64' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='87.0' y='78' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='86.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='101.0' y='54' width='25' height='116' fill='%236b4224'/%3E%3Crect x='101.0' y='54' width='1.6' height='116' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='123.8' y='54' width='2.2' height='116' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='101.0' y='54' width='25' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='102.0' y='61' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='102.0' y='64' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='102.0' y='157' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='102.0' y='160' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='103.5' y='70' width='20' height='15' fill='%231b1512'/%3E%3Crect x='103.5' y='89' width='20' height='10' fill='%238e1f17'/%3E%3Crect x='106.0' y='75' width='15' height='1.4' fill='%23f3dc96'/%3E%3Crect x='107.0' y='79' width='13' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='110.5' y='93' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='110.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='126.0' y='69' width='21' height='101' fill='%236b4224'/%3E%3Crect x='126.0' y='69' width='1.6' height='101' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='144.8' y='69' width='2.2' height='101' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='126.0' y='69' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='127.0' y='76' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='127.0' y='79' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='127.0' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='127.0' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='128.5' y='85' width='16' height='15' fill='%231b1512'/%3E%3Crect x='128.5' y='104' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='131.0' y='90' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='132.0' y='94' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='133.5' y='108' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='133.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='147.0' y='58' width='26' height='112' fill='%236b4224'/%3E%3Crect x='147.0' y='58' width='1.6' height='112' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='170.8' y='58' width='2.2' height='112' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='147.0' y='58' width='26' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='148.0' y='65' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='148.0' y='68' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='148.0' y='157' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='148.0' y='160' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='149.5' y='74' width='21' height='15' fill='%231b1512'/%3E%3Crect x='149.5' y='93' width='21' height='10' fill='%238e1f17'/%3E%3Crect x='152.0' y='79' width='16' height='1.4' fill='%23f3dc96'/%3E%3Crect x='153.0' y='83' width='14' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='157.0' y='97' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='156.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Cg transform='rotate(-9 187.5 170)'%3E%3Crect x='187.5' y='55' width='19' height='115' fill='%236a1b16'/%3E%3Crect x='187.5' y='55' width='1.6' height='115' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='204.3' y='55' width='2.2' height='115' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='187.5' y='55' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='188.5' y='62' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='188.5' y='65' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='188.5' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='188.5' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='191.5' y='75' width='11' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='192.5' y='79' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M197.0 86l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='193.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3C/g%3E%3Crect x='210.5' y='61' width='20' height='109' fill='%236a1b16'/%3E%3Crect x='210.5' y='61' width='1.6' height='109' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='228.3' y='61' width='2.2' height='109' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='210.5' y='61' width='20' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='211.5' y='68' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='211.5' y='71' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='211.5' y='157' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='211.5' y='160' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='214.5' y='81' width='12' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='215.5' y='85' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M220.5 92l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='217.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='230.5' y='47' width='21' height='123' fill='%236a1b16'/%3E%3Crect x='230.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='249.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='230.5' y='47' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='231.5' y='54' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='231.5' y='57' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='231.5' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='231.5' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='234.5' y='67' width='13' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='235.5' y='71' width='11' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M241.0 78l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='237.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='252.0' y='36' width='23' height='134' fill='%236a1b16'/%3E%3Crect x='252.0' y='36' width='1.6' height='134' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='272.8' y='36' width='2.2' height='134' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='252.0' y='36' width='23' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='253.0' y='43' width='21' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='253.0' y='46' width='21' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='253.0' y='157' width='21' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='253.0' y='160' width='21' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='256.0' y='56' width='15' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='257.0' y='60' width='13' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M263.5 67l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='260.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Cg transform='rotate(-9 289.0 170)'%3E%3Crect x='289.0' y='64' width='16' height='106' fill='%231f1a17'/%3E%3Crect x='289.0' y='64' width='1.6' height='106' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='302.8' y='64' width='2.2' height='106' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='289.0' y='64' width='16' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='290.0' y='71' width='14' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='290.0' y='74' width='14' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='290.0' y='157' width='14' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='290.0' y='160' width='14' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='293.0' y='84' width='8' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='294.0' y='88' width='6' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M297.0 95l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='293.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3C/g%3E%3Crect x='309.0' y='45' width='24' height='125' fill='%236a1b16'/%3E%3Crect x='309.0' y='45' width='1.6' height='125' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='330.8' y='45' width='2.2' height='125' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='309.0' y='45' width='24' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='310.0' y='52' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='310.0' y='55' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='310.0' y='157' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='310.0' y='160' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='313.0' y='65' width='16' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='314.0' y='69' width='14' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M321.0 76l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='317.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='333.5' y='53' width='25' height='117' fill='%236a1b16'/%3E%3Crect x='333.5' y='53' width='1.6' height='117' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='356.3' y='53' width='2.2' height='117' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='333.5' y='53' width='25' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='334.5' y='60' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='334.5' y='63' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='334.5' y='157' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='334.5' y='160' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='337.5' y='73' width='17' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='338.5' y='77' width='15' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M346.0 84l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='342.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='359.5' y='42' width='27' height='128' fill='%236a1b16'/%3E%3Crect x='359.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='384.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='359.5' y='42' width='27' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='360.5' y='49' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='360.5' y='52' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='360.5' y='157' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='360.5' y='160' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='363.5' y='62' width='19' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='364.5' y='66' width='17' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M373.0 73l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='369.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='386.5' y='63' width='18' height='107' fill='%236a1b16'/%3E%3Crect x='386.5' y='63' width='1.6' height='107' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='402.3' y='63' width='2.2' height='107' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='386.5' y='63' width='18' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='387.5' y='70' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='387.5' y='73' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='387.5' y='157' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='387.5' y='160' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='390.5' y='83' width='10' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='391.5' y='87' width='8' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M395.5 94l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='392.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='408.0' y='47' width='22' height='123' fill='%23b08546'/%3E%3Crect x='408.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='427.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='408.0' y='47' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='409.0' y='54' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='409.0' y='57' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='409.0' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='409.0' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='410.5' y='63' width='17' height='15' fill='%231b1512'/%3E%3Crect x='410.5' y='82' width='17' height='10' fill='%238e1f17'/%3E%3Crect x='413.0' y='68' width='12' height='1.4' fill='%23f3dc96'/%3E%3Crect x='414.0' y='72' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='416.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='415.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='430.5' y='47' width='20' height='123' fill='%23b08546'/%3E%3Crect x='430.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='448.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='430.5' y='47' width='20' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='431.5' y='54' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='431.5' y='57' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='431.5' y='157' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='431.5' y='160' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='433.0' y='63' width='15' height='15' fill='%231b1512'/%3E%3Crect x='433.0' y='82' width='15' height='10' fill='%238e1f17'/%3E%3Crect x='435.5' y='68' width='10' height='1.4' fill='%23f3dc96'/%3E%3Crect x='436.5' y='72' width='8' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='437.5' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='437.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='450.5' y='47' width='19' height='123' fill='%23b08546'/%3E%3Crect x='450.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='467.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='450.5' y='47' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='451.5' y='54' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='451.5' y='57' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='451.5' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='451.5' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='453.0' y='63' width='14' height='15' fill='%231b1512'/%3E%3Crect x='453.0' y='82' width='14' height='10' fill='%238e1f17'/%3E%3Crect x='455.5' y='68' width='9' height='1.4' fill='%23f3dc96'/%3E%3Crect x='456.5' y='72' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='457.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='456.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='470.5' y='47' width='17' height='123' fill='%23b08546'/%3E%3Crect x='470.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='485.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='470.5' y='47' width='17' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='471.5' y='54' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='471.5' y='57' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='471.5' y='157' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='471.5' y='160' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='473.0' y='63' width='12' height='15' fill='%231b1512'/%3E%3Crect x='473.0' y='82' width='12' height='10' fill='%238e1f17'/%3E%3Crect x='475.5' y='68' width='7' height='1.4' fill='%23f3dc96'/%3E%3Crect x='476.5' y='72' width='5' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='476.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='475.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='487.5' y='47' width='21' height='123' fill='%23b08546'/%3E%3Crect x='487.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='506.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='487.5' y='47' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='488.5' y='54' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='488.5' y='57' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='488.5' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='488.5' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='490.0' y='63' width='16' height='15' fill='%231b1512'/%3E%3Crect x='490.0' y='82' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='492.5' y='68' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='493.5' y='72' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='495.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='494.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='509.0' y='47' width='20' height='123' fill='%23b08546'/%3E%3Crect x='509.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='526.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='509.0' y='47' width='20' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='510.0' y='54' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='510.0' y='57' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='510.0' y='157' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='510.0' y='160' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='511.5' y='63' width='15' height='15' fill='%231b1512'/%3E%3Crect x='511.5' y='82' width='15' height='10' fill='%238e1f17'/%3E%3Crect x='514.0' y='68' width='10' height='1.4' fill='%23f3dc96'/%3E%3Crect x='515.0' y='72' width='8' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='516.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='515.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='530.0' y='47' width='19' height='123' fill='%23b08546'/%3E%3Crect x='530.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='546.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='530.0' y='47' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='531.0' y='54' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='531.0' y='57' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='531.0' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='531.0' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='532.5' y='63' width='14' height='15' fill='%231b1512'/%3E%3Crect x='532.5' y='82' width='14' height='10' fill='%238e1f17'/%3E%3Crect x='535.0' y='68' width='9' height='1.4' fill='%23f3dc96'/%3E%3Crect x='536.0' y='72' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='536.5' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='536.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='549.0' y='47' width='18' height='123' fill='%23b08546'/%3E%3Crect x='549.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='564.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='549.0' y='47' width='18' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='550.0' y='54' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='550.0' y='57' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='550.0' y='157' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='550.0' y='160' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='551.5' y='63' width='13' height='15' fill='%231b1512'/%3E%3Crect x='551.5' y='82' width='13' height='10' fill='%238e1f17'/%3E%3Crect x='554.0' y='68' width='8' height='1.4' fill='%23f3dc96'/%3E%3Crect x='555.0' y='72' width='6' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='555.0' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='554.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='567.0' y='47' width='17' height='123' fill='%23b08546'/%3E%3Crect x='567.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='581.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='567.0' y='47' width='17' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='568.0' y='54' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='568.0' y='57' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='568.0' y='157' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='568.0' y='160' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='569.5' y='63' width='12' height='15' fill='%231b1512'/%3E%3Crect x='569.5' y='82' width='12' height='10' fill='%238e1f17'/%3E%3Crect x='572.0' y='68' width='7' height='1.4' fill='%23f3dc96'/%3E%3Crect x='573.0' y='72' width='5' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='572.5' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='572.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='584.0' y='47' width='21' height='123' fill='%23b08546'/%3E%3Crect x='584.0' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='602.8' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='584.0' y='47' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='585.0' y='54' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='585.0' y='57' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='585.0' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='585.0' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='586.5' y='63' width='16' height='15' fill='%231b1512'/%3E%3Crect x='586.5' y='82' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='589.0' y='68' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='590.0' y='72' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='591.5' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='591.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='605.5' y='47' width='18' height='123' fill='%23b08546'/%3E%3Crect x='605.5' y='47' width='1.6' height='123' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='621.3' y='47' width='2.2' height='123' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='605.5' y='47' width='18' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='606.5' y='54' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='606.5' y='57' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='606.5' y='157' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='606.5' y='160' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='608.0' y='63' width='13' height='15' fill='%231b1512'/%3E%3Crect x='608.0' y='82' width='13' height='10' fill='%238e1f17'/%3E%3Crect x='610.5' y='68' width='8' height='1.4' fill='%23f3dc96'/%3E%3Crect x='611.5' y='72' width='6' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='611.5' y='86' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='611.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='625.5' y='42' width='22' height='128' fill='%23b08546'/%3E%3Crect x='625.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='645.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='625.5' y='42' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='626.5' y='49' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='626.5' y='52' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='626.5' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='626.5' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='628.0' y='58' width='17' height='15' fill='%231b1512'/%3E%3Crect x='628.0' y='77' width='17' height='10' fill='%238e1f17'/%3E%3Crect x='630.5' y='63' width='12' height='1.4' fill='%23f3dc96'/%3E%3Crect x='631.5' y='67' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='633.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='633.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='647.5' y='42' width='19' height='128' fill='%23b08546'/%3E%3Crect x='647.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='664.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='647.5' y='42' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='648.5' y='49' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='648.5' y='52' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='648.5' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='648.5' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='650.0' y='58' width='14' height='15' fill='%231b1512'/%3E%3Crect x='650.0' y='77' width='14' height='10' fill='%238e1f17'/%3E%3Crect x='652.5' y='63' width='9' height='1.4' fill='%23f3dc96'/%3E%3Crect x='653.5' y='67' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='654.0' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='653.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='667.0' y='42' width='19' height='128' fill='%23b08546'/%3E%3Crect x='667.0' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='683.8' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='667.0' y='42' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='668.0' y='49' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='668.0' y='52' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='668.0' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='668.0' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='669.5' y='58' width='14' height='15' fill='%231b1512'/%3E%3Crect x='669.5' y='77' width='14' height='10' fill='%238e1f17'/%3E%3Crect x='672.0' y='63' width='9' height='1.4' fill='%23f3dc96'/%3E%3Crect x='673.0' y='67' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='673.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='673.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='686.0' y='42' width='18' height='128' fill='%23b08546'/%3E%3Crect x='686.0' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='701.8' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='686.0' y='42' width='18' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='687.0' y='49' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='687.0' y='52' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='687.0' y='157' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='687.0' y='160' width='16' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='688.5' y='58' width='13' height='15' fill='%231b1512'/%3E%3Crect x='688.5' y='77' width='13' height='10' fill='%238e1f17'/%3E%3Crect x='691.0' y='63' width='8' height='1.4' fill='%23f3dc96'/%3E%3Crect x='692.0' y='67' width='6' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='692.0' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='691.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='704.0' y='42' width='21' height='128' fill='%23b08546'/%3E%3Crect x='704.0' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='722.8' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='704.0' y='42' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='705.0' y='49' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='705.0' y='52' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='705.0' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='705.0' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='706.5' y='58' width='16' height='15' fill='%231b1512'/%3E%3Crect x='706.5' y='77' width='16' height='10' fill='%238e1f17'/%3E%3Crect x='709.0' y='63' width='11' height='1.4' fill='%23f3dc96'/%3E%3Crect x='710.0' y='67' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='711.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='711.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='725.5' y='42' width='19' height='128' fill='%23b08546'/%3E%3Crect x='725.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='742.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='725.5' y='42' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='726.5' y='49' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='726.5' y='52' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='726.5' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='726.5' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='728.0' y='58' width='14' height='15' fill='%231b1512'/%3E%3Crect x='728.0' y='77' width='14' height='10' fill='%238e1f17'/%3E%3Crect x='730.5' y='63' width='9' height='1.4' fill='%23f3dc96'/%3E%3Crect x='731.5' y='67' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='732.0' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='731.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='744.5' y='42' width='20' height='128' fill='%23b08546'/%3E%3Crect x='744.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='762.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='744.5' y='42' width='20' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='745.5' y='49' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='745.5' y='52' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='745.5' y='157' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='745.5' y='160' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='747.0' y='58' width='15' height='15' fill='%231b1512'/%3E%3Crect x='747.0' y='77' width='15' height='10' fill='%238e1f17'/%3E%3Crect x='749.5' y='63' width='10' height='1.4' fill='%23f3dc96'/%3E%3Crect x='750.5' y='67' width='8' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='751.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='751.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='765.5' y='42' width='22' height='128' fill='%23b08546'/%3E%3Crect x='765.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='785.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='765.5' y='42' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='766.5' y='49' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='766.5' y='52' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='766.5' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='766.5' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='768.0' y='58' width='17' height='15' fill='%231b1512'/%3E%3Crect x='768.0' y='77' width='17' height='10' fill='%238e1f17'/%3E%3Crect x='770.5' y='63' width='12' height='1.4' fill='%23f3dc96'/%3E%3Crect x='771.5' y='67' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='773.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='773.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='787.5' y='42' width='22' height='128' fill='%23b08546'/%3E%3Crect x='787.5' y='42' width='1.6' height='128' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='807.3' y='42' width='2.2' height='128' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='787.5' y='42' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='788.5' y='49' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='788.5' y='52' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='788.5' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='788.5' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='790.0' y='58' width='17' height='15' fill='%231b1512'/%3E%3Crect x='790.0' y='77' width='17' height='10' fill='%238e1f17'/%3E%3Crect x='792.5' y='63' width='12' height='1.4' fill='%23f3dc96'/%3E%3Crect x='793.5' y='67' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='795.5' y='81' width='6' height='1.4' fill='%23f3dc96'/%3E%3Crect x='795.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='813.0' y='57' width='19' height='113' fill='%235a1f2a'/%3E%3Crect x='813.0' y='57' width='1.6' height='113' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='829.8' y='57' width='2.2' height='113' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='813.0' y='57' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='814.0' y='64' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='814.0' y='67' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='814.0' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='814.0' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='817.0' y='77' width='11' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='818.0' y='81' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M822.5 88l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='819.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='832.0' y='59' width='22' height='111' fill='%235a1f2a'/%3E%3Crect x='832.0' y='59' width='1.6' height='111' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='851.8' y='59' width='2.2' height='111' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='832.0' y='59' width='22' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='833.0' y='66' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='833.0' y='69' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='833.0' y='157' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='833.0' y='160' width='20' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='836.0' y='79' width='14' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='837.0' y='83' width='12' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M843.0 90l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='839.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='854.5' y='33' width='27' height='137' fill='%235a1f2a'/%3E%3Crect x='854.5' y='33' width='1.6' height='137' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='879.3' y='33' width='2.2' height='137' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='854.5' y='33' width='27' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='855.5' y='40' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='855.5' y='43' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='855.5' y='157' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='855.5' y='160' width='25' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='858.5' y='53' width='19' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='859.5' y='57' width='17' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M868.0 64l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='864.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='881.5' y='70' width='24' height='100' fill='%235a1f2a'/%3E%3Crect x='881.5' y='70' width='1.6' height='100' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='903.3' y='70' width='2.2' height='100' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='881.5' y='70' width='24' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='882.5' y='77' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='882.5' y='80' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='882.5' y='157' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='882.5' y='160' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='885.5' y='90' width='16' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='886.5' y='94' width='14' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M893.5 101l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='890.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='905.5' y='57' width='19' height='113' fill='%235a1f2a'/%3E%3Crect x='905.5' y='57' width='1.6' height='113' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='922.3' y='57' width='2.2' height='113' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='905.5' y='57' width='19' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='906.5' y='64' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='906.5' y='67' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='906.5' y='157' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='906.5' y='160' width='17' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='909.5' y='77' width='11' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='910.5' y='81' width='9' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M915.0 88l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='911.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='924.5' y='65' width='26' height='105' fill='%235a1f2a'/%3E%3Crect x='924.5' y='65' width='1.6' height='105' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='948.3' y='65' width='2.2' height='105' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='924.5' y='65' width='26' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='925.5' y='72' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='925.5' y='75' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='925.5' y='157' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='925.5' y='160' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='928.5' y='85' width='18' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='929.5' y='89' width='16' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M937.5 96l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='934.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='953.5' y='57' width='24' height='113' fill='%236a1b16'/%3E%3Crect x='953.5' y='57' width='1.6' height='113' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='975.3' y='57' width='2.2' height='113' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='953.5' y='57' width='24' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='954.5' y='64' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='954.5' y='67' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='954.5' y='157' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='954.5' y='160' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='957.5' y='77' width='16' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='958.5' y='81' width='14' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M965.5 88l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='962.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='977.5' y='58' width='25' height='112' fill='%236a1b16'/%3E%3Crect x='977.5' y='58' width='1.6' height='112' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1000.3' y='58' width='2.2' height='112' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='977.5' y='58' width='25' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='978.5' y='65' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='978.5' y='68' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='978.5' y='157' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='978.5' y='160' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='981.5' y='78' width='17' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='982.5' y='82' width='15' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M990.0 89l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='986.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='1003.0' y='51' width='20' height='119' fill='%236a1b16'/%3E%3Crect x='1003.0' y='51' width='1.6' height='119' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1020.8' y='51' width='2.2' height='119' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1003.0' y='51' width='20' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1004.0' y='58' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1004.0' y='61' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1004.0' y='157' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1004.0' y='160' width='18' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1007.0' y='71' width='12' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1008.0' y='75' width='10' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1013.0 82l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1009.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='1023.0' y='46' width='24' height='124' fill='%236a1b16'/%3E%3Crect x='1023.0' y='46' width='1.6' height='124' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1044.8' y='46' width='2.2' height='124' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1023.0' y='46' width='24' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1024.0' y='53' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1024.0' y='56' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1024.0' y='157' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1024.0' y='160' width='22' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1027.0' y='66' width='16' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1028.0' y='70' width='14' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1035.0 77l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1031.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='1047.5' y='70' width='17' height='100' fill='%236a1b16'/%3E%3Crect x='1047.5' y='70' width='1.6' height='100' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1062.3' y='70' width='2.2' height='100' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1047.5' y='70' width='17' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1048.5' y='77' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1048.5' y='80' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1048.5' y='157' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1048.5' y='160' width='15' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1051.5' y='90' width='9' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1052.5' y='94' width='7' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1056.0 101l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1052.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='1064.5' y='41' width='25' height='129' fill='%236a1b16'/%3E%3Crect x='1064.5' y='41' width='1.6' height='129' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1087.3' y='41' width='2.2' height='129' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1064.5' y='41' width='25' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1065.5' y='48' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1065.5' y='51' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1065.5' y='157' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1065.5' y='160' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1068.5' y='61' width='17' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1069.5' y='65' width='15' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1077.0 72l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1073.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Cg transform='rotate(-9 1103.5 170)'%3E%3Crect x='1103.5' y='46' width='21' height='124' fill='%231f2f50'/%3E%3Crect x='1103.5' y='46' width='1.6' height='124' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1122.3' y='46' width='2.2' height='124' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1103.5' y='46' width='21' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1104.5' y='53' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1104.5' y='56' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1104.5' y='157' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1104.5' y='160' width='19' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1107.5' y='66' width='13' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1108.5' y='70' width='11' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1114.0 77l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1110.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3C/g%3E%3Crect x='1128.5' y='60' width='25' height='110' fill='%23244a34'/%3E%3Crect x='1128.5' y='60' width='1.6' height='110' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1151.3' y='60' width='2.2' height='110' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1128.5' y='60' width='25' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1129.5' y='67' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1129.5' y='70' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1129.5' y='157' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1129.5' y='160' width='23' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1132.5' y='80' width='17' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1133.5' y='84' width='15' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1141.0 91l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1137.5' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect x='1153.5' y='50' width='26' height='120' fill='%23244a34'/%3E%3Crect x='1153.5' y='50' width='1.6' height='120' fill='%23ffffff' fill-opacity='.13'/%3E%3Crect x='1177.3' y='50' width='2.2' height='120' fill='%23000000' fill-opacity='.3'/%3E%3Crect x='1153.5' y='50' width='26' height='2' fill='%23000000' fill-opacity='.25'/%3E%3Crect x='1154.5' y='57' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1154.5' y='60' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1154.5' y='157' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1154.5' y='160' width='24' height='1' fill='%23d8b45a' fill-opacity='.85'/%3E%3Crect x='1157.5' y='70' width='18' height='1.4' fill='%23f3dc96' fill-opacity='.9'/%3E%3Crect x='1158.5' y='74' width='16' height='1.2' fill='%23f3dc96' fill-opacity='.75'/%3E%3Cpath d='M1166.5 81l2.4 2.4-2.4 2.4-2.4-2.4z' fill='%23d8b45a'/%3E%3Crect x='1163.0' y='144' width='7' height='1.3' fill='%23f3dc96' fill-opacity='.8'/%3E%3Crect width='1200' height='20' fill='%232a180d'/%3E%3Crect y='2' width='1200' height='1.5' fill='%236b4428'/%3E%3Crect y='15' width='1200' height='5' fill='%234a2d1a'/%3E%3Crect y='19' width='1200' height='1' fill='%231a0e06'/%3E%3Crect y='8' width='1200' height='4' fill='url(%23brass)'/%3E%3Crect x='147' y='5' width='6' height='10' rx='1' fill='%238a6a24'/%3E%3Crect x='447' y='5' width='6' height='10' rx='1' fill='%238a6a24'/%3E%3Crect x='747' y='5' width='6' height='10' rx='1' fill='%238a6a24'/%3E%3Crect x='1047' y='5' width='6' height='10' rx='1' fill='%238a6a24'/%3E%3Crect y='170' width='1200' height='11' fill='%234a2d1a'/%3E%3Crect y='170' width='1200' height='1.5' fill='%237a4c2b'/%3E%3Crect y='181' width='1200' height='9' fill='%2322130a'/%3E%3Crect y='181' width='1200' height='1' fill='%230e0703'/%3E%3C/svg%3E"); --ladder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='190'%3E%3Cpath d='M13 9L10 186' stroke='%236e4422' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M12.4 9L9.6 186' stroke='%23a0703f' stroke-width='4.4'/%3E%3Cpath d='M11 9L8.4 186' stroke='%23c48e55' stroke-width='1.2'/%3E%3Cpath d='M59 9L62 186' stroke='%236e4422' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M59.6 9L62.4 186' stroke='%23a0703f' stroke-width='4.4'/%3E%3Cpath d='M58.2 9L61.2 186' stroke='%23c48e55' stroke-width='1.2'/%3E%3Crect x='13' y='34' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='34.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='56' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='56.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='78' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='78.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='100' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='100.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='122' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='122.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='144' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='144.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Crect x='13' y='166' width='46' height='5' rx='1.5' fill='%23a0703f' stroke='%236e4422' stroke-width='1'/%3E%3Crect x='14' y='166.8' width='44' height='1.2' fill='%23c48e55'/%3E%3Cpath d='M10 18V9a5 5 0 0 1 10 0v3' fill='none' stroke='%238a6a24' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M10 18V9a5 5 0 0 1 10 0v3' fill='none' stroke='%23d8b45a' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M56 18V9a5 5 0 0 1 10 0v3' fill='none' stroke='%238a6a24' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M56 18V9a5 5 0 0 1 10 0v3' fill='none' stroke='%23d8b45a' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='184' r='5' fill='%238a6a24'/%3E%3Ccircle cx='10' cy='184' r='2.4' fill='%23f3dc96'/%3E%3Ccircle cx='62' cy='184' r='5' fill='%238a6a24'/%3E%3Ccircle cx='62' cy='184' r='2.4' fill='%23f3dc96'/%3E%3C/svg%3E"); --light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cdefs%3E%3ClinearGradient id='beam' x1='0' y1='0' x2='.45' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe2a8' stop-opacity='.24'/%3E%3Cstop offset='.65' stop-color='%23ffe2a8' stop-opacity='.07'/%3E%3Cstop offset='1' stop-color='%23ffe2a8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M170 0H300L910 1000H640Z' fill='url(%23beam)'/%3E%3Ccircle cx='405' cy='489' r='1.3' fill='%23fff2cc' fill-opacity='0.38'/%3E%3Ccircle cx='604' cy='613' r='2.1' fill='%23fff2cc' fill-opacity='0.33'/%3E%3Ccircle cx='293' cy='251' r='1.3' fill='%23fff2cc' fill-opacity='0.48'/%3E%3Ccircle cx='197' cy='3' r='1.8' fill='%23fff2cc' fill-opacity='0.49'/%3E%3Ccircle cx='296' cy='89' r='2.0' fill='%23fff2cc' fill-opacity='0.30'/%3E%3Ccircle cx='663' cy='708' r='1.4' fill='%23fff2cc' fill-opacity='0.35'/%3E%3Ccircle cx='696' cy='932' r='1.1' fill='%23fff2cc' fill-opacity='0.33'/%3E%3Ccircle cx='674' cy='767' r='2.0' fill='%23fff2cc' fill-opacity='0.56'/%3E%3Ccircle cx='520' cy='369' r='1.5' fill='%23fff2cc' fill-opacity='0.49'/%3E%3Ccircle cx='663' cy='741' r='2.0' fill='%23fff2cc' fill-opacity='0.50'/%3E%3Ccircle cx='448' cy='571' r='1.3' fill='%23fff2cc' fill-opacity='0.40'/%3E%3Ccircle cx='209' cy='18' r='1.1' fill='%23fff2cc' fill-opacity='0.40'/%3E%3Ccircle cx='470' cy='484' r='1.4' fill='%23fff2cc' fill-opacity='0.37'/%3E%3Ccircle cx='364' cy='121' r='1.8' fill='%23fff2cc' fill-opacity='0.51'/%3E%3Ccircle cx='299' cy='59' r='1.2' fill='%23fff2cc' fill-opacity='0.43'/%3E%3Ccircle cx='803' cy='983' r='1.7' fill='%23fff2cc' fill-opacity='0.54'/%3E%3Cpath d='M380 0H450L1090 1000H930Z' fill='url(%23beam)'/%3E%3Ccircle cx='906' cy='761' r='1.3' fill='%23fff2cc' fill-opacity='0.31'/%3E%3Ccircle cx='489' cy='158' r='1.3' fill='%23fff2cc' fill-opacity='0.63'/%3E%3Ccircle cx='870' cy='810' r='1.8' fill='%23fff2cc' fill-opacity='0.44'/%3E%3Ccircle cx='925' cy='867' r='1.3' fill='%23fff2cc' fill-opacity='0.39'/%3E%3Ccircle cx='626' cy='397' r='1.7' fill='%23fff2cc' fill-opacity='0.61'/%3E%3Ccircle cx='527' cy='230' r='2.2' fill='%23fff2cc' fill-opacity='0.48'/%3E%3Ccircle cx='395' cy='22' r='1.1' fill='%23fff2cc' fill-opacity='0.52'/%3E%3Ccircle cx='815' cy='689' r='1.1' fill='%23fff2cc' fill-opacity='0.43'/%3E%3Ccircle cx='1011' cy='994' r='2.2' fill='%23fff2cc' fill-opacity='0.60'/%3E%3Ccircle cx='431' cy='1' r='1.8' fill='%23fff2cc' fill-opacity='0.49'/%3E%3Ccircle cx='498' cy='121' r='1.1' fill='%23fff2cc' fill-opacity='0.45'/%3E%3Ccircle cx='626' cy='282' r='2.1' fill='%23fff2cc' fill-opacity='0.39'/%3E%3Ccircle cx='580' cy='330' r='2.1' fill='%23fff2cc' fill-opacity='0.60'/%3E%3Ccircle cx='512' cy='144' r='1.7' fill='%23fff2cc' fill-opacity='0.35'/%3E%3Ccircle cx='806' cy='648' r='1.9' fill='%23fff2cc' fill-opacity='0.49'/%3E%3Ccircle cx='403' cy='0' r='1.0' fill='%23fff2cc' fill-opacity='0.63'/%3E%3Cpath d='M560 0H690L1400 1000H1130Z' fill='url(%23beam)'/%3E%3Ccircle cx='1226' cy='813' r='1.4' fill='%23fff2cc' fill-opacity='0.32'/%3E%3Ccircle cx='1254' cy='812' r='1.1' fill='%23fff2cc' fill-opacity='0.47'/%3E%3Ccircle cx='668' cy='14' r='1.9' fill='%23fff2cc' fill-opacity='0.34'/%3E%3Ccircle cx='828' cy='304' r='1.3' fill='%23fff2cc' fill-opacity='0.61'/%3E%3Ccircle cx='739' cy='253' r='1.6' fill='%23fff2cc' fill-opacity='0.56'/%3E%3Ccircle cx='648' cy='77' r='2.2' fill='%23fff2cc' fill-opacity='0.53'/%3E%3Ccircle cx='799' cy='267' r='1.1' fill='%23fff2cc' fill-opacity='0.38'/%3E%3Ccircle cx='752' cy='176' r='1.3' fill='%23fff2cc' fill-opacity='0.38'/%3E%3Ccircle cx='652' cy='15' r='1.3' fill='%23fff2cc' fill-opacity='0.62'/%3E%3Ccircle cx='1024' cy='785' r='1.3' fill='%23fff2cc' fill-opacity='0.53'/%3E%3Ccircle cx='627' cy='85' r='2.1' fill='%23fff2cc' fill-opacity='0.50'/%3E%3Ccircle cx='867' cy='302' r='2.0' fill='%23fff2cc' fill-opacity='0.37'/%3E%3Ccircle cx='631' cy='24' r='1.5' fill='%23fff2cc' fill-opacity='0.46'/%3E%3Ccircle cx='1048' cy='603' r='2.2' fill='%23fff2cc' fill-opacity='0.33'/%3E%3Ccircle cx='748' cy='233' r='2.0' fill='%23fff2cc' fill-opacity='0.39'/%3E%3Ccircle cx='663' cy='70' r='1.5' fill='%23fff2cc' fill-opacity='0.40'/%3E%3C/svg%3E"); --pleading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='728'%3E%3Ctext x='25' y='18' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E1%3C/text%3E%3Ctext x='25' y='44' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E2%3C/text%3E%3Ctext x='25' y='70' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E3%3C/text%3E%3Ctext x='25' y='96' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E4%3C/text%3E%3Ctext x='25' y='122' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E5%3C/text%3E%3Ctext x='25' y='148' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E6%3C/text%3E%3Ctext x='25' y='174' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E7%3C/text%3E%3Ctext x='25' y='200' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E8%3C/text%3E%3Ctext x='25' y='226' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E9%3C/text%3E%3Ctext x='25' y='252' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E10%3C/text%3E%3Ctext x='25' y='278' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E11%3C/text%3E%3Ctext x='25' y='304' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E12%3C/text%3E%3Ctext x='25' y='330' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E13%3C/text%3E%3Ctext x='25' y='356' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E14%3C/text%3E%3Ctext x='25' y='382' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E15%3C/text%3E%3Ctext x='25' y='408' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E16%3C/text%3E%3Ctext x='25' y='434' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E17%3C/text%3E%3Ctext x='25' y='460' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E18%3C/text%3E%3Ctext x='25' y='486' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E19%3C/text%3E%3Ctext x='25' y='512' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E20%3C/text%3E%3Ctext x='25' y='538' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E21%3C/text%3E%3Ctext x='25' y='564' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E22%3C/text%3E%3Ctext x='25' y='590' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E23%3C/text%3E%3Ctext x='25' y='616' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E24%3C/text%3E%3Ctext x='25' y='642' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E25%3C/text%3E%3Ctext x='25' y='668' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E26%3C/text%3E%3Ctext x='25' y='694' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E27%3C/text%3E%3Ctext x='25' y='720' text-anchor='end' font-family='Georgia, serif' font-size='10' fill='%23ac9e8a'%3E28%3C/text%3E%3Crect x='33' width='1' height='728' fill='%23d4a79c'/%3E%3Crect x='36' width='1' height='728' fill='%23d4a79c'/%3E%3C/svg%3E"); --leather-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M16 47h1v1h-1zM73 56h1v1h-1zM33 86h1v1h-1zM3 35h1v1h-1zM27 81h1v1h-1zM98 53h1v1h-1zM75 42h1v1h-1zM17 48h1v1h-1zM66 49h1v1h-1zM64 34h1v1h-1zM91 30h1v1h-1zM33 66h1v1h-1zM1 53h1v1h-1zM35 94h1v1h-1zM76 40h1v1h-1zM40 97h1v1h-1zM34 30h1v1h-1zM28 56h1v1h-1zM73 23h1v1h-1zM82 10h1v1h-1zM34 59h1v1h-1zM37 53h1v1h-1zM91 28h1v1h-1zM96 84h1v1h-1zM30 84h1v1h-1zM52 6h1v1h-1zM73 51h1v1h-1zM0 7h1v1h-1zM46 33h1v1h-1zM91 92h1v1h-1zM77 83h1v1h-1zM9 54h1v1h-1zM3 41h1v1h-1zM15 93h1v1h-1zM30 99h1v1h-1zM48 22h1v1h-1zM15 3h1v1h-1zM89 36h1v1h-1zM12 70h1v1h-1zM72 23h1v1h-1zM89 96h1v1h-1zM76 50h1v1h-1zM10 48h1v1h-1zM72 96h1v1h-1zM52 76h1v1h-1zM18 53h1v1h-1zM83 71h1v1h-1zM92 9h1v1h-1zM54 11h1v1h-1zM93 86h1v1h-1zM9 26h1v1h-1zM15 35h1v1h-1zM14 56h1v1h-1zM86 85h1v1h-1zM68 67h1v1h-1zM65 45h1v1h-1zM86 93h1v1h-1zM13 91h1v1h-1zM17 5h1v1h-1zM31 89h1v1h-1zM98 8h1v1h-1zM14 19h1v1h-1zM87 14h1v1h-1zM72 53h1v1h-1zM74 39h1v1h-1zM93 81h1v1h-1zM67 80h1v1h-1zM84 19h1v1h-1zM11 79h1v1h-1zM44 88h1v1h-1zM94 43h1v1h-1zM50 63h1v1h-1zM68 54h1v1h-1zM38 2h1v1h-1zM88 51h1v1h-1zM47 57h1v1h-1zM81 3h1v1h-1zM4 90h1v1h-1zM28 30h1v1h-1zM24 21h1v1h-1zM44 15h1v1h-1zM44 40h1v1h-1zM24 83h1v1h-1z' fill='%23000000' fill-opacity='0.2'/%3E%3Cpath d='M74 8h1v1h-1zM49 91h1v1h-1zM74 29h1v1h-1zM20 89h1v1h-1zM15 8h1v1h-1zM48 78h1v1h-1zM7 81h1v1h-1zM45 86h1v1h-1zM39 64h1v1h-1zM16 53h1v1h-1zM52 19h1v1h-1zM36 69h1v1h-1zM7 45h1v1h-1zM54 6h1v1h-1zM40 20h1v1h-1zM5 79h1v1h-1zM88 53h1v1h-1zM11 4h1v1h-1zM91 30h1v1h-1zM66 87h1v1h-1zM56 75h1v1h-1zM34 27h1v1h-1zM76 26h1v1h-1zM62 50h1v1h-1zM98 47h1v1h-1zM82 82h1v1h-1zM22 47h1v1h-1zM13 71h1v1h-1zM71 38h1v1h-1zM12 34h1v1h-1zM42 51h1v1h-1zM95 16h1v1h-1zM50 24h1v1h-1zM72 22h1v1h-1zM67 87h1v1h-1zM85 61h1v1h-1zM51 28h1v1h-1zM13 3h1v1h-1z' fill='%23ffffff' fill-opacity='0.2'/%3E%3Cpath d='M60 33h1v1h-1zM91 60h1v1h-1zM99 8h1v1h-1zM76 41h1v1h-1zM16 32h1v1h-1zM40 72h1v1h-1zM75 91h1v1h-1zM52 95h1v1h-1zM27 32h1v1h-1zM61 39h1v1h-1zM68 2h1v1h-1zM76 99h1v1h-1zM51 5h1v1h-1zM93 37h1v1h-1zM21 64h1v1h-1z' fill='%23ffffff' fill-opacity='0.1'/%3E%3Cpath d='M60 50h1v1h-1zM29 81h1v1h-1zM73 44h1v1h-1zM35 64h1v1h-1zM87 71h1v1h-1zM67 48h1v1h-1zM17 34h1v1h-1zM15 11h1v1h-1zM12 67h1v1h-1zM33 13h1v1h-1zM93 14h1v1h-1zM62 40h1v1h-1z' fill='%23ffffff' fill-opacity='0.3'/%3E%3Cpath d='M66 49h1v1h-1zM75 5h1v1h-1zM34 60h1v1h-1zM12 4h1v1h-1zM38 53h1v1h-1zM73 72h1v1h-1zM61 11h1v1h-1zM52 19h1v1h-1zM39 0h1v1h-1zM37 78h1v1h-1zM32 80h1v1h-1zM33 38h1v1h-1zM57 34h1v1h-1zM4 67h1v1h-1zM8 75h1v1h-1zM88 65h1v1h-1zM55 73h1v1h-1zM31 34h1v1h-1zM91 11h1v1h-1zM54 15h1v1h-1zM72 22h1v1h-1zM71 33h1v1h-1zM68 99h1v1h-1zM5 59h1v1h-1zM82 91h1v1h-1zM99 33h1v1h-1zM32 21h1v1h-1zM37 4h1v1h-1zM82 92h1v1h-1zM69 73h1v1h-1zM47 37h1v1h-1zM56 52h1v1h-1zM82 56h1v1h-1zM25 55h1v1h-1zM52 9h1v1h-1zM33 47h1v1h-1zM68 24h1v1h-1zM59 38h1v1h-1z' fill='%23000000' fill-opacity='0.3'/%3E%3Cpath d='M78 97h1v1h-1zM68 4h1v1h-1zM5 43h1v1h-1zM7 86h1v1h-1zM3 72h1v1h-1zM55 83h1v1h-1zM94 83h1v1h-1zM79 65h1v1h-1zM31 5h1v1h-1zM95 15h1v1h-1zM68 15h1v1h-1zM35 16h1v1h-1zM6 8h1v1h-1zM49 82h1v1h-1zM80 63h1v1h-1zM27 68h1v1h-1zM11 72h1v1h-1zM23 82h1v1h-1zM51 19h1v1h-1zM95 61h1v1h-1zM65 40h1v1h-1zM61 48h1v1h-1zM46 30h1v1h-1zM90 86h1v1h-1zM42 42h1v1h-1zM96 84h1v1h-1zM67 27h1v1h-1zM79 29h1v1h-1zM4 92h1v1h-1zM21 74h1v1h-1zM21 56h1v1h-1zM2 51h1v1h-1zM34 3h1v1h-1zM55 11h1v1h-1z' fill='%23000000' fill-opacity='0.1'/%3E%3C/svg%3E"); --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M96 32h1v1h-1zM22 127h1v1h-1zM148 116h1v1h-1zM153 24h1v1h-1zM91 135h1v1h-1zM3 75h1v1h-1zM3 97h1v1h-1zM144 114h1v1h-1zM110 113h1v1h-1zM154 57h1v1h-1zM115 32h1v1h-1zM114 28h1v1h-1zM1 153h1v1h-1zM94 96h1v1h-1zM17 127h1v1h-1zM27 28h1v1h-1zM91 16h1v1h-1zM16 25h1v1h-1zM45 86h1v1h-1zM13 14h1v1h-1zM55 104h1v1h-1zM112 15h1v1h-1zM121 32h1v1h-1zM8 8h1v1h-1zM47 114h1v1h-1zM128 10h1v1h-1zM147 88h1v1h-1zM113 54h1v1h-1zM0 24h1v1h-1zM107 28h1v1h-1zM101 79h1v1h-1zM53 54h1v1h-1zM126 39h1v1h-1zM32 144h1v1h-1zM3 155h1v1h-1zM19 15h1v1h-1zM91 90h1v1h-1zM140 31h1v1h-1zM124 82h1v1h-1z' fill='%236b5a3a' fill-opacity='0.1'/%3E%3Cpath d='M21 35h1v1h-1zM129 53h1v1h-1zM24 16h1v1h-1zM36 155h1v1h-1zM9 125h1v1h-1zM134 92h1v1h-1zM129 124h1v1h-1zM16 48h1v1h-1zM87 98h1v1h-1zM89 83h1v1h-1zM8 148h1v1h-1zM110 135h1v1h-1zM153 128h1v1h-1zM82 134h1v1h-1zM22 24h1v1h-1zM81 56h1v1h-1zM156 89h1v1h-1zM143 83h1v1h-1zM21 35h1v1h-1zM108 144h1v1h-1zM80 15h1v1h-1zM130 92h1v1h-1zM129 8h1v1h-1zM79 55h1v1h-1zM64 50h1v1h-1zM79 2h1v1h-1zM84 81h1v1h-1zM120 24h1v1h-1zM86 156h1v1h-1zM56 108h1v1h-1zM152 101h1v1h-1zM102 91h1v1h-1zM29 13h1v1h-1zM70 15h1v1h-1zM130 102h1v1h-1zM75 145h1v1h-1zM155 70h1v1h-1zM141 120h1v1h-1zM74 17h1v1h-1zM112 63h1v1h-1zM125 146h1v1h-1zM113 94h1v1h-1z' fill='%236b5a3a' fill-opacity='0.2'/%3E%3Cpath d='M117 124h1v1h-1zM121 97h1v1h-1zM96 27h1v1h-1zM126 128h1v1h-1zM18 129h1v1h-1zM145 111h1v1h-1zM8 21h1v1h-1zM39 97h1v1h-1zM23 120h1v1h-1zM116 57h1v1h-1zM50 1h1v1h-1zM20 82h1v1h-1zM94 82h1v1h-1zM91 75h1v1h-1zM134 91h1v1h-1zM50 125h1v1h-1zM29 159h1v1h-1zM70 129h1v1h-1zM35 5h1v1h-1zM21 35h1v1h-1zM19 59h1v1h-1zM83 16h1v1h-1zM128 122h1v1h-1zM157 73h1v1h-1zM111 148h1v1h-1zM125 93h1v1h-1zM145 134h1v1h-1zM125 121h1v1h-1zM75 88h1v1h-1zM159 36h1v1h-1zM91 27h1v1h-1zM122 43h1v1h-1zM109 95h1v1h-1zM149 66h1v1h-1zM74 103h1v1h-1zM116 92h1v1h-1zM52 139h1v1h-1zM19 37h1v1h-1zM111 12h1v1h-1zM140 127h1v1h-1zM93 158h1v1h-1zM124 86h1v1h-1zM149 63h1v1h-1zM40 30h1v1h-1zM114 141h1v1h-1z' fill='%238a7650' fill-opacity='0.2'/%3E%3Cpath d='M146 49h1v1h-1zM59 5h1v1h-1zM91 109h1v1h-1zM8 108h1v1h-1zM106 44h1v1h-1zM6 51h1v1h-1zM150 17h1v1h-1zM127 53h1v1h-1zM75 20h1v1h-1zM101 156h1v1h-1zM105 62h1v1h-1zM63 129h1v1h-1zM152 134h1v1h-1zM43 145h1v1h-1zM72 144h1v1h-1zM65 99h1v1h-1zM129 136h1v1h-1zM143 44h1v1h-1zM68 5h1v1h-1zM22 127h1v1h-1zM148 27h1v1h-1zM1 4h1v1h-1zM50 7h1v1h-1zM124 80h1v1h-1zM70 154h1v1h-1zM21 111h1v1h-1zM82 146h1v1h-1zM98 114h1v1h-1zM123 148h1v1h-1zM140 7h1v1h-1zM80 124h1v1h-1zM48 122h1v1h-1zM89 78h1v1h-1zM27 26h1v1h-1z' fill='%238a7650' fill-opacity='0.1'/%3E%3C/svg%3E"); --gavel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath d='M14.5 12.6L29 10.6' stroke='%234a2a12' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M14.5 12.2L29 10.2' stroke='%238a5530' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='29.4' cy='10.5' r='2.1' fill='%235a3418'/%3E%3Crect x='6' y='5' width='8.5' height='15' rx='3' fill='%237a4524' stroke='%233a1f0c' stroke-width='1'/%3E%3Crect x='7.2' y='6' width='1.6' height='13' rx='.8' fill='%23b07a48'/%3E%3Crect x='6' y='7.4' width='8.5' height='1.5' fill='%23d8b45a'/%3E%3Crect x='6' y='16.2' width='8.5' height='1.5' fill='%23d8b45a'/%3E%3C/svg%3E"); --sound-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath d='M1.5 21v3.6c0 1.6 4 2.9 9 2.9s9-1.3 9-2.9V21Z' fill='%234a2a14'/%3E%3Cellipse cx='10.5' cy='21' rx='9' ry='2.6' fill='%238a5a32'/%3E%3Cellipse cx='10.5' cy='21' rx='6.4' ry='1.6' fill='none' stroke='%23a87444' stroke-width='.8'/%3E%3C/svg%3E"); --seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='w' cx='.38' cy='.34' r='.8'%3E%3Cstop offset='0' stop-color='%23d8463a'/%3E%3Cstop offset='.6' stop-color='%23a8241a'/%3E%3Cstop offset='1' stop-color='%236e130d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M38.2 20.0L38.9 22.5L37.6 24.7L36.0 26.6L34.9 28.6L33.5 30.3L31.6 31.6L30.3 33.4L29.3 36.1L27.5 38.0L24.7 37.5L22.1 35.8L20.0 35.8L17.7 37.2L15.2 37.8L13.0 36.9L11.0 35.5L9.1 34.2L7.7 32.3L7.2 29.8L6.1 28.0L3.5 26.8L1.1 25.1L1.3 22.5L3.2 20.0L4.2 17.9L3.8 15.7L3.7 13.2L4.6 11.1L5.7 9.0L6.9 6.9L9.0 5.6L11.8 5.8L14.1 5.7L15.6 3.7L17.5 1.1L20.0 0.8L22.3 2.5L24.3 4.0L26.4 4.5L28.5 5.2L30.4 6.5L32.5 7.5L35.0 8.5L36.4 10.5L35.8 13.4L35.0 16.0L36.0 17.9Z' fill='url(%23w)'/%3E%3Ccircle cx='20' cy='20' r='11.5' fill='none' stroke='%236a120c' stroke-width='1.6' stroke-opacity='.7'/%3E%3Ccircle cx='20' cy='20' r='12.6' fill='none' stroke='%23f0a090' stroke-width='.8' stroke-opacity='.35'/%3E%3C/svg%3E"); --pen-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13'%3E%3Cpath d='M1.6 7.4Q3.6 8.6 5.4 11.4Q8 4.6 12.6 1.4' fill='none' stroke='%23b3261e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%232a2219' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --pad-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24'%3E%3Crect y='23' width='8' height='1' fill='%23a9c8e8'/%3E%3C/svg%3E"); --pad-margin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Crect x='31' width='1' height='24' fill='%23e39a96'/%3E%3Crect x='34' width='1' height='24' fill='%23e39a96'/%3E%3C/svg%3E"); } /* the library: walnut paneling warmed by lamplight, and the bookcase along the bottom */ :root[data-theme="habeas"] body { background: var(--bookcase) left bottom / 1200px 190px repeat-x, radial-gradient(ellipse 70% 55% at 30% 20%, rgba(255, 214, 150, .14), transparent 70%), var(--walnut-wall) 0 0 / 260px 320px, #3a2315; background-attachment: fixed; } /* shafts of window light shifting slowly, and the ladder rolling along its rail */ :root[data-theme="habeas"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--light) left top / cover no-repeat; animation: habeas-light 16s ease-in-out infinite alternate; } :root[data-theme="habeas"] body::after { content: ''; position: fixed; left: 0; bottom: 0; width: 72px; height: 190px; z-index: -1; pointer-events: none; background: var(--ladder) 0 0 / 72px 190px no-repeat; animation: habeas-ladder 56s ease-in-out infinite alternate; } @keyframes habeas-light { from { opacity: .55; transform: translateX(-1.5%); } to { opacity: 1; transform: translateX(1.5%); } } @keyframes habeas-ladder { from { transform: translateX(4vw); } to { transform: translateX(calc(96vw - 72px)); } } @media (max-width: 700px) { :root[data-theme="habeas"] body { background: var(--bookcase) left bottom / 840px 133px repeat-x, radial-gradient(ellipse 70% 55% at 30% 20%, rgba(255, 214, 150, .14), transparent 70%), var(--walnut-wall) 0 0 / 182px 224px, #3a2315; background-attachment: fixed; } :root[data-theme="habeas"] body::after { width: 50px; height: 133px; background-size: 50px 133px; } @keyframes habeas-ladder { from { transform: translateX(4vw); } to { transform: translateX(calc(96vw - 50px)); } } } :root[data-theme="habeas"] * { text-shadow: none !important; } :root[data-theme="habeas"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: var(--gilt); letter-spacing: .04em; } :root[data-theme="habeas"] :is(.panel, .dialog-card, .modal-card, .tools-list) :is(h1, h2, h3, h4) { color: var(--ink); } /* a heading in a pleading opens a section: the section sign, and a double rule beneath */ :root[data-theme="habeas"] :is(.panel-head h2, .stat-panel > h3) { padding-bottom: 3px; border-bottom: 3px double rgba(42, 29, 18, .5); } :root[data-theme="habeas"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: '§' / ''; margin-right: .4em; color: var(--stamp-red); font-family: Georgia, serif; font-weight: 700; } /* text out on the paneling stands on brass plates, screwed to the wall */ :root[data-theme="habeas"] :is(h2.area-title, h3.year-head) { display: inline-block; width: fit-content; padding: 6px 24px 5px; color: var(--ink); background: var(--screws), var(--brass); border-radius: 3px; box-shadow: 0 2px 0 #5c4318, 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 248, 220, .7); } :root[data-theme="habeas"] h2.area-title::before { color: #8e1f17; } :root[data-theme="habeas"] :is(.result-count, .sort-caption) { display: inline-block; padding: 0 20px; color: var(--ink); background: var(--screws), var(--brass); border-radius: 3px; box-shadow: 0 2px 0 #5c4318, 0 3px 8px rgba(0, 0, 0, .4); font-family: var(--font-display); font-weight: 700; } :root[data-theme="habeas"] :is(.result-count .muted, .result-count b) { color: var(--ink); } :root[data-theme="habeas"] ::selection { background: rgba(255, 236, 92, .9); color: #1f1a14; } :root[data-theme="habeas"] :focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; } :root[data-theme="habeas"] .topbar :focus-visible { outline-color: var(--gilt); } :root[data-theme="habeas"] a { color: #1f4fa8; } /* the top bar: the bench, walnut over a brass rail, the name in gilt capitals */ :root[data-theme="habeas"] .topbar { background: var(--walnut-grain) 0 0 / 260px 320px, var(--walnut-bar); border-bottom: 0; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); padding-bottom: 18px; } :root[data-theme="habeas"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; background: var(--brass); box-shadow: 0 -2px 0 #1d110a, inset 0 -1px 0 #6e5220; } :root[data-theme="habeas"] .logo-text .l2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--gilt-deep); letter-spacing: .05em; } :root[data-theme="habeas"] .logo-text .l2-card { color: var(--gilt); } :root[data-theme="habeas"] .header-stats { color: #d8c39a; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .05em; } :root[data-theme="habeas"] .header-stats b { color: var(--gilt); } /* the bell and gear: ivory buttons in brass rims */ :root[data-theme="habeas"] .bell { background: radial-gradient(circle at 40% 35%, #fffaf0, #eadcb8 75%); border: 0; border-radius: 50%; box-shadow: 0 0 0 2px #6e5220, 0 0 0 4px var(--gilt-deep), 0 0 0 5px #5c4318, 0 4px 10px rgba(0, 0, 0, .5); } :root[data-theme="habeas"] :is(.bell, .bell.gear):hover { background: radial-gradient(circle at 40% 35%, #ffffff, #f3e8c8 75%); } :root[data-theme="habeas"] .bell[aria-current] { background: radial-gradient(circle at 40% 35%, #fff6d0, #f0cf6a 75%); } /* tabs: engraved brass nameplates; the open page's is polished and catches the lamplight */ :root[data-theme="habeas"] :is(.tabs > a, .tools-btn) { background: var(--screws), var(--bronze); color: #22150a; border: 0; border-radius: 2px; box-shadow: 0 2px 0 #1d110a, 0 3px 7px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 200, .55), inset 0 -1px 0 rgba(50, 30, 8, .45); filter: none; font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; padding: 7px 21px 6px; text-shadow: 0 1px 0 rgba(255, 244, 210, .5) !important; } :root[data-theme="habeas"] :is(.tabs > a, .tools-btn):hover { background: var(--screws), linear-gradient(#dcc084, #b8955a 45%, #9a783f 72%, #c9a96b); color: #22150a; transform: translateY(-1px); box-shadow: 0 3px 0 #1d110a, 0 4px 9px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 200, .6); } :root[data-theme="habeas"] :is(.tabs > a, .tools-btn):active { transform: translateY(1px); } :root[data-theme="habeas"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--screws), var(--brass); color: var(--ink); box-shadow: 0 2px 0 #1d110a, 0 0 14px rgba(255, 214, 120, .55), inset 0 1px 0 rgba(255, 252, 230, .85); } /* panels: pleading paper, the lines numbered down the margin beside a double rule */ :root[data-theme="habeas"] :is(.panel, .dialog-card, .modal-card) { background: var(--pleading) left top / 40px 728px repeat-y, linear-gradient(var(--rule), var(--rule)) right 14px top 0 / 1px 100% no-repeat, var(--paper-grain) 0 0 / 160px 160px, var(--panel); border: 1px solid #d6c9ad; border-radius: 2px; box-shadow: var(--shadow); } :root[data-theme="habeas"] :is(.panel, .dialog-card) { padding-left: 52px; padding-right: 28px; } /* the card window lays out its own columns, so it keeps the rule but not the numbers */ :root[data-theme="habeas"] .modal-card { background: linear-gradient(var(--rule), var(--rule)) left 10px top 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) left 13px top 0 / 1px 100% no-repeat, var(--paper-grain) 0 0 / 160px 160px, var(--panel); } @media (max-width: 640px) { :root[data-theme="habeas"] :is(.panel, .dialog-card) { background: linear-gradient(var(--rule), var(--rule)) left 8px top 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) left 11px top 0 / 1px 100% no-repeat, var(--paper-grain) 0 0 / 160px 160px, var(--panel); padding-left: 22px; padding-right: 14px; } } :root[data-theme="habeas"] .modal-top { background: var(--walnut-grain) 0 0 / 260px 320px, var(--walnut-bar); border-bottom: 4px solid #c9a24a; color: var(--gilt); } :root[data-theme="habeas"] .modal-top .nav-count { color: var(--gilt); } :root[data-theme="habeas"] .modal-backdrop { background: rgba(18, 9, 3, .8); } /* buttons: rubber-stamp impressions in blue ink; go is oxblood leather tooled in gilt; a chosen one is inked solid */ :root[data-theme="habeas"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--well); color: var(--ink-blue); border: 2px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--well), inset 0 0 0 3px currentColor, 0 1px 3px rgba(20, 10, 4, .3); filter: none; font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; } :root[data-theme="habeas"] .btn { font-size: .9rem; } :root[data-theme="habeas"] .btn.small { font-size: .8rem; } :root[data-theme="habeas"] .icon-btn { border-radius: 50%; } :root[data-theme="habeas"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: #eef2fb; color: var(--ink-blue); transform: translateY(-1px); filter: none; box-shadow: inset 0 0 0 2px #eef2fb, inset 0 0 0 3px currentColor, 0 3px 6px rgba(20, 10, 4, .3); } :root[data-theme="habeas"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(1px); background: #e2e8f6; box-shadow: inset 0 0 0 2px #e2e8f6, inset 0 0 0 3px currentColor; } :root[data-theme="habeas"] :is(.btn, .icon-btn):disabled { opacity: .5; } :root[data-theme="habeas"] :is(.btn.go, .btn.go:hover) { background: var(--leather-grain) 0 0 / 100px 100px, linear-gradient(#8a2a20, var(--oxblood)); color: var(--gilt); border-color: #3e0c08; box-shadow: inset 0 0 0 2px #7a231b, inset 0 0 0 3px rgba(243, 220, 150, .75), 0 2px 4px rgba(20, 10, 4, .35); } :root[data-theme="habeas"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: var(--ink-blue); color: #fffdf6; border-color: var(--ink-blue); outline: 0; box-shadow: inset 0 0 0 2px var(--ink-blue), inset 0 0 0 3px rgba(255, 253, 246, .7); } /* the close button is a seal of red wax */ :root[data-theme="habeas"] :is(.icon-btn.close, .icon-btn.close:hover) { background: var(--seal) center / 100% 100% no-repeat; color: #fff3dc; border: 0; box-shadow: none; } :root[data-theme="habeas"] .icon-btn.close:hover { transform: rotate(-8deg) scale(1.05); } :root[data-theme="habeas"] .seg { background: var(--well); border: 2px solid var(--ink-blue); border-radius: 3px; box-shadow: 0 1px 3px rgba(20, 10, 4, .3); } :root[data-theme="habeas"] .seg-btn { color: var(--ink-blue); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; } :root[data-theme="habeas"] .seg-btn:hover { background: #eef2fb; } :root[data-theme="habeas"] .seg-btn + .seg-btn { border-left: 1px solid var(--ink-blue); } /* text boxes: typewritten form fields; a long one is a yellow legal pad; a check box is ticked in red pen */ :root[data-theme="habeas"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: var(--well); color: #1f1a14; border: 1px solid #c9bb9b; border-bottom: 2px solid #3a3226; border-radius: 0; box-shadow: inset 0 1px 2px rgba(60, 40, 20, .08); font-family: var(--font-typewriter); caret-color: var(--stamp-red); } :root[data-theme="habeas"] :is(.text-input, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"])::placeholder { color: var(--faint); } :root[data-theme="habeas"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 1px; } :root[data-theme="habeas"] .select { background-image: var(--chevron); background-position: right 10px center; background-size: 12px 8px; background-repeat: no-repeat; } :root[data-theme="habeas"] textarea { background: var(--pad-margin) left top 2px / 40px 24px repeat-y, var(--pad-rule) left top 2px / 8px 24px repeat, #fcf3b4; background-attachment: local; line-height: 24px; padding: 2px 10px 0 44px; border: 1px solid #d9cb7c; border-bottom: 2px solid #3a3226; } :root[data-theme="habeas"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: var(--well); border: 2px solid #2a2219; border-radius: 1px; } :root[data-theme="habeas"] input[type="checkbox"]:checked { background: var(--pen-check) center / 14px 13px no-repeat, var(--well); } /* the totals: leather-bound volumes, each marked with its exhibit sticker */ :root[data-theme="habeas"] .bignum { position: relative; color: var(--gilt); border: 0; border-radius: 3px; padding-top: 14px; background-image: var(--leather-grain); background-size: 100px 100px; background-color: #2a2420; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 4px 10px rgba(10, 5, 2, .45); } :root[data-theme="habeas"] .bignum::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(243, 220, 150, .5); border-radius: 2px; pointer-events: none; } :root[data-theme="habeas"] .bignum::before { content: 'Exhibit A'; position: absolute; right: 10px; top: -9px; padding: 2px 6px 1px; background: #f6e27a; color: var(--ink); font: 700 .6rem/1.3 var(--font-display); letter-spacing: .08em; border-radius: 2px; box-shadow: 0 1px 3px rgba(10, 5, 2, .45); } /* each tile is lettered by its place; a counter can't do it, since the tiles' container queries keep counters inside each one */ :root[data-theme="habeas"] .bignum:nth-child(2)::before { content: 'Exhibit B'; } :root[data-theme="habeas"] .bignum:nth-child(3)::before { content: 'Exhibit C'; } :root[data-theme="habeas"] .bignum:nth-child(4)::before { content: 'Exhibit D'; } :root[data-theme="habeas"] .bignum:nth-child(5)::before { content: 'Exhibit E'; } :root[data-theme="habeas"] .bignum:nth-child(6)::before { content: 'Exhibit F'; } :root[data-theme="habeas"] .bignum:nth-child(7)::before { content: 'Exhibit G'; } :root[data-theme="habeas"] .bignum:nth-child(8)::before { content: 'Exhibit H'; } :root[data-theme="habeas"] .bignum:nth-child(9)::before { content: 'Exhibit I'; } :root[data-theme="habeas"] .bignum:nth-child(10)::before { content: 'Exhibit J'; } :root[data-theme="habeas"] .bignum.c-pink { background-color: #6e1d17; } :root[data-theme="habeas"] .bignum.c-lime { background-color: #1f4a32; } :root[data-theme="habeas"] .bignum.c-cyan { background-color: #1c2f52; } :root[data-theme="habeas"] .bignum.c-yellow { background-color: #6f4a20; } :root[data-theme="habeas"] .bignum.c-violet { background-color: #4b2547; } :root[data-theme="habeas"] .bignum.c-orange { background-color: #7a3412; } :root[data-theme="habeas"] .bignum.c-mute { background-color: #2a2420; color: var(--gilt); } /* the big totals size their type to their tile; Cinzel isn't monospace, so it doesn't trip Chrome's repainting */ :root[data-theme="habeas"] .bn-value { font-family: var(--font-display); font-weight: 700; } :root[data-theme="habeas"] .bn-label { font-family: var(--font-display); letter-spacing: .08em; } /* the rest: paper tiles, walnut strips, the gavel, a table of contents, the clerk's FILED stamp */ :root[data-theme="habeas"] :is(.tile, .deck-tile) { border: 1px solid #cdbf9f; border-radius: 3px; box-shadow: 0 4px 10px rgba(10, 5, 2, .45); } :root[data-theme="habeas"] .tile:is(:hover, :focus-within), :root[data-theme="habeas"] .deck-tile:hover { box-shadow: 0 0 0 3px var(--gilt-deep), 0 6px 14px rgba(10, 5, 2, .5); } :root[data-theme="habeas"] .deck-tile:hover { transform: translateY(-3px); } :root[data-theme="habeas"] .ring { background: var(--well); } :root[data-theme="habeas"] :is(.bar-track, .part-track, .cb-track, .fit-track, .progress, .stack-bar, .cast-bar) { background-color: var(--well); border: 1px solid #8f826b; border-radius: 1px; box-shadow: inset 0 1px 2px rgba(60, 40, 20, .15); } :root[data-theme="habeas"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--walnut-grain) 0 0 / 260px 320px, var(--walnut-bar); color: var(--gilt); border: 0; border-bottom: 3px solid #c9a24a; border-radius: 3px; box-shadow: 0 4px 10px rgba(10, 5, 2, .45); } :root[data-theme="habeas"] .job-banner:not(.good, .bad) .link-btn { color: #ffe9a8; } :root[data-theme="habeas"] .job-banner:is(.good, .bad) { border: 0; border-radius: 3px; box-shadow: 0 4px 10px rgba(10, 5, 2, .45); } :root[data-theme="habeas"] .spinner { position: relative; width: 32px; height: 28px; border: 0; border-radius: 0; background: var(--sound-block) center / 32px 28px no-repeat; animation: none; } :root[data-theme="habeas"] .spinner::before { content: ''; position: absolute; inset: 0; background: var(--gavel) center / 32px 28px no-repeat; transform-origin: 90.6% 39.3%; animation: habeas-gavel 1.2s ease-in infinite; } @keyframes habeas-gavel { 0%, 30% { transform: rotate(32deg); } 52% { transform: rotate(-2deg); } 58% { transform: rotate(3deg); } 64%, 72% { transform: rotate(0deg); } 100% { transform: rotate(32deg); } } :root[data-theme="habeas"] .tools-list { background: var(--paper-grain) 0 0 / 160px 160px, var(--well); border: 1px solid #b8a88a; border-radius: 2px; box-shadow: 0 16px 34px rgba(10, 5, 2, .55); padding: 12px 16px 10px; gap: 0; } :root[data-theme="habeas"] .tools-list::before { content: 'Table of Contents' / ''; display: block; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 3px double #8f826b; color: var(--ink); font: 700 .78rem var(--font-display); letter-spacing: .16em; text-align: center; text-transform: uppercase; } :root[data-theme="habeas"] .tools-list :is(a, button) { background: transparent; border: 0; border-bottom: 1px dotted #b8a88a; border-radius: 0; box-shadow: none; color: #1f1a14; padding: 7px 6px; } :root[data-theme="habeas"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .03em; } :root[data-theme="habeas"] .tools-list :is(a, button) span { color: var(--muted); font-style: italic; } :root[data-theme="habeas"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="habeas"] .tools-list a[aria-current="page"] { background: linear-gradient(100deg, transparent 1%, rgba(255, 236, 92, .85) 3%, rgba(255, 228, 70, .75) 96%, transparent 99%) 0 50% / 100% 72% no-repeat; color: #1f1a14; outline: 0; } :root[data-theme="habeas"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="habeas"] .tools-list a[aria-current="page"] span { color: #3d352a; } :root[data-theme="habeas"] .tools-sep { height: 0; margin: 6px 0; border: 0; border-top: 3px double #b8a88a; } :root[data-theme="habeas"] .toast { background: var(--paper-grain) 0 0 / 160px 160px, var(--well); color: #1f1a14; border: 1px solid #c9bb9b; border-radius: 2px; box-shadow: 0 12px 28px rgba(10, 5, 2, .5); font-family: var(--font-typewriter); font-weight: 400; padding: 14px 20px 14px 100px; min-height: 50px; } :root[data-theme="habeas"] .toast::before { content: 'Filed' / ''; position: absolute; left: 14px; top: 50%; padding: 3px 9px 2px; color: var(--stamp-red); border: 3px double var(--stamp-red); border-radius: 4px; font: 700 .92rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; transform: translateY(-50%) rotate(-8deg); opacity: .9; } :root[data-theme="habeas"] .toast.show::before { animation: habeas-stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes habeas-stamp { from { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1.8); } to { opacity: .9; transform: translateY(-50%) rotate(-8deg) scale(1); } } :root[data-theme="habeas"] .site-footer { background: linear-gradient(var(--rule), var(--rule)) left 14px top 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) left 17px top 0 / 1px 100% no-repeat, var(--paper-grain) 0 0 / 160px 160px, var(--panel); border: 1px solid #d6c9ad; border-radius: 2px; color: var(--muted); box-shadow: var(--shadow-sm); padding-left: 32px; } :root[data-theme="habeas"] .site-footer a { color: #1f4fa8; } /* scroll bars: a brass rod on walnut for the page, taupe on paper inside panels */ :root[data-theme="habeas"]::-webkit-scrollbar, :root[data-theme="habeas"] ::-webkit-scrollbar { width: 13px; height: 13px; } :root[data-theme="habeas"]::-webkit-scrollbar-track { background: var(--walnut-dark); } :root[data-theme="habeas"] ::-webkit-scrollbar-track { background: var(--panel-2); } :root[data-theme="habeas"]::-webkit-scrollbar-thumb { background: var(--brass); border: 3px solid var(--walnut-dark); border-radius: 7px; } :root[data-theme="habeas"] ::-webkit-scrollbar-thumb { background: #a89a80; border: 3px solid var(--panel-2); border-radius: 7px; } /* ==== Sasquatch =================================================================================== A Pacific Northwest forest at dusk. A dusk sky with a moon over three ranks of pines, fireflies blinking and a bank of fog drifting through; the top bar is a routed wooden Forest Service sign, brown with yellow letters; tabs are wooden trail signs pointing the way; panels sit under a plank of wood; a big footprint before each heading; wooden buttons, moss green for go, and the carved slab-serif lettering of a trail sign. */ :root[data-theme="sasquatch"] { --bg: #0d130e; --bg-deep: #3b2412; --bg-blob: #131b14; --panel: #1b241a; --panel-2: #161e15; --panel-3: #283526; --well: #101710; --text: #eee6d4; --muted: #b4ab93; --faint: #76705e; --pink: #e0533f; --lime: #8cc063; --cyan: #7fb0c4; --violet: #a894d0; --orange: #c9793c; --yellow: #e0bd52; --mint: #6fbf8a; --peach: #d9a07a; --pink-text: #ec7f6d; --pink-soft: #f2a596; --flat: #2f3a2c; --tile-uncommon: #1a2426; --tile-rare: #26261a; --tile-mythic: #2b1f18; --zebra: #18201a; --grid: #263222; --grid-2: #374832; --drop: #1f2a1d; --hatch: #080c08; --tint-pink: #3a1c16; --tint-magenta: #2e1f2e; --tint-green: #1f3219; --legend-miss: #3e4638; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid #0a0f0a; --line-thick: 3px solid #0a0f0a; --shadow: 0 10px 26px rgba(0, 0, 0, .55); --shadow-sm: 0 3px 8px rgba(0, 0, 0, .5); --blob: 8px; --blob-sm: 6px; --pill: 6px; --font-display: Rockwell, 'Rockwell Nova', Clarendon, 'Roboto Slab', 'Sitka Heading', Georgia, serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --routed: #e8c35a; --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40'%3E%3Crect width='240' height='40' fill='%235e3b20'/%3E%3Cg fill='none' stroke='%234a2d17' stroke-width='1.2'%3E%3Cpath d='M0 8Q60 4 120 9T240 7'/%3E%3Cpath d='M0 18Q70 22 130 17T240 19'/%3E%3Cpath d='M0 29Q50 25 110 30T240 28'/%3E%3Cpath d='M0 36Q80 39 150 35T240 37'/%3E%3C/g%3E%3Cg fill='none' stroke='%23724a29' stroke-width='.8'%3E%3Cpath d='M0 13Q60 10 120 14T240 12'/%3E%3Cpath d='M0 24Q70 27 130 23T240 25'/%3E%3C/g%3E%3Cellipse cx='170' cy='20' rx='8' ry='4' fill='none' stroke='%234a2d17' stroke-width='1'/%3E%3C/svg%3E"); --pines-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Cpath d='M0 160L18 110L10 112L30 70L22 72L40 30L58 72L50 70L70 112L62 110L80 160ZM90 160L110 100L102 102L122 60L114 62L132 20L150 62L142 60L162 102L154 100L174 160ZM180 160L196 118L190 120L206 84L200 86L216 52L232 86L226 84L242 120L236 118L252 160ZM250 160L268 108L260 110L278 72L270 74L288 40L300 66V160Z' fill='%23263830'/%3E%3C/svg%3E"); --pines-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200'%3E%3Cpath d='M0 200L24 130L14 132L40 84L30 86L56 30L82 86L72 84L98 132L88 130L112 200ZM110 200L130 144L122 146L144 104L136 106L158 58L180 106L172 104L194 146L186 144L206 200Z' fill='%23182419'/%3E%3C/svg%3E"); --pines-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='260'%3E%3Cpath d='M0 260L30 170L18 172L50 110L38 112L70 40L102 112L90 110L122 172L110 170L140 260Z' fill='%230b110b'/%3E%3Crect x='64' y='240' width='12' height='20' fill='%230b110b'/%3E%3C/svg%3E"); --footprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cellipse cx='10' cy='18' rx='6.5' ry='9' fill='%23c9793c'/%3E%3Cg fill='%23c9793c'%3E%3Ccircle cx='4' cy='6.5' r='2.2'/%3E%3Ccircle cx='8.2' cy='4' r='2.3'/%3E%3Ccircle cx='12.6' cy='4.2' r='2.1'/%3E%3Ccircle cx='16.2' cy='6.6' r='1.9'/%3E%3Ccircle cx='18' cy='10' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-theme="sasquatch"] body { background: var(--pines-near) 0 100% / 180px 260px repeat-x, var(--pines-mid) 60px 100% / 220px 200px repeat-x, var(--pines-far) 20px calc(100% - 40px) / 300px 160px repeat-x, radial-gradient(circle at 82% 16%, #f4ecd0 0 2.2%, rgba(244, 236, 208, .25) 3.5%, transparent 9%), linear-gradient(#14202c 0%, #2e2c44 34%, #4a3540 52%, #2a2a26 70%, #111811 86%); background-attachment: fixed; } /* fireflies blinking, and fog drifting through the trees */ :root[data-theme="sasquatch"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='%23d8f06a'%3E%3Ccircle cx='40' cy='250' r='5' fill-opacity='.18'/%3E%3Ccircle cx='40' cy='250' r='1.8'/%3E%3Ccircle cx='190' cy='180' r='5' fill-opacity='.18'/%3E%3Ccircle cx='190' cy='180' r='1.6'/%3E%3Ccircle cx='330' cy='280' r='5' fill-opacity='.18'/%3E%3Ccircle cx='330' cy='280' r='1.8'/%3E%3Ccircle cx='280' cy='120' r='4' fill-opacity='.18'/%3E%3Ccircle cx='280' cy='120' r='1.4'/%3E%3Ccircle cx='110' cy='300' r='4' fill-opacity='.18'/%3E%3Ccircle cx='110' cy='300' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 320px; animation: sasquatch-fireflies 5s ease-in-out infinite alternate; } :root[data-theme="sasquatch"] body::after { content: ''; position: fixed; left: 0; bottom: 8vh; width: 200%; height: 22vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 25% 50% at 25% 50%, rgba(200, 210, 220, .12), transparent 70%), radial-gradient(ellipse 25% 45% at 75% 55%, rgba(200, 210, 220, .1), transparent 70%); animation: sasquatch-fog 90s linear infinite; } @keyframes sasquatch-fireflies { from { opacity: .2; transform: translate(0, 0); } to { opacity: 1; transform: translate(6px, -8px); } } @keyframes sasquatch-fog { to { transform: translateX(-50%); } } :root[data-theme="sasquatch"] * { text-shadow: none !important; } :root[data-theme="sasquatch"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #eee6d4; letter-spacing: .02em; } :root[data-theme="sasquatch"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #eee6d4; } :root[data-theme="sasquatch"] .dh-name h1 { text-shadow: 2px 2px 0 #3a2410 !important; } :root[data-theme="sasquatch"] ::selection { background: #8cc063; color: #0d130e; } :root[data-theme="sasquatch"] :focus-visible { outline: 2px solid var(--routed); outline-offset: 2px; } :root[data-theme="sasquatch"] a { color: #e8c35a; } /* the top bar: a routed wooden Forest Service sign */ :root[data-theme="sasquatch"] .topbar { background: var(--wood) 0 0 / 240px 40px, #5e3b20; border-bottom: 4px solid #3b2412; box-shadow: inset 0 0 0 3px #3b2412, inset 0 0 0 5px rgba(232, 195, 90, .45), 0 6px 16px rgba(0, 0, 0, .5); } :root[data-theme="sasquatch"] .logo-text .l2 { color: var(--routed); font-family: var(--font-display); } :root[data-theme="sasquatch"] .logo-text .l2-card { color: #ffdf8a; } :root[data-theme="sasquatch"] .header-stats { color: #f0dfb0; } :root[data-theme="sasquatch"] .header-stats b { color: #ffe9a8; } :root[data-theme="sasquatch"] .bell { background: var(--wood), #5e3b20; border: 2px solid #3b2412; box-shadow: 0 3px 0 #1a1008; } /* tabs: wooden trail signs, pointing the way; the open page is lit by a lantern */ :root[data-theme="sasquatch"] :is(.tabs > a, .tools-btn) { background: var(--wood) 0 0 / 240px 40px, #6b4426; color: var(--routed); border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-right: 24px; font-family: var(--font-display); font-weight: 700; } :root[data-theme="sasquatch"] :is(.tabs > a, .tools-btn):hover { color: #ffdf8a; transform: translateX(2px); box-shadow: none; } :root[data-theme="sasquatch"] :is(.tabs > a, .tools-btn):focus-visible { outline-offset: -4px; } :root[data-theme="sasquatch"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(rgba(255, 214, 120, .28), rgba(255, 214, 120, .28)), var(--wood) 0 0 / 240px 40px, #7a5030; color: #fff3c4; } /* panels: under a plank of wood */ :root[data-theme="sasquatch"] :is(.panel, .dialog-card) { background: var(--wood) 0 0 / 240px 12px repeat-x, var(--panel); border: 2px solid #0a0f0a; padding-top: 26px; box-shadow: var(--shadow); } :root[data-theme="sasquatch"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .75em; height: 1.05em; margin-right: .45em; vertical-align: -.15em; background: var(--footprint) center / contain no-repeat; } /* buttons: wooden planks with routed letters; go is moss */ :root[data-theme="sasquatch"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--wood) 0 0 / 240px 40px, #5e3b20; color: var(--routed); border: 2px solid #3b2412; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #1a1008; filter: none; font-family: var(--font-display); font-weight: 700; } :root[data-theme="sasquatch"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { color: #ffdf8a; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #1a1008; } :root[data-theme="sasquatch"] .btn.go, :root[data-theme="sasquatch"] .btn.go:hover, :root[data-theme="sasquatch"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: #8cc063; color: #0d130e; border-color: #4a6a2e; } :root[data-theme="sasquatch"] .seg { border: 2px solid #3b2412; box-shadow: 0 3px 0 #1a1008; background: #161e15; } :root[data-theme="sasquatch"] .seg-btn { color: #eee6d4; } :root[data-theme="sasquatch"] .seg-btn + .seg-btn { border-left: 2px solid #3b2412; } :root[data-theme="sasquatch"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #101710; color: #eee6d4; border: 1px solid #2f3a2c; border-bottom: 2px solid #c9793c; box-shadow: none; } :root[data-theme="sasquatch"] :is(.tile, .deck-tile) { border: 2px solid #0a0f0a; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .55); } :root[data-theme="sasquatch"] :is(.tile, .deck-tile):hover { box-shadow: 0 0 0 2px #8cc063, 0 0 20px rgba(216, 240, 106, .25); } :root[data-theme="sasquatch"] .bignum { border: 2px solid #0a0f0a; border-radius: 6px; box-shadow: 0 4px 0 #0a0f0a; } :root[data-theme="sasquatch"] .tools-list { background: var(--wood) 0 0 / 240px 12px repeat-x, #161e15; border: 2px solid #3b2412; border-radius: 6px; padding-top: 20px; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); } :root[data-theme="sasquatch"] .tools-list :is(a, button) { background: transparent; border: 0; } :root[data-theme="sasquatch"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #283526; color: #ffdf8a; } :root[data-theme="sasquatch"] .toast { background: var(--wood), #5e3b20; color: var(--routed); border: 2px solid #3b2412; border-radius: 6px; font-family: var(--font-display); font-weight: 700; } /* ==== IBM ========================================================================================= Big Blue's machine room, around 1965. Cabinets in IBM blue and light gray stand on a raised floor along the bottom of the screen: tape drives whose reels jerk round, the operator's console with its rows of lamps blinking, disk drives under their domes and a line printer feeding out green-bar paper. The top bar is a cabinet's blue panel with its white trim and a strip of lamps; the tabs are the console's illuminated push buttons, the open page's lit and More the red one. Panels are punch cards, cream, the top-left corner cut off and a row of holes punched along the top, a little card before each heading; buttons are keyboard keys; text boxes are green-screen terminal fields and a message comes up on the terminal with its cursor blinking; the More menu is a printout on fan-fold paper, tractor holes and all; a check box is punched out when checked, and the busy sign is a tape reel. Type is IBM Plex where it's installed and Helvetica otherwise, with Courier (designed at IBM for its typewriters) for printouts. The phone's bars follow the blue console, so Settings counts this among the dark themes although its panels are light. */ :root[data-theme="ibm"] { --bg: #0f3d85; --bg-deep: #1f4f8f; --bg-blob: #0f3d85; --panel: #f6edd5; --panel-2: #efe4c6; --panel-3: #e6d8b3; --well: #fbf6e8; --text: #1d1f24; --muted: #4f4a40; --faint: #857e6c; --paper: #fbf6e8; --paper-ink: #1d1f24; --pink: #e0245e; --lime: #3a8a00; --cyan: #3d7be6; --violet: #9068e0; --orange: #d05800; --yellow: #9a7a00; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0134a; --pink-soft: #9a1040; --flat: #e2d6b6; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --zebra: #f1e7cc; --grid: #e2d6b6; --grid-2: #cfc19c; --drop: #efe4c6; --hatch: #ddd0ad; --tint-pink: #f8d9e2; --tint-magenta: #efd9ec; --tint-green: #dcefcf; --legend-miss: #d6c9a6; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #b9ad8c; --line-thick: 2px solid #1f4f8f; --shadow: 0 8px 22px rgba(4, 18, 48, .45); --shadow-sm: 0 3px 8px rgba(4, 18, 48, .35); --blob: 3px; --blob-sm: 3px; --pill: 3px; --font-display: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-terminal: 'IBM Plex Mono', Consolas, 'Lucida Console', monospace; --font-typewriter: 'Courier New', Courier, 'IBM Plex Mono', monospace; --ibm-blue: #1f5fd6; --cabinet: #1f4f8f; --cabinet-dark: #0b2a55; --trim: #e9edf2; --screen: #0b0f0c; --phosphor: #3dff7a; --lamp: #ffe9a8; --lamp-amber: #ffcf6b; --key: linear-gradient(#f4f3ef, #d8d6ce); --key-edge: #8e8b82; /* a punch card's cut corner; the rest of the polygon reaches far past the box, so nothing but that corner is clipped and menus, shadows and focus rings still show beyond the edges */ --card-corner: polygon(-10000px 16px, 0 16px, 16px 0, 16px -10000px, calc(100% + 10000px) -10000px, calc(100% + 10000px) calc(100% + 10000px), -10000px calc(100% + 10000px)); --small-card-corner: polygon(-10000px 11px, 0 11px, 11px 0, 11px -10000px, calc(100% + 10000px) -10000px, calc(100% + 10000px) calc(100% + 10000px), -10000px calc(100% + 10000px)); --machine-room: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='280'%3E%3Crect y='246' width='1200' height='34' fill='%238e98a4'/%3E%3Crect y='246' width='1200' height='2' fill='%23b7c0ca'/%3E%3Crect y='263' width='1200' height='1' fill='%2376808c'/%3E%3Cg fill='%2376808c'%3E%3Crect x='0' y='248' width='1' height='32'/%3E%3Crect x='60' y='248' width='1' height='32'/%3E%3Crect x='120' y='248' width='1' height='32'/%3E%3Crect x='180' y='248' width='1' height='32'/%3E%3Crect x='240' y='248' width='1' height='32'/%3E%3Crect x='300' y='248' width='1' height='32'/%3E%3Crect x='360' y='248' width='1' height='32'/%3E%3Crect x='420' y='248' width='1' height='32'/%3E%3Crect x='480' y='248' width='1' height='32'/%3E%3Crect x='540' y='248' width='1' height='32'/%3E%3Crect x='600' y='248' width='1' height='32'/%3E%3Crect x='660' y='248' width='1' height='32'/%3E%3Crect x='720' y='248' width='1' height='32'/%3E%3Crect x='780' y='248' width='1' height='32'/%3E%3Crect x='840' y='248' width='1' height='32'/%3E%3Crect x='900' y='248' width='1' height='32'/%3E%3Crect x='960' y='248' width='1' height='32'/%3E%3Crect x='1020' y='248' width='1' height='32'/%3E%3Crect x='1080' y='248' width='1' height='32'/%3E%3Crect x='1140' y='248' width='1' height='32'/%3E%3C/g%3E%3Crect x='30' y='70' width='112' height='176' fill='%23d3d8de' stroke='%237f8994'/%3E%3Crect x='30' y='70' width='112' height='12' fill='%231f4f8f'/%3E%3Crect x='40' y='92' width='92' height='84' rx='3' fill='%23222b37' stroke='%2311161d'/%3E%3Ccircle cx='63' cy='134' r='22' fill='%23aeb8c3' fill-opacity='.5' stroke='%23e6eaee' stroke-width='1.2'/%3E%3Ccircle cx='63' cy='134' r='15' fill='%234e3524'/%3E%3Ccircle cx='63' cy='134' r='5' fill='%23e8ebef' stroke='%238d97a3'/%3E%3Ccircle cx='109' cy='134' r='22' fill='%23aeb8c3' fill-opacity='.5' stroke='%23e6eaee' stroke-width='1.2'/%3E%3Ccircle cx='109' cy='134' r='15' fill='%234e3524'/%3E%3Ccircle cx='109' cy='134' r='5' fill='%23e8ebef' stroke='%238d97a3'/%3E%3Crect x='52' y='186' width='16' height='46' fill='%231b222b'/%3E%3Crect x='55' y='204' width='10' height='26' rx='4' fill='%234e3524'/%3E%3Crect x='104' y='186' width='16' height='46' fill='%231b222b'/%3E%3Crect x='107' y='204' width='10' height='26' rx='4' fill='%234e3524'/%3E%3Crect x='74' y='190' width='24' height='6' fill='%23f4f2ea'/%3E%3Crect x='74' y='200' width='24' height='6' fill='%23d32f2f'/%3E%3Crect x='156' y='70' width='112' height='176' fill='%23d3d8de' stroke='%237f8994'/%3E%3Crect x='156' y='70' width='112' height='12' fill='%231f4f8f'/%3E%3Crect x='166' y='92' width='92' height='84' rx='3' fill='%23222b37' stroke='%2311161d'/%3E%3Ccircle cx='189' cy='134' r='22' fill='%23aeb8c3' fill-opacity='.5' stroke='%23e6eaee' stroke-width='1.2'/%3E%3Ccircle cx='189' cy='134' r='15' fill='%234e3524'/%3E%3Ccircle cx='189' cy='134' r='5' fill='%23e8ebef' stroke='%238d97a3'/%3E%3Ccircle cx='235' cy='134' r='22' fill='%23aeb8c3' fill-opacity='.5' stroke='%23e6eaee' stroke-width='1.2'/%3E%3Ccircle cx='235' cy='134' r='15' fill='%234e3524'/%3E%3Ccircle cx='235' cy='134' r='5' fill='%23e8ebef' stroke='%238d97a3'/%3E%3Crect x='178' y='186' width='16' height='46' fill='%231b222b'/%3E%3Crect x='181' y='204' width='10' height='26' rx='4' fill='%234e3524'/%3E%3Crect x='230' y='186' width='16' height='46' fill='%231b222b'/%3E%3Crect x='233' y='204' width='10' height='26' rx='4' fill='%234e3524'/%3E%3Crect x='200' y='190' width='24' height='6' fill='%23f4f2ea'/%3E%3Crect x='200' y='200' width='24' height='6' fill='%23d32f2f'/%3E%3Crect x='300' y='50' width='150' height='196' fill='%231f4f8f' stroke='%230b2a55'/%3E%3Crect x='301' y='51' width='4' height='194' fill='%233c6db3'/%3E%3Crect x='300' y='62' width='150' height='5' fill='%23e9edf2'/%3E%3Cpath d='M350 70V238M400 70V238' stroke='%23163f78' stroke-width='1.5'/%3E%3Crect x='320' y='80' width='44' height='24' fill='%23d8dce1' stroke='%239aa3ad'/%3E%3Crect x='316' y='212' width='118' height='22' fill='%23163f78'/%3E%3Cg fill='%232a5c9e'%3E%3Crect x='318' y='214' width='114' height='1.5'/%3E%3Crect x='318' y='218' width='114' height='1.5'/%3E%3Crect x='318' y='222' width='114' height='1.5'/%3E%3Crect x='318' y='226' width='114' height='1.5'/%3E%3Crect x='318' y='230' width='114' height='1.5'/%3E%3C/g%3E%3Cg fill='%237d8794'%3E%3Ccircle cx='327' cy='87' r='2.4'/%3E%3Ccircle cx='337' cy='87' r='2.4'/%3E%3Ccircle cx='347' cy='87' r='2.4'/%3E%3Ccircle cx='357' cy='87' r='2.4'/%3E%3Ccircle cx='327' cy='96' r='2.4'/%3E%3Ccircle cx='337' cy='96' r='2.4'/%3E%3Ccircle cx='347' cy='96' r='2.4'/%3E%3Ccircle cx='357' cy='96' r='2.4'/%3E%3C/g%3E%3Crect x='476' y='168' width='214' height='78' fill='%231f4f8f' stroke='%230b2a55'/%3E%3Crect x='476' y='176' width='214' height='4' fill='%23e9edf2'/%3E%3Cpath d='M482 168L494 106H672L684 168Z' fill='%23dfe3e8' stroke='%238d97a3'/%3E%3Cg fill='%237d8794'%3E%3Ccircle cx='502' cy='116' r='2.4'/%3E%3Ccircle cx='511' cy='116' r='2.4'/%3E%3Ccircle cx='520' cy='116' r='2.4'/%3E%3Ccircle cx='529' cy='116' r='2.4'/%3E%3Ccircle cx='538' cy='116' r='2.4'/%3E%3Ccircle cx='547' cy='116' r='2.4'/%3E%3Ccircle cx='556' cy='116' r='2.4'/%3E%3Ccircle cx='565' cy='116' r='2.4'/%3E%3Ccircle cx='574' cy='116' r='2.4'/%3E%3Ccircle cx='583' cy='116' r='2.4'/%3E%3Ccircle cx='592' cy='116' r='2.4'/%3E%3Ccircle cx='601' cy='116' r='2.4'/%3E%3Ccircle cx='610' cy='116' r='2.4'/%3E%3Ccircle cx='619' cy='116' r='2.4'/%3E%3Ccircle cx='628' cy='116' r='2.4'/%3E%3Ccircle cx='637' cy='116' r='2.4'/%3E%3Ccircle cx='646' cy='116' r='2.4'/%3E%3Ccircle cx='655' cy='116' r='2.4'/%3E%3Ccircle cx='664' cy='116' r='2.4'/%3E%3Ccircle cx='502' cy='126' r='2.4'/%3E%3Ccircle cx='511' cy='126' r='2.4'/%3E%3Ccircle cx='520' cy='126' r='2.4'/%3E%3Ccircle cx='529' cy='126' r='2.4'/%3E%3Ccircle cx='538' cy='126' r='2.4'/%3E%3Ccircle cx='547' cy='126' r='2.4'/%3E%3Ccircle cx='556' cy='126' r='2.4'/%3E%3Ccircle cx='565' cy='126' r='2.4'/%3E%3Ccircle cx='574' cy='126' r='2.4'/%3E%3Ccircle cx='583' cy='126' r='2.4'/%3E%3Ccircle cx='592' cy='126' r='2.4'/%3E%3Ccircle cx='601' cy='126' r='2.4'/%3E%3Ccircle cx='610' cy='126' r='2.4'/%3E%3Ccircle cx='619' cy='126' r='2.4'/%3E%3Ccircle cx='628' cy='126' r='2.4'/%3E%3Ccircle cx='637' cy='126' r='2.4'/%3E%3Ccircle cx='646' cy='126' r='2.4'/%3E%3Ccircle cx='655' cy='126' r='2.4'/%3E%3Ccircle cx='664' cy='126' r='2.4'/%3E%3Ccircle cx='502' cy='136' r='2.4'/%3E%3Ccircle cx='511' cy='136' r='2.4'/%3E%3Ccircle cx='520' cy='136' r='2.4'/%3E%3Ccircle cx='529' cy='136' r='2.4'/%3E%3Ccircle cx='538' cy='136' r='2.4'/%3E%3Ccircle cx='547' cy='136' r='2.4'/%3E%3Ccircle cx='556' cy='136' r='2.4'/%3E%3Ccircle cx='565' cy='136' r='2.4'/%3E%3Ccircle cx='574' cy='136' r='2.4'/%3E%3Ccircle cx='583' cy='136' r='2.4'/%3E%3Ccircle cx='592' cy='136' r='2.4'/%3E%3Ccircle cx='601' cy='136' r='2.4'/%3E%3Ccircle cx='610' cy='136' r='2.4'/%3E%3Ccircle cx='619' cy='136' r='2.4'/%3E%3Ccircle cx='628' cy='136' r='2.4'/%3E%3Ccircle cx='637' cy='136' r='2.4'/%3E%3Ccircle cx='646' cy='136' r='2.4'/%3E%3Ccircle cx='655' cy='136' r='2.4'/%3E%3Ccircle cx='664' cy='136' r='2.4'/%3E%3Ccircle cx='502' cy='146' r='2.4'/%3E%3Ccircle cx='511' cy='146' r='2.4'/%3E%3Ccircle cx='520' cy='146' r='2.4'/%3E%3Ccircle cx='529' cy='146' r='2.4'/%3E%3Ccircle cx='538' cy='146' r='2.4'/%3E%3Ccircle cx='547' cy='146' r='2.4'/%3E%3Ccircle cx='556' cy='146' r='2.4'/%3E%3Ccircle cx='565' cy='146' r='2.4'/%3E%3Ccircle cx='574' cy='146' r='2.4'/%3E%3Ccircle cx='583' cy='146' r='2.4'/%3E%3Ccircle cx='592' cy='146' r='2.4'/%3E%3Ccircle cx='601' cy='146' r='2.4'/%3E%3Ccircle cx='610' cy='146' r='2.4'/%3E%3Ccircle cx='619' cy='146' r='2.4'/%3E%3Ccircle cx='628' cy='146' r='2.4'/%3E%3Ccircle cx='637' cy='146' r='2.4'/%3E%3Ccircle cx='646' cy='146' r='2.4'/%3E%3Ccircle cx='655' cy='146' r='2.4'/%3E%3Ccircle cx='664' cy='146' r='2.4'/%3E%3C/g%3E%3Ccircle cx='520' cy='158' r='4.5' fill='%232a2d33'/%3E%3Crect x='519.4' y='154' width='1.2' height='4' fill='%23e8ebef'/%3E%3Ccircle cx='550' cy='158' r='4.5' fill='%232a2d33'/%3E%3Crect x='549.4' y='154' width='1.2' height='4' fill='%23e8ebef'/%3E%3Ccircle cx='580' cy='158' r='4.5' fill='%232a2d33'/%3E%3Crect x='579.4' y='154' width='1.2' height='4' fill='%23e8ebef'/%3E%3Ccircle cx='610' cy='158' r='4.5' fill='%232a2d33'/%3E%3Crect x='609.4' y='154' width='1.2' height='4' fill='%23e8ebef'/%3E%3Ccircle cx='640' cy='158' r='4.5' fill='%232a2d33'/%3E%3Crect x='639.4' y='154' width='1.2' height='4' fill='%23e8ebef'/%3E%3Crect x='510' y='190' width='16' height='10' rx='1.5' fill='%23f4f2ea' stroke='%230b2a55'/%3E%3Crect x='536' y='190' width='16' height='10' rx='1.5' fill='%23d32f2f' stroke='%230b2a55'/%3E%3Crect x='562' y='190' width='16' height='10' rx='1.5' fill='%233d7be6' stroke='%230b2a55'/%3E%3Crect x='588' y='190' width='16' height='10' rx='1.5' fill='%23f4f2ea' stroke='%230b2a55'/%3E%3Crect x='614' y='190' width='16' height='10' rx='1.5' fill='%23ffcf6b' stroke='%230b2a55'/%3E%3Crect x='640' y='190' width='16' height='10' rx='1.5' fill='%23f4f2ea' stroke='%230b2a55'/%3E%3Crect x='724' y='160' width='92' height='86' fill='%23d3d8de' stroke='%237f8994'/%3E%3Crect x='724' y='160' width='92' height='10' fill='%231f4f8f'/%3E%3Cpath d='M738 160V148A32 10 0 0 1 802 148V160Z' fill='%23cfe0f2' fill-opacity='.6' stroke='%238d97a3'/%3E%3Cpath d='M742 150H798M742 154H798M742 158H798' stroke='%238d97a3'/%3E%3Crect x='736' y='182' width='68' height='14' fill='%23c3c9d0' stroke='%239aa3ad'/%3E%3Ccircle cx='748' cy='189' r='2.4' fill='%237d8794'/%3E%3Ccircle cx='760' cy='189' r='2.4' fill='%237d8794'/%3E%3Crect x='824' y='160' width='92' height='86' fill='%23d3d8de' stroke='%237f8994'/%3E%3Crect x='824' y='160' width='92' height='10' fill='%231f4f8f'/%3E%3Cpath d='M838 160V148A32 10 0 0 1 902 148V160Z' fill='%23cfe0f2' fill-opacity='.6' stroke='%238d97a3'/%3E%3Cpath d='M842 150H898M842 154H898M842 158H898' stroke='%238d97a3'/%3E%3Crect x='836' y='182' width='68' height='14' fill='%23c3c9d0' stroke='%239aa3ad'/%3E%3Ccircle cx='848' cy='189' r='2.4' fill='%237d8794'/%3E%3Ccircle cx='860' cy='189' r='2.4' fill='%237d8794'/%3E%3Crect x='988' y='112' width='96' height='60' fill='%23fdfdf8' stroke='%23c9c2ae'/%3E%3Cg fill='%23d4ecd0'%3E%3Crect x='989' y='116' width='94' height='4'/%3E%3Crect x='989' y='124' width='94' height='4'/%3E%3Crect x='989' y='132' width='94' height='4'/%3E%3Crect x='989' y='140' width='94' height='4'/%3E%3Crect x='989' y='148' width='94' height='4'/%3E%3Crect x='989' y='156' width='94' height='4'/%3E%3Crect x='989' y='164' width='94' height='4'/%3E%3C/g%3E%3Crect x='958' y='172' width='156' height='74' fill='%23d3d8de' stroke='%237f8994'/%3E%3Crect x='956' y='164' width='160' height='12' rx='3' fill='%23c2c8cf' stroke='%237f8994'/%3E%3Crect x='970' y='186' width='60' height='10' fill='%231f4f8f'/%3E%3Crect x='1118' y='222' width='40' height='24' fill='%23fdfdf8' stroke='%23c9c2ae'/%3E%3Cg fill='%23c9c2ae'%3E%3Crect x='1119' y='226' width='38' height='1'/%3E%3Crect x='1119' y='230' width='38' height='1'/%3E%3Crect x='1119' y='234' width='38' height='1'/%3E%3Crect x='1119' y='238' width='38' height='1'/%3E%3Crect x='1119' y='242' width='38' height='1'/%3E%3C/g%3E%3C/svg%3E"); --machine-room-moving: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='280'%3E%3Cg%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 63 134)'/%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 63 134)'/%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 63 134)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 63 134;35 63 134;80 63 134;80 63 134;130 63 134;170 63 134;170 63 134;215 63 134;260 63 134;300 63 134;300 63 134;345 63 134' dur='3.2s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 109 134)'/%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 109 134)'/%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 109 134)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 109 134;40 109 134;40 109 134;85 109 134;130 109 134;160 109 134;205 109 134;250 109 134;250 109 134;290 109 134;335 109 134;340 109 134' dur='3.2s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 189 134)'/%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 189 134)'/%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 189 134)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 189 134;0 189 134;60 189 134;110 189 134;90 189 134;140 189 134;190 189 134;240 189 134;240 189 134;285 189 134;330 189 134;330 189 134' dur='4.1s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 235 134)'/%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 235 134)'/%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 235 134)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 235 134;50 235 134;95 235 134;95 235 134;60 235 134;110 235 134;155 235 134;200 235 134;250 235 134;250 235 134;300 235 134;345 235 134' dur='4.1s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='511' cy='116' r='4.6'/%3E%3Ccircle cx='529' cy='116' r='4.6'/%3E%3Ccircle cx='556' cy='116' r='4.6'/%3E%3Ccircle cx='619' cy='116' r='4.6'/%3E%3Ccircle cx='664' cy='116' r='4.6'/%3E%3Ccircle cx='502' cy='126' r='4.6'/%3E%3Ccircle cx='592' cy='126' r='4.6'/%3E%3Ccircle cx='655' cy='126' r='4.6'/%3E%3Ccircle cx='502' cy='136' r='4.6'/%3E%3Ccircle cx='511' cy='136' r='4.6'/%3E%3Ccircle cx='628' cy='136' r='4.6'/%3E%3Ccircle cx='529' cy='146' r='4.6'/%3E%3Ccircle cx='601' cy='146' r='4.6'/%3E%3Ccircle cx='619' cy='146' r='4.6'/%3E%3C/g%3E%3Ccircle cx='511' cy='116' r='2.5'/%3E%3Ccircle cx='529' cy='116' r='2.5'/%3E%3Ccircle cx='556' cy='116' r='2.5'/%3E%3Ccircle cx='619' cy='116' r='2.5'/%3E%3Ccircle cx='664' cy='116' r='2.5'/%3E%3Ccircle cx='502' cy='126' r='2.5'/%3E%3Ccircle cx='592' cy='126' r='2.5'/%3E%3Ccircle cx='655' cy='126' r='2.5'/%3E%3Ccircle cx='502' cy='136' r='2.5'/%3E%3Ccircle cx='511' cy='136' r='2.5'/%3E%3Ccircle cx='628' cy='136' r='2.5'/%3E%3Ccircle cx='529' cy='146' r='2.5'/%3E%3Ccircle cx='601' cy='146' r='2.5'/%3E%3Ccircle cx='619' cy='146' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='646' cy='126' r='4.6'/%3E%3Ccircle cx='347' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='646' cy='126' r='2.5'/%3E%3Ccircle cx='347' cy='96' r='2.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='538' cy='116' r='4.6'/%3E%3Ccircle cx='601' cy='116' r='4.6'/%3E%3Ccircle cx='655' cy='116' r='4.6'/%3E%3Ccircle cx='565' cy='126' r='4.6'/%3E%3Ccircle cx='601' cy='126' r='4.6'/%3E%3Ccircle cx='610' cy='126' r='4.6'/%3E%3Ccircle cx='619' cy='126' r='4.6'/%3E%3Ccircle cx='547' cy='136' r='4.6'/%3E%3Ccircle cx='565' cy='136' r='4.6'/%3E%3Ccircle cx='592' cy='136' r='4.6'/%3E%3Ccircle cx='547' cy='146' r='4.6'/%3E%3Ccircle cx='574' cy='146' r='4.6'/%3E%3Ccircle cx='646' cy='146' r='4.6'/%3E%3Ccircle cx='347' cy='87' r='4.6'/%3E%3Ccircle cx='357' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='538' cy='116' r='2.5'/%3E%3Ccircle cx='601' cy='116' r='2.5'/%3E%3Ccircle cx='655' cy='116' r='2.5'/%3E%3Ccircle cx='565' cy='126' r='2.5'/%3E%3Ccircle cx='601' cy='126' r='2.5'/%3E%3Ccircle cx='610' cy='126' r='2.5'/%3E%3Ccircle cx='619' cy='126' r='2.5'/%3E%3Ccircle cx='547' cy='136' r='2.5'/%3E%3Ccircle cx='565' cy='136' r='2.5'/%3E%3Ccircle cx='592' cy='136' r='2.5'/%3E%3Ccircle cx='547' cy='146' r='2.5'/%3E%3Ccircle cx='574' cy='146' r='2.5'/%3E%3Ccircle cx='646' cy='146' r='2.5'/%3E%3Ccircle cx='347' cy='87' r='2.5'/%3E%3Ccircle cx='357' cy='96' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='547' cy='126' r='4.6'/%3E%3Ccircle cx='664' cy='136' r='4.6'/%3E%3C/g%3E%3Ccircle cx='547' cy='126' r='2.5'/%3E%3Ccircle cx='664' cy='136' r='2.5'/%3E%3C/g%3E%3Canimate attributeName='opacity' values='1;0;1;0;0;1;1;0' dur='1.6s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='592' cy='116' r='4.6'/%3E%3Ccircle cx='511' cy='126' r='4.6'/%3E%3Ccircle cx='520' cy='126' r='4.6'/%3E%3Ccircle cx='538' cy='136' r='4.6'/%3E%3Ccircle cx='610' cy='136' r='4.6'/%3E%3Ccircle cx='655' cy='136' r='4.6'/%3E%3Ccircle cx='538' cy='146' r='4.6'/%3E%3Ccircle cx='556' cy='146' r='4.6'/%3E%3Ccircle cx='327' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='592' cy='116' r='2.5'/%3E%3Ccircle cx='511' cy='126' r='2.5'/%3E%3Ccircle cx='520' cy='126' r='2.5'/%3E%3Ccircle cx='538' cy='136' r='2.5'/%3E%3Ccircle cx='610' cy='136' r='2.5'/%3E%3Ccircle cx='655' cy='136' r='2.5'/%3E%3Ccircle cx='538' cy='146' r='2.5'/%3E%3Ccircle cx='556' cy='146' r='2.5'/%3E%3Ccircle cx='327' cy='96' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='646' cy='116' r='4.6'/%3E%3Ccircle cx='628' cy='126' r='4.6'/%3E%3Ccircle cx='556' cy='136' r='4.6'/%3E%3Ccircle cx='583' cy='136' r='4.6'/%3E%3Ccircle cx='565' cy='146' r='4.6'/%3E%3C/g%3E%3Ccircle cx='646' cy='116' r='2.5'/%3E%3Ccircle cx='628' cy='126' r='2.5'/%3E%3Ccircle cx='556' cy='136' r='2.5'/%3E%3Ccircle cx='583' cy='136' r='2.5'/%3E%3Ccircle cx='565' cy='146' r='2.5'/%3E%3C/g%3E%3Canimate attributeName='opacity' values='0;1;1;0;1;0' dur='2.4s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='502' cy='116' r='4.6'/%3E%3Ccircle cx='565' cy='116' r='4.6'/%3E%3Ccircle cx='583' cy='116' r='4.6'/%3E%3Ccircle cx='538' cy='126' r='4.6'/%3E%3Ccircle cx='556' cy='126' r='4.6'/%3E%3Ccircle cx='583' cy='126' r='4.6'/%3E%3Ccircle cx='637' cy='126' r='4.6'/%3E%3Ccircle cx='601' cy='136' r='4.6'/%3E%3Ccircle cx='502' cy='146' r='4.6'/%3E%3Ccircle cx='511' cy='146' r='4.6'/%3E%3Ccircle cx='610' cy='146' r='4.6'/%3E%3Ccircle cx='637' cy='146' r='4.6'/%3E%3C/g%3E%3Ccircle cx='502' cy='116' r='2.5'/%3E%3Ccircle cx='565' cy='116' r='2.5'/%3E%3Ccircle cx='583' cy='116' r='2.5'/%3E%3Ccircle cx='538' cy='126' r='2.5'/%3E%3Ccircle cx='556' cy='126' r='2.5'/%3E%3Ccircle cx='583' cy='126' r='2.5'/%3E%3Ccircle cx='637' cy='126' r='2.5'/%3E%3Ccircle cx='601' cy='136' r='2.5'/%3E%3Ccircle cx='502' cy='146' r='2.5'/%3E%3Ccircle cx='511' cy='146' r='2.5'/%3E%3Ccircle cx='610' cy='146' r='2.5'/%3E%3Ccircle cx='637' cy='146' r='2.5'/%3E%3C/g%3E%3Canimate attributeName='opacity' values='1;1;0;1;0;0;1' dur='3.5s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='748' cy='189' r='4.6'/%3E%3Ccircle cx='848' cy='189' r='4.6'/%3E%3C/g%3E%3Ccircle cx='748' cy='189' r='2.5'/%3E%3Ccircle cx='848' cy='189' r='2.5'/%3E%3C/g%3E%3Canimate attributeName='opacity' values='1;0;0;1;0;1;0;0' dur='0.9s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E"); --machine-room-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='280'%3E%3Cg%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 63 134)'/%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 63 134)'/%3E%3Crect x='61.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 63 134)'/%3E%3C/g%3E%3Cg%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 109 134)'/%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 109 134)'/%3E%3Crect x='107.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 109 134)'/%3E%3C/g%3E%3Cg%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 189 134)'/%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 189 134)'/%3E%3Crect x='187.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 189 134)'/%3E%3C/g%3E%3Cg%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(0 235 134)'/%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(120 235 134)'/%3E%3Crect x='233.4' y='121' width='3.2' height='6.5' rx='1.4' fill='%23e8ebef' transform='rotate(240 235 134)'/%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='511' cy='116' r='4.6'/%3E%3Ccircle cx='529' cy='116' r='4.6'/%3E%3Ccircle cx='556' cy='116' r='4.6'/%3E%3Ccircle cx='619' cy='116' r='4.6'/%3E%3Ccircle cx='664' cy='116' r='4.6'/%3E%3Ccircle cx='502' cy='126' r='4.6'/%3E%3Ccircle cx='592' cy='126' r='4.6'/%3E%3Ccircle cx='655' cy='126' r='4.6'/%3E%3Ccircle cx='502' cy='136' r='4.6'/%3E%3Ccircle cx='511' cy='136' r='4.6'/%3E%3Ccircle cx='628' cy='136' r='4.6'/%3E%3Ccircle cx='529' cy='146' r='4.6'/%3E%3Ccircle cx='601' cy='146' r='4.6'/%3E%3Ccircle cx='619' cy='146' r='4.6'/%3E%3C/g%3E%3Ccircle cx='511' cy='116' r='2.5'/%3E%3Ccircle cx='529' cy='116' r='2.5'/%3E%3Ccircle cx='556' cy='116' r='2.5'/%3E%3Ccircle cx='619' cy='116' r='2.5'/%3E%3Ccircle cx='664' cy='116' r='2.5'/%3E%3Ccircle cx='502' cy='126' r='2.5'/%3E%3Ccircle cx='592' cy='126' r='2.5'/%3E%3Ccircle cx='655' cy='126' r='2.5'/%3E%3Ccircle cx='502' cy='136' r='2.5'/%3E%3Ccircle cx='511' cy='136' r='2.5'/%3E%3Ccircle cx='628' cy='136' r='2.5'/%3E%3Ccircle cx='529' cy='146' r='2.5'/%3E%3Ccircle cx='601' cy='146' r='2.5'/%3E%3Ccircle cx='619' cy='146' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='646' cy='126' r='4.6'/%3E%3Ccircle cx='347' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='646' cy='126' r='2.5'/%3E%3Ccircle cx='347' cy='96' r='2.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='538' cy='116' r='4.6'/%3E%3Ccircle cx='601' cy='116' r='4.6'/%3E%3Ccircle cx='655' cy='116' r='4.6'/%3E%3Ccircle cx='565' cy='126' r='4.6'/%3E%3Ccircle cx='601' cy='126' r='4.6'/%3E%3Ccircle cx='610' cy='126' r='4.6'/%3E%3Ccircle cx='619' cy='126' r='4.6'/%3E%3Ccircle cx='547' cy='136' r='4.6'/%3E%3Ccircle cx='565' cy='136' r='4.6'/%3E%3Ccircle cx='592' cy='136' r='4.6'/%3E%3Ccircle cx='547' cy='146' r='4.6'/%3E%3Ccircle cx='574' cy='146' r='4.6'/%3E%3Ccircle cx='646' cy='146' r='4.6'/%3E%3Ccircle cx='347' cy='87' r='4.6'/%3E%3Ccircle cx='357' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='538' cy='116' r='2.5'/%3E%3Ccircle cx='601' cy='116' r='2.5'/%3E%3Ccircle cx='655' cy='116' r='2.5'/%3E%3Ccircle cx='565' cy='126' r='2.5'/%3E%3Ccircle cx='601' cy='126' r='2.5'/%3E%3Ccircle cx='610' cy='126' r='2.5'/%3E%3Ccircle cx='619' cy='126' r='2.5'/%3E%3Ccircle cx='547' cy='136' r='2.5'/%3E%3Ccircle cx='565' cy='136' r='2.5'/%3E%3Ccircle cx='592' cy='136' r='2.5'/%3E%3Ccircle cx='547' cy='146' r='2.5'/%3E%3Ccircle cx='574' cy='146' r='2.5'/%3E%3Ccircle cx='646' cy='146' r='2.5'/%3E%3Ccircle cx='347' cy='87' r='2.5'/%3E%3Ccircle cx='357' cy='96' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='547' cy='126' r='4.6'/%3E%3Ccircle cx='664' cy='136' r='4.6'/%3E%3C/g%3E%3Ccircle cx='547' cy='126' r='2.5'/%3E%3Ccircle cx='664' cy='136' r='2.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg fill='%23fff1b8'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='592' cy='116' r='4.6'/%3E%3Ccircle cx='511' cy='126' r='4.6'/%3E%3Ccircle cx='520' cy='126' r='4.6'/%3E%3Ccircle cx='538' cy='136' r='4.6'/%3E%3Ccircle cx='610' cy='136' r='4.6'/%3E%3Ccircle cx='655' cy='136' r='4.6'/%3E%3Ccircle cx='538' cy='146' r='4.6'/%3E%3Ccircle cx='556' cy='146' r='4.6'/%3E%3Ccircle cx='327' cy='96' r='4.6'/%3E%3C/g%3E%3Ccircle cx='592' cy='116' r='2.5'/%3E%3Ccircle cx='511' cy='126' r='2.5'/%3E%3Ccircle cx='520' cy='126' r='2.5'/%3E%3Ccircle cx='538' cy='136' r='2.5'/%3E%3Ccircle cx='610' cy='136' r='2.5'/%3E%3Ccircle cx='655' cy='136' r='2.5'/%3E%3Ccircle cx='538' cy='146' r='2.5'/%3E%3Ccircle cx='556' cy='146' r='2.5'/%3E%3Ccircle cx='327' cy='96' r='2.5'/%3E%3C/g%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='646' cy='116' r='4.6'/%3E%3Ccircle cx='628' cy='126' r='4.6'/%3E%3Ccircle cx='556' cy='136' r='4.6'/%3E%3Ccircle cx='583' cy='136' r='4.6'/%3E%3Ccircle cx='565' cy='146' r='4.6'/%3E%3C/g%3E%3Ccircle cx='646' cy='116' r='2.5'/%3E%3Ccircle cx='628' cy='126' r='2.5'/%3E%3Ccircle cx='556' cy='136' r='2.5'/%3E%3Ccircle cx='583' cy='136' r='2.5'/%3E%3Ccircle cx='565' cy='146' r='2.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg fill='%23ffcf6b'%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='748' cy='189' r='4.6'/%3E%3Ccircle cx='848' cy='189' r='4.6'/%3E%3C/g%3E%3Ccircle cx='748' cy='189' r='2.5'/%3E%3Ccircle cx='848' cy='189' r='2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --lamps-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='8'%3E%3Ccircle cx='6' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='18' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='30' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='42' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='54' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='66' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='78' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='90' cy='4' r='2.2' fill='%234a6a9a'/%3E%3Ccircle cx='102' cy='4' r='2.2' fill='%234a6a9a'/%3E%3C/svg%3E"); --lamps-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='8'%3E%3Ccircle cx='6' cy='4' r='3.8' fill='%23fff1b8' fill-opacity='.3'/%3E%3Ccircle cx='6' cy='4' r='2.2' fill='%23fff1b8'/%3E%3Ccircle cx='42' cy='4' r='3.8' fill='%23fff1b8' fill-opacity='.3'/%3E%3Ccircle cx='42' cy='4' r='2.2' fill='%23fff1b8'/%3E%3Ccircle cx='54' cy='4' r='3.8' fill='%23fff1b8' fill-opacity='.3'/%3E%3Ccircle cx='54' cy='4' r='2.2' fill='%23fff1b8'/%3E%3Ccircle cx='90' cy='4' r='3.8' fill='%23fff1b8' fill-opacity='.3'/%3E%3Ccircle cx='90' cy='4' r='2.2' fill='%23fff1b8'/%3E%3C/svg%3E"); --lamps-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='8'%3E%3Ccircle cx='18' cy='4' r='3.8' fill='%23ffcf6b' fill-opacity='.3'/%3E%3Ccircle cx='18' cy='4' r='2.2' fill='%23ffcf6b'/%3E%3Ccircle cx='66' cy='4' r='3.8' fill='%23ffcf6b' fill-opacity='.3'/%3E%3Ccircle cx='66' cy='4' r='2.2' fill='%23ffcf6b'/%3E%3Ccircle cx='102' cy='4' r='3.8' fill='%23ffcf6b' fill-opacity='.3'/%3E%3Ccircle cx='102' cy='4' r='2.2' fill='%23ffcf6b'/%3E%3C/svg%3E"); --card-holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='10'%3E%3Crect x='9' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='15' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='24' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='69' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='90' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='96' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='108' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='144' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='147' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='153' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='156' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='159' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='165' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='207' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='210' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='213' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='216' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='222' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='243' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='276' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='279' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3Crect x='300' y='1.5' width='2.2' height='6.5' fill='%230f3d85'/%3E%3C/svg%3E"); --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13' viewBox='0 0 18 13'%3E%3Cpath d='M3 .5h14.5v12H.5V3z' fill='%23fbf6e8' stroke='%231f4f8f'/%3E%3Cg fill='%231f4f8f'%3E%3Cpath d='M4 4.5h1.4v2.6H4z'/%3E%3Cpath d='M7 7.5h1.4v2.6H7z'/%3E%3Cpath d='M10 4.5h1.4v2.6H10z'/%3E%3Cpath d='M13 8.5h1.4v2.6H13z'/%3E%3Cpath d='M8.5 2.5h1.4v2.6H8.5z'/%3E%3C/g%3E%3C/svg%3E"); --reel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23c8cdd3' stroke='%235f6873'/%3E%3Cg fill='%232a3340'%3E%3Cpath d='M6.97 4.54A9 9 0 0 1 17.03 4.54L14.57 8.19A4.6 4.6 0 0 0 9.43 8.19Z'/%3E%3Cpath d='M20.98 11.37A9 9 0 0 1 15.95 20.09L14.02 16.13A4.6 4.6 0 0 0 16.59 11.68Z'/%3E%3Cpath d='M8.05 20.09A9 9 0 0 1 3.02 11.37L7.41 11.68A4.6 4.6 0 0 0 9.98 16.13Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%235f6873'/%3E%3C/svg%3E"); --tractor-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' fill='%23fdfdf8'/%3E%3Ccircle cx='8' cy='12' r='3.6' fill='%231d3f72'/%3E%3Cpath d='M16.5 1v6M16.5 13v6' stroke='%23b9b29c'/%3E%3C/svg%3E"); --tractor-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' fill='%23fdfdf8'/%3E%3Ccircle cx='10' cy='12' r='3.6' fill='%231d3f72'/%3E%3Cpath d='M1.5 1v6M1.5 13v6' stroke='%23b9b29c'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1.5l4 4 4-4' fill='none' stroke='%233dff7a' stroke-width='1.8'/%3E%3C/svg%3E"); } /* the machine room along the bottom of the screen, under an IBM-blue wall */ :root[data-theme="ibm"] body { background: var(--machine-room) left bottom / 1200px 280px repeat-x, linear-gradient(#0a2f6b, #0f3d85 55%, #1a4f9c); background-attachment: fixed; } /* its moving parts: reels jerking round and lamps blinking; still when motion is reduced */ :root[data-theme="ibm"] body::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 280px; z-index: -1; pointer-events: none; background: var(--machine-room-moving) left bottom / 1200px 280px repeat-x; } :root[data-theme="ibm"][data-motion="reduce"] body::before { background-image: var(--machine-room-still); } @media (prefers-reduced-motion: reduce) { :root[data-theme="ibm"] body::before { background-image: var(--machine-room-still); } } :root[data-theme="ibm"] * { text-shadow: none !important; } :root[data-theme="ibm"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #ffffff; letter-spacing: -.005em; } :root[data-theme="ibm"] :is(.panel, .dialog-card, .modal-card) :is(h1, h2, h3, h4) { color: #0b3a82; } :root[data-theme="ibm"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1.15em; height: .85em; margin-right: .45em; vertical-align: -.04em; background: var(--card-icon) center / contain no-repeat; } /* a heading out on the wall, not on a card, gets a cabinet's placard */ :root[data-theme="ibm"] h2.area-title { display: inline-block; padding: 5px 14px 4px 10px; color: #ffffff; background: linear-gradient(#2a5c9e, var(--cabinet)); border-bottom: 3px solid var(--trim); box-shadow: var(--shadow-sm); } /* the Gallery's count and sort label and the Sets page's years sit out on the wall too, so they are light, on plates */ :root[data-theme="ibm"] :is(.result-count, .result-count .muted, .sort-caption) { color: #c9d8f0; } :root[data-theme="ibm"] .result-count b { color: #ffffff; } :root[data-theme="ibm"] :is(.result-count, .sort-caption) { display: inline-block; padding: 2px 10px; background: rgba(11, 42, 85, .88); border-radius: 3px; } :root[data-theme="ibm"] h3.year-head { display: inline-block; width: fit-content; padding: 4px 12px 3px 10px; background: linear-gradient(#2a5c9e, var(--cabinet)); border-bottom: 3px solid var(--trim); box-shadow: var(--shadow-sm); } :root[data-theme="ibm"] ::selection { background: var(--ibm-blue); color: #ffffff; } :root[data-theme="ibm"] :focus-visible { outline: 2px solid var(--ibm-blue); outline-offset: 2px; } :root[data-theme="ibm"] .topbar :focus-visible { outline-color: var(--lamp); } :root[data-theme="ibm"] a { color: #0b4fc4; } /* the top bar: a cabinet's blue panel, its white trim and a strip of lamps that blink */ :root[data-theme="ibm"] .topbar { background: var(--lamps-off) left 10px bottom 8px / 108px 8px repeat-x, linear-gradient(#2a5c9e, var(--cabinet) 45%, #1a4580); border-bottom: 4px solid var(--trim); box-shadow: 0 3px 0 var(--cabinet-dark), 0 8px 18px rgba(4, 18, 48, .35); padding-bottom: 24px; } :root[data-theme="ibm"] .topbar::before, :root[data-theme="ibm"] .topbar::after { content: ''; position: absolute; left: 10px; right: 0; bottom: 8px; height: 8px; pointer-events: none; } :root[data-theme="ibm"] .topbar::before { background: var(--lamps-a) 0 0 / 108px 8px repeat-x; animation: ibm-blink 2.6s steps(1) infinite; } :root[data-theme="ibm"] .topbar::after { background: var(--lamps-b) 0 0 / 108px 8px repeat-x; animation: ibm-blink 1.7s steps(1) infinite; animation-delay: -.6s; } @keyframes ibm-blink { 50% { opacity: 0; } } :root[data-theme="ibm"] .logo-text .l2 { font-family: var(--font-display); font-weight: 700; color: #ffffff; letter-spacing: -.01em; } :root[data-theme="ibm"] .logo-text .l2-card { color: #a8c8ff; } :root[data-theme="ibm"] .header-stats { color: #c9d8f0; font-family: var(--font-typewriter); font-weight: 700; } :root[data-theme="ibm"] .header-stats b { color: var(--lamp-amber); } /* tabs: the console's illuminated push buttons; the open page's is lit, and More is the red one */ :root[data-theme="ibm"] :is(.tabs > a, .tools-btn) { background: linear-gradient(#fbfaf5, #dcd9cf); color: #1d1f24; border: 2px solid #121519; border-radius: 3px; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 0 var(--cabinet-dark); filter: none; font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px 7px; } :root[data-theme="ibm"] .tabs > a:hover { background: linear-gradient(#ffffff, #e8e5dc); color: #1d1f24; transform: none; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 0 var(--cabinet-dark); } :root[data-theme="ibm"] :is(.tabs > a, .tools-btn):active { transform: translateY(1px); } :root[data-theme="ibm"] .tabs > a[aria-current="page"] { background: radial-gradient(ellipse 80% 90% at 50% 45%, #fffdf2, #ffe28a 70%, #f2c94c); color: #2e2200; box-shadow: 0 0 14px 2px rgba(255, 214, 102, .65), inset 0 0 6px rgba(255, 255, 255, .9); } :root[data-theme="ibm"] .tabs .tools-btn { background: linear-gradient(#e85656, #c62828); color: #ffffff; } :root[data-theme="ibm"] .tools-btn:hover { background: linear-gradient(#f06a6a, #d03434); color: #ffffff; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--cabinet-dark); } :root[data-theme="ibm"] :is(.tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(ellipse 80% 90% at 50% 45%, #ffe1e1, #ff7a7a 65%, #d83a3a); color: #2a0000; box-shadow: 0 0 14px 2px rgba(255, 90, 90, .6), inset 0 0 6px rgba(255, 255, 255, .8); } :root[data-theme="ibm"] .bell { background: var(--key); border: 1px solid var(--key-edge); border-radius: 5px; box-shadow: inset 0 1px 0 #ffffff, 0 4px 0 var(--key-edge), 0 6px 10px rgba(4, 18, 48, .35); } :root[data-theme="ibm"] :is(.bell, .bell.gear):hover { background: linear-gradient(#ffffff, #e4e2da); transform: translateY(-1px); } :root[data-theme="ibm"] .bell:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 var(--key-edge); } :root[data-theme="ibm"] .bell[aria-current] { background: radial-gradient(ellipse at 50% 45%, #fffdf2, #ffe28a 70%, #f2c94c); } /* panels: punch cards, the corner cut off and a row of holes punched along the top */ :root[data-theme="ibm"] :is(.panel, .dialog-card, .modal-card) { background: var(--card-holes) 28px 7px / 320px 10px repeat-x, linear-gradient(rgba(255, 255, 255, .4), transparent 35%), var(--panel); border: 0; border-radius: 0; box-shadow: var(--shadow); clip-path: var(--card-corner); } :root[data-theme="ibm"] :is(.panel, .dialog-card) { padding-top: 24px; } :root[data-theme="ibm"] .modal-top { background: linear-gradient(#2a5c9e, var(--cabinet)); border-bottom: 3px solid var(--trim); color: #ffffff; } :root[data-theme="ibm"] .modal-top .nav-count { color: #ffffff; } :root[data-theme="ibm"] .modal-backdrop { background: rgba(4, 14, 36, .78); } /* buttons: keyboard keys; go is IBM blue; a chosen one stays down, blue */ :root[data-theme="ibm"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--key); color: #1d1f24; border: 1px solid var(--key-edge); border-radius: 5px; box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--key-edge), 0 4px 6px rgba(4, 18, 48, .25); filter: none; font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; } :root[data-theme="ibm"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: linear-gradient(#ffffff, #e4e2da); color: #1d1f24; transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff, 0 4px 0 var(--key-edge), 0 5px 8px rgba(4, 18, 48, .25); filter: none; } :root[data-theme="ibm"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 var(--key-edge); } :root[data-theme="ibm"] .btn.go, :root[data-theme="ibm"] .btn.go:hover { background: linear-gradient(#3b78e6, var(--ibm-blue)); color: #ffffff; border-color: #0d3a8a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #0d3a8a, 0 4px 6px rgba(4, 18, 48, .25); } :root[data-theme="ibm"] :is(.btn, .icon-btn):disabled { color: #8a857a; opacity: 1; } :root[data-theme="ibm"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(#2d6bde, #1a55c4); color: #ffffff; border-color: #0d3a8a; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); outline: 0; } :root[data-theme="ibm"] .seg { background: #2a2d33; border: 1px solid #121519; border-radius: 6px; padding: 3px; gap: 3px; box-shadow: none; overflow: visible; } :root[data-theme="ibm"] .seg-btn { background: var(--key); color: #1d1f24; border-radius: 4px; box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 var(--key-edge); font-family: var(--font-display); font-weight: 700; } :root[data-theme="ibm"] .seg-btn:hover { background: linear-gradient(#ffffff, #e4e2da); } :root[data-theme="ibm"] .seg-btn + .seg-btn { border-left: 0; } /* text boxes: green-screen terminal fields; a check box is punched out when checked */ :root[data-theme="ibm"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: var(--screen); color: var(--phosphor); border: 2px solid #2a2d33; border-radius: 4px; box-shadow: inset 0 0 14px rgba(61, 255, 122, .12); font-family: var(--font-terminal); caret-color: var(--phosphor); } :root[data-theme="ibm"] :is(.text-input, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"])::placeholder { color: rgba(61, 255, 122, .5); } :root[data-theme="ibm"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 2px solid var(--phosphor); outline-offset: 1px; } :root[data-theme="ibm"] .select { background-image: var(--chevron); background-position: right 10px center; background-size: 10px 7px; background-repeat: no-repeat; } :root[data-theme="ibm"] input[type="checkbox"] { appearance: none; width: 13px; height: 18px; flex: none; cursor: pointer; background: #fbf6e8; border: 1px solid #b9ad8c; border-radius: 1px; box-shadow: inset 0 0 0 2px #fbf6e8, inset 0 0 0 3px #ddd0ad; } :root[data-theme="ibm"] input[type="checkbox"]:checked { background: #0f3d85; border-color: var(--cabinet-dark); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); } /* the rest: cards for the totals and decks, a printout for the menu, the terminal for messages */ :root[data-theme="ibm"] .bignum { border: 0; border-radius: 0; clip-path: var(--small-card-corner); box-shadow: var(--shadow-sm); padding-top: 16px; background-image: var(--card-holes); background-position: 18px 4px; background-size: 320px 10px; background-repeat: repeat-x; } :root[data-theme="ibm"] :is(.tile, .deck-tile) { border: 1px solid #b9ad8c; border-radius: 6px; box-shadow: 0 6px 14px rgba(4, 18, 48, .35); } :root[data-theme="ibm"] .deck-tile { border-radius: 0; clip-path: var(--card-corner); } :root[data-theme="ibm"] .tile:is(:hover, :focus-within), :root[data-theme="ibm"] .deck-tile:hover { box-shadow: 0 0 0 3px var(--ibm-blue), 0 8px 18px rgba(4, 18, 48, .4); } /* the completion ring's face is the cabinet blue in the base styles, under dark numbers; here it is card stock */ :root[data-theme="ibm"] .ring { background: var(--well); } :root[data-theme="ibm"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: linear-gradient(#2a5c9e, var(--cabinet)); color: #ffffff; border: 0; border-bottom: 3px solid var(--trim); border-radius: 3px; box-shadow: var(--shadow-sm); } :root[data-theme="ibm"] .job-banner:not(.good, .bad) .link-btn { color: var(--lamp-amber); } :root[data-theme="ibm"] .job-banner:is(.good, .bad) { border: 0; border-radius: 3px; box-shadow: var(--shadow-sm); } :root[data-theme="ibm"] .spinner { border: 0; border-radius: 0; background: var(--reel) center / contain no-repeat; animation: ibm-reel 1.4s steps(7) infinite; } @keyframes ibm-reel { to { transform: rotate(360deg); } } :root[data-theme="ibm"] .tools-list { background: var(--tractor-left) left top / 18px 24px repeat-y, var(--tractor-right) right top / 18px 24px repeat-y, repeating-linear-gradient(#fdfdf8 0 36px, #dcefd6 36px 72px); border: 0; border-radius: 0; box-shadow: 0 14px 30px rgba(4, 18, 48, .5); padding: 6px 24px; gap: 0; } :root[data-theme="ibm"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #1d1f24; font-family: var(--font-typewriter); } :root[data-theme="ibm"] .tools-list :is(a, button) b { font-family: var(--font-typewriter); font-weight: 700; font-size: .92rem; } :root[data-theme="ibm"] .tools-list :is(a, button) span { font-size: .72rem; } :root[data-theme="ibm"] .tools-list :is(a, button) span { color: #4f4a40; } :root[data-theme="ibm"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="ibm"] .tools-list a[aria-current="page"] { background: rgba(31, 95, 214, .14); color: #0b3a82; outline: 0; } :root[data-theme="ibm"] .tools-sep { height: 0; margin: 6px 0; border: 0; border-top: 2px dashed #a8a08a; } :root[data-theme="ibm"] .toast { background: var(--screen); color: var(--phosphor); border: 2px solid #2a2d33; border-radius: 6px; box-shadow: inset 0 0 18px rgba(61, 255, 122, .14), 0 0 0 4px #c9ccd1, 0 12px 28px rgba(4, 18, 48, .5); font-family: var(--font-terminal); font-weight: 400; padding: 12px 18px; } :root[data-theme="ibm"] .toast::after { content: '█' / ''; margin-left: 6px; animation: ibm-blink 1.1s steps(1) infinite; } :root[data-theme="ibm"] .site-footer { background: var(--card-holes) 28px 6px / 320px 10px repeat-x, var(--panel); border: 0; border-radius: 0; clip-path: var(--card-corner); box-shadow: var(--shadow-sm); color: #4f4a40; font-family: var(--font-typewriter); padding-top: 22px; } :root[data-theme="ibm"] .site-footer a { color: #0b3a82; } /* scroll bars: a key for a thumb, on a blue rail for the page and a card-colored one inside cards */ :root[data-theme="ibm"]::-webkit-scrollbar, :root[data-theme="ibm"] ::-webkit-scrollbar { width: 13px; height: 13px; } :root[data-theme="ibm"]::-webkit-scrollbar-track { background: var(--cabinet-dark); } :root[data-theme="ibm"] ::-webkit-scrollbar-track { background: #e6d8b3; } :root[data-theme="ibm"]::-webkit-scrollbar-thumb { background: var(--key); border: 2px solid var(--cabinet-dark); border-radius: 4px; } :root[data-theme="ibm"] ::-webkit-scrollbar-thumb { background: var(--cabinet); border: 2px solid #e6d8b3; border-radius: 4px; } /* ==== Windows 95 ================================================================================== The 1995 desktop. Teal wallpaper (with My Computer, the Recycle Bin and My Briefcase on screens wide enough to show the desktop's edge); the top bar is the taskbar, moved to the top of the screen as it could be, with the logo as a raised Start button, the tabs as taskbar buttons with their little icons, the open one pressed in, and the totals in the sunken tray. Every panel is a window: a beveled gray frame and a navy title bar with the app's icon and the three caption buttons. The More menu is the Start menu, its name running up a navy band, every entry with its icon; buttons are beveled gray, the default one ringed in black; text boxes are sunken white, drop-downs have their arrow button, check boxes tick in black, and the scroll bars have their arrow buttons. A message is a message box, an error carries the red X, the busy sign is the hourglass and a dialog dims the screen with a 50% dither. Nothing else moves: 1995 didn't. */ :root[data-theme="win95"] { --bg: #008080; --bg-deep: #c0c0c0; --bg-blob: #008080; --panel: #ffffff; --panel-2: #f4f4f4; --panel-3: #e0e0e0; --well: #ffffff; --text: #000000; --muted: #404040; --faint: #707070; --paper: #ffffff; --paper-ink: #000000; --pink: #e0237f; --lime: #3a8a00; --cyan: #008b8b; --violet: #9068e0; --orange: #d05800; --yellow: #808000; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0136f; --pink-soft: #a0105f; --flat: #d4d4d4; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --zebra: #f4f4f4; --grid: #dcdcdc; --grid-2: #c0c0c0; --drop: #eaeaea; --hatch: #d0d0d0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --legend-miss: #d0d0d0; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px outset #dfdfdf; --line-thick: 3px outset #dfdfdf; --shadow: none; --shadow-sm: none; --blob: 0; --blob-sm: 0; --pill: 0; --font-display: 'Microsoft Sans Serif', Tahoma, 'MS Sans Serif', Geneva, Verdana, sans-serif; --font-body: 'Microsoft Sans Serif', Tahoma, 'MS Sans Serif', Geneva, Verdana, sans-serif; /* the bevels: a button's, a well's, and the default button's, with its black ring */ --raised: inset -1px -1px #000000, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --sunken: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000000; --default: inset 0 0 0 1px #000000, inset -2px -2px #000000, inset 2px 2px #ffffff, inset -3px -3px #808080, inset 3px 3px #dfdfdf; --tray: inset 1px 1px #808080, inset -1px -1px #ffffff; /* the 50% dither, as an image tile (a two-pixel gradient tile is slow to paint across a screen) */ --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 8px 8px; --dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z' fill='%23000000' fill-opacity='0.55'/%3E%3C/svg%3E") 0 0 / 8px 8px; /* a window's frame and a button's, as border images, so scrolling content never covers them */ --window-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h11v1H1v10H0z' fill='%23dfdfdf'/%3E%3Cpath d='M11 0h1v12H0v-1h11z' fill='%23000'/%3E%3Cpath d='M1 1h9v1H2v8H1z' fill='%23fff'/%3E%3Cpath d='M10 1h1v10H1v-1h9z' fill='%23808080'/%3E%3C/svg%3E"); --button-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Crect width='6' height='6' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h5v1H1v4H0z' fill='%23fff'/%3E%3Cpath d='M5 0h1v6H0V5h5z' fill='%23000'/%3E%3Cpath d='M1 1h3v1H2v2H1z' fill='%23dfdfdf'/%3E%3Cpath d='M4 1h1v4H1V4h3z' fill='%23808080'/%3E%3C/svg%3E"); --caption-buttons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='14' shape-rendering='crispEdges'%3E %3Crect width='32' height='14' fill='%23c0c0c0'/%3E%3Crect x='34' width='16' height='14' fill='%23c0c0c0'/%3E %3Cpath d='M0 0h15v1H1v12H0zM16 0h15v1H17v12h-1zM34 0h15v1H35v12h-1z' fill='%23fff'/%3E %3Cpath d='M15 0h1v14H0v-1h15zM31 0h1v14H16v-1h15zM49 0h1v14H34v-1h15z' fill='%23000'/%3E %3Cpath d='M14 1h1v12H1v-1h13zM30 1h1v12H17v-1h13zM48 1h1v12H35v-1h13z' fill='%23808080'/%3E %3Cpath d='M4 9h6v2H4z' fill='%23000'/%3E %3Cpath d='M19 2h9v9h-9zM20 4v6h7V4z' fill='%23000' fill-rule='evenodd'/%3E %3Cpath d='M38 3h2v1h-2zM44 3h2v1h-2zM39 4h2v1h-2zM43 4h2v1h-2zM40 5h4v1h-4zM41 6h2v1h-2zM40 7h4v1h-4zM39 8h2v1h-2zM43 8h2v1h-2zM38 9h2v1h-2zM44 9h2v1h-2z' fill='%23000'/%3E%3C/svg%3E"); --caption-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' shape-rendering='crispEdges'%3E%3Crect width='16' height='14' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v12H0z' fill='%23fff'/%3E%3Cpath d='M15 0h1v14H0v-1h15z' fill='%23000'/%3E%3Cpath d='M14 1h1v12H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M4 3h2v1H4zM10 3h2v1h-2zM5 4h2v1H5zM9 4h2v1H9zM6 5h4v1H6zM7 6h2v1H7zM6 7h4v1H6zM5 8h2v1H5zM9 8h2v1H9zM4 9h2v1H4zM10 9h2v1h-2z' fill='%23000'/%3E%3C/svg%3E"); --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1c4.5 0 7 3 6.5 7S11.5 15 7.5 15 1 12.5 1.5 8 4 1 8 1z' fill='%23e0237f' stroke='%23000' stroke-width='1.2'/%3E%3Cellipse cx='8' cy='8.8' rx='4' ry='3.1' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='8.5' cy='9' r='1.6' fill='%23000'/%3E%3C/svg%3E"); --combo-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z' fill='%23000'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h2v1H5zM0 2h1v1H0zM4 2h3v1H4zM0 3h2v1H0zM3 3h3v1H3zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z' fill='%23000'/%3E%3C/svg%3E"); --hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2.5 1.5h11v2h-1v3c0 2-2 3-3.3 3.5C10.5 10.5 12.5 11.5 12.5 13.5v3h1v2h-11v-2h1v-3c0-2 2-3 3.3-3.5C5.5 9.5 3.5 8.5 3.5 6.5v-3h-1z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M5 5h6c0 1.5-1.8 2.4-3 3.2C6.8 7.4 5 6.5 5 5z' fill='%23808000'/%3E%3Cpath d='M8 13.2c1.6 0 3 .9 3 3.3H5c0-2.4 1.4-3.3 3-3.3z' fill='%23808000'/%3E%3C/svg%3E"); --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5C8.5 2.5 2.5 7.5 2.5 14c0 5 3.5 8.8 8 10.2v5.3l5.6-5h.4c7.5 0 13-4.5 13-10.5S23.5 2.5 16 2.5z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='16' cy='8.5' r='2.2' fill='%230000ff'/%3E%3Cpath d='M13 12h4.5v8.5H19V22h-6v-1.5h1.5v-7H13z' fill='%230000ff'/%3E%3C/svg%3E"); --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23ff0000' stroke='%23800000' stroke-width='1.5'/%3E%3Cpath d='M11 11l10 10M21 11L11 21' stroke='%23fff' stroke-width='3.2'/%3E%3C/svg%3E"); /* the scroll bar's arrow buttons */ --scroll-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v14H0z' fill='%23dfdfdf'/%3E%3Cpath d='M15 0h1v16H0v-1h15z' fill='%23000'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M7 6h1v1H7zM6 7h3v1H6zM5 8h5v1H5zM4 9h7v1H4z' fill='%23000'/%3E%3C/svg%3E"); --scroll-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v14H0z' fill='%23dfdfdf'/%3E%3Cpath d='M15 0h1v16H0v-1h15z' fill='%23000'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M4 6h7v1H4zM5 7h5v1H5zM6 8h3v1H6zM7 9h1v1H7z' fill='%23000'/%3E%3C/svg%3E"); --scroll-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v14H0z' fill='%23dfdfdf'/%3E%3Cpath d='M15 0h1v16H0v-1h15z' fill='%23000'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M6 7h1v1H6zM7 6h1v3H7zM8 5h1v5H8zM9 4h1v7H9z' fill='%23000'/%3E%3C/svg%3E"); --scroll-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v14H0z' fill='%23dfdfdf'/%3E%3Cpath d='M15 0h1v16H0v-1h15z' fill='%23000'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M6 4h1v7H6zM7 5h1v5H7zM8 6h1v3H8zM9 7h1v1H9z' fill='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] body { background: #008080; } /* the desktop's icons, where a wide screen leaves the desktop showing beside the windows */ @media (min-width: 1860px) { :root[data-theme="win95"] body::before { content: ''; position: fixed; left: 18px; top: 100px; width: 84px; height: 250px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='250' font-family='Microsoft Sans Serif,Tahoma,sans-serif' font-size='11' text-anchor='middle'%3E %3Cg transform='translate(26 2)'%3E%3Cpath d='M6.5 2.5h19v15h-19z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M9 5h14v10H9z' fill='%23008080'/%3E%3Cpath d='M12.5 17.5h7v3h-7z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M2.5 20.5h27v7h-27z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M19 23h8v1h-8z' fill='%23000'/%3E%3Cpath d='M5 24h3v1H5z' fill='%2300ff00'/%3E%3C/g%3E %3Ctext x='42' y='46' fill='%23fff'%3EMy Computer%3C/text%3E %3Cg transform='translate(26 86)'%3E%3Cpath d='M7.5 6.5h17l-2 22h-13z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M11 8l1.5 20M14.5 8l.6 20M18 8l-.6 20M21.5 8l-1.5 20M8.5 13h15M9 18h14M9.5 23h13' stroke='%23808080'/%3E%3Cpath d='M6.5 4.5h19v2h-19z' fill='%23c0c0c0' stroke='%23000'/%3E%3C/g%3E %3Ctext x='42' y='130' fill='%23fff'%3ERecycle Bin%3C/text%3E %3Cg transform='translate(26 170)'%3E%3Cpath d='M11.5 4.5h9v5h-2v-3h-5v3h-2z' fill='%23804000' stroke='%23000'/%3E%3Cpath d='M2.5 9.5h27v17h-27z' fill='%23c08040' stroke='%23000'/%3E%3Cpath d='M2.5 16.5h27' stroke='%23804000'/%3E%3Cpath d='M14.5 14.5h3v4h-3z' fill='%23ffff00' stroke='%23000'/%3E%3C/g%3E %3Ctext x='42' y='214' fill='%23fff'%3EMy Briefcase%3C/text%3E%3C/svg%3E") 0 0 / 84px 250px no-repeat; } } :root[data-theme="win95"] * { text-shadow: none !important; } /* corners are square in 1995, except on the cards themselves, mana symbols and round swatches */ :root[data-theme="win95"] :not(img, .card-face, .thumb, .rr-img, .ms, .swatch, .ring, .ss-num) { border-radius: 0 !important; } :root[data-theme="win95"] :is(h1, h2, h3, h4) { font-family: var(--font-body); font-weight: 700; color: #000080; letter-spacing: 0; } :root[data-theme="win95"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #000080; } :root[data-theme="win95"] ::selection { background: #000080; color: #ffffff; } :root[data-theme="win95"] :focus-visible { outline: 1px dotted #000000; outline-offset: 2px; } :root[data-theme="win95"] a { color: #0000ee; } :root[data-theme="win95"] a:hover { color: #000080; } /* the taskbar, at the top of the screen: Start, the open windows, and the tray */ :root[data-theme="win95"] .topbar { background: #c0c0c0; border-bottom: 0; padding-top: 4px; padding-bottom: 5px; gap: 6px 8px; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #ffffff, inset 0 -1px #000000, inset 0 -2px #808080; } :root[data-theme="win95"] .logo { background: #c0c0c0; color: #000000; box-shadow: var(--raised); padding: 3px 9px 3px 5px; gap: 5px; } :root[data-theme="win95"] .logo:active { box-shadow: var(--sunken); padding: 4px 8px 2px 6px; } :root[data-theme="win95"] .logo:focus-visible { outline-offset: -4px; } :root[data-theme="win95"] .logo-mark { width: 24px; height: 24px; } :root[data-theme="win95"] .logo:hover :is(.logo-mark, .pupil) { transform: none; } :root[data-theme="win95"] .logo-text .l2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: #000000; letter-spacing: 0; } :root[data-theme="win95"] .logo-text .l2-card { color: #000000; } :root[data-theme="win95"] .header-stats { background: #c0c0c0; color: #000000; box-shadow: var(--tray); padding: 4px 10px; gap: 12px; } :root[data-theme="win95"] .header-stats:empty { display: none; } :root[data-theme="win95"] .header-stats b { color: #000000; } :root[data-theme="win95"] .bell { width: 36px; height: 36px; background: #c0c0c0; border: 0; border-radius: 0; box-shadow: var(--raised); } :root[data-theme="win95"] .bell svg { width: 20px; height: 20px; } :root[data-theme="win95"] :is(.bell, .bell.gear):hover { background: #c0c0c0; transform: none; } :root[data-theme="win95"] .bell:active { box-shadow: var(--sunken); } :root[data-theme="win95"] .bell[aria-current] { background: var(--dither); box-shadow: var(--sunken); } :root[data-theme="win95"] .bell:focus-visible { outline-offset: -4px; } /* tabs: taskbar buttons, each with its icon; the open page is pressed in */ :root[data-theme="win95"] .tabs { gap: 3px; } :root[data-theme="win95"] :is(.tabs > a, .tools-btn) { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 2.5h13v11h-13z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M2 3h12v2H2z' fill='%23000080'/%3E%3Cpath d='M3 7h6v1H3zM3 9h8v1H3zM3 11h5v1H3z' fill='%23808080'/%3E%3C/svg%3E"); display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); font-family: var(--font-body); font-size: .92rem; font-weight: 400; letter-spacing: 0; padding: 5px 12px 5px 7px; } :root[data-theme="win95"] :is(.tabs > a, .tools-btn)::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--tab-icon) center / 16px 16px no-repeat; } :root[data-theme="win95"] .tabs > a[data-tab="dashboard"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h13v12h-13z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M2 2h12v2H2z' fill='%23000080'/%3E%3Cpath d='M3 9h2v4H3z' fill='%23e0237f'/%3E%3Cpath d='M7 6h2v7H7z' fill='%23008080'/%3E%3Cpath d='M11 8h2v5h-2z' fill='%23808000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tabs > a[data-tab="gallery"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13v11h-13z' fill='%2300ffff' stroke='%23000'/%3E%3Cpath d='M2 13v-3l3-2 3 2 2-1 4 2v2z' fill='%23008000'/%3E%3Ccircle cx='11' cy='6' r='1.7' fill='%23ffff00' stroke='%23808000' stroke-width='.6'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tabs > a[data-tab="sets"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 13.5v-10h5l1 1h7v9z' fill='%23c0c000' stroke='%23000'/%3E%3Cpath d='M1.5 13.5l2-6h12l-2 6z' fill='%23ffff80' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tabs > a[data-tab="decks"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5.5 1.5h9v11h-9z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M1.5 3.5h9v11h-9z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M3 5h6v4H3z' fill='%23000080'/%3E%3Cpath d='M3 10h6v1H3zM3 12h4v1H3z' fill='%23808080'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tabs > a[data-tab="build"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M6.5 5.5h2v9h-2z' fill='%23c08040' stroke='%23000'/%3E%3Cpath d='M2.5 1.5h8l3 3v2h-2l-1-1h-8z' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] :is(.tabs > a, .tools-btn):hover { background: #c0c0c0; color: #000000; transform: none; box-shadow: var(--raised); } :root[data-theme="win95"] :is(.tabs > a, .tools-btn):active { box-shadow: var(--sunken); } :root[data-theme="win95"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--dither); color: #000000; box-shadow: var(--sunken); } :root[data-theme="win95"] :is(.tabs > a, .tools-btn):focus-visible { outline-offset: -4px; } /* panels: windows, a beveled gray frame and a navy title bar with the app's icon and caption buttons */ :root[data-theme="win95"] :is(.panel, .dialog-card, .modal-card) { background: #ffffff; border: 4px solid #c0c0c0; border-image: var(--window-frame) 4 / 4px; border-radius: 0; box-shadow: none; } :root[data-theme="win95"] :is(.panel, .dialog-card) { padding: 10px 12px 14px; } :root[data-theme="win95"] :is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), :root[data-theme="win95"] .stat-panel > h3 { display: flex; align-items: center; flex: 1 0 100%; margin: -10px -12px 0; padding: 3px 60px 3px 3px; min-height: 22px; background: var(--caption-buttons) right 3px center / 50px 14px no-repeat, #000080; color: #ffffff !important; font-size: .95rem; line-height: 1.25; text-transform: none; } :root[data-theme="win95"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 5px; vertical-align: -2px; background: var(--app-icon) center / 16px 16px no-repeat; } /* a dialog's title bar holds its real close button, so it draws no caption buttons of its own */ :root[data-theme="win95"] .dialog-card > .panel-head { flex-wrap: nowrap; margin: -10px -12px 12px; padding: 3px 3px 3px 3px; background: #000080; } :root[data-theme="win95"] .dialog-card > .panel-head > h2 { flex: 1 1 auto; margin: 0; padding: 0 6px 0 0; min-height: 0; background: none; } :root[data-theme="win95"] .modal-card { padding: 0 18px 18px; } :root[data-theme="win95"] .modal-top { margin: 0 -18px 14px; padding: 3px 3px 3px 6px; background: #000080; border-bottom: 0; } :root[data-theme="win95"] .modal-top .nav-count { color: #ffffff; } :root[data-theme="win95"] .modal-top .icon-btn { width: 26px; height: 22px; font-size: .95rem; } :root[data-theme="win95"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close { width: 22px; height: 20px; font: 700 16px/1 var(--font-body); } :root[data-theme="win95"] .modal-backdrop { background: var(--dim); } /* buttons: beveled gray; the default button wears a black ring; a chosen one stays pressed in */ :root[data-theme="win95"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); filter: none; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; } :root[data-theme="win95"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: #c0c0c0; color: #000000; transform: none; box-shadow: var(--raised); filter: none; } :root[data-theme="win95"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: none; box-shadow: var(--sunken); } :root[data-theme="win95"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile, .seg-btn):focus-visible { outline-offset: -4px; } :root[data-theme="win95"] .btn.go, :root[data-theme="win95"] .btn.go:hover { box-shadow: var(--default); } :root[data-theme="win95"] .btn.go:active { box-shadow: inset 0 0 0 1px #000000, inset 0 0 0 2px #808080; } :root[data-theme="win95"] :is(.btn, .icon-btn):disabled { color: #808080; opacity: 1; text-shadow: 1px 1px 0 #ffffff !important; } :root[data-theme="win95"] .seg { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } :root[data-theme="win95"] .seg-btn { background: #c0c0c0; color: #000000; box-shadow: var(--raised); font-weight: 400; } :root[data-theme="win95"] .seg-btn:hover { background: #c0c0c0; } :root[data-theme="win95"] .seg-btn + .seg-btn { border-left: 0; } :root[data-theme="win95"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: var(--dither); color: #000000; box-shadow: var(--sunken); outline: 0; } :root[data-theme="win95"] .shape-tile.open:focus-visible { outline: 1px dotted #000000; } /* text boxes are sunken; a drop-down has its arrow button; a check box ticks in black */ :root[data-theme="win95"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #000000; border: 0; border-radius: 0; box-shadow: var(--sunken); } :root[data-theme="win95"] .select { background-image: var(--combo-arrow), linear-gradient(#000000, #000000), linear-gradient(#000000, #000000), linear-gradient(#808080, #808080), linear-gradient(#808080, #808080), linear-gradient(#dfdfdf, #dfdfdf), linear-gradient(#dfdfdf, #dfdfdf), linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff), linear-gradient(#c0c0c0, #c0c0c0); background-position: right 6px center, right 2px top 2px, right 2px bottom 2px, right 3px top 3px, right 3px bottom 3px, right 17px top 2px, right 3px top 2px, right 16px top 3px, right 4px top 3px, right 2px top 2px; background-size: 7px 4px, 1px calc(100% - 4px), 16px 1px, 1px calc(100% - 6px), 14px 1px, 1px calc(100% - 5px), 15px 1px, 1px calc(100% - 7px), 13px 1px, 16px calc(100% - 4px); background-repeat: no-repeat; } :root[data-theme="win95"] input[type="checkbox"] { appearance: none; width: 16px; height: 16px; flex: none; background: #ffffff; border: 0; border-radius: 0; box-shadow: var(--sunken); cursor: pointer; } :root[data-theme="win95"] input[type="checkbox"]:checked { background: var(--check) center / 7px 7px no-repeat, #ffffff; } :root[data-theme="win95"] input[type="checkbox"]:disabled { background-color: #c0c0c0; } /* the rest: tiles framed like buttons, the Start menu, a message box, the status bar, the hourglass */ :root[data-theme="win95"] :is(.tile, .deck-tile, .bignum) { border: 2px solid #c0c0c0; border-image: var(--button-frame) 2 / 2px; border-radius: 0; box-shadow: none; } :root[data-theme="win95"] .tile:is(:hover, :focus-within), :root[data-theme="win95"] .deck-tile:hover { box-shadow: 0 0 0 2px #000080; transform: none; } :root[data-theme="win95"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); } :root[data-theme="win95"] .job-banner:is(.good, .bad) { border: 0; border-radius: 0; box-shadow: var(--raised); } :root[data-theme="win95"] .error-box { background: var(--icon-error) 10px 50% / 28px 28px no-repeat, #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); padding-left: 48px; } :root[data-theme="win95"] .spinner { border: 0; border-radius: 0; background: var(--hourglass) center / contain no-repeat; animation: win95-hourglass 2.4s ease-in-out infinite; } @keyframes win95-hourglass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } :root[data-theme="win95"] .tools-list { background: linear-gradient(#000080, #000080) 3px 3px / 22px calc(100% - 6px) no-repeat, #c0c0c0; border: 0; border-radius: 0; box-shadow: var(--raised); padding: 3px 3px 3px 28px; gap: 0; } :root[data-theme="win95"] .tools-list::before { content: 'Cardclops'; position: absolute; left: 3px; bottom: 3px; width: 22px; padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); color: #c0c0c0; font: 700 1.2rem/22px var(--font-body); white-space: nowrap; } :root[data-theme="win95"] .tools-list :is(a, button) { background-color: transparent; background-image: var(--item-icon, none); background-repeat: no-repeat; background-position: 8px 50%; background-size: 22px 22px; border: 0; border-radius: 0; box-shadow: none; color: #000000; padding: 6px 18px 6px 40px; } :root[data-theme="win95"] .tools-list :is(a, button) span { color: #404040; } :root[data-theme="win95"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="win95"] .tools-list a[aria-current="page"] { background-color: #000080; color: #ffffff; outline: 0; } :root[data-theme="win95"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="win95"] .tools-list a[aria-current="page"] span { color: #e0e0ff; } :root[data-theme="win95"] .tools-sep { height: 0; margin: 3px 2px; border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; } :root[data-theme="win95"] .tools-list [data-tab="radar"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 1.5h9l3 3v13h-12z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M5 6h7M5 8h8M5 10h5' stroke='%23808080'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23bff' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M14.6 14.6l4 4' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="deck"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 1.5h9l3 3v14h-12z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M12.5 1.5v3h3' fill='none' stroke='%23000'/%3E%3Cpath d='M5.5 11l2.5 3 5-7' fill='none' stroke='%23008000' stroke-width='2'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="extras"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath d='M7.5 3.5h5v3h-1v-2h-3v2h-1z' fill='%23804000' stroke='%23000'/%3E%3Cpath d='M1.5 6.5h17v11h-17z' fill='%23c08040' stroke='%23000'/%3E%3Cpath d='M1.5 10.5h17' stroke='%23804000'/%3E%3Cpath d='M8.5 9.5h3v3h-3z' fill='%23ffff00' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="alerts"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5c-3 0-5 2.4-5 5.5v3.5l-2 3h14l-2-3V8c0-3.1-2-5.5-5-5.5z' fill='%23ffff00' stroke='%23000'/%3E%3Cpath d='M8 15.5a2 2 0 0 0 4 0' fill='%23ffff00' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="binders"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath d='M3.5 2.5h11v15h-11z' fill='%23000080' stroke='%23000'/%3E%3Cpath d='M14.5 2.5l2 1v15l-2-1z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M5 5h8v3H5z' fill='%23fff'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="rules"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 2.5h11v15h-11z' fill='%23800000' stroke='%23000'/%3E%3Cpath d='M14.5 2.5l2 1v15l-2-1z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M6.6 7.4a2.4 2.4 0 1 1 3.4 2.2c-.7.4-1 .8-1 1.6v.8' fill='none' stroke='%23ffff00' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='14.4' r='1.1' fill='%23ffff00'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .tools-list [data-tab="about"] { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='10' cy='5.6' r='1.5' fill='%230000ff'/%3E%3Cpath d='M8.2 8.2h2.8v6.3h1.2v1.3H7.8v-1.3H9v-5H8.2z' fill='%230000ff'/%3E%3C/svg%3E"); } :root[data-theme="win95"] #toolAdd { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 1.5h10v15h-10z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M4 3h7v6H4z' fill='%23008080'/%3E%3Ccircle cx='14.5' cy='14.5' r='4.5' fill='%23008000' stroke='%23000'/%3E%3Cpath d='M14.5 11.5v6M11.5 14.5h6' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); } :root[data-theme="win95"] #toolUpdate { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath d='M2.5 2.5h13l2 2v13h-15z' fill='%23000080' stroke='%23000'/%3E%3Cpath d='M5 3h9v5H5z' fill='%23c0c0c0'/%3E%3Cpath d='M11 4h2v3h-2z' fill='%23000080'/%3E%3Cpath d='M4.5 11.5h11v6h-11z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] #toolRefresh { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%230000ff' stroke='%23000'/%3E%3Cpath d='M6 4.5c2 0 3 2 2 3s-3 1-3 3 2 2 2 4c-2-1-4-3-4-5s1-4 3-5zM12.5 3.5c2 1 4 3 4 6.5-1 0-2-1-3-1s-1 2-2 2-1-2 0-3 1-2 1-4.5z' fill='%2300c000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] #toolQuit { --item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Cpath d='M3.5 2.5h13v10h-13z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M5 4h10v7H5z' fill='%23000080'/%3E%3Cpath d='M7.5 12.5h5v2h-5zM2.5 14.5h15v3h-15z' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E"); } :root[data-theme="win95"] .toast { background: var(--caption-close) right 6px top 6px / 16px 14px no-repeat, linear-gradient(#000080, #000080) 3px 3px / calc(100% - 6px) 20px no-repeat, var(--icon-info) 14px calc(50% + 11px) / 26px 26px no-repeat, #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); padding: 32px 18px 12px 52px; font-weight: 400; } :root[data-theme="win95"] .toast::before { content: 'Cardclops'; position: absolute; left: 8px; top: 5px; color: #ffffff; font-weight: 700; font-size: .85rem; line-height: 16px; } :root[data-theme="win95"] .site-footer { background: #c0c0c0; color: #000000; border: 0; border-radius: 0; box-shadow: var(--raised); padding: 4px; text-align: left; } :root[data-theme="win95"] .site-footer p { max-width: none; margin: 0; padding: 3px 8px; box-shadow: var(--tray); } :root[data-theme="win95"] .site-footer p + p { margin-top: 3px; } :root[data-theme="win95"] .site-footer a { color: #0000ee; } /* scroll bars: a dithered track, a raised thumb and arrow buttons at both ends */ :root[data-theme="win95"]::-webkit-scrollbar, :root[data-theme="win95"] ::-webkit-scrollbar { width: 16px; height: 16px; } :root[data-theme="win95"]::-webkit-scrollbar-track, :root[data-theme="win95"] ::-webkit-scrollbar-track { background: var(--dither); } :root[data-theme="win95"]::-webkit-scrollbar-thumb, :root[data-theme="win95"] ::-webkit-scrollbar-thumb { background: #c0c0c0; box-shadow: var(--raised); } :root[data-theme="win95"]::-webkit-scrollbar-corner, :root[data-theme="win95"] ::-webkit-scrollbar-corner { background: #c0c0c0; } :root[data-theme="win95"]::-webkit-scrollbar-button:single-button, :root[data-theme="win95"] ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background: #c0c0c0 center / 16px 16px no-repeat; } :root[data-theme="win95"]::-webkit-scrollbar-button:single-button:vertical:decrement, :root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--scroll-up); } :root[data-theme="win95"]::-webkit-scrollbar-button:single-button:vertical:increment, :root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--scroll-down); } :root[data-theme="win95"]::-webkit-scrollbar-button:single-button:horizontal:decrement, :root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: var(--scroll-left); } :root[data-theme="win95"]::-webkit-scrollbar-button:single-button:horizontal:increment, :root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: var(--scroll-right); } /* ==== Mac OS 8 ==================================================================================== Platinum, 1997. The patterned purple-gray desktop (with a hard disk at the top right and the Trash at the bottom right, where a wide screen leaves the desktop showing); the top bar is the menu bar, light gray with the screen's rounded black corners, the logo where the menu with the computer's own logo sat, the tabs as menu titles and the open one highlighted. Every panel is a window: a platinum frame and a pinstriped title bar with the close box at the left and the zoom and collapse boxes at the right (a dialog's close box is its real close button). Push buttons are rounded platinum, the default one ringed; the More menu drops down with its shadow; a message floats in a Balloon Help balloon; the scroll bars have lavender thumbs with ridged grips; and the busy sign is the barber-pole progress bar. Headings are in a bold, condensed system face. */ :root[data-theme="mac8"] { --bg: #66669a; --bg-deep: #dddddd; --bg-blob: #66669a; --panel: #ffffff; --panel-2: #f2f2f2; --panel-3: #e2e2e2; --well: #ffffff; --text: #000000; --muted: #444444; --faint: #777777; --paper: #ffffff; --paper-ink: #000000; --pink: #e0237f; --cyan: #4078d8; --violet: #9068e0; --lime: #3a8a00; --orange: #d05800; --yellow: #9a7a00; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0136f; --pink-soft: #a0105f; --flat: #d8d8d8; --zebra: #f4f4f4; --grid: #dcdcdc; --grid-2: #c4c4c4; --drop: #ececec; --hatch: #d0d0d0; --legend-miss: #d0d0d0; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #000000; --line-thick: 2px solid #000000; --shadow: none; --shadow-sm: none; --blob: 0; --blob-sm: 4px; --pill: 6px; --font-display: Charcoal, 'Charcoal CY', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; --font-body: Geneva, 'Lucida Grande', Verdana, sans-serif; --highlight: #333399; --platinum: linear-gradient(#f6f6f6, #d8d8d8); --bevel: inset 1px 1px #ffffff, inset -1px -1px #a8a8a8; --pressed: linear-gradient(#6a6a6a, #8e8e8e); --pinstripes: repeating-linear-gradient(#a2a2a2 0 1px, #ffffff 1px 2px) center / 100% 12px no-repeat; --window-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%23000'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23dddddd'/%3E%3Cpath d='M1 1h9v1H2v8H1z' fill='%23fff'/%3E%3Cpath d='M10 1h1v10H1v-1h9z' fill='%23a8a8a8'/%3E%3C/svg%3E"); --close-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' shape-rendering='crispEdges'%3E%3Crect width='13' height='13' fill='%23555'/%3E%3Crect x='1' y='1' width='11' height='11' fill='%23dddddd'/%3E%3Cpath d='M1 1h10v1H2v9H1z' fill='%23fff'/%3E%3Cpath d='M11 1h1v11H1v-1h10z' fill='%23999'/%3E%3C/svg%3E"); --zoom-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='13' shape-rendering='crispEdges'%3E %3Crect width='13' height='13' fill='%23555'/%3E%3Crect x='19' width='13' height='13' fill='%23555'/%3E %3Crect x='1' y='1' width='11' height='11' fill='%23dddddd'/%3E%3Crect x='20' y='1' width='11' height='11' fill='%23dddddd'/%3E %3Cpath d='M1 1h10v1H2v9H1zM20 1h10v1H21v9h-1z' fill='%23fff'/%3E%3Cpath d='M11 1h1v11H1v-1h10zM30 1h1v11H20v-1h10z' fill='%23999'/%3E %3Cpath d='M3 3h5v1H4v3H3zM7 4h1v4H3V7h4z' fill='%23555'/%3E%3Cpath d='M22 5h7v1h-7zM22 7h7v1h-7z' fill='%23555'/%3E%3C/svg%3E"); --folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1.5 3.5h5l1.5 1.5h8.5v9.5h-15z' fill='%23b4b4f4' stroke='%23333366'/%3E%3Cpath d='M1.5 6.5h15' stroke='%23333366'/%3E%3Cpath d='M2 7h14v1H2z' fill='%23d8d8ff'/%3E%3C/svg%3E"); --pop-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z' fill='%23000'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.8L10.5 2.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E"); --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h8v1H0zM0 2h8v1H0zM0 4h8v1H0zM0 6h8v1H0z' fill='%23333377'/%3E%3Cpath d='M0 1h8v1H0zM0 3h8v1H0zM0 5h8v1H0zM0 7h8v1H0z' fill='%23eeeeff'/%3E%3C/svg%3E"); --grip-across: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v8H0zM2 0h1v8H2zM4 0h1v8H4zM6 0h1v8H6z' fill='%23333377'/%3E%3Cpath d='M1 0h1v8H1zM3 0h1v8H3zM5 0h1v8H5zM7 0h1v8H7z' fill='%23eeeeff'/%3E%3C/svg%3E"); --scroll-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23222'/%3E%3Crect x='1' y='1' width='14' height='14' fill='%23dddddd'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23999'/%3E%3Cpath d='M7 5h2v1H7zM6 6h4v1H6zM5 7h6v1H5zM4 8h8v1H4z' fill='%23000'/%3E%3C/svg%3E"); --scroll-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23222'/%3E%3Crect x='1' y='1' width='14' height='14' fill='%23dddddd'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23999'/%3E%3Cpath d='M4 7h8v1H4zM5 8h6v1H5zM6 9h4v1H6zM7 10h2v1H7z' fill='%23000'/%3E%3C/svg%3E"); --scroll-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23222'/%3E%3Crect x='1' y='1' width='14' height='14' fill='%23dddddd'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23999'/%3E%3Cpath d='M5 7h1v2H5zM6 6h1v4H6zM7 5h1v6H7zM8 4h1v8H8z' fill='%23000'/%3E%3C/svg%3E"); --scroll-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23222'/%3E%3Crect x='1' y='1' width='14' height='14' fill='%23dddddd'/%3E%3Cpath d='M1 1h13v1H2v12H1z' fill='%23fff'/%3E%3Cpath d='M14 1h1v14H1v-1h13z' fill='%23999'/%3E%3Cpath d='M7 4h1v8H7zM8 5h1v6H8zM9 6h1v4H9zM10 7h1v2h-1z' fill='%23000'/%3E%3C/svg%3E"); } :root[data-theme="mac8"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%2366669a'/%3E%3Cpath d='M0 0h1v1H0zM4 4h1v1H4z' fill='%235a5a8c'/%3E%3Cpath d='M2 2h1v1H2zM6 6h1v1H6z' fill='%237272a8'/%3E%3C/svg%3E") 0 0 / 8px 8px; } /* the desktop's disk and Trash, where a wide screen leaves the desktop showing */ @media (min-width: 1860px) { :root[data-theme="mac8"] body::before, :root[data-theme="mac8"] body::after { content: ''; position: fixed; right: 16px; width: 92px; height: 66px; z-index: -1; pointer-events: none; background: 0 0 / 92px 66px no-repeat; } :root[data-theme="mac8"] body::before { top: 92px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='66' font-family='Geneva,Verdana,sans-serif' font-size='10' text-anchor='middle'%3E %3Cg transform='translate(30 6)'%3E%3Cpath d='M2.5 8.5h27v16h-27z' fill='%23e4e4e4' stroke='%23000'/%3E%3Cpath d='M2.5 8.5l4-6h19l4 6' fill='%23f4f4f4' stroke='%23000'/%3E%3Cpath d='M5 20h22v2H5z' fill='%23999'/%3E%3Cpath d='M22 12h4v2h-4z' fill='%2300a000'/%3E%3C/g%3E %3Crect x='8' y='40' width='76' height='14' fill='%23fff'/%3E%3Ctext x='46' y='51' fill='%23000'%3ECardclops HD%3C/text%3E%3C/svg%3E"); } :root[data-theme="mac8"] body::after { bottom: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='66' font-family='Geneva,Verdana,sans-serif' font-size='10' text-anchor='middle'%3E %3Cg transform='translate(32 2)'%3E%3Cpath d='M5.5 8.5h17l-2 25h-13z' fill='%23d8d8d8' stroke='%23000'/%3E%3Cpath d='M10 11v20M14 11v20M18 11v20' stroke='%23888'/%3E%3Cpath d='M3.5 5.5h21v3h-21z' fill='%23ececec' stroke='%23000'/%3E%3Cpath d='M11.5 2.5h5v3h-5z' fill='%23ececec' stroke='%23000'/%3E%3C/g%3E %3Crect x='28' y='40' width='36' height='14' fill='%23fff'/%3E%3Ctext x='46' y='51' fill='%23000'%3ETrash%3C/text%3E%3C/svg%3E"); } } :root[data-theme="mac8"] * { text-shadow: none !important; } :root[data-theme="mac8"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #000000; letter-spacing: 0; } :root[data-theme="mac8"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #000000; } :root[data-theme="mac8"] ::selection { background: #ccccff; color: #000000; } :root[data-theme="mac8"] :focus-visible { outline: 2px solid #6666cc; outline-offset: 1px; } :root[data-theme="mac8"] a { color: #2a52b8; } :root[data-theme="mac8"] a:hover { color: var(--highlight); } /* the menu bar: light gray, the screen's corners rounded off in black above it */ :root[data-theme="mac8"] .topbar { background: radial-gradient(circle at 100% 100%, transparent 6px, #000000 6.5px) top left / 7px 7px no-repeat, radial-gradient(circle at 0 100%, transparent 6px, #000000 6.5px) top right / 7px 7px no-repeat, #dddddd; border-bottom: 1px solid #000000; box-shadow: inset 0 -1px #a8a8a8; padding-top: 4px; padding-bottom: 4px; gap: 4px 10px; } :root[data-theme="mac8"] .logo { padding: 2px 8px; gap: 6px; } :root[data-theme="mac8"] .logo-mark { width: 26px; height: 26px; } :root[data-theme="mac8"] .logo:hover { background: var(--highlight); } :root[data-theme="mac8"] .logo:hover :is(.logo-mark, .pupil) { transform: none; } :root[data-theme="mac8"] .logo-text .l2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #000000; letter-spacing: 0; } :root[data-theme="mac8"] .logo-text .l2-card { color: #000000; } :root[data-theme="mac8"] .logo:hover .logo-text :is(.l2, .l2-card) { color: #ffffff; } :root[data-theme="mac8"] .header-stats { color: #000000; font-family: var(--font-display); font-size: .95rem; } :root[data-theme="mac8"] .header-stats b { color: #000000; } :root[data-theme="mac8"] .bell { width: 34px; height: 30px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } :root[data-theme="mac8"] .bell svg { width: 20px; height: 20px; } :root[data-theme="mac8"] :is(.bell, .bell.gear):hover { background: #ccccff; transform: none; } :root[data-theme="mac8"] .bell[aria-current] { background: var(--highlight); } /* tabs: menu titles; the open page is the highlighted one */ :root[data-theme="mac8"] :is(.tabs > a, .tools-btn) { background: transparent; color: #000000; border: 0; border-radius: 0; box-shadow: none; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; padding: 5px 11px; } :root[data-theme="mac8"] :is(.tabs > a, .tools-btn):hover { background: #ccccff; color: #000000; transform: none; box-shadow: none; } :root[data-theme="mac8"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--highlight); color: #ffffff; } /* panels: platinum windows with pinstriped title bars */ :root[data-theme="mac8"] :is(.panel, .dialog-card, .modal-card) { background: #ffffff; border: 4px solid #dddddd; border-image: var(--window-frame) 4 / 4px; border-radius: 0; box-shadow: 1px 1px 0 rgba(0, 0, 0, .55); } :root[data-theme="mac8"] :is(.panel, .dialog-card) { padding: 10px 12px 14px; } :root[data-theme="mac8"] :is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), :root[data-theme="mac8"] .stat-panel > h3 { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; margin: -10px -12px 0; padding: 3px 6px 4px; min-height: 22px; background: #dddddd; border-bottom: 1px solid #a8a8a8; box-shadow: 0 1px #ffffff; color: #000000 !important; font-size: 1rem; line-height: 1.2; text-align: center; justify-content: center; } :root[data-theme="mac8"] :is(:is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), .stat-panel > h3)::before, :root[data-theme="mac8"] :is(:is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), .stat-panel > h3)::after { content: ''; flex: 1 1 0; min-width: 40px; height: 13px; } :root[data-theme="mac8"] :is(:is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), .stat-panel > h3)::before { background: var(--close-box) left center / 13px 13px no-repeat, linear-gradient(#dddddd, #dddddd) left center / 19px 100% no-repeat, var(--pinstripes); } :root[data-theme="mac8"] :is(:is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3), .stat-panel > h3)::after { min-width: 58px; background: var(--zoom-collapse) right center / 32px 13px no-repeat, linear-gradient(#dddddd, #dddddd) right center / 38px 100% no-repeat, var(--pinstripes); } :root[data-theme="mac8"] :is(.area-title, .shape-title)::before { content: ''; display: inline-block; width: 1.05em; height: .95em; margin-right: .4em; vertical-align: -.1em; background: var(--folder) center / contain no-repeat; } /* a dialog's title bar: its real close button is the close box, at the left */ :root[data-theme="mac8"] .dialog-card > .panel-head { flex-wrap: nowrap; gap: 8px; margin: -10px -12px 12px; padding: 4px 6px; background: var(--pinstripes), #dddddd; border-bottom: 1px solid #a8a8a8; } :root[data-theme="mac8"] .dialog-card > .panel-head > h2 { flex: 0 1 auto; margin: 0 auto; padding: 0 8px; min-height: 0; border: 0; box-shadow: none; } :root[data-theme="mac8"] .dialog-card > .panel-head > h2::before, :root[data-theme="mac8"] .dialog-card > .panel-head > h2::after { content: none; } :root[data-theme="mac8"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close { order: -1; width: 13px; height: 13px; flex: none; padding: 0; background: var(--close-box) center / 13px 13px no-repeat; border: 0; border-radius: 0; box-shadow: 0 0 0 4px #dddddd; color: transparent; font-size: 0; overflow: hidden; } :root[data-theme="mac8"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close:active { filter: brightness(.6); } :root[data-theme="mac8"] .modal-card { padding: 0 18px 18px; } :root[data-theme="mac8"] .modal-top { justify-content: flex-start; gap: 10px; margin: 0 -18px 14px; padding: 4px 8px; background: var(--pinstripes), #dddddd; border-bottom: 1px solid #a8a8a8; } :root[data-theme="mac8"] .modal-nav { margin: 0 auto; padding: 0 8px; background: #dddddd; } :root[data-theme="mac8"] .modal-backdrop { background: rgba(40, 40, 70, .3); } /* push buttons: rounded platinum; the default one wears a ring; pressed turns dark */ :root[data-theme="mac8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--platinum); color: #000000; border: 1px solid #222222; border-radius: 5px; box-shadow: var(--bevel); filter: none; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; } :root[data-theme="mac8"] .icon-btn { border-radius: 5px; } :root[data-theme="mac8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: linear-gradient(#ffffff, #e2e2e2); color: #000000; transform: none; box-shadow: var(--bevel); filter: none; } :root[data-theme="mac8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { background: var(--pressed); color: #ffffff; transform: none; box-shadow: inset 1px 1px #4a4a4a, inset -1px -1px #a0a0a0; } :root[data-theme="mac8"] .btn.go, :root[data-theme="mac8"] .btn.go:hover { box-shadow: var(--bevel), 0 0 0 2px #dddddd, 0 0 0 4px #222222; } :root[data-theme="mac8"] :is(.btn, .icon-btn):disabled { color: #8a8a8a; opacity: 1; } :root[data-theme="mac8"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(#a2a2a2, #c2c2c2); color: #000000; box-shadow: inset 1px 1px #666666, inset -1px -1px #dddddd; outline: 0; } :root[data-theme="mac8"] .seg { background: var(--platinum); border: 1px solid #222222; border-radius: 5px; box-shadow: none; } :root[data-theme="mac8"] .seg-btn { color: #000000; font-family: var(--font-display); font-weight: 400; box-shadow: var(--bevel); } :root[data-theme="mac8"] .seg-btn:hover { background: linear-gradient(#ffffff, #e2e2e2); } :root[data-theme="mac8"] .seg-btn + .seg-btn { border-left: 1px solid #222222; } /* edit text is white with a dark inset edge; a pop-up menu has its arrow; a check box gets a check */ :root[data-theme="mac8"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #000000; border: 1px solid #222222; border-radius: 0; box-shadow: inset 1px 1px #a8a8a8; } :root[data-theme="mac8"] .select { background-color: #eeeeee; border-radius: 4px; box-shadow: var(--bevel); font-family: var(--font-display); background-image: var(--pop-arrow), linear-gradient(#888888, #888888), linear-gradient(#ffffff, #ffffff), var(--platinum); background-position: right 7px center, right 21px center, right 20px center, 0 0; background-size: 7px 4px, 1px 70%, 1px 70%, 100% 100%; background-repeat: no-repeat; } :root[data-theme="mac8"] input[type="checkbox"] { appearance: none; width: 14px; height: 14px; flex: none; background: linear-gradient(#ffffff, #e6e6e6); border: 1px solid #222222; border-radius: 0; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #b8b8b8; cursor: pointer; } :root[data-theme="mac8"] input[type="checkbox"]:checked { background: var(--check) center / 11px 11px no-repeat, linear-gradient(#ffffff, #e6e6e6); } /* the rest: tiles like icons, the drop-down menu, Balloon Help, the barber pole */ :root[data-theme="mac8"] :is(.tile, .deck-tile) { border: 1px solid #000000; border-radius: 0; box-shadow: 1px 1px 0 #000000; } :root[data-theme="mac8"] .tile:is(:hover, :focus-within), :root[data-theme="mac8"] .deck-tile:hover { box-shadow: 0 0 0 2px var(--highlight); transform: none; } :root[data-theme="mac8"] .bignum { border: 1px solid #222222; border-radius: 4px; box-shadow: inset 1px 1px rgba(255, 255, 255, .55), inset -1px -1px rgba(0, 0, 0, .25), 1px 1px 0 #000000; } :root[data-theme="mac8"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: #dddddd; color: #000000; border: 1px solid #000000; border-radius: 0; box-shadow: var(--bevel), 1px 1px 0 rgba(0, 0, 0, .45); } :root[data-theme="mac8"] .job-banner:is(.good, .bad) { border: 1px solid #000000; border-radius: 0; box-shadow: var(--bevel); } :root[data-theme="mac8"] .spinner { width: 56px; height: 12px; border: 1px solid #222222; border-radius: 0; background: repeating-linear-gradient(-45deg, #5a5ab8 0 6px, #cfcff4 6px 12px) 0 0 / 16.97px 16.97px; animation: mac8-barber-pole .7s linear infinite; } @keyframes mac8-barber-pole { to { background-position: 16.97px 0; } } :root[data-theme="mac8"] .tools-list { background: #dddddd; border: 1px solid #000000; border-radius: 0; box-shadow: var(--bevel), 3px 3px 0 rgba(0, 0, 0, .3); padding: 3px 0; gap: 0; } :root[data-theme="mac8"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #000000; padding: 4px 18px 5px; } :root[data-theme="mac8"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; } :root[data-theme="mac8"] .tools-list :is(a, button) span { color: #555555; } :root[data-theme="mac8"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="mac8"] .tools-list a[aria-current="page"] { background: var(--highlight); color: #ffffff; outline: 0; } :root[data-theme="mac8"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="mac8"] .tools-list a[aria-current="page"] span { color: #e4e4ff; } :root[data-theme="mac8"] .tools-sep { height: 0; margin: 3px 0; border: 0; border-top: 1px solid #a8a8a8; border-bottom: 1px solid #ffffff; } :root[data-theme="mac8"] .toast { background: #ffffdd; color: #000000; border: 1px solid #000000; border-radius: 14px; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); font-family: var(--font-body); font-weight: 400; padding: 12px 18px; } :root[data-theme="mac8"] .toast::after { content: ''; position: absolute; left: 26px; bottom: -15px; width: 22px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cpath d='M1 0v1L2 15 20 1V0z' fill='%23ffffdd'/%3E%3Cpath d='M1 1L2 15 20 1' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0 / 22px 16px no-repeat; } :root[data-theme="mac8"] .site-footer { background: #dddddd; color: #000000; border: 1px solid #000000; border-radius: 0; box-shadow: var(--bevel), 1px 1px 0 rgba(0, 0, 0, .45); } :root[data-theme="mac8"] .site-footer a { color: #2a52b8; } /* scroll bars: a recessed track, a lavender thumb with a ridged grip, arrows at both ends */ :root[data-theme="mac8"]::-webkit-scrollbar, :root[data-theme="mac8"] ::-webkit-scrollbar { width: 16px; height: 16px; } :root[data-theme="mac8"]::-webkit-scrollbar-track, :root[data-theme="mac8"] ::-webkit-scrollbar-track { background: #c4c4c4; box-shadow: inset 1px 1px #8e8e8e, inset -1px -1px #e4e4e4; } :root[data-theme="mac8"]::-webkit-scrollbar-thumb, :root[data-theme="mac8"] ::-webkit-scrollbar-thumb { border: 1px solid #222222; box-shadow: inset 1px 1px #ffffff; } :root[data-theme="mac8"]::-webkit-scrollbar-thumb:vertical, :root[data-theme="mac8"] ::-webkit-scrollbar-thumb:vertical { background: var(--grip) center / 8px 8px no-repeat, linear-gradient(90deg, #ddddff, #a6a6e6); } :root[data-theme="mac8"]::-webkit-scrollbar-thumb:horizontal, :root[data-theme="mac8"] ::-webkit-scrollbar-thumb:horizontal { background: var(--grip-across) center / 8px 8px no-repeat, linear-gradient(#ddddff, #a6a6e6); } :root[data-theme="mac8"]::-webkit-scrollbar-corner, :root[data-theme="mac8"] ::-webkit-scrollbar-corner { background: #dddddd; } :root[data-theme="mac8"]::-webkit-scrollbar-button:single-button, :root[data-theme="mac8"] ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background: #dddddd center / 16px 16px no-repeat; } :root[data-theme="mac8"]::-webkit-scrollbar-button:single-button:vertical:decrement, :root[data-theme="mac8"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--scroll-up); } :root[data-theme="mac8"]::-webkit-scrollbar-button:single-button:vertical:increment, :root[data-theme="mac8"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--scroll-down); } :root[data-theme="mac8"]::-webkit-scrollbar-button:single-button:horizontal:decrement, :root[data-theme="mac8"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: var(--scroll-left); } :root[data-theme="mac8"]::-webkit-scrollbar-button:single-button:horizontal:increment, :root[data-theme="mac8"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: var(--scroll-right); } /* ==== macOS 27 ==================================================================================== Liquid Glass. A wallpaper of soft, layered color waves with an aurora drifting slowly over it; a clear menu bar along the top; the tabs sit in a floating glass dock, swelling under the pointer, the open one lit and marked with a dot. Panels are frosted glass with a bright rim and a sheen across them, each heading led by the three window lights; a dialog's and a card's real close button is the red one. Capsule buttons, a blue default button, pop-up buttons with their blue chevron badge, rounded check boxes, glass menus, a notification for a message, hairline scroll bars and the spoked activity indicator. */ :root[data-theme="mac27"] { --bg: #6f8cff; --bg-deep: rgba(255, 255, 255, .55); --bg-blob: #6f8cff; --panel: rgba(255, 255, 255, .8); --panel-2: rgba(255, 255, 255, .6); --panel-3: rgba(255, 255, 255, .94); --well: rgba(255, 255, 255, .7); --text: #1d1d1f; --muted: #4f4f5a; --faint: #85859a; --paper: #ffffff; --paper-ink: #1d1d1f; --pink: #e02a76; --cyan: #2f7cf0; --lime: #248a3d; --orange: #c95a00; --yellow: #9a7300; --violet: #a05ad8; --mint: #00857a; --peach: #c4602f; --pink-text: #c0175f; --pink-soft: #a8124f; --flat: rgba(0, 0, 0, .08); --zebra: rgba(0, 0, 0, .03); --grid: rgba(0, 0, 0, .08); --grid-2: rgba(0, 0, 0, .14); --drop: rgba(255, 255, 255, .5); --hatch: rgba(0, 0, 0, .1); --legend-miss: rgba(0, 0, 0, .14); --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(0, 0, 0, .12); --line-thick: 1px solid rgba(0, 0, 0, .16); --shadow: 0 18px 40px rgba(30, 30, 90, .16); --shadow-sm: 0 2px 8px rgba(30, 30, 90, .14); --blob: 22px; --blob-sm: 12px; --pill: 999px; --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; --accent: #1a62d6; --glass: blur(26px) saturate(180%); --rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .35); --sheen: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%); --lights: radial-gradient(circle at 6px 6px, #ff5f57 0 5px, #e0443e 5.3px 6px, transparent 6.4px), radial-gradient(circle at 24px 6px, #febc2e 0 5px, #dea123 5.3px 6px, transparent 6.4px), radial-gradient(circle at 42px 6px, #28c840 0 5px, #1aab29 5.3px 6px, transparent 6.4px); --popup-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='5' fill='%231a62d6'/%3E%3Cpath d='M5.5 7.4L9 4.6l3.5 2.8M5.5 10.6L9 13.4l3.5-2.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.4 4.6-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7ab8'/%3E%3Cstop offset='1' stop-color='%23e02a76'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='10' fill='url(%23g)'/%3E%3Cellipse cx='20' cy='21' rx='11' ry='8.5' fill='%23fff'/%3E%3Ccircle cx='21' cy='21.5' r='4.6' fill='%231d1d1f'/%3E%3Ccircle cx='22.6' cy='19.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E"); } :root[data-theme="mac27"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='sky' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234f7bff'/%3E%3Cstop offset='.5' stop-color='%239a7cf6'/%3E%3Cstop offset='1' stop-color='%23ff9cc6'/%3E%3C/linearGradient%3E %3ClinearGradient id='w1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237fb2ff'/%3E%3Cstop offset='1' stop-color='%23c49bff'/%3E%3C/linearGradient%3E %3ClinearGradient id='w2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%235b6cf0'/%3E%3Cstop offset='1' stop-color='%23b56ce8'/%3E%3C/linearGradient%3E %3ClinearGradient id='w3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff9fc8'/%3E%3Cstop offset='1' stop-color='%23ffc3a0'/%3E%3C/linearGradient%3E %3ClinearGradient id='w4' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233d4fd6'/%3E%3Cstop offset='1' stop-color='%237d4fd8'/%3E%3C/linearGradient%3E %3C/defs%3E %3Crect width='1600' height='1000' fill='url(%23sky)'/%3E %3Cpath d='M0 420C260 330 520 520 820 430S1350 300 1600 380V1000H0Z' fill='url(%23w1)' opacity='.7'/%3E %3Cpath d='M0 560C300 470 560 650 880 560S1380 450 1600 520V1000H0Z' fill='url(%23w2)' opacity='.75'/%3E %3Cpath d='M0 700C260 640 600 780 900 700S1400 610 1600 680V1000H0Z' fill='url(%23w3)' opacity='.7'/%3E %3Cpath d='M0 830C320 770 640 900 960 830S1420 760 1600 810V1000H0Z' fill='url(%23w4)' opacity='.8'/%3E %3C/svg%3E") center / cover no-repeat fixed, #6f8cff; } /* an aurora drifting slowly over the wallpaper */ :root[data-theme="mac27"] body::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 30% 22% at 30% 30%, rgba(255, 255, 255, .45), transparent 70%), radial-gradient(ellipse 26% 20% at 70% 40%, rgba(120, 255, 230, .3), transparent 70%), radial-gradient(ellipse 34% 24% at 50% 70%, rgba(255, 170, 220, .35), transparent 70%); animation: mac27-aurora 48s ease-in-out infinite alternate; } @keyframes mac27-aurora { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(6%, -4%) rotate(8deg) scale(1.08); } 100% { transform: translate(-5%, 5%) rotate(-6deg) scale(1.02); } } :root[data-theme="mac27"] * { text-shadow: none !important; } :root[data-theme="mac27"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 650; color: #1d1d1f; letter-spacing: -.01em; } :root[data-theme="mac27"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #1d1d1f; } :root[data-theme="mac27"] ::selection { background: rgba(26, 98, 214, .3); color: #1d1d1f; } :root[data-theme="mac27"] :focus-visible { outline: 3px solid rgba(26, 98, 214, .6); outline-offset: 2px; } :root[data-theme="mac27"] a { color: #1a62d6; } /* the menu bar: clear glass along the top of the screen */ :root[data-theme="mac27"] .topbar { background: rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 1px 0 rgba(30, 30, 90, .08); padding-top: 8px; padding-bottom: 8px; } :root[data-theme="mac27"] .logo-mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(30, 30, 90, .25)); } :root[data-theme="mac27"] .logo-text .l2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #1d1d1f; letter-spacing: -.01em; } :root[data-theme="mac27"] .logo-text .l2-card { color: #1a62d6; } :root[data-theme="mac27"] .header-stats { color: #2c2c36; } :root[data-theme="mac27"] .header-stats b { color: #1d1d1f; } :root[data-theme="mac27"] .bell { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; box-shadow: 0 2px 8px rgba(30, 30, 90, .14), inset 0 1px 0 rgba(255, 255, 255, .9); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); } :root[data-theme="mac27"] :is(.bell, .bell.gear):hover { background: rgba(255, 255, 255, .8); transform: scale(1.06); } :root[data-theme="mac27"] .bell[aria-current] { background: #ffffff; } /* tabs: a floating glass dock; the item under the pointer swells, the open one is lit with a dot. The dock takes no blur of its own: a blurred element holds the More menu's fixed position to itself, and the menu would open beside its button. The menu bar's blur shows through it instead. */ :root[data-theme="mac27"] .tabs { align-items: center; gap: 4px; padding: 5px; border-radius: 20px; background: rgba(255, 255, 255, .36); border: 1px solid rgba(255, 255, 255, .62); box-shadow: 0 10px 30px rgba(30, 30, 90, .18), inset 0 1px 0 rgba(255, 255, 255, .85); } :root[data-theme="mac27"] :is(.tabs > a, .tools-btn) { position: relative; background: transparent; color: #1d1d1f; border: 0; border-radius: 14px; box-shadow: none; filter: none; font-family: var(--font-display); font-weight: 600; letter-spacing: 0; padding: 7px 14px; transition: transform .18s cubic-bezier(.3, .7, .4, 1.4), background .15s; } :root[data-theme="mac27"] :is(.tabs > a, .tools-btn):hover { background: rgba(255, 255, 255, .55); color: #1d1d1f; transform: scale(1.1) translateY(-2px); box-shadow: 0 6px 16px rgba(30, 30, 90, .16); } :root[data-theme="mac27"] :is(.tabs > a, .tools-btn):active { transform: scale(.96); } :root[data-theme="mac27"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: rgba(255, 255, 255, .88); color: #1d1d1f; box-shadow: 0 2px 10px rgba(30, 30, 90, .18); } :root[data-theme="mac27"] .tabs > a[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d1d1f; opacity: .6; } /* panels: frosted glass with a bright rim and a sheen; the three window lights lead each heading */ :root[data-theme="mac27"] :is(.panel, .dialog-card, .modal-card) { background: var(--sheen), rgba(255, 255, 255, .74); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; box-shadow: 0 18px 40px rgba(30, 30, 90, .16), var(--rim); } :root[data-theme="mac27"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 48px; height: 12px; margin-right: 12px; vertical-align: .05em; background: var(--lights); } :root[data-theme="mac27"] .dialog-card > .panel-head > h2::before { content: none; } /* a dialog's and a card's real close button is the red light; the other two lights sit beside it */ :root[data-theme="mac27"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close { order: -1; width: 12px; height: 12px; flex: none; margin-right: 44px; padding: 0; border: 0; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .7px #e0443e, 18px 0 0 #febc2e, 36px 0 0 #28c840; color: transparent; font: 700 11px/12px var(--font-body); -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-theme="mac27"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close:hover { color: #7a1712; transform: none; background: #ff5f57; } :root[data-theme="mac27"] .dialog-card > .panel-head { justify-content: flex-start; } :root[data-theme="mac27"] .modal-top { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-bottom: 1px solid rgba(255, 255, 255, .7); justify-content: flex-start; gap: 16px; } :root[data-theme="mac27"] .modal-nav { margin: 0 auto; } :root[data-theme="mac27"] .modal-backdrop { background: rgba(40, 40, 90, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* capsule buttons; the default one is blue; a chosen one is lit white */ :root[data-theme="mac27"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: rgba(255, 255, 255, .62); color: #1d1d1f; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; box-shadow: 0 1px 3px rgba(30, 30, 90, .12), inset 0 1px 0 rgba(255, 255, 255, .9); filter: none; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; } :root[data-theme="mac27"] .icon-btn { border-radius: 50%; } :root[data-theme="mac27"] .shape-tile { border-radius: 16px; } :root[data-theme="mac27"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: rgba(255, 255, 255, .86); color: #1d1d1f; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 30, 90, .16), inset 0 1px 0 #ffffff; } :root[data-theme="mac27"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: scale(.97); } :root[data-theme="mac27"] .btn.go, :root[data-theme="mac27"] .btn.go:hover { background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)), var(--accent); color: #ffffff; border-color: rgba(255, 255, 255, .45); } :root[data-theme="mac27"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: #ffffff; color: #1d1d1f; box-shadow: 0 2px 10px rgba(30, 30, 90, .2); outline: 0; } :root[data-theme="mac27"] .seg { background: rgba(0, 0, 0, .07); border: 0; border-radius: 999px; padding: 2px; gap: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); } :root[data-theme="mac27"] .seg-btn { color: #1d1d1f; border-radius: 999px; font-weight: 600; } :root[data-theme="mac27"] .seg-btn:hover { background: rgba(255, 255, 255, .5); } :root[data-theme="mac27"] .seg-btn + .seg-btn { border-left: 0; } /* text fields, pop-up buttons with the blue chevron badge, rounded check boxes */ :root[data-theme="mac27"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: rgba(255, 255, 255, .8); color: #1d1d1f; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); } :root[data-theme="mac27"] .select { padding-right: 32px; box-shadow: 0 1px 3px rgba(30, 30, 90, .1); background-image: var(--popup-badge); background-position: right 5px center; background-size: 18px 18px; background-repeat: no-repeat; } :root[data-theme="mac27"] input[type="checkbox"] { appearance: none; width: 16px; height: 16px; flex: none; border-radius: 4px; cursor: pointer; background: #ffffff; border: 1px solid rgba(0, 0, 0, .22); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } :root[data-theme="mac27"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, var(--accent); border-color: var(--accent); } /* the rest: glass tiles, a glass menu, a notification, the spoked activity indicator */ :root[data-theme="mac27"] :is(.tile, .deck-tile) { border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px; box-shadow: 0 8px 22px rgba(30, 30, 90, .14), inset 0 1px 0 rgba(255, 255, 255, .9); } :root[data-theme="mac27"] .deck-tile { -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); } :root[data-theme="mac27"] .tile:is(:hover, :focus-within), :root[data-theme="mac27"] .deck-tile:hover { box-shadow: 0 0 0 3px rgba(26, 98, 214, .55), 0 14px 30px rgba(30, 30, 90, .2); } :root[data-theme="mac27"] .deck-tile:hover { transform: translateY(-3px); } :root[data-theme="mac27"] .bignum { background-image: linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%); border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; box-shadow: 0 8px 20px rgba(30, 30, 90, .14), inset 0 1px 0 rgba(255, 255, 255, .7); } :root[data-theme="mac27"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 8px 22px rgba(30, 30, 90, .14); } :root[data-theme="mac27"] .spinner { border: 0; border-radius: 0; animation: mac27-spokes 1s steps(12) infinite; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round'%3E %3Cpath d='M12 2.5v4.5' opacity='1'/%3E%3Cpath d='M16.75 3.77l-2.25 3.9' opacity='.92'/%3E%3Cpath d='M20.23 7.25l-3.9 2.25' opacity='.84'/%3E%3Cpath d='M21.5 12H17' opacity='.76'/%3E %3Cpath d='M20.23 16.75l-3.9-2.25' opacity='.68'/%3E%3Cpath d='M16.75 20.23l-2.25-3.9' opacity='.6'/%3E%3Cpath d='M12 21.5V17' opacity='.52'/%3E%3Cpath d='M7.25 20.23l2.25-3.9' opacity='.44'/%3E %3Cpath d='M3.77 16.75l3.9-2.25' opacity='.36'/%3E%3Cpath d='M2.5 12H7' opacity='.3'/%3E%3Cpath d='M3.77 7.25l3.9 2.25' opacity='.24'/%3E%3Cpath d='M7.25 3.77l2.25 3.9' opacity='.18'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes mac27-spokes { to { transform: rotate(360deg); } } /* the menu sits inside the blurred menu bar, which keeps it from blurring the page, so it is nearly opaque */ :root[data-theme="mac27"] .tools-list { background: var(--sheen), rgba(248, 248, 252, .95); border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; box-shadow: 0 18px 44px rgba(30, 30, 90, .26), 0 0 0 .5px rgba(0, 0, 0, .14); padding: 6px; gap: 1px; } :root[data-theme="mac27"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 8px; box-shadow: none; color: #1d1d1f; } :root[data-theme="mac27"] .tools-list :is(a, button) b { font-family: var(--font-body); font-weight: 600; } :root[data-theme="mac27"] .tools-list :is(a, button) span { color: #5a5a66; } :root[data-theme="mac27"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="mac27"] .tools-list a[aria-current="page"] { background: var(--accent); color: #ffffff; outline: 0; } :root[data-theme="mac27"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="mac27"] .tools-list a[aria-current="page"] span { color: #e4ecff; } :root[data-theme="mac27"] .tools-sep { height: 0; margin: 4px 8px; border: 0; border-top: 1px solid rgba(0, 0, 0, .12); } :root[data-theme="mac27"] .toast { background: var(--app-icon) 14px 50% / 36px 36px no-repeat, var(--sheen), rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: #1d1d1f; border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px; box-shadow: 0 16px 40px rgba(30, 30, 90, .25), var(--rim); font-weight: 500; padding: 12px 20px 12px 62px; } :root[data-theme="mac27"] .toast::before { content: 'Cardclops'; display: block; font-weight: 700; font-size: .78rem; color: #4f4f5a; } :root[data-theme="mac27"] .site-footer { background: var(--sheen), rgba(255, 255, 255, .62); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: 1px solid rgba(255, 255, 255, .75); border-radius: 18px; color: #3a3a46; box-shadow: var(--rim); } /* hairline scroll bars */ :root[data-theme="mac27"]::-webkit-scrollbar, :root[data-theme="mac27"] ::-webkit-scrollbar { width: 11px; height: 11px; } :root[data-theme="mac27"]::-webkit-scrollbar-track, :root[data-theme="mac27"] ::-webkit-scrollbar-track { background: transparent; } :root[data-theme="mac27"]::-webkit-scrollbar-thumb, :root[data-theme="mac27"] ::-webkit-scrollbar-thumb { background: rgba(30, 30, 50, .34); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; } :root[data-theme="mac27"]::-webkit-scrollbar-thumb:hover, :root[data-theme="mac27"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(30, 30, 50, .5); } :root[data-theme="mac27"]::-webkit-scrollbar-corner, :root[data-theme="mac27"] ::-webkit-scrollbar-corner { background: transparent; } /* ==== Windows XP ================================================================================== Luna, 2001. A blue sky with clouds drifting over a green hill (and the Recycle Bin at the bottom right, where a wide screen leaves the desktop showing); the top bar is the blue taskbar, the logo its green Start button with italic white lettering, the tabs its rounded taskbar buttons with their icons, the totals in the lighter blue tray. Every panel is a window: rounded blue title bar with a white caption and the blue minimize and maximize and the red close buttons, inside a blue frame; a panel without a title is a beige dialog face, and the breakdown panels are task-pane groups with a white-to-blue header and its chevron. The More menu is the Start menu, blue header and all; buttons glow orange under the pointer; a message is the yellow notification balloon; the scroll bars are pale blue; and the busy sign is the green marquee of the progress bar. */ :root[data-theme="xp"] { --bg: #5a9ee8; --bg-deep: #245de1; --bg-blob: #5a9ee8; --panel: #ffffff; --panel-2: #f4f3ee; --panel-3: #e7e4d6; --well: #ffffff; --text: #000000; --muted: #444444; --faint: #777777; --paper: #ffffff; --paper-ink: #000000; --pink: #e0237f; --cyan: #3478e6; --lime: #3a8a00; --orange: #d05800; --yellow: #9a7a00; --violet: #9068e0; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0136f; --pink-soft: #a0105f; --flat: #e2dfd2; --zebra: #f7f6f1; --grid: #e2dfd2; --grid-2: #cdc9b8; --drop: #eef2fb; --hatch: #d8d4c4; --legend-miss: #d0ccbc; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #7f9db9; --line-thick: 2px solid #0054e3; --shadow: 2px 3px 8px rgba(0, 0, 0, .35); --shadow-sm: 1px 1px 3px rgba(0, 0, 0, .25); --blob: 8px 8px 0 0; --blob-sm: 3px; --pill: 3px; --font-display: 'Trebuchet MS', Tahoma, 'Segoe UI', Verdana, sans-serif; --font-body: Tahoma, 'Segoe UI', Verdana, sans-serif; --face: #ece9d8; --luna-title: linear-gradient(#0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0055ea 100%); --luna-button: linear-gradient(#ffffff 0%, #f3f2ec 40%, #e3e0d2 85%, #d6d0c0 100%); --taskbar: linear-gradient(#3168d5 0%, #4993e6 3%, #2157d7 7%, #2663e0 12%, #245de1 90%, #1941a5 100%); --hover-glow: inset 0 2px 0 #ffe7a2, inset 0 -2px 0 #f8b030, inset 2px 0 0 #fcd57f, inset -2px 0 0 #fcd57f; --caption-buttons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67' height='21'%3E %3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236fa3ff'/%3E%3Cstop offset='.5' stop-color='%232a6cf0'/%3E%3Cstop offset='1' stop-color='%231b4fd2'/%3E%3C/linearGradient%3E %3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0a080'/%3E%3Cstop offset='.5' stop-color='%23e2542d'/%3E%3Cstop offset='1' stop-color='%23c23a17'/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect x='.5' y='.5' width='20' height='20' rx='3' fill='url(%23b)' stroke='%23fff'/%3E%3Crect x='23.5' y='.5' width='20' height='20' rx='3' fill='url(%23b)' stroke='%23fff'/%3E%3Crect x='46.5' y='.5' width='20' height='20' rx='3' fill='url(%23r)' stroke='%23fff'/%3E %3Cpath d='M5 14h7v2.4H5z' fill='%23fff'/%3E%3Cpath d='M28 5h11v11H28zM29.8 8.4v5.8h7.4V8.4z' fill='%23fff' fill-rule='evenodd'/%3E %3Cpath d='M51.5 5.5l10 10M61.5 5.5l-10 10' stroke='%23fff' stroke-width='2.3'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23fff' stroke='%23c3d1f5'/%3E%3Cpath d='M6.5 7.5L10 4.8l3.5 2.7M6.5 11.8L10 9.1l3.5 2.7' fill='none' stroke='%232058cc' stroke-width='1.6'/%3E%3C/svg%3E"); --combo-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%234d6185' stroke-width='1.8'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 4.4l2.4 2.4L8 1.6' fill='none' stroke='%2321a121' stroke-width='2'/%3E%3C/svg%3E"); --info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.3' fill='%232f6fe6' stroke='%231c4fb8'/%3E%3Ccircle cx='8' cy='4.6' r='1.2' fill='%23fff'/%3E%3Cpath d='M6.8 6.8h2.2v4.8h1v1.2H6v-1.2h1v-3.6h-.2z' fill='%23fff'/%3E%3C/svg%3E"); --balloon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.5' y='.5' width='13' height='13' rx='2' fill='%23fff' stroke='%23a8a8a8'/%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E"); --user-picture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1.5' y='1.5' width='41' height='41' rx='4' fill='%23ffd9ec' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M22 8c8.5 0 13 5.5 12.2 13.4S27.5 36 21 36 8.3 31 9.2 21.4 13.5 8 22 8z' fill='%23e0237f' stroke='%23000' stroke-width='2'/%3E%3Cellipse cx='22' cy='23' rx='7.5' ry='6' fill='%23fff' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='22.8' cy='23.4' r='3' fill='%23000'/%3E%3C/svg%3E"); --scroll-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='.5' y='.5' width='16' height='16' rx='3' fill='%23c5d5fc' stroke='%23fff'/%3E%3Cpath d='M5 10l3.5-3.5L12 10' fill='none' stroke='%234d6185' stroke-width='1.8'/%3E%3C/svg%3E"); --scroll-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='.5' y='.5' width='16' height='16' rx='3' fill='%23c5d5fc' stroke='%23fff'/%3E%3Cpath d='M5 7l3.5 3.5L12 7' fill='none' stroke='%234d6185' stroke-width='1.8'/%3E%3C/svg%3E"); --scroll-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='.5' y='.5' width='16' height='16' rx='3' fill='%23c5d5fc' stroke='%23fff'/%3E%3Cpath d='M10 5L6.5 8.5 10 12' fill='none' stroke='%234d6185' stroke-width='1.8'/%3E%3C/svg%3E"); --scroll-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='.5' y='.5' width='16' height='16' rx='3' fill='%23c5d5fc' stroke='%23fff'/%3E%3Cpath d='M7 5l3.5 3.5L7 12' fill='none' stroke='%234d6185' stroke-width='1.8'/%3E%3C/svg%3E"); --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h8v1H0zM0 2h8v1H0zM0 4h8v1H0zM0 6h8v1H0z' fill='%23eef3ff'/%3E%3Cpath d='M0 1h8v1H0zM0 3h8v1H0zM0 5h8v1H0zM0 7h8v1H0z' fill='%238faae6'/%3E%3C/svg%3E"); --grip-across: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v8H0zM2 0h1v8H2zM4 0h1v8H4zM6 0h1v8H6z' fill='%23eef3ff'/%3E%3Cpath d='M1 0h1v8H1zM3 0h1v8H3zM5 0h1v8H5zM7 0h1v8H7z' fill='%238faae6'/%3E%3C/svg%3E"); } :root[data-theme="xp"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='hill' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237dcf43'/%3E%3Cstop offset='.35' stop-color='%235aae2c'/%3E%3Cstop offset='1' stop-color='%232f7a17'/%3E%3C/linearGradient%3E %3ClinearGradient id='far' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2393cf6a'/%3E%3Cstop offset='1' stop-color='%235c9f3a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 250C300 170 560 190 820 240S1340 300 1600 210V500H0Z' fill='url(%23far)'/%3E %3Cpath d='M0 330C260 200 620 150 980 230S1440 360 1600 330V500H0Z' fill='url(%23hill)'/%3E%3C/svg%3E") bottom / 100% 40vh no-repeat, linear-gradient(#1f5fc8 0%, #3f82df 30%, #78b2ef 62%, #bcdcfa 80%, #dcefff 100%); background-attachment: fixed; } /* clouds drifting slowly across the sky */ :root[data-theme="xp"] body::before { content: ''; position: fixed; left: 0; top: 6vh; width: 200%; height: 46vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 9% 16% at 8% 30%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(ellipse 6% 11% at 12% 26%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(ellipse 11% 13% at 31% 62%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(ellipse 7% 10% at 44% 22%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(ellipse 9% 16% at 58% 30%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(ellipse 6% 11% at 62% 26%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(ellipse 11% 13% at 81% 62%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(ellipse 7% 10% at 94% 22%, rgba(255, 255, 255, .8), transparent 70%); animation: xp-clouds 160s linear infinite; } @keyframes xp-clouds { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* the Recycle Bin, where a wide screen leaves the desktop showing */ @media (min-width: 1860px) { :root[data-theme="xp"] body::after { content: ''; position: fixed; right: 18px; bottom: 20px; width: 84px; height: 76px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='76' font-family='Tahoma,sans-serif' font-size='11' text-anchor='middle'%3E %3Cdefs%3E%3ClinearGradient id='bin' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23cfe8d0'/%3E%3Cstop offset='.5' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%239fc8a4'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cg transform='translate(24 2)'%3E%3Cpath d='M6 9h24l-3 28H9z' fill='url(%23bin)' stroke='%234c7a55' stroke-width='1.2'/%3E%3Cpath d='M12 13l1.5 21M18 13v21M24 13l-1.5 21' stroke='%237aa882'/%3E%3Cellipse cx='18' cy='9' rx='13' ry='3.4' fill='%23e8f4ea' stroke='%234c7a55' stroke-width='1.2'/%3E%3C/g%3E %3Ctext x='43' y='58' fill='%23000' opacity='.55'%3ERecycle Bin%3C/text%3E%3Ctext x='42' y='57' fill='%23fff'%3ERecycle Bin%3C/text%3E%3C/svg%3E") 0 0 / 84px 76px no-repeat; } } :root[data-theme="xp"] * { text-shadow: none; } :root[data-theme="xp"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: #0b3aa8; letter-spacing: 0; } :root[data-theme="xp"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #0b3aa8; } :root[data-theme="xp"] ::selection { background: #316ac5; color: #ffffff; } :root[data-theme="xp"] :focus-visible { outline: 1px dotted #000000; outline-offset: 2px; } :root[data-theme="xp"] a { color: #0645c8; } /* the taskbar: blue, the green Start button at its left, the tray at its right */ :root[data-theme="xp"] .topbar { background: var(--taskbar); border-bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); color: #ffffff; padding-top: 0; padding-bottom: 0; gap: 4px 10px; min-height: 44px; } :root[data-theme="xp"] .logo { align-self: stretch; margin-left: calc(-1 * var(--gutter)); padding: 4px 22px 4px 12px; gap: 6px; background: radial-gradient(ellipse 80% 60% at 40% 20%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(#3c9b3c, #2f8a2f 60%, #267a26); border-radius: 0 16px 16px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset -2px 0 3px rgba(0, 0, 0, .25), 2px 0 4px rgba(0, 0, 0, .35); } :root[data-theme="xp"] .logo:hover { filter: brightness(1.08); } :root[data-theme="xp"] .logo:active { filter: brightness(.9); } :root[data-theme="xp"] .logo:hover :is(.logo-mark, .pupil) { transform: none; } :root[data-theme="xp"] .logo-mark { width: 26px; height: 26px; } :root[data-theme="xp"] .logo-text .l2, :root[data-theme="xp"] .logo-text .l2-card { color: #ffffff; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.25rem; text-shadow: 1px 1px 1px #1a4d1a !important; } :root[data-theme="xp"] .header-stats { align-self: stretch; align-items: center; margin-right: calc(-1 * var(--gutter)); padding: 4px calc(var(--gutter) + 4px) 4px 14px; background: linear-gradient(#0c59b9 0%, #139ee9 6%, #18b5f2 12%, #139beb 50%, #1290e8 90%, #0d8ddc 100%); box-shadow: inset 1px 0 #095bc9, inset 2px 0 #19b9f3; color: #e8f4ff; } :root[data-theme="xp"] .header-stats:empty { display: none; } :root[data-theme="xp"] .header-stats b { color: #ffffff; } :root[data-theme="xp"] .bell { width: 34px; height: 34px; background: transparent; border: 0; border-radius: 4px; box-shadow: none; } :root[data-theme="xp"] .bell svg { width: 20px; height: 20px; } :root[data-theme="xp"] :is(.bell, .bell.gear):hover { background: rgba(255, 255, 255, .2); transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); } :root[data-theme="xp"] .bell[aria-current] { background: rgba(0, 0, 0, .2); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .45); } /* tabs: rounded taskbar buttons with their icons; the open window's is pressed in */ :root[data-theme="xp"] :is(.tabs > a, .tools-btn) { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1.5' fill='%23fff' stroke='%232a56b8'/%3E%3Cpath d='M2 3.2h12V6H2z' fill='%233a7bea'/%3E%3Cpath d='M3.5 8h6M3.5 10h8' stroke='%239aa8c4'/%3E%3C/svg%3E"); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#5c99f2, #3c81f3 45%, #2f6fe0); color: #ffffff; border: 1px solid #1c49b8; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); font-family: var(--font-body); font-weight: 400; letter-spacing: 0; padding: 5px 12px 5px 8px; } :root[data-theme="xp"] :is(.tabs > a, .tools-btn)::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--tab-icon) center / 16px 16px no-repeat; } :root[data-theme="xp"] .tabs > a[data-tab="dashboard"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='1.5' fill='%23fff' stroke='%232a56b8'/%3E%3Cpath d='M3.5 13V9h2.4v4zM7 13V5.5h2.4V13zM10.5 13V7.5h2.4V13z' fill='%233a9a3a'/%3E%3Cpath d='M7 5.5h2.4V13H7z' fill='%232f74e8'/%3E%3Cpath d='M10.5 7.5h2.4V13h-2.4z' fill='%23f0a020'/%3E%3C/svg%3E"); } :root[data-theme="xp"] .tabs > a[data-tab="gallery"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1' fill='%238cc8ff' stroke='%232a56b8'/%3E%3Cpath d='M2 13v-3l3.5-2.5L9 10l2-1.2 3 1.8V13z' fill='%234fae2c'/%3E%3Ccircle cx='11' cy='5.8' r='1.6' fill='%23ffd84a'/%3E%3C/svg%3E"); } :root[data-theme="xp"] .tabs > a[data-tab="sets"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 13.5v-10h4.5l1.5 1.5h7v8.5z' fill='%23f4c74a' stroke='%23b88a1a'/%3E%3Cpath d='M1.5 13.5l1.8-5.5h11.2l-1.5 5.5z' fill='%23ffe089' stroke='%23b88a1a'/%3E%3C/svg%3E"); } :root[data-theme="xp"] .tabs > a[data-tab="decks"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5.5' y='1.5' width='9' height='11' rx='1' fill='%23dfe7f6' stroke='%232a56b8'/%3E%3Crect x='1.5' y='3.5' width='9' height='11' rx='1' fill='%23fff' stroke='%232a56b8'/%3E%3Cpath d='M3 5h6v4H3z' fill='%233a7bea'/%3E%3Cpath d='M3 10.5h6M3 12.5h4' stroke='%239aa8c4'/%3E%3C/svg%3E"); } :root[data-theme="xp"] .tabs > a[data-tab="build"] { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 5.5h2.2v9H6.5z' fill='%23c8873a' stroke='%237a4a14'/%3E%3Cpath d='M2.5 1.5h8l3 3v2h-2.2l-1-1h-7.8z' fill='%23c8d0dc' stroke='%234a5568'/%3E%3C/svg%3E"); } :root[data-theme="xp"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(#73a9f5, #4f8ef5 45%, #3c7cec); color: #ffffff; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); } :root[data-theme="xp"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(#1e52b7, #1a48a4); color: #ffffff; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .5); } :root[data-theme="xp"] :is(.tabs > a, .tools-btn):focus-visible { outline: 1px dotted #ffffff; outline-offset: -4px; } /* panels: Luna windows; untitled panels are beige dialog faces; the breakdown panels are task-pane groups */ :root[data-theme="xp"] :is(.panel, .dialog-card, .modal-card) { background: #ffffff; border: 3px solid #0054e3; border-top-width: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 8px rgba(0, 0, 0, .35); } :root[data-theme="xp"] :is(.panel, .dialog-card) { padding: 0 12px 14px; } :root[data-theme="xp"] :is(.panel, .dialog-card) > .panel-head > :is(h1, h2, h3) { display: flex; align-items: center; flex: 1 0 100%; margin: 0 -15px; padding: 5px 82px 5px 10px; min-height: 30px; background: var(--caption-buttons) right 6px center / 67px 21px no-repeat, var(--luna-title); border-radius: 8px 8px 0 0; color: #ffffff !important; font-size: 1.02rem; line-height: 1.2; text-shadow: 1px 1px 0 #0f1089 !important; } :root[data-theme="xp"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1c4.5 0 7 3 6.5 7S11.5 15 7.5 15 1 12.5 1.5 8 4 1 8 1z' fill='%23e0237f' stroke='%23000' stroke-width='1.2'/%3E%3Cellipse cx='8' cy='8.8' rx='4' ry='3.1' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='8.5' cy='9' r='1.6' fill='%23000'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } :root[data-theme="xp"] .panel:not(:has(> .panel-head)) { background: var(--face); border: 1px solid #b4b0a0; border-radius: 4px; padding: 12px 14px; box-shadow: 1px 2px 5px rgba(0, 0, 0, .2); } :root[data-theme="xp"] .panel.stat-panel { background: #eef3fd; border: 1px solid #ffffff; border-radius: 6px 6px 2px 2px; padding: 0 12px 12px; box-shadow: 1px 2px 6px rgba(0, 0, 0, .25); } :root[data-theme="xp"] .stat-panel > h3 { margin: 0 -12px; padding: 6px 34px 6px 10px; border-radius: 5px 5px 0 0; background: var(--chevron) right 7px center / 20px 20px no-repeat, linear-gradient(90deg, #ffffff, #c6d3f7); color: #215dc6 !important; font-size: 1rem; } :root[data-theme="xp"] .stat-panel > h3::before { display: none; } /* a dialog's title bar holds its real close button, drawn as the red close button; a dialog scrolls, so its title bar stays inside the frame rather than spreading over it */ :root[data-theme="xp"] .dialog-card > .panel-head { flex-wrap: nowrap; margin: 0 -12px 12px; padding: 4px 6px 4px 10px; background: var(--luna-title); border-radius: 8px 8px 0 0; } :root[data-theme="xp"] .dialog-card > .panel-head > h2 { flex: 1 1 auto; margin: 0; padding: 0; min-height: 0; background: none; } :root[data-theme="xp"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close { width: 22px; height: 22px; padding: 0; border: 1px solid #ffffff; border-radius: 3px; color: #ffffff; font: 700 15px/1 var(--font-body); background: linear-gradient(135deg, #f0a080, #e2542d 50%, #c23a17); box-shadow: none; } :root[data-theme="xp"] .modal-card { padding: 0 18px 18px; } :root[data-theme="xp"] .modal-top { margin: 0 -18px 14px; padding: 4px 6px 4px 12px; background: var(--luna-title); border-bottom: 0; border-radius: 8px 8px 0 0; } :root[data-theme="xp"] .modal-top .nav-count { color: #ffffff; } :root[data-theme="xp"] .modal-backdrop { background: rgba(0, 20, 80, .35); } /* Luna buttons: they glow orange under the pointer; the default one glows blue */ :root[data-theme="xp"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--luna-button); color: #000000; border: 1px solid #003c74; border-radius: 3px; box-shadow: none; filter: none; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; } :root[data-theme="xp"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: var(--luna-button); color: #000000; transform: none; box-shadow: var(--hover-glow); filter: none; } :root[data-theme="xp"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { background: linear-gradient(#cdcac3, #e3e3db 60%, #f0efe8); transform: none; box-shadow: none; } :root[data-theme="xp"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile, .seg-btn):focus-visible { outline-offset: -4px; } :root[data-theme="xp"] .btn.go { box-shadow: inset 0 0 0 1px #5a8ce6, inset 0 0 0 2px #b6d0f6; } :root[data-theme="xp"] .btn.go:hover { box-shadow: var(--hover-glow); } :root[data-theme="xp"] :is(.btn, .icon-btn):disabled { color: #a19d8c; opacity: 1; border-color: #c9c7ba; } :root[data-theme="xp"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(#cdcac3, #e3e3db 60%, #f0efe8); color: #000000; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .25); outline: 0; } :root[data-theme="xp"] .seg { background: var(--luna-button); border: 1px solid #003c74; border-radius: 3px; box-shadow: none; } :root[data-theme="xp"] .seg-btn { color: #000000; font-weight: 400; } :root[data-theme="xp"] .seg-btn:hover { background: transparent; box-shadow: var(--hover-glow); } :root[data-theme="xp"] .seg-btn + .seg-btn { border-left: 1px solid #003c74; } /* text boxes, the combo box's pale blue button, the green check */ :root[data-theme="xp"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #000000; border: 1px solid #7f9db9; border-radius: 0; box-shadow: none; } :root[data-theme="xp"] .select { background-image: var(--combo-arrow), linear-gradient(#ffffff, #ffffff), linear-gradient(#e6eefc, #c1d3fb 50%, #aac3f5); background-position: right 5px center, right 18px center, right 1px top 1px; background-size: 9px 6px, 1px calc(100% - 2px), 17px calc(100% - 2px); background-repeat: no-repeat; } :root[data-theme="xp"] input[type="checkbox"] { appearance: none; width: 14px; height: 14px; flex: none; cursor: pointer; background: linear-gradient(135deg, #dcdcd7, #ffffff); border: 1px solid #1c5180; border-radius: 0; } :root[data-theme="xp"] input[type="checkbox"]:hover { box-shadow: inset 0 0 0 2px #f8b636; } :root[data-theme="xp"] input[type="checkbox"]:checked { background: var(--check) center / 9px 9px no-repeat, linear-gradient(135deg, #dcdcd7, #ffffff); } /* the rest: tiles, the Start menu, the notification balloon, the marquee */ :root[data-theme="xp"] :is(.tile, .deck-tile) { border: 1px solid #b9c7e3; border-radius: 3px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .2); } :root[data-theme="xp"] .tile:is(:hover, :focus-within), :root[data-theme="xp"] .deck-tile:hover { box-shadow: 0 0 0 2px #316ac5, 1px 2px 6px rgba(0, 0, 0, .25); transform: none; } :root[data-theme="xp"] .bignum { border: 1px solid rgba(0, 0, 0, .35); border-radius: 6px; background-image: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 1px 2px 4px rgba(0, 0, 0, .25); } :root[data-theme="xp"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--face); color: #000000; border: 1px solid #b4b0a0; border-radius: 4px; box-shadow: 1px 2px 5px rgba(0, 0, 0, .2); } :root[data-theme="xp"] .job-banner:is(.good, .bad) { border: 1px solid rgba(0, 0, 0, .35); border-radius: 4px; } :root[data-theme="xp"] .spinner { width: 64px; height: 14px; border: 1px solid #686868; border-radius: 3px; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); background: linear-gradient(90deg, #2fb32f 0 7px, transparent 7px 9px, #2fb32f 9px 16px, transparent 16px 18px, #2fb32f 18px 25px, transparent 25px) -26px 2px / 26px 8px no-repeat, #ffffff; animation: xp-marquee 1.6s linear infinite; } @keyframes xp-marquee { to { background-position: 64px 2px, 0 0; } } :root[data-theme="xp"] .tools-list { background: #ffffff; border: 2px solid #1859d6; border-radius: 6px 6px 0 0; box-shadow: 2px 3px 8px rgba(0, 0, 0, .45); padding: 0; gap: 0; } :root[data-theme="xp"] .tools-list::before { content: 'Cardclops'; display: flex; align-items: center; flex: none; min-height: 58px; padding: 6px 14px 6px 66px; margin-bottom: 4px; background: var(--user-picture) 10px 50% / 44px 44px no-repeat, linear-gradient(#1868ce, #0e60cb 12%, #2c84f1 80%, #1c6fdc); color: #ffffff; font: 700 1.15rem var(--font-display); text-shadow: 1px 1px 1px #0f1089 !important; border-bottom: 2px solid #e7781b; border-radius: 4px 4px 0 0; } :root[data-theme="xp"] .tools-list::after { content: ''; flex: none; min-height: 28px; margin-top: 4px; background: linear-gradient(#4282d6, #3b77cc 10%, #2a5fc0 90%, #1d4fb4); } :root[data-theme="xp"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #000000; padding: 5px 16px; margin: 0 4px; } :root[data-theme="xp"] .tools-list :is(a, button) b { font-family: var(--font-body); font-weight: 700; font-size: .95rem; } :root[data-theme="xp"] .tools-list :is(a, button) span { color: #555555; } :root[data-theme="xp"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="xp"] .tools-list a[aria-current="page"] { background: #316ac5; color: #ffffff; outline: 0; } :root[data-theme="xp"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="xp"] .tools-list a[aria-current="page"] span { color: #dbe8ff; } :root[data-theme="xp"] .tools-sep { height: 1px; margin: 4px 10px; border: 0; background: linear-gradient(90deg, transparent, #c5c2b8 20%, #c5c2b8 80%, transparent); } :root[data-theme="xp"] .toast { background: var(--balloon-close) right 8px top 8px / 14px 14px no-repeat, var(--info) 10px 9px / 16px 16px no-repeat, #ffffe1; color: #000000; border: 1px solid #000000; border-radius: 8px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .35); font-weight: 400; padding: 9px 34px 11px 14px; } :root[data-theme="xp"] .toast::before { content: 'Cardclops'; display: block; margin: 0 0 3px 20px; font-weight: 700; } :root[data-theme="xp"] .toast::after { content: ''; position: absolute; left: 30px; bottom: -17px; width: 22px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M1 0v1L2 17 20 1V0z' fill='%23ffffe1'/%3E%3Cpath d='M1 1L2 17 20 1' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0 / 22px 18px no-repeat; } :root[data-theme="xp"] .site-footer { background: var(--face); color: #000000; border: 1px solid #b4b0a0; border-radius: 0; padding: 3px; text-align: left; } :root[data-theme="xp"] .site-footer p { max-width: none; margin: 0; padding: 3px 8px; box-shadow: inset 1px 1px #aca899, inset -1px -1px #ffffff; } :root[data-theme="xp"] .site-footer p + p { margin-top: 3px; } /* pale blue scroll bars with rounded buttons and a gripped thumb */ :root[data-theme="xp"]::-webkit-scrollbar, :root[data-theme="xp"] ::-webkit-scrollbar { width: 17px; height: 17px; } :root[data-theme="xp"]::-webkit-scrollbar-track, :root[data-theme="xp"] ::-webkit-scrollbar-track { background: linear-gradient(90deg, #f3f1ec, #fefefb); } :root[data-theme="xp"]::-webkit-scrollbar-thumb, :root[data-theme="xp"] ::-webkit-scrollbar-thumb { border: 1px solid #ffffff; border-radius: 3px; box-shadow: 0 0 0 1px #a8bbe8; } :root[data-theme="xp"]::-webkit-scrollbar-thumb:vertical, :root[data-theme="xp"] ::-webkit-scrollbar-thumb:vertical { background: var(--grip) center / 8px 8px no-repeat, linear-gradient(90deg, #c8d6fb, #bacbf3 50%, #aec2f2); } :root[data-theme="xp"]::-webkit-scrollbar-thumb:horizontal, :root[data-theme="xp"] ::-webkit-scrollbar-thumb:horizontal { background: var(--grip-across) center / 8px 8px no-repeat, linear-gradient(#c8d6fb, #bacbf3 50%, #aec2f2); } :root[data-theme="xp"]::-webkit-scrollbar-corner, :root[data-theme="xp"] ::-webkit-scrollbar-corner { background: var(--face); } :root[data-theme="xp"]::-webkit-scrollbar-button:single-button, :root[data-theme="xp"] ::-webkit-scrollbar-button:single-button { display: block; width: 17px; height: 17px; background: #f3f1ec center / 17px 17px no-repeat; } :root[data-theme="xp"]::-webkit-scrollbar-button:single-button:vertical:decrement, :root[data-theme="xp"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--scroll-up); } :root[data-theme="xp"]::-webkit-scrollbar-button:single-button:vertical:increment, :root[data-theme="xp"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--scroll-down); } :root[data-theme="xp"]::-webkit-scrollbar-button:single-button:horizontal:decrement, :root[data-theme="xp"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: var(--scroll-left); } :root[data-theme="xp"]::-webkit-scrollbar-button:single-button:horizontal:increment, :root[data-theme="xp"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: var(--scroll-right); } /* ==== Windows 8 =================================================================================== Metro, 2012: the Start screen. Deep purple with its tattoo of sweeping ribbons and circles along the bottom, panning slowly the way the Start screen did; no chrome at all, only type and flat color. The name stands at the top left in big light lettering, the totals at the right with a square account tile; the tabs are lowercase pivot headings, the open one bright and the rest dimmed. Panels are flat tiles of darker purple with lowercase light headings, each led by a small accent tile; the totals are live tiles that tilt when pressed. Buttons are outlined in white and fill white when pressed; app-bar buttons are ringed circles; text boxes are white; a message is a toast with an accent bar; the scroll bars are thin; and the busy sign is the ring of chasing dots. */ :root[data-theme="win8"] { --bg: #1b0b3a; --bg-deep: #1b0b3a; --bg-blob: #1b0b3a; --panel: #2a1a52; --panel-2: #23164a; --panel-3: #3a2770; --well: #160a30; --text: #ffffff; --muted: #cfc6e8; --faint: #8f84ad; --paper: #ffffff; --paper-ink: #000000; --cyan: #2d89ef; --mint: #00b7b5; --orange: #f0752c; --lime: #3ac43a; --yellow: #ffc40d; --pink: #ff3db8; --violet: #b45ad6; --peach: #ff6a5a; --pink-text: #ff6fcd; --pink-soft: #ff8fd8; --flat: #3a2770; --tile-uncommon: #2a2a66; --tile-rare: #3a2c4c; --tile-mythic: #45263f; --zebra: #26174c; --grid: #34226a; --grid-2: #45307f; --drop: #2b1b55; --hatch: #160a30; --tint-pink: #4a1640; --tint-magenta: #461a46; --tint-green: #1d3b20; --legend-miss: #4c3d75; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid transparent; --line-thick: 2px solid transparent; --shadow: none; --shadow-sm: none; --blob: 0; --blob-sm: 0; --pill: 0; --font-display: 'Segoe UI Light', 'Segoe UI Variable Display', 'Segoe UI', 'Selawik', system-ui, sans-serif; --font-body: 'Segoe UI', 'Segoe UI Variable Text', 'Selawik', system-ui, sans-serif; --accent: #2d89ef; /* the Start screen's tattoo: ribbons and circles that repeat every 1600 pixels, so they can pan */ --tattoo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='420' fill='none'%3E %3Cpath d='M0 300C133 240 267 360 400 300S667 240 800 300S1067 360 1200 300S1467 240 1600 300' stroke='%232a1458' stroke-width='60'/%3E %3Cpath d='M0 250C200 180 300 320 400 250S600 180 800 250S1000 320 1200 250S1400 180 1600 250' stroke='%23321a66' stroke-width='18'/%3E %3Cpath d='M0 360C100 330 300 390 400 360S700 330 800 360S1100 390 1200 360S1500 330 1600 360' stroke='%233c2178' stroke-width='6'/%3E %3Cpath d='M0 200C150 150 250 240 400 200S650 150 800 200S1050 240 1200 200S1450 150 1600 200' stroke='%232e175f' stroke-width='3'/%3E %3Cg stroke='%233a2075' stroke-width='3'%3E%3Ccircle cx='180' cy='150' r='46'/%3E%3Ccircle cx='180' cy='150' r='28'/%3E%3Ccircle cx='980' cy='120' r='64'/%3E%3Ccircle cx='980' cy='120' r='40'/%3E%3Ccircle cx='1380' cy='180' r='30'/%3E%3C/g%3E %3Cg fill='%2335206e'%3E%3Ccircle cx='560' cy='140' r='10'/%3E%3Ccircle cx='600' cy='118' r='6'/%3E%3Ccircle cx='630' cy='150' r='4'/%3E%3Ccircle cx='1180' cy='96' r='8'/%3E%3Ccircle cx='1215' cy='126' r='5'/%3E%3Ccircle cx='300' cy='96' r='5'/%3E%3C/g%3E %3Cpath d='M700 420C720 360 780 330 840 340S940 300 960 250' stroke='%233a2075' stroke-width='4'/%3E %3Cpath d='M1460 420C1480 370 1530 350 1570 352' stroke='%233a2075' stroke-width='4'/%3E%3C/svg%3E"); --account-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23ff3db8'/%3E%3Cpath d='M20 7c8 0 12.5 5.2 11.6 12.6S25.6 33.5 19.3 33.5 7.6 29 8.4 20 12 7 20 7z' fill='%23ffffff'/%3E%3Cellipse cx='20' cy='21' rx='7' ry='5.6' fill='%23ff3db8'/%3E%3Ccircle cx='20.8' cy='21.3' r='3' fill='%231b0b3a'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10.2 3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E"); } :root[data-theme="win8"] body { background: #1b0b3a; } /* the tattoo along the bottom of the Start screen, panning slowly */ :root[data-theme="win8"] body::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 420px; z-index: -1; pointer-events: none; background: var(--tattoo) 0 100% / 1600px 420px repeat-x; animation: win8-pan 120s linear infinite; } @keyframes win8-pan { to { background-position: -1600px 100%; } } :root[data-theme="win8"] * { text-shadow: none !important; } :root[data-theme="win8"] :not(img, .card-face, .thumb, .rr-img, .ms, .swatch, .ring, .ss-num, .bell) { border-radius: 0 !important; } :root[data-theme="win8"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 300; color: #ffffff; letter-spacing: 0; } :root[data-theme="win8"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } :root[data-theme="win8"] :is(.panel-head h2, .area-title, .shape-title, .stat-panel > h3) { text-transform: lowercase; font-size: 1.7rem; } :root[data-theme="win8"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .4em; vertical-align: .08em; background: var(--accent); } :root[data-theme="win8"] .dash-grid .panel:nth-child(5n+2) :is(.panel-head h2)::before { background: #00b7b5; } :root[data-theme="win8"] .dash-grid .panel:nth-child(5n+3) :is(.panel-head h2)::before { background: #f0752c; } :root[data-theme="win8"] .dash-grid .panel:nth-child(5n+4) :is(.panel-head h2)::before { background: #3ac43a; } :root[data-theme="win8"] .dash-grid .panel:nth-child(5n) :is(.panel-head h2)::before { background: #ff3db8; } :root[data-theme="win8"] ::selection { background: var(--accent); color: #ffffff; } :root[data-theme="win8"] :focus-visible { outline: 2px dotted #ffffff; outline-offset: 2px; } :root[data-theme="win8"] a { color: #7ab8ff; } /* the top of the Start screen: the name in big light type, the pivot headings, the account tile */ :root[data-theme="win8"] .topbar { background: transparent; border: 0; box-shadow: none; padding-top: 16px; padding-bottom: 10px; gap: 8px 26px; } :root[data-theme="win8"] .logo-mark { width: 40px; height: 40px; } :root[data-theme="win8"] .logo:hover :is(.logo-mark, .pupil) { transform: none; } :root[data-theme="win8"] .logo-text .l2, :root[data-theme="win8"] .logo-text .l2-card { color: #ffffff; font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; letter-spacing: -.01em; } :root[data-theme="win8"] .header-stats { align-items: center; color: #cfc6e8; font-family: var(--font-display); font-size: 1rem; } :root[data-theme="win8"] .header-stats b { color: #ffffff; font-family: var(--font-body); font-weight: 600; } :root[data-theme="win8"] .header-stats:not(:empty)::after { content: ''; width: 34px; height: 34px; flex: none; background: var(--account-tile) center / cover no-repeat; } :root[data-theme="win8"] .bell { width: 40px; height: 40px; background: transparent; border: 2px solid #ffffff; border-radius: 50%; box-shadow: none; } :root[data-theme="win8"] .bell svg { width: 20px; height: 20px; } :root[data-theme="win8"] :is(.bell, .bell.gear):hover { background: rgba(255, 255, 255, .14); transform: none; } :root[data-theme="win8"] .bell:active { background: #ffffff; } :root[data-theme="win8"] .bell[aria-current] { background: var(--accent); border-color: var(--accent); } :root[data-theme="win8"] .tabs { gap: 4px 6px; } :root[data-theme="win8"] :is(.tabs > a, .tools-btn) { background: transparent; color: #8f84ad; border: 0; box-shadow: none; filter: none; padding: 0 10px 4px; font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: 0; text-transform: lowercase; } :root[data-theme="win8"] :is(.tabs > a, .tools-btn):hover { background: transparent; color: #d8d0f0; transform: none; box-shadow: none; } :root[data-theme="win8"] :is(.tabs > a, .tools-btn):active { transform: scale(.96); } :root[data-theme="win8"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: transparent; color: #ffffff; } /* panels: flat tiles; the totals are live tiles that tilt when pressed */ :root[data-theme="win8"] :is(.panel, .dialog-card, .modal-card) { background: #2a1a52; border: 0; box-shadow: none; } :root[data-theme="win8"] .dialog-card { border-top: 6px solid var(--accent); } :root[data-theme="win8"] .modal-card { border-top: 6px solid var(--accent); } :root[data-theme="win8"] .modal-top { background: #2a1a52; border-bottom: 1px solid #3a2770; } :root[data-theme="win8"] .modal-backdrop { background: rgba(10, 4, 24, .78); } :root[data-theme="win8"] .bignum { border: 0; box-shadow: none; transition: transform .12s; } :root[data-theme="win8"] .bignum:active { transform: perspective(500px) rotateX(8deg) scale(.97); } :root[data-theme="win8"] :is(.tile, .deck-tile) { border: 0; box-shadow: none; } :root[data-theme="win8"] .tile:is(:hover, :focus-within), :root[data-theme="win8"] .deck-tile:hover { box-shadow: 0 0 0 3px #ffffff; transform: none; } :root[data-theme="win8"] .deck-tile:active { transform: perspective(700px) rotateX(5deg) scale(.97); } /* buttons: outlined in white, filled white when pressed; the default one in the accent */ :root[data-theme="win8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: transparent; color: #ffffff; border: 2px solid #ffffff; box-shadow: none; filter: none; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; } :root[data-theme="win8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: rgba(255, 255, 255, .14); color: #ffffff; transform: none; box-shadow: none; filter: none; } :root[data-theme="win8"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { background: #ffffff; color: #1b0b3a; transform: scale(.97); } :root[data-theme="win8"] .btn.go, :root[data-theme="win8"] .btn.go:hover { background: var(--accent); border-color: var(--accent); color: #000000; } :root[data-theme="win8"] :is(.btn, .icon-btn):disabled { color: #8f84ad; border-color: #6a5e8f; opacity: 1; } :root[data-theme="win8"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: #ffffff; color: #1b0b3a; outline: 0; } :root[data-theme="win8"] .seg { background: transparent; border: 2px solid #ffffff; box-shadow: none; } :root[data-theme="win8"] .seg-btn { color: #ffffff; font-weight: 600; } :root[data-theme="win8"] .seg-btn:hover { background: rgba(255, 255, 255, .14); } :root[data-theme="win8"] .seg-btn + .seg-btn { border-left: 2px solid #ffffff; } /* white text boxes, a chevron on drop-downs, a check box drawn in white */ :root[data-theme="win8"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #ffffff; color: #000000; border: 2px solid #ffffff; box-shadow: none; } :root[data-theme="win8"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 0; border-color: var(--accent); } :root[data-theme="win8"] .select { background-image: var(--chevron); background-position: right 10px center; background-size: 12px 8px; background-repeat: no-repeat; padding-right: 32px; } :root[data-theme="win8"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; background: transparent; border: 2px solid #ffffff; cursor: pointer; } :root[data-theme="win8"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, transparent; } /* the rest: flat bars, the app flyout, a toast with an accent bar, the ring of chasing dots */ :root[data-theme="win8"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: #2a1a52; color: #ffffff; border: 0; box-shadow: none; } :root[data-theme="win8"] .job-banner:is(.good, .bad) { border: 0; } :root[data-theme="win8"] .spinner { border: 0; animation: win8-dots 1.6s cubic-bezier(.55, .15, .45, .85) infinite; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='2.6' r='1.9'/%3E%3Ccircle cx='14.9' cy='3.1' r='1.8' opacity='.85'/%3E%3Ccircle cx='17.5' cy='4.5' r='1.7' opacity='.7'/%3E%3Ccircle cx='19.5' cy='6.6' r='1.6' opacity='.55'/%3E%3Ccircle cx='20.9' cy='9.2' r='1.5' opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes win8-dots { to { transform: rotate(360deg); } } :root[data-theme="win8"] .tools-list { background: #2a1a52; border: 2px solid #8f84ad; box-shadow: none; padding: 6px 0; gap: 0; } :root[data-theme="win8"] .tools-list :is(a, button) { background: transparent; border: 0; box-shadow: none; color: #ffffff; padding: 8px 18px; } :root[data-theme="win8"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; text-transform: lowercase; } :root[data-theme="win8"] .tools-list :is(a, button) span { color: #b4a9d6; } :root[data-theme="win8"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: #3a2770; color: #ffffff; outline: 0; } :root[data-theme="win8"] .tools-list a[aria-current="page"] { background: var(--accent); color: #000000; } :root[data-theme="win8"] .tools-list a[aria-current="page"] span { color: #0b1f3a; } :root[data-theme="win8"] .tools-sep { height: 0; margin: 6px 18px; border: 0; border-top: 1px solid #4c3d75; } :root[data-theme="win8"] .toast { background: var(--account-tile) 18px 50% / 36px 36px no-repeat, #2a1a52; color: #ffffff; border: 0; border-left: 8px solid var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-weight: 400; padding: 12px 22px 12px 68px; } :root[data-theme="win8"] .toast::before { content: 'Cardclops'; display: block; font-weight: 600; } :root[data-theme="win8"] .site-footer { background: #2a1a52; color: #cfc6e8; border: 0; } /* thin, square scroll bars */ :root[data-theme="win8"]::-webkit-scrollbar, :root[data-theme="win8"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="win8"]::-webkit-scrollbar-track, :root[data-theme="win8"] ::-webkit-scrollbar-track { background: #160a30; } :root[data-theme="win8"]::-webkit-scrollbar-thumb, :root[data-theme="win8"] ::-webkit-scrollbar-thumb { background: #6a5e8f; } :root[data-theme="win8"]::-webkit-scrollbar-thumb:hover, :root[data-theme="win8"] ::-webkit-scrollbar-thumb:hover { background: #a99bd0; } :root[data-theme="win8"]::-webkit-scrollbar-corner, :root[data-theme="win8"] ::-webkit-scrollbar-corner { background: #160a30; } /* ==== PlayStation 2 =============================================================================== The 2000 boot screen and menus. Black space with towers of blue light rising from a glowing floor at different heights, crystal orbs drifting up through them and the towers breathing; a dark glass bar edged in light, the logo inside a ring of light; thin, wide-spaced capital lettering that glows. Panels are dark crystal with a bright edge; a glowing cube leads each heading. The controller's four symbol colors do the work: the default button carries the blue cross that confirms, a dialog closes with the red circle that goes back, a check box ticks with the cross. */ :root[data-theme="ps2"] { --bg: #02040c; --bg-deep: rgba(4, 10, 32, .82); --bg-blob: #02040c; --panel: rgba(14, 26, 60, .78); --panel-2: rgba(10, 20, 50, .74); --panel-3: rgba(40, 70, 150, .55); --well: rgba(4, 10, 32, .72); --text: #e8f0ff; --muted: #9fb4dc; --faint: #5f78a8; --paper: #e8f0ff; --paper-ink: #02040c; --lime: #3ee6a0; --orange: #ff5a5a; --cyan: #7ab4ff; --pink: #ff8ad8; --yellow: #ffd86b; --violet: #a98bff; --mint: #5ff0d0; --peach: #ffae8a; --pink-text: #ff9fe0; --pink-soft: #ffb6e8; --flat: rgba(90, 130, 220, .25); --tile-uncommon: rgba(40, 80, 160, .35); --tile-rare: rgba(120, 100, 40, .3); --tile-mythic: rgba(140, 60, 40, .3); --zebra: rgba(60, 100, 200, .08); --grid: rgba(90, 130, 220, .18); --grid-2: rgba(90, 130, 220, .3); --drop: rgba(30, 60, 140, .3); --hatch: rgba(4, 10, 32, .6); --tint-pink: rgba(255, 90, 180, .18); --tint-magenta: rgba(200, 90, 220, .18); --tint-green: rgba(62, 230, 160, .14); --legend-miss: rgba(120, 140, 190, .35); --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(110, 160, 255, .55); --line-thick: 1px solid rgba(140, 185, 255, .75); --shadow: 0 0 18px rgba(60, 120, 255, .28), inset 0 0 24px rgba(60, 120, 255, .1); --shadow-sm: 0 0 8px rgba(60, 120, 255, .3); --blob: 8px; --blob-sm: 6px; --pill: 999px; --font-display: 'Segoe UI Light', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --lit: 0 0 10px rgba(110, 165, 255, .55); --tower: linear-gradient(to top, rgba(90, 150, 255, .34), rgba(70, 130, 255, .06) 82%, transparent); --cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1l8.5 5v10L10 21 1.5 16V6z' fill='%230a1a46'/%3E%3Cpath d='M10 1l8.5 5L10 11 1.5 6z' fill='%23bcd8ff'/%3E%3Cpath d='M1.5 6L10 11v10L1.5 16z' fill='%235a8ef0'/%3E%3Cpath d='M18.5 6L10 11v10l8.5-5z' fill='%232f5fc8'/%3E%3Cpath d='M10 1l8.5 5v10L10 21 1.5 16V6z' fill='none' stroke='%23e2eeff' stroke-width='.8'/%3E%3C/svg%3E"); --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%237ab4ff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); } :root[data-theme="ps2"] body { background: var(--tower) 5% 100% / 16px 36vh no-repeat, var(--tower) 12% 100% / 10px 56vh no-repeat, var(--tower) 21% 100% / 20px 28vh no-repeat, var(--tower) 30% 100% / 8px 46vh no-repeat, var(--tower) 38% 100% / 12px 20vh no-repeat, var(--tower) 57% 100% / 10px 24vh no-repeat, var(--tower) 64% 100% / 14px 40vh no-repeat, var(--tower) 72% 100% / 18px 62vh no-repeat, var(--tower) 81% 100% / 10px 32vh no-repeat, var(--tower) 91% 100% / 16px 50vh no-repeat, radial-gradient(ellipse 80% 22% at 50% 102%, rgba(70, 130, 255, .5), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 40%, rgba(20, 40, 120, .35), transparent 70%), #02040c; background-attachment: fixed; } /* crystal orbs drifting up through the towers, and the towers' light breathing */ :root[data-theme="ps2"] body::before { content: ''; position: fixed; inset: 0 0 -100vh; z-index: -1; pointer-events: none; background: radial-gradient(circle 7px at 14% 70%, rgba(200, 225, 255, .55), rgba(90, 150, 255, .2) 60%, transparent 100%), radial-gradient(circle 4px at 26% 40%, rgba(200, 225, 255, .5), transparent 100%), radial-gradient(circle 10px at 47% 82%, rgba(190, 220, 255, .4), rgba(90, 150, 255, .14) 60%, transparent 100%), radial-gradient(circle 5px at 62% 30%, rgba(200, 225, 255, .5), transparent 100%), radial-gradient(circle 8px at 78% 60%, rgba(200, 225, 255, .45), rgba(90, 150, 255, .16) 60%, transparent 100%), radial-gradient(circle 3px at 88% 20%, rgba(220, 235, 255, .6), transparent 100%); background-size: 100% 100vh; animation: ps2-orbs 34s linear infinite; } :root[data-theme="ps2"] body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 30vh; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(80, 140, 255, .28), transparent 70%); animation: ps2-breathe 6s ease-in-out infinite alternate; } @keyframes ps2-orbs { to { transform: translateY(-100vh); } } @keyframes ps2-breathe { from { opacity: .45; } to { opacity: 1; } } :root[data-theme="ps2"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 300; color: #f2f6ff; text-transform: uppercase; letter-spacing: .14em; text-shadow: 0 0 10px rgba(120, 170, 255, .75) !important; } :root[data-theme="ps2"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #f2f6ff; } :root[data-theme="ps2"] .dh-name h1 { text-transform: none; letter-spacing: .04em; } :root[data-theme="ps2"] ::selection { background: rgba(110, 165, 255, .5); color: #ffffff; } :root[data-theme="ps2"] :focus-visible { outline: 1px solid #b8d4ff; outline-offset: 2px; box-shadow: var(--lit); } :root[data-theme="ps2"] a { color: #9cc8ff; } /* the bar: dark glass edged in light, the logo in a ring of light */ :root[data-theme="ps2"] .topbar { background: linear-gradient(rgba(10, 22, 60, .85), rgba(2, 6, 18, .85)); border-bottom: 1px solid rgba(140, 185, 255, .7); box-shadow: 0 0 22px rgba(60, 120, 255, .4), inset 0 -1px 0 rgba(60, 120, 255, .4); } :root[data-theme="ps2"] .logo-mark { border-radius: 50%; box-shadow: 0 0 0 3px rgba(2, 4, 12, .9), 0 0 0 4px rgba(150, 195, 255, .8), 0 0 18px 4px rgba(90, 150, 255, .6); } :root[data-theme="ps2"] .logo-text .l2 { color: #f2f6ff; font-family: var(--font-display); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; text-shadow: var(--lit) !important; } :root[data-theme="ps2"] .logo-text .l2-card { color: #9cc8ff; } :root[data-theme="ps2"] .header-stats { color: #9fb4dc; letter-spacing: .04em; } :root[data-theme="ps2"] .header-stats b { color: #ffd86b; } :root[data-theme="ps2"] .bell { background: rgba(20, 40, 100, .45); border: 1px solid rgba(120, 170, 255, .6); box-shadow: var(--shadow-sm); } :root[data-theme="ps2"] :is(.bell, .bell.gear):hover { background: rgba(50, 90, 200, .55); transform: none; box-shadow: 0 0 16px rgba(110, 165, 255, .7); } /* tabs: thin capitals that glow; the open page sits in a capsule of light */ :root[data-theme="ps2"] :is(.tabs > a, .tools-btn) { background: transparent; color: #bcd0f4; border: 1px solid transparent; border-radius: 999px; box-shadow: none; filter: none; font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: .14em; } :root[data-theme="ps2"] :is(.tabs > a, .tools-btn):hover { background: rgba(50, 90, 200, .3); color: #ffffff; transform: none; border-color: rgba(140, 185, 255, .5); box-shadow: 0 0 14px rgba(110, 165, 255, .5); text-shadow: var(--lit) !important; } :root[data-theme="ps2"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(ellipse at 50% 0%, rgba(190, 220, 255, .55), rgba(60, 110, 230, .45) 70%); color: #ffffff; border-color: rgba(190, 220, 255, .9); box-shadow: 0 0 18px rgba(110, 165, 255, .9), inset 0 0 10px rgba(190, 220, 255, .5); text-shadow: 0 0 8px #ffffff !important; } /* panels: dark crystal with a bright edge; a glowing cube leads each heading */ :root[data-theme="ps2"] :is(.panel, .dialog-card, .modal-card) { background: linear-gradient(rgba(150, 195, 255, .1), transparent 30%), var(--panel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(110, 160, 255, .5); border-top-color: rgba(200, 225, 255, .85); border-radius: 8px; box-shadow: var(--shadow); } :root[data-theme="ps2"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .9em; height: 1em; margin-right: .55em; vertical-align: -.12em; background: var(--cube) center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(120, 175, 255, .9)); } /* a dialog's and a card's close button is the red circle, which goes back */ :root[data-theme="ps2"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close { background: rgba(30, 6, 16, .6); color: #ff5a5a; border: 1px solid rgba(255, 90, 90, .55); border-radius: 50%; font-size: 0; position: relative; box-shadow: 0 0 10px rgba(255, 90, 90, .5); } :root[data-theme="ps2"] :is(.dialog-card > .panel-head, .modal-top) .icon-btn.close::after { content: ''; position: absolute; inset: 9px; border: 2.5px solid #ff5a5a; border-radius: 50%; } :root[data-theme="ps2"] .modal-top { background: rgba(6, 14, 40, .9); border-bottom: 1px solid rgba(110, 160, 255, .5); } :root[data-theme="ps2"] .modal-backdrop { background: rgba(0, 2, 10, .8); } /* buttons: dark blue glass that lights up; the default one carries the blue cross that confirms */ :root[data-theme="ps2"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: rgba(20, 40, 100, .45); color: #e8f0ff; border: 1px solid rgba(120, 170, 255, .6); box-shadow: var(--shadow-sm); font-family: var(--font-body); font-weight: 400; letter-spacing: .06em; filter: none; } :root[data-theme="ps2"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: rgba(50, 90, 200, .55); color: #ffffff; transform: none; box-shadow: 0 0 16px rgba(110, 165, 255, .7); } :root[data-theme="ps2"] .btn.go { padding-left: 34px; background: var(--cross) 13px 50% / 12px 12px no-repeat, rgba(20, 50, 120, .6); border-color: #7ab4ff; box-shadow: 0 0 12px rgba(122, 180, 255, .55); } :root[data-theme="ps2"] .btn.go:hover { background: var(--cross) 13px 50% / 12px 12px no-repeat, rgba(50, 90, 200, .7); } :root[data-theme="ps2"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(rgba(150, 195, 255, .85), rgba(50, 100, 230, .85)); color: #02040c; box-shadow: 0 0 18px rgba(110, 165, 255, .9); outline: 0; } :root[data-theme="ps2"] .seg { background: rgba(4, 10, 32, .6); border: 1px solid rgba(120, 170, 255, .6); box-shadow: var(--shadow-sm); } :root[data-theme="ps2"] .seg-btn { color: #e8f0ff; letter-spacing: .06em; } :root[data-theme="ps2"] .seg-btn:hover { background: rgba(50, 90, 200, .45); } :root[data-theme="ps2"] .seg-btn + .seg-btn { border-left: 1px solid rgba(120, 170, 255, .5); } :root[data-theme="ps2"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: rgba(0, 8, 30, .7); color: #e8f0ff; border: 1px solid rgba(120, 170, 255, .5); box-shadow: inset 0 0 10px rgba(60, 120, 255, .22); } :root[data-theme="ps2"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: rgba(0, 8, 30, .7); border: 1px solid rgba(140, 185, 255, .8); border-radius: 4px; box-shadow: 0 0 6px rgba(90, 150, 255, .4); } :root[data-theme="ps2"] input[type="checkbox"]:checked { background: var(--cross) center / 11px 11px no-repeat, rgba(20, 50, 120, .8); box-shadow: 0 0 10px rgba(122, 180, 255, .8); } /* the rest: crystal tiles, a glass menu, a message between two lines of light, a turning cube */ :root[data-theme="ps2"] :is(.tile, .deck-tile) { border: 1px solid rgba(110, 160, 255, .45); border-radius: 8px; box-shadow: 0 0 14px rgba(60, 120, 255, .25); } :root[data-theme="ps2"] .deck-tile { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :root[data-theme="ps2"] .tile:is(:hover, :focus-within), :root[data-theme="ps2"] .deck-tile:hover { box-shadow: 0 0 0 1px #bcd8ff, 0 0 22px rgba(110, 165, 255, .8); transform: none; } :root[data-theme="ps2"] .bignum { border: 1px solid rgba(200, 225, 255, .55); border-radius: 8px; background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%); box-shadow: 0 0 14px rgba(90, 150, 255, .35); } :root[data-theme="ps2"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: rgba(6, 14, 40, .82); border: 1px solid rgba(110, 160, 255, .55); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :root[data-theme="ps2"] .spinner { border: 0; border-radius: 0; background: var(--cube) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(120, 175, 255, .9)); animation: ps2-turn 2.4s ease-in-out infinite; } @keyframes ps2-turn { 0% { transform: rotate(0); } 50% { transform: rotate(180deg) scale(.85); } 100% { transform: rotate(360deg); } } :root[data-theme="ps2"] .tools-list { background: rgba(4, 10, 32, .95); border: 1px solid rgba(140, 185, 255, .7); border-radius: 8px; box-shadow: 0 0 26px rgba(60, 120, 255, .45); } :root[data-theme="ps2"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 6px; color: #e8f0ff; } :root[data-theme="ps2"] .tools-list :is(a, button) b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; } :root[data-theme="ps2"] .tools-list :is(a, button) span { color: #9fb4dc; } :root[data-theme="ps2"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="ps2"] .tools-list a[aria-current="page"] { background: rgba(60, 110, 230, .45); color: #ffffff; box-shadow: var(--lit); outline: 0; } :root[data-theme="ps2"] .tools-sep { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(140, 185, 255, .7), transparent); } :root[data-theme="ps2"] .toast { background: linear-gradient(90deg, transparent, #bcd8ff, transparent) top / 100% 1px no-repeat, linear-gradient(90deg, transparent, #bcd8ff, transparent) bottom / 100% 1px no-repeat, rgba(4, 10, 32, .92); color: #f2f6ff; border: 0; border-radius: 0; box-shadow: 0 0 30px rgba(60, 120, 255, .5); font-weight: 300; letter-spacing: .08em; padding: 14px 28px; } :root[data-theme="ps2"] .site-footer { background: rgba(4, 10, 32, .8); border-color: rgba(110, 160, 255, .45); color: #9fb4dc; } /* scroll bars: a thin rail of light */ :root[data-theme="ps2"]::-webkit-scrollbar, :root[data-theme="ps2"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="ps2"]::-webkit-scrollbar-track, :root[data-theme="ps2"] ::-webkit-scrollbar-track { background: #02040c; } :root[data-theme="ps2"]::-webkit-scrollbar-thumb, :root[data-theme="ps2"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #2f5fc8, #9cc8ff, #2f5fc8); border-radius: 999px; box-shadow: 0 0 8px rgba(110, 165, 255, .8); } /* ==== Nintendo 64 ================================================================================= 1996 in charcoal plastic. A speckled dark shell with flat-shaded, low-polygon gems in the four colors drifting past, the way 3D looked then; a top bar molded with grip ridges and a four-color stripe beneath; tabs that are game cartridges, ridged at the top with a label below, the open one labeled in its color. Panels are chunky molded plastic with the four-color stripe under each heading and the yellow C-button cluster leading it; buttons are the controller's: gray, the blue A for the default, the red Start for danger, the round yellow C-buttons for icons. Heavy italic type throughout. */ :root[data-theme="n64"] { --bg: #1c1c22; --bg-deep: #2a2a31; --bg-blob: #1c1c22; --panel: #2c2c33; --panel-2: #26262c; --panel-3: #3a3a44; --well: #222228; --text: #f2f2f2; --muted: #c4c4cc; --faint: #8a8a96; --paper: #f2f2f2; --paper-ink: #111114; --pink: #ff4d4d; --lime: #33d65a; --cyan: #5b8cff; --yellow: #ffd21a; --violet: #b07bff; --orange: #ff8a2a; --mint: #3fe0c0; --peach: #ffae8a; --pink-text: #ff7070; --pink-soft: #ff9090; --flat: #3a3a44; --tile-uncommon: #2a3044; --tile-rare: #3a3424; --tile-mythic: #402a24; --zebra: #303037; --grid: #38383f; --grid-2: #46464f; --drop: #2f2f36; --hatch: #1a1a1f; --tint-pink: #4a2226; --tint-magenta: #45243f; --tint-green: #203d26; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 3px solid #0d0d10; --line-thick: 4px solid #0d0d10; --shadow: 0 7px 0 #0d0d10; --shadow-sm: 0 4px 0 #0d0d10; --blob: 20px; --blob-sm: 14px; --pill: 999px; --font-display: 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', Impact, sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --red: #ff4d4d; --green: #33d65a; --blue: #5b8cff; --gold: #ffd21a; --stripe: linear-gradient(90deg, var(--red) 0 25%, var(--green) 25% 50%, var(--blue) 50% 75%, var(--gold) 75%); --plastic: linear-gradient(#4a4a54, #34343c); --molded: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .35); --c-buttons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%23ffd21a' stroke='%236b5400' stroke-width='1'%3E%3Ccircle cx='11' cy='4.4' r='3.7'/%3E%3Ccircle cx='17.6' cy='11' r='3.7'/%3E%3Ccircle cx='11' cy='17.6' r='3.7'/%3E%3Ccircle cx='4.4' cy='11' r='3.7'/%3E%3C/g%3E%3Cg fill='%236b5400'%3E%3Cpath d='M11 2.6l1.7 2.6h-3.4z'/%3E%3Cpath d='M19.4 11l-2.6 1.7v-3.4z'/%3E%3Cpath d='M11 19.4l-1.7-2.6h3.4z'/%3E%3Cpath d='M2.6 11l2.6-1.7v3.4z'/%3E%3C/g%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.7L10.2 3' fill='none' stroke='%231c1c22' stroke-width='2.4'/%3E%3C/svg%3E"); } :root[data-theme="n64"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%231c1c22'/%3E%3Crect width='1' height='1' fill='%2326262d'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%2316161b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%2324242a'/%3E%3C/svg%3E") 0 0 / 8px 8px; } /* flat-shaded gems in the four colors, drifting slowly past */ :root[data-theme="n64"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E %3Cg transform='translate(120 140)'%3E%3Cpath d='M0-34L-26 0 4-4z' fill='%23ff6a6a'/%3E%3Cpath d='M0-34L28 0 4-4z' fill='%23d63030'/%3E%3Cpath d='M-26 0L0 34 4-4z' fill='%23a82020'/%3E%3Cpath d='M28 0L0 34 4-4z' fill='%237a1414'/%3E%3C/g%3E %3Cg transform='translate(560 90) rotate(20)'%3E%3Cpath d='M0-26L-20 0 3-3z' fill='%235bea7a'/%3E%3Cpath d='M0-26L22 0 3-3z' fill='%2326b04a'/%3E%3Cpath d='M-20 0L0 26 3-3z' fill='%231a8a38'/%3E%3Cpath d='M22 0L0 26 3-3z' fill='%23126428'/%3E%3C/g%3E %3Cg transform='translate(380 470) rotate(-15)'%3E%3Cpath d='M0-40L-30 0 5-5z' fill='%2386a8ff'/%3E%3Cpath d='M0-40L32 0 5-5z' fill='%234a78f0'/%3E%3Cpath d='M-30 0L0 40 5-5z' fill='%233458c8'/%3E%3Cpath d='M32 0L0 40 5-5z' fill='%23223c94'/%3E%3C/g%3E %3Cg transform='translate(780 520) rotate(35)'%3E%3Cpath d='M0-30L-22 0 4-4z' fill='%23ffe46a'/%3E%3Cpath d='M0-30L24 0 4-4z' fill='%23e0b400'/%3E%3Cpath d='M-22 0L0 30 4-4z' fill='%23b08c00'/%3E%3Cpath d='M24 0L0 30 4-4z' fill='%237a6200'/%3E%3C/g%3E %3Cg transform='translate(820 250) rotate(-30)'%3E%3Cpath d='M0-18L-14 0 2-2z' fill='%23ff6a6a'/%3E%3Cpath d='M0-18L15 0 2-2z' fill='%23d63030'/%3E%3Cpath d='M-14 0L0 18 2-2z' fill='%23a82020'/%3E%3Cpath d='M15 0L0 18 2-2z' fill='%237a1414'/%3E%3C/g%3E %3Cg transform='translate(200 600) rotate(10)'%3E%3Cpath d='M0-22L-17 0 3-3z' fill='%2386a8ff'/%3E%3Cpath d='M0-22L18 0 3-3z' fill='%234a78f0'/%3E%3Cpath d='M-17 0L0 22 3-3z' fill='%233458c8'/%3E%3Cpath d='M18 0L0 22 3-3z' fill='%23223c94'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 900px 700px; animation: n64-drift 90s linear infinite; } @keyframes n64-drift { to { background-position: 900px -700px; } } :root[data-theme="n64"] * { text-shadow: none !important; } :root[data-theme="n64"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: -.01em; color: #ffffff; } :root[data-theme="n64"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } :root[data-theme="n64"] :is(.panel, .dialog-card) > .panel-head { padding-bottom: 12px; background: var(--stripe) bottom / 100% 5px no-repeat; } :root[data-theme="n64"] .stat-panel > h3 { padding-bottom: 9px; background: var(--stripe) bottom / 100% 4px no-repeat; } :root[data-theme="n64"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.14em; background: var(--c-buttons) center / contain no-repeat; } :root[data-theme="n64"] ::selection { background: var(--gold); color: #111114; } :root[data-theme="n64"] :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } :root[data-theme="n64"] a { color: #8fb0ff; } /* the top bar: molded with grip ridges, the four-color stripe beneath */ :root[data-theme="n64"] .topbar { background: repeating-linear-gradient(#3a3a43 0 2px, #2a2a31 2px 6px) top / 100% 12px no-repeat, linear-gradient(#303038, #232329); border-bottom: 6px solid; border-image: var(--stripe) 1; box-shadow: none; padding-top: 16px; } :root[data-theme="n64"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); font-style: italic; font-weight: 900; } :root[data-theme="n64"] .logo-text .l2-card { color: var(--red); } :root[data-theme="n64"] .header-stats b { color: var(--gold); } :root[data-theme="n64"] .bell { background: radial-gradient(circle at 35% 30%, #fff3a0, #ffd21a 55%, #c9a200); border: 3px solid #0d0d10; border-radius: 50%; box-shadow: 0 4px 0 #0d0d10; } :root[data-theme="n64"] :is(.bell, .bell.gear):hover { transform: translateY(-2px); box-shadow: 0 6px 0 #0d0d10; } :root[data-theme="n64"] .bell:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d0d10; } /* tabs: game cartridges, ridged at the top, labeled below; the open one's label is in its color */ :root[data-theme="n64"] :is(.tabs > a, .tools-btn) { --label: #d8d8de; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 72%, calc(100% - 4px) 72%, calc(100% - 4px) 100%, 4px 100%, 4px 72%, 0 72%, 0 7px); background: repeating-linear-gradient(#5c5c66 0 2px, #3e3e47 2px 4px) 0 2px / 100% 8px no-repeat, linear-gradient(var(--label), var(--label)) 8px 12px / calc(100% - 16px) calc(100% - 16px) no-repeat, var(--plastic); color: #1c1c22; border: 0; border-radius: 0; box-shadow: none; filter: none; padding: 13px 18px 7px; font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: 0; } :root[data-theme="n64"] :is(.tabs > a, .tools-btn):hover { color: #1c1c22; transform: translateY(-2px); box-shadow: none; --label: #f2f2f6; } :root[data-theme="n64"] :is(.tabs > a, .tools-btn):active { transform: translateY(2px); } :root[data-theme="n64"] :is(.tabs > a, .tools-btn):focus-visible { outline-offset: -4px; outline-color: #111114; } :root[data-theme="n64"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { --label: var(--gold); color: #111114; } :root[data-theme="n64"] .tabs > a[aria-current="page"]:nth-child(4n+1) { --label: var(--red); } :root[data-theme="n64"] .tabs > a[aria-current="page"]:nth-child(4n+2) { --label: var(--green); } :root[data-theme="n64"] .tabs > a[aria-current="page"]:nth-child(4n+3) { --label: var(--blue); } /* panels: chunky molded plastic */ :root[data-theme="n64"] :is(.panel, .dialog-card, .modal-card) { background: linear-gradient(#33333b, #2a2a31); border: 3px solid #0d0d10; border-radius: 20px; box-shadow: var(--molded), 0 7px 0 #0d0d10; } :root[data-theme="n64"] .modal-top { background: #2e2e35; border-bottom: 3px solid #0d0d10; } :root[data-theme="n64"] .modal-backdrop { background: rgba(10, 10, 14, .82); } /* buttons: the controller's; gray, the blue A for go, the red Start for danger, round yellow C-buttons */ :root[data-theme="n64"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--plastic); color: #ffffff; border: 3px solid #0d0d10; box-shadow: var(--molded), 0 4px 0 #0d0d10; filter: none; font-family: var(--font-body); font-style: italic; font-weight: 800; letter-spacing: 0; } :root[data-theme="n64"] :is(.btn, .icon-btn, .page-chip, .shape-tile):hover { color: #ffffff; transform: translateY(-2px); box-shadow: var(--molded), 0 6px 0 #0d0d10; filter: brightness(1.1); } :root[data-theme="n64"] :is(.btn, .icon-btn, .page-chip, .shape-tile):active { transform: translateY(3px); box-shadow: var(--molded), 0 1px 0 #0d0d10; } :root[data-theme="n64"] .btn.go, :root[data-theme="n64"] .btn.go:hover { background: radial-gradient(ellipse at 40% 25%, #6e92f4, #2f5fe0 60%, #2448b8); color: #ffffff; } :root[data-theme="n64"] .btn.danger, :root[data-theme="n64"] .btn.danger:hover { background: radial-gradient(ellipse at 40% 25%, #ff8a8a, #e02828 60%, #b01818); color: #ffffff; } :root[data-theme="n64"] .icon-btn { background: radial-gradient(circle at 35% 30%, #fff3a0, #ffd21a 55%, #c9a200); color: #1c1c22; border-radius: 50%; } :root[data-theme="n64"] .icon-btn.close { background: radial-gradient(circle at 35% 30%, #ff9a9a, #e02828 60%, #b01818); color: #ffffff; } :root[data-theme="n64"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: radial-gradient(ellipse at 40% 25%, #fff3a0, #ffd21a 60%, #d9ae00); color: #111114; outline: 0; } :root[data-theme="n64"] .seg { background: #1c1c22; border: 3px solid #0d0d10; box-shadow: 0 4px 0 #0d0d10; } :root[data-theme="n64"] .seg-btn { color: #ffffff; font-style: italic; font-weight: 800; } :root[data-theme="n64"] .seg-btn:hover { background: #3a3a44; } :root[data-theme="n64"] .seg-btn + .seg-btn { border-left: 3px solid #0d0d10; } :root[data-theme="n64"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #17171b; color: #f2f2f2; border: 3px solid #0d0d10; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45); } :root[data-theme="n64"] input[type="checkbox"] { appearance: none; width: 20px; height: 20px; flex: none; cursor: pointer; background: #17171b; border: 3px solid #0d0d10; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5); } :root[data-theme="n64"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, var(--gold); } /* the rest: chunky tiles, a plastic menu, a message under the stripe, the C-buttons turning */ :root[data-theme="n64"] :is(.tile, .deck-tile) { border: 3px solid #0d0d10; border-radius: 14px; box-shadow: 0 6px 0 #0d0d10; } :root[data-theme="n64"] .tile:is(:hover, :focus-within), :root[data-theme="n64"] .deck-tile:hover { box-shadow: 0 0 0 3px var(--gold), 0 6px 0 #0d0d10; } :root[data-theme="n64"] .bignum { border: 3px solid #0d0d10; border-radius: 14px; background-image: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 5px 0 #0d0d10; } :root[data-theme="n64"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: linear-gradient(#33333b, #2a2a31); border: 3px solid #0d0d10; box-shadow: var(--molded), 0 4px 0 #0d0d10; } :root[data-theme="n64"] .spinner { border: 0; border-radius: 0; background: var(--c-buttons) center / contain no-repeat; animation: n64-turn 1.2s steps(4) infinite; } @keyframes n64-turn { to { transform: rotate(360deg); } } :root[data-theme="n64"] .tools-list { background: linear-gradient(#33333b, #26262c); border: 3px solid #0d0d10; border-radius: 16px; box-shadow: var(--molded), 0 6px 0 #0d0d10; } :root[data-theme="n64"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 10px; box-shadow: none; color: #ffffff; } :root[data-theme="n64"] .tools-list :is(a, button) b { font-family: var(--font-display); font-style: italic; } :root[data-theme="n64"] .tools-list :is(a, button) span { color: #c4c4cc; } :root[data-theme="n64"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="n64"] .tools-list a[aria-current="page"] { background: var(--gold); color: #111114; outline: 0; } :root[data-theme="n64"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="n64"] .tools-list a[aria-current="page"] span { color: #3a2e00; } :root[data-theme="n64"] .tools-sep { height: 4px; border: 0; background: var(--stripe); opacity: .8; } :root[data-theme="n64"] .toast { background: var(--stripe) top / 100% 6px no-repeat, linear-gradient(#3a3a43, #2a2a31); color: #ffffff; border: 3px solid #0d0d10; border-radius: 14px; box-shadow: 0 6px 0 #0d0d10; font-style: italic; font-weight: 800; padding-top: 14px; } :root[data-theme="n64"] .site-footer { background: linear-gradient(#2e2e35, #26262c); border: 3px solid #0d0d10; border-radius: 14px; } /* scroll bars: chunky gray plastic */ :root[data-theme="n64"]::-webkit-scrollbar, :root[data-theme="n64"] ::-webkit-scrollbar { width: 14px; height: 14px; } :root[data-theme="n64"]::-webkit-scrollbar-track, :root[data-theme="n64"] ::-webkit-scrollbar-track { background: #121216; } :root[data-theme="n64"]::-webkit-scrollbar-thumb, :root[data-theme="n64"] ::-webkit-scrollbar-thumb { background: var(--plastic); border: 3px solid #0d0d10; border-radius: 999px; } :root[data-theme="n64"]::-webkit-scrollbar-thumb:hover, :root[data-theme="n64"] ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ==== PlayStation 3 =============================================================================== The XMB, 2006. A dark gradient with the white wave rolling slowly across it, two ribbons of it at different speeds, a few sparks drifting in the light; the tabs are the XMB's row of categories, the open one larger and lit, the rest dimmed, with the clock's corner for the totals. Panels are piano black with a gloss across the top; under each heading a line fades out to the right and a white spark leads it. Glossy black buttons glow white; a message arrives as a trophy notice; the busy sign is the ring of the PS3's spinning dots. */ :root[data-theme="ps3"] { --bg: #0d0f14; --bg-deep: rgba(10, 12, 16, .85); --bg-blob: #0d0f14; --panel: #121418; --panel-2: #0f1115; --panel-3: #22262e; --well: #0a0b0e; --text: #f0f2f5; --muted: #a9afba; --faint: #6b717c; --paper: #f0f2f5; --paper-ink: #0a0b0e; --lime: #4fd9a0; --orange: #ff6f6f; --cyan: #6fb0ff; --pink: #ff8ad8; --yellow: #ffd36b; --violet: #a98bff; --mint: #5fe8d0; --peach: #ffae8a; --pink-text: #ff9fe0; --pink-soft: #ffb6e8; --flat: #2a2e36; --zebra: #16181d; --grid: #23262e; --grid-2: #30343e; --drop: #191c22; --hatch: #0a0b0e; --tile-uncommon: #232a3a; --tile-rare: #33301f; --tile-mythic: #3a2620; --tint-pink: #45202e; --tint-magenta: #40213d; --tint-green: #1d3a24; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(255, 255, 255, .14); --line-thick: 1px solid rgba(255, 255, 255, .22); --shadow: 0 8px 24px rgba(0, 0, 0, .55); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .5); --blob: 6px; --blob-sm: 4px; --pill: 999px; --font-display: 'Segoe UI Light', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --gloss: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 45%, transparent 50%); /* the wave: one tile 1600 wide that meets itself at both ends, so it can roll forever */ --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='400' fill='none' stroke='%23ffffff'%3E %3Cpath d='M0 200C266 120 533 280 800 200C1066 120 1333 280 1600 200' stroke-opacity='.3' stroke-width='2.5'/%3E %3Cpath d='M0 214C266 140 533 290 800 214C1066 140 1333 290 1600 214' stroke-opacity='.14' stroke-width='10'/%3E %3Cpath d='M0 190C266 126 533 262 800 190C1066 126 1333 262 1600 190' stroke-opacity='.08' stroke-width='34'/%3E %3Cpath d='M0 230C266 160 533 300 800 230C1066 160 1333 300 1600 230' stroke-opacity='.05' stroke-width='70'/%3E%3C/svg%3E"); --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='400' fill='none' stroke='%23ffffff'%3E %3Cpath d='M0 220C266 290 533 150 800 220C1066 290 1333 150 1600 220' stroke-opacity='.2' stroke-width='1.5'/%3E %3Cpath d='M0 236C266 300 533 170 800 236C1066 300 1333 170 1600 236' stroke-opacity='.07' stroke-width='22'/%3E %3Cg fill='%23ffffff' stroke='none'%3E%3Ccircle cx='240' cy='170' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='620' cy='250' r='1.2' fill-opacity='.6'/%3E%3Ccircle cx='980' cy='160' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='1340' cy='240' r='1.3' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 1.5L11.3 8.7 18.5 10 11.3 11.3 10 18.5 8.7 11.3 1.5 10 8.7 8.7z' fill='%23fff'/%3E%3C/svg%3E"); --trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f3c18a'/%3E%3Cstop offset='.5' stop-color='%23c07a3a'/%3E%3Cstop offset='1' stop-color='%237a4318'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 4h14v6c0 5-3 8.5-7 9-4-.5-7-4-7-9z' fill='url(%23b)'/%3E%3Cpath d='M9 6H5c0 4 2 6.5 5 7M23 6h4c0 4-2 6.5-5 7' fill='none' stroke='%23c07a3a' stroke-width='1.8'/%3E%3Cpath d='M14 19h4v4h-4z' fill='%23a8642a'/%3E%3Cpath d='M10 23h12v3H10z' fill='url(%23b)'/%3E%3Cpath d='M8 26h16v3H8z' fill='%237a4318'/%3E%3C/svg%3E"); } :root[data-theme="ps3"] body { background: radial-gradient(ellipse 90% 60% at 50% 30%, #1f2738, transparent 70%), linear-gradient(#1a2030, #0b0d12 60%, #050608); background-attachment: fixed; } /* the wave rolling across the screen, two ribbons at two speeds */ :root[data-theme="ps3"] body::before, :root[data-theme="ps3"] body::after { content: ''; position: fixed; left: 0; right: 0; top: 18vh; height: 400px; z-index: -1; pointer-events: none; } :root[data-theme="ps3"] body::before { background: var(--wave) 0 0 / 1600px 400px repeat-x; animation: ps3-wave 70s linear infinite; } :root[data-theme="ps3"] body::after { background: var(--wave-2) 0 0 / 1600px 400px repeat-x; animation: ps3-wave 110s linear infinite reverse; } @keyframes ps3-wave { to { background-position: -1600px 0; } } :root[data-theme="ps3"] * { text-shadow: none !important; } :root[data-theme="ps3"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 300; color: #ffffff; letter-spacing: .02em; } :root[data-theme="ps3"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } :root[data-theme="ps3"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { padding-bottom: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15) 55%, transparent) bottom left / 100% 1px no-repeat; } :root[data-theme="ps3"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .95em; height: .95em; margin-right: .45em; vertical-align: -.1em; background: var(--spark) center / contain no-repeat; } :root[data-theme="ps3"] ::selection { background: rgba(255, 255, 255, .3); color: #ffffff; } :root[data-theme="ps3"] :focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; } :root[data-theme="ps3"] a { color: #a9c8ff; } /* the bar: the XMB's category row; the open category is larger and lit, the others dimmed */ :root[data-theme="ps3"] .topbar { background: linear-gradient(rgba(8, 9, 12, .82), rgba(8, 9, 12, .55)); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: none; } :root[data-theme="ps3"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); font-weight: 300; letter-spacing: .02em; } :root[data-theme="ps3"] .logo-text .l2-card { color: #a9c8ff; } :root[data-theme="ps3"] .header-stats { color: #c9ced8; font-family: var(--font-display); } :root[data-theme="ps3"] .header-stats b { color: #ffffff; font-family: var(--font-body); font-weight: 600; } :root[data-theme="ps3"] .tabs { align-items: center; } :root[data-theme="ps3"] :is(.tabs > a, .tools-btn) { background: transparent; color: rgba(255, 255, 255, .55); border: 0; box-shadow: none; filter: none; font-family: var(--font-display); font-weight: 300; letter-spacing: .02em; transition: font-size .2s, color .2s; } :root[data-theme="ps3"] :is(.tabs > a, .tools-btn):hover { background: transparent; color: rgba(255, 255, 255, .9); transform: none; box-shadow: none; } :root[data-theme="ps3"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { color: #ffffff; font-size: 1.3rem; text-shadow: 0 0 12px rgba(255, 255, 255, .7) !important; } :root[data-theme="ps3"] .bell { background: var(--gloss), #1a1d23; border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; } :root[data-theme="ps3"] :is(.bell, .bell.gear):hover { background: var(--gloss), #262a32; transform: none; box-shadow: 0 0 14px rgba(255, 255, 255, .25); } /* panels: piano black with a gloss across the top */ :root[data-theme="ps3"] :is(.panel, .dialog-card, .modal-card) { background: var(--gloss), linear-gradient(#16191e, #0e1013); border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; box-shadow: var(--shadow); } :root[data-theme="ps3"] .modal-top { background: linear-gradient(#1a1d23, #121418); border-bottom: 1px solid rgba(255, 255, 255, .12); } :root[data-theme="ps3"] .modal-backdrop { background: rgba(4, 5, 8, .8); } /* glossy black buttons that glow white */ :root[data-theme="ps3"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--gloss), #1a1d23; color: #e8eaee; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; filter: none; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; } :root[data-theme="ps3"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: var(--gloss), #262a32; color: #ffffff; transform: none; box-shadow: 0 0 14px rgba(255, 255, 255, .2); } :root[data-theme="ps3"] .btn.go, :root[data-theme="ps3"] .btn.go:hover { background: var(--gloss), #2c3240; color: #ffffff; border-color: rgba(255, 255, 255, .5); } :root[data-theme="ps3"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: var(--gloss), #3a404e; color: #ffffff; border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 16px rgba(255, 255, 255, .3); outline: 0; } :root[data-theme="ps3"] .seg { background: #0f1115; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; } :root[data-theme="ps3"] .seg-btn { color: #e8eaee; } :root[data-theme="ps3"] .seg-btn:hover { background: #22262e; } :root[data-theme="ps3"] .seg-btn + .seg-btn { border-left: 1px solid rgba(255, 255, 255, .16); } :root[data-theme="ps3"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #0a0b0e; color: #f0f2f5; border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); } :root[data-theme="ps3"] input[type="checkbox"] { accent-color: #ffffff; } /* the rest: glossy tiles, the XMB list, a trophy notice, the ring of spinning dots */ :root[data-theme="ps3"] :is(.tile, .deck-tile) { border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; box-shadow: var(--shadow-sm); } :root[data-theme="ps3"] .tile:is(:hover, :focus-within), :root[data-theme="ps3"] .deck-tile:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 20px rgba(255, 255, 255, .25); transform: none; } :root[data-theme="ps3"] .bignum { border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background-image: var(--gloss); box-shadow: var(--shadow-sm); } :root[data-theme="ps3"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--gloss), #121418; border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--shadow-sm); } :root[data-theme="ps3"] .spinner { border: 0; animation: ps3-dots 1.1s steps(8) infinite; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='3' r='2.2'/%3E%3Ccircle cx='18.4' cy='5.6' r='2.1' opacity='.85'/%3E%3Ccircle cx='21' cy='12' r='2' opacity='.7'/%3E%3Ccircle cx='18.4' cy='18.4' r='1.9' opacity='.56'/%3E%3Ccircle cx='12' cy='21' r='1.8' opacity='.44'/%3E%3Ccircle cx='5.6' cy='18.4' r='1.7' opacity='.34'/%3E%3Ccircle cx='3' cy='12' r='1.6' opacity='.26'/%3E%3Ccircle cx='5.6' cy='5.6' r='1.5' opacity='.2'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes ps3-dots { to { transform: rotate(360deg); } } :root[data-theme="ps3"] .tools-list { background: linear-gradient(rgba(26, 30, 38, .97), rgba(12, 14, 18, .97)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; box-shadow: var(--shadow); } :root[data-theme="ps3"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 4px; color: #e8eaee; } :root[data-theme="ps3"] .tools-list :is(a, button) b { font-family: var(--font-display); font-size: 1.08rem; } :root[data-theme="ps3"] .tools-list :is(a, button) span { color: #a9afba; } :root[data-theme="ps3"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="ps3"] .tools-list a[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02)); color: #ffffff; box-shadow: inset 2px 0 0 #ffffff; outline: 0; } :root[data-theme="ps3"] .tools-sep { height: 1px; border: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent); } :root[data-theme="ps3"] .toast { background: var(--trophy) 14px 50% / 28px 28px no-repeat, var(--gloss), rgba(20, 23, 29, .95); color: #ffffff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; box-shadow: var(--shadow); font-weight: 400; padding: 10px 20px 10px 54px; } :root[data-theme="ps3"] .site-footer { background: var(--gloss), #121418; border-color: rgba(255, 255, 255, .14); } /* scroll bars: a thin white rail */ :root[data-theme="ps3"]::-webkit-scrollbar, :root[data-theme="ps3"] ::-webkit-scrollbar { width: 9px; height: 9px; } :root[data-theme="ps3"]::-webkit-scrollbar-track, :root[data-theme="ps3"] ::-webkit-scrollbar-track { background: #08090c; } :root[data-theme="ps3"]::-webkit-scrollbar-thumb, :root[data-theme="ps3"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 999px; } :root[data-theme="ps3"]::-webkit-scrollbar-thumb:hover, :root[data-theme="ps3"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .55); } /* ==== PlayStation 4 =============================================================================== The 2013 home screen. Deep PlayStation blue with soft bokeh drifting up through it and faint flowing lines of light; the tabs are the home screen's row of content tiles, the open one grown and ringed in white with a blue glow; the totals sit with the clock at the top right. Panels are translucent blue, a blue rounded square leading each heading; every control that has the focus or the pointer gets the PS4's white focus ring; the default button is PlayStation blue; a message is a notification card with its icon tile; the busy sign is a white arc. */ :root[data-theme="ps4"] { --bg: #04163d; --bg-deep: rgba(3, 14, 40, .8); --bg-blob: #04163d; --panel: rgba(11, 31, 74, .86); --panel-2: rgba(8, 24, 60, .85); --panel-3: rgba(30, 64, 140, .8); --well: rgba(3, 14, 40, .85); --text: #f2f6ff; --muted: #b3c3e6; --faint: #7088b8; --paper: #f2f6ff; --paper-ink: #031030; --lime: #3ad6a0; --orange: #ff6b6b; --cyan: #5fa8ff; --pink: #ff7fd0; --yellow: #ffcf5a; --violet: #a990ff; --mint: #4fe3d0; --peach: #ffa98a; --pink-text: #ff99da; --pink-soft: #ffb3e3; --flat: rgba(90, 130, 220, .3); --zebra: rgba(255, 255, 255, .03); --grid: rgba(120, 160, 230, .18); --grid-2: rgba(120, 160, 230, .3); --drop: rgba(30, 64, 140, .4); --hatch: rgba(3, 14, 40, .7); --tile-uncommon: #232a3a; --tile-rare: #33301f; --tile-mythic: #3a2620; --tint-pink: #45202e; --tint-magenta: #40213d; --tint-green: #1d3a24; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(140, 180, 255, .25); --line-thick: 2px solid rgba(160, 195, 255, .35); --shadow: 0 10px 30px rgba(0, 6, 30, .5); --shadow-sm: 0 3px 10px rgba(0, 6, 30, .45); --blob: 8px; --blob-sm: 6px; --pill: 999px; --font-display: 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --ps-blue: #0070d1; --ring: 0 0 0 3px #ffffff, 0 0 22px rgba(120, 180, 255, .75); --icon-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232a8cf0'/%3E%3Cstop offset='1' stop-color='%230058b8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='7' fill='url(%23t)'/%3E%3Cpath d='M20 8c7.5 0 11.5 4.8 10.8 11.6S25.2 32.5 19.4 32.5 8.6 28.3 9.4 19.8 12.6 8 20 8z' fill='%23ffffff'/%3E%3Cellipse cx='20' cy='20.6' rx='6.4' ry='5.2' fill='%230058b8'/%3E%3Ccircle cx='20.7' cy='20.9' r='2.7' fill='%23ffffff'/%3E%3C/svg%3E"); } :root[data-theme="ps4"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none' fill='none' stroke='%239cc4ff'%3E %3Cpath d='M0 620C300 560 520 700 820 640S1360 520 1600 590' stroke-opacity='.16' stroke-width='2'/%3E %3Cpath d='M0 660C320 600 560 740 860 680S1380 560 1600 630' stroke-opacity='.1' stroke-width='1.5'/%3E %3Cpath d='M0 700C280 650 600 780 900 720S1400 610 1600 680' stroke-opacity='.07' stroke-width='12'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(ellipse 90% 70% at 50% 0%, #0a46b8, transparent 70%), linear-gradient(#063088, #04163d 55%, #020b22); background-attachment: fixed; } /* bokeh drifting slowly up */ :root[data-theme="ps4"] body::before { content: ''; position: fixed; inset: 0 0 -100vh; z-index: -1; pointer-events: none; background: radial-gradient(circle 46px at 12% 22%, rgba(140, 195, 255, .16), transparent 72%), radial-gradient(circle 80px at 82% 30%, rgba(140, 195, 255, .1), transparent 72%), radial-gradient(circle 28px at 64% 70%, rgba(170, 210, 255, .18), transparent 72%), radial-gradient(circle 110px at 30% 84%, rgba(100, 160, 255, .08), transparent 72%), radial-gradient(circle 18px at 46% 46%, rgba(200, 225, 255, .2), transparent 72%), radial-gradient(circle 36px at 92% 76%, rgba(150, 200, 255, .14), transparent 72%); background-size: 100% 100vh; animation: ps4-bokeh 60s linear infinite; } @keyframes ps4-bokeh { to { transform: translateY(-100vh); } } :root[data-theme="ps4"] * { text-shadow: none !important; } :root[data-theme="ps4"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 300; color: #ffffff; letter-spacing: .01em; } :root[data-theme="ps4"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } :root[data-theme="ps4"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -.02em; background: linear-gradient(#2a8cf0, #0058b8); border-radius: 4px; box-shadow: 0 0 10px rgba(60, 150, 255, .6); } :root[data-theme="ps4"] ::selection { background: var(--ps-blue); color: #ffffff; } :root[data-theme="ps4"] :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } :root[data-theme="ps4"] a { color: #8cc0ff; } /* the bar: the home screen's tile row; the open tile is grown and ringed in white */ :root[data-theme="ps4"] .topbar { background: linear-gradient(rgba(2, 12, 36, .78), rgba(2, 12, 36, .45)); border-bottom: 0; box-shadow: none; padding-top: 12px; padding-bottom: 14px; } :root[data-theme="ps4"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); font-weight: 300; } :root[data-theme="ps4"] .logo-text .l2-card { color: #5fa8ff; } :root[data-theme="ps4"] .header-stats { color: #c8d6f2; font-family: var(--font-display); font-size: 1rem; } :root[data-theme="ps4"] .header-stats b { color: #ffffff; font-family: var(--font-body); font-weight: 600; } :root[data-theme="ps4"] .bell { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; } :root[data-theme="ps4"] :is(.bell, .bell.gear):hover { background: rgba(255, 255, 255, .18); transform: none; box-shadow: var(--ring); } :root[data-theme="ps4"] .tabs { gap: 8px; align-items: center; } :root[data-theme="ps4"] :is(.tabs > a, .tools-btn) { background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); color: #e6eeff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 6, 30, .4); filter: none; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; padding: 10px 16px; transition: transform .18s ease-out, box-shadow .18s; } :root[data-theme="ps4"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); color: #ffffff; transform: scale(1.04); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 6px 16px rgba(0, 6, 30, .45); } :root[data-theme="ps4"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(#1a86ee, var(--ps-blue)); color: #ffffff; border-color: transparent; transform: scale(1.1); box-shadow: var(--ring); z-index: 1; } /* panels: translucent blue */ :root[data-theme="ps4"] :is(.panel, .dialog-card, .modal-card) { background: linear-gradient(rgba(255, 255, 255, .07), transparent 40%), var(--panel); border: 1px solid rgba(140, 180, 255, .22); border-radius: 8px; box-shadow: var(--shadow); } :root[data-theme="ps4"] .modal-top { background: rgba(8, 26, 66, .97); border-bottom: 1px solid rgba(140, 180, 255, .22); } :root[data-theme="ps4"] .modal-backdrop { background: rgba(1, 6, 20, .78); } /* controls: the white focus ring under the pointer; the default button is PlayStation blue */ :root[data-theme="ps4"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: rgba(255, 255, 255, .09); color: #f2f6ff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; filter: none; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; } :root[data-theme="ps4"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: rgba(255, 255, 255, .16); color: #ffffff; transform: none; box-shadow: var(--ring); } :root[data-theme="ps4"] .btn.go, :root[data-theme="ps4"] .btn.go:hover { background: linear-gradient(#1a86ee, var(--ps-blue)); color: #ffffff; border-color: transparent; } :root[data-theme="ps4"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: var(--ps-blue); color: #ffffff; border-color: transparent; box-shadow: 0 0 0 2px #ffffff; outline: 0; } :root[data-theme="ps4"] .seg { background: rgba(2, 12, 36, .6); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; } :root[data-theme="ps4"] .seg-btn { color: #f2f6ff; } :root[data-theme="ps4"] .seg-btn:hover { background: rgba(255, 255, 255, .12); } :root[data-theme="ps4"] .seg-btn + .seg-btn { border-left: 1px solid rgba(255, 255, 255, .14); } :root[data-theme="ps4"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: rgba(2, 12, 36, .72); color: #f2f6ff; border: 1px solid rgba(160, 195, 255, .3); box-shadow: none; } :root[data-theme="ps4"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 0; box-shadow: var(--ring); } :root[data-theme="ps4"] input[type="checkbox"] { accent-color: var(--ps-blue); } /* the rest: tiles that take the ring, the options menu, a notification card, a white arc */ :root[data-theme="ps4"] :is(.tile, .deck-tile) { border: 1px solid rgba(140, 180, 255, .2); border-radius: 6px; box-shadow: var(--shadow-sm); } :root[data-theme="ps4"] .tile:is(:hover, :focus-within), :root[data-theme="ps4"] .deck-tile:hover { box-shadow: var(--ring); } :root[data-theme="ps4"] .deck-tile:hover { transform: scale(1.02); } :root[data-theme="ps4"] .bignum { border: 0; border-radius: 6px; background-image: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%); box-shadow: var(--shadow-sm); } :root[data-theme="ps4"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: rgba(8, 26, 66, .9); border: 1px solid rgba(140, 180, 255, .22); box-shadow: var(--shadow-sm); } :root[data-theme="ps4"] .spinner { border: 3px solid rgba(255, 255, 255, .18); border-top-color: #ffffff; border-radius: 50%; background: none; animation: ps4-arc .9s linear infinite; } @keyframes ps4-arc { to { transform: rotate(360deg); } } :root[data-theme="ps4"] .tools-list { background: linear-gradient(rgba(14, 40, 92, .98), rgba(6, 22, 56, .98)); border: 1px solid rgba(140, 180, 255, .3); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 6, 30, .6); } :root[data-theme="ps4"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 6px; color: #f2f6ff; } :root[data-theme="ps4"] .tools-list :is(a, button) span { color: #b3c3e6; } :root[data-theme="ps4"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="ps4"] .tools-list a[aria-current="page"] { background: var(--ps-blue); color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff; outline: 0; } :root[data-theme="ps4"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="ps4"] .tools-list a[aria-current="page"] span { color: #dbe9ff; } :root[data-theme="ps4"] .tools-sep { height: 1px; border: 0; background: rgba(140, 180, 255, .25); } :root[data-theme="ps4"] .toast { background: var(--icon-tile) 12px 50% / 36px 36px no-repeat, linear-gradient(rgba(20, 52, 112, .98), rgba(8, 28, 70, .98)); color: #ffffff; border: 1px solid rgba(140, 180, 255, .3); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 6, 30, .55); font-weight: 400; padding: 12px 20px 12px 60px; } :root[data-theme="ps4"] .site-footer { background: rgba(8, 26, 66, .82); border-color: rgba(140, 180, 255, .22); } /* scroll bars: thin and translucent */ :root[data-theme="ps4"]::-webkit-scrollbar, :root[data-theme="ps4"] ::-webkit-scrollbar { width: 9px; height: 9px; } :root[data-theme="ps4"]::-webkit-scrollbar-track, :root[data-theme="ps4"] ::-webkit-scrollbar-track { background: #020b22; } :root[data-theme="ps4"]::-webkit-scrollbar-thumb, :root[data-theme="ps4"] ::-webkit-scrollbar-thumb { background: rgba(160, 200, 255, .35); border-radius: 999px; } :root[data-theme="ps4"]::-webkit-scrollbar-thumb:hover, :root[data-theme="ps4"] ::-webkit-scrollbar-thumb:hover { background: rgba(200, 225, 255, .6); } /* ==== Sega Genesis ================================================================================ 16 bits, 1989. A starfield scrolling sideways in two layers, like a shooter's, over a grid floor that runs toward the horizon, with faint scan lines over the dark; the top bar is the console's black ridged plastic with its red power light and the red-and-gold speed stripes beneath. Headings are heavy italic capitals in chrome, gold speed chevrons before them; panels are glossy black with the console's ridges curving in one corner; buttons are black and glossy, the open one red, the default one Sega blue; a message flashes up like a title screen's; the busy sign is a spinning gold ring. */ :root[data-theme="genesis"] { --bg: #050506; --bg-deep: #0a0a0c; --bg-blob: #050506; --panel: #141416; --panel-2: #101012; --panel-3: #24242a; --well: #0b0b0d; --text: #f4f4f6; --muted: #b8b8c2; --faint: #7a7a86; --paper: #f4f4f6; --paper-ink: #050506; --pink: #ff3b3b; --lime: #2fd35a; --cyan: #3b8cff; --yellow: #ffd23a; --violet: #b07bff; --orange: #ff8a2a; --mint: #3fe0c0; --peach: #ffae8a; --pink-text: #ff6060; --pink-soft: #ff8080; --flat: #2a2a30; --zebra: #18181b; --grid: #222227; --grid-2: #303037; --drop: #1a1a1e; --hatch: #0b0b0d; --tile-uncommon: #232a3a; --tile-rare: #33301f; --tile-mythic: #3a2620; --tint-pink: #45202e; --tint-magenta: #40213d; --tint-green: #1d3a24; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid #2c2c33; --line-thick: 3px solid #3a3a42; --shadow: 0 6px 18px rgba(0, 0, 0, .6); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .6); --blob: 4px; --blob-sm: 3px; --pill: 4px; --font-display: 'Arial Black', 'Segoe UI Black', Impact, sans-serif; --font-body: 'Segoe UI', Arial, sans-serif; --sega-blue: #1f63d8; --speed: linear-gradient(#ff3b3b 0 2px, transparent 2px 4px, #ff3b3b 4px 5px, transparent 5px 7px, #ffd23a 7px 8px); --chrome: linear-gradient(#ffffff 0%, #e4eaf2 38%, #7d8a9c 50%, #c9d3df 60%, #ffffff 100%); --ridges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%232a2a31' stroke-width='2'%3E%3Ccircle cx='120' cy='0' r='30'/%3E%3Ccircle cx='120' cy='0' r='42'/%3E%3Ccircle cx='120' cy='0' r='54'/%3E%3Ccircle cx='120' cy='0' r='66'/%3E%3Ccircle cx='120' cy='0' r='78'/%3E%3C/svg%3E"); --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 1h6l7 7-7 7H1l7-7z' fill='%23ffd23a'/%3E%3Cpath d='M10 1h6l7 7-7 7h-6l7-7z' fill='%23ff3b3b'/%3E%3C/svg%3E"); --stars-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' fill='%23ffffff'%3E%3Ccircle cx='20' cy='40' r='.8' opacity='.6'/%3E%3Ccircle cx='90' cy='170' r='.7' opacity='.5'/%3E%3Ccircle cx='150' cy='60' r='1' opacity='.7'/%3E%3Ccircle cx='210' cy='240' r='.7' opacity='.5'/%3E%3Ccircle cx='260' cy='120' r='.9' opacity='.6'/%3E%3Ccircle cx='330' cy='20' r='.7' opacity='.5'/%3E%3Ccircle cx='370' cy='200' r='1' opacity='.7'/%3E%3Ccircle cx='60' cy='270' r='.8' opacity='.5'/%3E%3Ccircle cx='300' cy='280' r='.7' opacity='.5'/%3E%3C/svg%3E"); --stars-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' fill='%23ffffff'%3E%3Ccircle cx='70' cy='90' r='1.6'/%3E%3Ccircle cx='260' cy='420' r='1.4' fill='%23bcd4ff'/%3E%3Ccircle cx='420' cy='160' r='1.8'/%3E%3Ccircle cx='610' cy='330' r='1.4' fill='%23ffd0d0'/%3E%3Ccircle cx='740' cy='60' r='1.5'/%3E%3Ccircle cx='150' cy='540' r='1.7' fill='%23bcd4ff'/%3E%3Ccircle cx='520' cy='560' r='1.4'/%3E%3C/svg%3E"); } :root[data-theme="genesis"] body { background: repeating-linear-gradient(rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none' fill='none' stroke-width='1.5'%3E%3Cdefs%3E%3ClinearGradient id='red' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='400'%3E%3Cstop offset='0' stop-color='%23ff3b3b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ff3b3b' stop-opacity='.45'/%3E%3C/linearGradient%3E%3ClinearGradient id='blue' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='400'%3E%3Cstop offset='0' stop-color='%233b8cff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233b8cff' stop-opacity='.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 400.0H1600M0 266.7H1600M0 200.0H1600M0 160.0H1600M0 133.3H1600M0 114.3H1600M0 100.0H1600M0 88.9H1600M0 80.0H1600M0 66.7H1600M0 57.1H1600M0 50.0H1600M0 40.0H1600M0 30.8H1600' stroke='url(%23red)'/%3E%3Cpath d='M800 0L-1600 400M800 0L-1200 400M800 0L-800 400M800 0L-400 400M800 0L0 400M800 0L400 400M800 0L800 400M800 0L1200 400M800 0L1600 400M800 0L2000 400M800 0L2400 400M800 0L2800 400M800 0L3200 400' stroke='url(%23blue)'/%3E%3C/svg%3E") bottom / 100% 42vh no-repeat, radial-gradient(ellipse 80% 50% at 50% 100%, #0d1640, transparent 70%), #050506; background-attachment: fixed; } /* the starfield, scrolling sideways in two layers (the grid floor beneath it is drawn flat, in the background: tilted in 3D and animated, it was too heavy to paint) */ :root[data-theme="genesis"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--stars-near) 0 0 / 800px 600px, var(--stars-far) 0 0 / 400px 300px; animation: genesis-stars 40s linear infinite; } @keyframes genesis-stars { to { background-position: -800px 0, -400px 0; } } :root[data-theme="genesis"] * { text-shadow: none !important; } :root[data-theme="genesis"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: #ffffff; } :root[data-theme="genesis"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } @supports (background-clip: text) or (-webkit-background-clip: text) { :root[data-theme="genesis"] :is(h1, h2, h3, h4, .logo-text .l2) { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="genesis"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: transparent; } } :root[data-theme="genesis"] .dh-name h1 { letter-spacing: .01em; } :root[data-theme="genesis"] :is(.panel, .dialog-card) > .panel-head { padding-bottom: 12px; background: var(--speed) bottom left / 170px 8px no-repeat; } /* the heading's own background is its chrome, so its speed stripe is drawn by a line of its own */ :root[data-theme="genesis"] .stat-panel > h3::after { content: ''; display: block; width: 110px; height: 8px; margin-top: 6px; background: var(--speed); } :root[data-theme="genesis"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1.1em; height: .75em; margin-right: .4em; vertical-align: .02em; background: var(--chevrons) center / contain no-repeat; } :root[data-theme="genesis"] ::selection { background: #ff3b3b; color: #ffffff; } :root[data-theme="genesis"] :focus-visible { outline: 2px solid #ffd23a; outline-offset: 2px; } :root[data-theme="genesis"] a { color: #6aa8ff; } /* the top bar: black ridged plastic, the red power light, the speed stripes beneath */ :root[data-theme="genesis"] .topbar { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px), linear-gradient(#1a1a1e, #050506); border-bottom: 0; box-shadow: 0 1px 0 #2c2c33; } :root[data-theme="genesis"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--speed); pointer-events: none; } :root[data-theme="genesis"] .logo::after { content: ''; flex: none; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a9a, #ff2020 60%, #a00000); box-shadow: 0 0 8px 2px rgba(255, 40, 40, .6); } :root[data-theme="genesis"] .logo-text .l2 { font-family: var(--font-display); font-style: italic; font-weight: 900; color: #ffffff; } :root[data-theme="genesis"] .logo-text .l2-card { color: #3b8cff; -webkit-text-fill-color: #3b8cff; } :root[data-theme="genesis"] .header-stats b { color: #ffd23a; } :root[data-theme="genesis"] .bell { background: linear-gradient(#2a2a30, #121216); border: 1px solid #45454e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } :root[data-theme="genesis"] :is(.bell, .bell.gear):hover { border-color: #ff3b3b; transform: none; } /* tabs and buttons: glossy black, the open one red, the default one Sega blue */ :root[data-theme="genesis"] :is(.tabs > a, .tools-btn, .btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: linear-gradient(#2e2e35 0%, #18181c 50%, #0e0e11 51%, #16161a 100%); color: #ffffff; border: 1px solid #45454e; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 #000000; filter: none; font-style: italic; font-weight: 800; letter-spacing: .01em; } :root[data-theme="genesis"] :is(.tabs > a, .tools-btn) { font-family: var(--font-display); text-transform: uppercase; font-weight: 900; letter-spacing: .02em; } :root[data-theme="genesis"] :is(.tabs > a, .tools-btn, .btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { color: #ffffff; transform: none; border-color: #ff3b3b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 10px rgba(255, 59, 59, .45); } :root[data-theme="genesis"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on, .seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(#ff6a6a 0%, #e02828 50%, #c01818 51%, #d82020 100%); color: #ffffff; border-color: #ff8a8a; outline: 0; } :root[data-theme="genesis"] .btn.go, :root[data-theme="genesis"] .btn.go:hover { background: linear-gradient(#5a9cff 0%, #2a70e8 50%, #1f5cd0 51%, #2668e0 100%); color: #ffffff; border-color: #8ab8ff; } :root[data-theme="genesis"] .seg { background: #0b0b0d; border: 1px solid #45454e; box-shadow: none; } :root[data-theme="genesis"] .seg-btn { color: #ffffff; font-style: italic; font-weight: 800; } :root[data-theme="genesis"] .seg-btn:hover { background: #24242a; } :root[data-theme="genesis"] .seg-btn + .seg-btn { border-left: 1px solid #45454e; } /* panels: glossy black, the console's ridges curving in one corner */ :root[data-theme="genesis"] :is(.panel, .dialog-card, .modal-card) { background-color: #141416; background-image: var(--ridges), linear-gradient(rgba(255, 255, 255, .06), transparent 40%); background-position: top right, 0 0; background-size: 120px 120px, auto; background-repeat: no-repeat; border: 2px solid #2c2c33; border-radius: 4px; box-shadow: var(--shadow); } :root[data-theme="genesis"] .modal-top { background: linear-gradient(#1a1a1e, #0e0e11); border-bottom: 2px solid #2c2c33; } :root[data-theme="genesis"] .modal-backdrop { background: rgba(0, 0, 0, .82); } :root[data-theme="genesis"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #0b0b0d; color: #f4f4f6; border: 2px solid #2c2c33; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); } :root[data-theme="genesis"] input[type="checkbox"] { accent-color: #e02828; } /* the rest: tiles, the menu, a title-screen message, a spinning gold ring */ :root[data-theme="genesis"] :is(.tile, .deck-tile) { border: 2px solid #2c2c33; border-radius: 4px; box-shadow: var(--shadow-sm); } :root[data-theme="genesis"] .tile:is(:hover, :focus-within), :root[data-theme="genesis"] .deck-tile:hover { box-shadow: 0 0 0 2px #ff3b3b, 0 0 16px rgba(255, 59, 59, .4); transform: none; } :root[data-theme="genesis"] .bignum { border: 2px solid #000000; border-radius: 4px; background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .06) 51%); box-shadow: var(--shadow-sm); } :root[data-theme="genesis"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: linear-gradient(#1a1a1e, #0e0e11); border: 2px solid #2c2c33; box-shadow: var(--shadow-sm); } :root[data-theme="genesis"] .spinner { border: 4px solid #ffd23a; border-radius: 50%; background: none; box-shadow: 0 0 8px rgba(255, 210, 58, .6), inset 0 0 4px rgba(255, 150, 0, .6); animation: genesis-ring .9s linear infinite; } @keyframes genesis-ring { 0% { transform: scaleX(1); } 50% { transform: scaleX(.12); } 100% { transform: scaleX(1); } } :root[data-theme="genesis"] .tools-list { background: linear-gradient(#18181c, #0b0b0d); border: 2px solid #45454e; border-radius: 4px; box-shadow: 0 0 0 1px #000000, 0 14px 30px rgba(0, 0, 0, .7); } :root[data-theme="genesis"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 3px; color: #ffffff; } :root[data-theme="genesis"] .tools-list :is(a, button) b { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: .92rem; } :root[data-theme="genesis"] .tools-list :is(a, button) span { color: #b8b8c2; } :root[data-theme="genesis"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="genesis"] .tools-list a[aria-current="page"] { background: #c81e1e; color: #ffffff; outline: 0; } :root[data-theme="genesis"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="genesis"] .tools-list a[aria-current="page"] span { color: #ffe0e0; } :root[data-theme="genesis"] .tools-sep { height: 8px; border: 0; background: var(--speed); } :root[data-theme="genesis"] .toast { background: var(--speed) top / 100% 8px no-repeat, #050506; color: #ffd23a; border: 2px solid #e02828; border-radius: 4px; box-shadow: 0 0 20px rgba(255, 59, 59, .4); font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: .04em; padding-top: 16px; } :root[data-theme="genesis"] .site-footer { background: #0b0b0d; border-color: #2c2c33; } /* scroll bars: black with a red thumb */ :root[data-theme="genesis"]::-webkit-scrollbar, :root[data-theme="genesis"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="genesis"]::-webkit-scrollbar-track, :root[data-theme="genesis"] ::-webkit-scrollbar-track { background: #050506; } :root[data-theme="genesis"]::-webkit-scrollbar-thumb, :root[data-theme="genesis"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ff6a6a, #c01818); border: 2px solid #050506; border-radius: 4px; } /* ==== Game Boy Color ============================================================================== 1998, in teal. The speckled teal shell with the speaker grille's slanted slots at the bottom right; the top bar is the screen's slate bezel with its two thin colored lines, the tabs the rubbery start and select pills, the open one berry. Every panel is the screen: pale LCD with a faint dot matrix, set in a slate bezel whose bottom-right corner sweeps round, the red power light on its left edge; a pixel heart leads each heading. Buttons are pixel-edged like a game's menu with stepped pixel shadows; the default one and the round icon buttons are berry, like A and B. The More menu points at its choice with a ▶ cursor, a message is a game's text box with its ▼ blinking, and the busy sign is the heart, beating. */ :root[data-theme="gbc"] { --bg: #1fa3b4; --bg-deep: #6f58a8; --bg-blob: #1fa3b4; --panel: #eef3e2; --panel-2: #e4ead4; --panel-3: #d6dec2; --well: #f5f8ec; --text: #1c2616; --muted: #3e4a36; --faint: #6c7860; --paper: #f5f8ec; --paper-ink: #1c2616; --pink: #e0237f; --cyan: #3a78c8; --lime: #3a8a00; --orange: #d05800; --yellow: #9a7a00; --violet: #9068e0; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0136f; --pink-soft: #a0105f; --flat: #d6dec2; --zebra: #e8eed8; --grid: #d6dec2; --grid-2: #bcc8a4; --drop: #e4ead4; --hatch: #c8d2b0; --legend-miss: #c8d2b0; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 3px solid #1c2616; --line-thick: 4px solid #1c2616; --shadow: 4px 0 0 #1c2616, 0 4px 0 #1c2616, 4px 4px 0 #1c2616; --shadow-sm: 2px 0 0 #1c2616, 0 2px 0 #1c2616, 2px 2px 0 #1c2616; --blob: 0; --blob-sm: 0; --pill: 0; --font-display: Consolas, 'Lucida Console', 'Courier New', monospace; --font-body: 'Segoe UI', Verdana, sans-serif; --bezel: linear-gradient(#4e4e68, #3a3a52); --berry: linear-gradient(#ea5aa2, #c8287a); --lcd: #eef3e2; /* the LCD's dot matrix, as an image tile: a tiny gradient tile repeated over a whole panel is slow to paint */ --lcd-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231c2616' fill-opacity='0.08'%3E%3Ccircle cx='1.5' cy='1.5' r='0.75'/%3E%3Ccircle cx='4.5' cy='1.5' r='0.75'/%3E%3Ccircle cx='7.5' cy='1.5' r='0.75'/%3E%3Ccircle cx='10.5' cy='1.5' r='0.75'/%3E%3Ccircle cx='1.5' cy='4.5' r='0.75'/%3E%3Ccircle cx='4.5' cy='4.5' r='0.75'/%3E%3Ccircle cx='7.5' cy='4.5' r='0.75'/%3E%3Ccircle cx='10.5' cy='4.5' r='0.75'/%3E%3Ccircle cx='1.5' cy='7.5' r='0.75'/%3E%3Ccircle cx='4.5' cy='7.5' r='0.75'/%3E%3Ccircle cx='7.5' cy='7.5' r='0.75'/%3E%3Ccircle cx='10.5' cy='7.5' r='0.75'/%3E%3Ccircle cx='1.5' cy='10.5' r='0.75'/%3E%3Ccircle cx='4.5' cy='10.5' r='0.75'/%3E%3Ccircle cx='7.5' cy='10.5' r='0.75'/%3E%3Ccircle cx='10.5' cy='10.5' r='0.75'/%3E%3C/svg%3E") 0 0 / 12px 12px; --power-light: radial-gradient(circle, #ff5a5a 0 2.4px, rgba(255, 90, 90, .45) 3.2px, transparent 5px); --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z' fill='%23e0237f'/%3E%3Cpath d='M1 1h1v1H1z' fill='%23ffd6ec'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM0 2h1v1H0zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z' fill='%231c2616'/%3E%3C/svg%3E"); } :root[data-theme="gbc"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' fill='%23137e8c'%3E%3Crect x='10' y='60' width='70' height='9' rx='4.5' transform='rotate(-28 45 64)'/%3E%3Crect x='30' y='76' width='70' height='9' rx='4.5' transform='rotate(-28 65 80)'/%3E%3Crect x='50' y='92' width='70' height='9' rx='4.5' transform='rotate(-28 85 96)'/%3E%3Crect x='70' y='108' width='70' height='9' rx='4.5' transform='rotate(-28 105 112)'/%3E%3Crect x='90' y='124' width='70' height='9' rx='4.5' transform='rotate(-28 125 128)'/%3E%3C/svg%3E") right 3vw bottom 2vh / 200px 150px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%231fa3b4'/%3E%3Crect width='1' height='1' fill='%231b93a3'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%2325afc0'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%231c98a8'/%3E%3C/svg%3E") 0 0 / 12px 12px; background-attachment: fixed; } :root[data-theme="gbc"] * { text-shadow: none !important; } /* square corners everywhere but on the cards, mana symbols and round swatches; the pills, round buttons and bezels below set their own shapes and win by coming later. (Simple selectors only: a combinator inside :not() makes the browser restyle the whole page on every change.) */ :root[data-theme="gbc"] :not(img, .card-face, .thumb, .rr-img, .ms, .swatch, .ring, .ss-num) { border-radius: 0; } :root[data-theme="gbc"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #1c2616; } :root[data-theme="gbc"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #1c2616; } :root[data-theme="gbc"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .95em; height: .82em; margin-right: .45em; vertical-align: -.02em; background: var(--heart) center / contain no-repeat; image-rendering: pixelated; } :root[data-theme="gbc"] ::selection { background: #c8287a; color: #ffffff; } :root[data-theme="gbc"] :focus-visible { outline: 3px solid #c8287a; outline-offset: 2px; } :root[data-theme="gbc"] a { color: #2a58a8; } /* the top bar: the screen's slate bezel with its two thin colored lines */ :root[data-theme="gbc"] .topbar { background: linear-gradient(#c8287a, #c8287a) left 0 bottom 8px / 100% 2px no-repeat, linear-gradient(#6f58a8, #6f58a8) left 0 bottom 4px / 100% 2px no-repeat, var(--bezel); border-bottom: 0; box-shadow: 0 4px 0 #1c2616; padding-bottom: 16px; } :root[data-theme="gbc"] .logo-text .l2 { color: #ffffff; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-style: italic; } :root[data-theme="gbc"] .logo-text .l2-card { color: #ff8ac4; } :root[data-theme="gbc"] .header-stats { color: #e2e2f0; font-family: var(--font-display); } :root[data-theme="gbc"] .header-stats b { color: #ffffff; } :root[data-theme="gbc"] .bell { background: var(--berry); border: 3px solid #1c2616; border-radius: 50%; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 3px 0 #1c2616; } :root[data-theme="gbc"] :is(.bell, .bell.gear):hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #1c2616; } /* tabs: the rubbery start and select pills; the open page's pill is berry */ :root[data-theme="gbc"] :is(.tabs > a, .tools-btn) { background: linear-gradient(#64647a, #44445a); color: #f5f8ec; border: 2px solid #1c2616; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #1c2616; filter: none; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; padding: 6px 16px; } :root[data-theme="gbc"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(#74748a, #50506a); color: #ffffff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 0 #1c2616; } :root[data-theme="gbc"] :is(.tabs > a, .tools-btn):active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 0 #1c2616; } :root[data-theme="gbc"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: var(--berry); color: #ffffff; } /* panels: the screen, pale LCD in a slate bezel that sweeps round at the bottom right, the power light on its edge */ :root[data-theme="gbc"] :is(.panel, .dialog-card, .modal-card) { border: 10px solid transparent; border-radius: 10px 10px 42px 10px; box-shadow: 0 4px 0 #1c2616; background: var(--power-light) 0 16px / 10px 10px no-repeat border-box, var(--lcd-dots) padding-box, linear-gradient(var(--lcd), var(--lcd)) padding-box, var(--bezel) border-box; } :root[data-theme="gbc"] .modal-top { background: var(--lcd-dots), var(--lcd); border-bottom: 3px solid #1c2616; } :root[data-theme="gbc"] .modal-backdrop { background: rgba(10, 40, 46, .78); } /* buttons: pixel-edged like a game's menu; the default one and the round icon buttons are berry */ :root[data-theme="gbc"] :is(.btn, .page-chip, .mini-chip, .shape-tile) { background: var(--panel); color: #1c2616; border: 3px solid #1c2616; box-shadow: var(--shadow-sm); filter: none; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } :root[data-theme="gbc"] :is(.btn, .page-chip, .mini-chip, .shape-tile):hover { background: #ffffff; color: #1c2616; transform: translate(-2px, -2px); box-shadow: var(--shadow); filter: none; } :root[data-theme="gbc"] :is(.btn, .page-chip, .mini-chip, .shape-tile):active { transform: translate(2px, 2px); box-shadow: none; } :root[data-theme="gbc"] .btn.go, :root[data-theme="gbc"] .btn.go:hover { background: var(--berry); color: #ffffff; } :root[data-theme="gbc"] .icon-btn { background: var(--berry); color: #ffffff; border: 3px solid #1c2616; border-radius: 50%; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 3px 0 #1c2616; font-family: var(--font-display); font-weight: 800; } :root[data-theme="gbc"] .icon-btn:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #1c2616; } :root[data-theme="gbc"] .icon-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 #1c2616; } :root[data-theme="gbc"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: #1c2616; color: #eef3e2; outline: 0; } :root[data-theme="gbc"] .seg { background: var(--panel); border: 3px solid #1c2616; box-shadow: var(--shadow-sm); } :root[data-theme="gbc"] .seg-btn { color: #1c2616; font-family: var(--font-display); font-weight: 800; } :root[data-theme="gbc"] .seg-btn:hover { background: #ffffff; } :root[data-theme="gbc"] .seg-btn + .seg-btn { border-left: 3px solid #1c2616; } :root[data-theme="gbc"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: var(--well); color: #1c2616; border: 3px solid #1c2616; box-shadow: inset 2px 2px 0 rgba(28, 38, 22, .15); font-family: var(--font-display); } :root[data-theme="gbc"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: var(--well); border: 3px solid #1c2616; } :root[data-theme="gbc"] input[type="checkbox"]:checked { background: var(--check) center / 10px 9px no-repeat, var(--well); image-rendering: pixelated; } /* the rest: pixel tiles, the menu's ▶ cursor, a text box with its blinking ▼, the beating heart */ :root[data-theme="gbc"] :is(.tile, .deck-tile) { border: 3px solid #1c2616; box-shadow: var(--shadow); } :root[data-theme="gbc"] .tile:is(:hover, :focus-within), :root[data-theme="gbc"] .deck-tile:hover { box-shadow: 0 0 0 3px #c8287a, var(--shadow); transform: none; } :root[data-theme="gbc"] .bignum { border: 3px solid #1c2616; box-shadow: var(--shadow); } /* The big totals size their type to their tile (container units); set in a monospace face that way, Chrome never settles the page's rendering. They take the body face, heavy, instead. */ :root[data-theme="gbc"] .bn-value { font-family: var(--font-body); font-weight: 800; } :root[data-theme="gbc"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--lcd-dots), var(--lcd); border: 3px solid #1c2616; box-shadow: var(--shadow-sm); } :root[data-theme="gbc"] .job-banner:is(.good, .bad) { border: 3px solid #1c2616; box-shadow: var(--shadow-sm); } :root[data-theme="gbc"] .spinner { border: 0; background: var(--heart) center / contain no-repeat; image-rendering: pixelated; animation: gbc-beat .9s steps(1) infinite; } @keyframes gbc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(.75); } } :root[data-theme="gbc"] .tools-list { background: var(--lcd-dots), var(--lcd); border: 4px solid #1c2616; box-shadow: var(--shadow); padding: 6px; gap: 2px; } :root[data-theme="gbc"] .tools-list :is(a, button) { position: relative; background: transparent; border: 0; box-shadow: none; color: #1c2616; padding: 5px 10px 5px 26px; } :root[data-theme="gbc"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .92rem; } :root[data-theme="gbc"] .tools-list :is(a, button) span { color: #3e4a36; } :root[data-theme="gbc"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="gbc"] .tools-list a[aria-current="page"] { background: #d6dec2; color: #1c2616; outline: 0; } :root[data-theme="gbc"] .tools-list :is(a, button):is(:hover, :focus-visible)::before, :root[data-theme="gbc"] .tools-list a[aria-current="page"]::before { content: '▶' / ''; position: absolute; left: 7px; top: 6px; font: 800 .8rem var(--font-display); color: #1c2616; } :root[data-theme="gbc"] .tools-sep { height: 0; border: 0; border-top: 3px dotted #1c2616; margin: 4px 6px; } :root[data-theme="gbc"] .toast { background: var(--lcd); color: #1c2616; border: 4px solid #1c2616; border-radius: 8px; font-family: var(--font-display); font-weight: 700; box-shadow: inset 0 0 0 3px var(--lcd), inset 0 0 0 5px #1c2616, var(--shadow); padding: 14px 34px 14px 18px; } :root[data-theme="gbc"] .toast::after { content: '▼' / ''; position: absolute; right: 13px; bottom: 9px; font-size: .7rem; color: #1c2616; animation: gbc-blink 1s steps(1) infinite; } @keyframes gbc-blink { 50% { opacity: 0; } } :root[data-theme="gbc"] .site-footer { background: var(--bezel); color: #e2e2f0; border: 0; border-radius: 10px 10px 30px 10px; box-shadow: 0 4px 0 #1c2616; } :root[data-theme="gbc"] .site-footer a { color: #ffd6ec; } /* scroll bars: a pixel slider */ :root[data-theme="gbc"]::-webkit-scrollbar, :root[data-theme="gbc"] ::-webkit-scrollbar { width: 14px; height: 14px; } :root[data-theme="gbc"]::-webkit-scrollbar-track, :root[data-theme="gbc"] ::-webkit-scrollbar-track { background: var(--lcd); box-shadow: inset 3px 0 0 #1c2616; } :root[data-theme="gbc"]::-webkit-scrollbar-thumb, :root[data-theme="gbc"] ::-webkit-scrollbar-thumb { background: #44445a; border: 3px solid #1c2616; } :root[data-theme="gbc"]::-webkit-scrollbar-thumb:hover, :root[data-theme="gbc"] ::-webkit-scrollbar-thumb:hover { background: #c8287a; } /* ==== Gen 1 ======================================================================================= Generation one of the handheld monster-catching games, 1996, in the original handheld's four shades of green. The page is a route seen from above: grass ground with tufts, a row of trees along the bottom of the screen, tall grass that rustles now and then, flowers blinking between their two frames, a path, a sign and a ledge. The top bar is a text box holding the menu, the open page marked by the ▶ cursor and the one under the pointer by the hollow ▷; panels are text boxes with the double-lined frame, each heading underlined like a battle's status box and led by the "!" that pops up when someone spots you; buttons are little boxes the cursor points at; a message is the text box at the bottom with its ▼ blinking; progress bars are HP bars, and the busy sign is an HP bar draining from green through yellow to red. Text is set in capitals like the games', in a monospace face. No character, logo or ball is drawn. */ :root[data-theme="gen1"] { --bg: #88c070; --bg-deep: #e0f8d0; --bg-blob: #88c070; --panel: #e0f8d0; --panel-2: #d2ecc0; --panel-3: #c2e0ac; --well: #eefbe4; --text: #081820; --muted: #346856; --faint: #5f8a6c; --paper: #eefbe4; --paper-ink: #081820; --pink: #e0305a; --lime: #2f8f2f; --cyan: #3478c8; --violet: #9060d8; --orange: #d05800; --yellow: #9a7a00; --mint: #008a6a; --peach: #c8603a; --pink-text: #b0204a; --pink-soft: #a01a40; --flat: #c2e0ac; --tile-uncommon: #e6f3ea; --tile-rare: #f4f3d6; --tile-mythic: #f6e8d8; --zebra: #d6eec6; --grid: #c2e0ac; --grid-2: #a8cf8e; --drop: #d2ecc0; --hatch: #b8d8a0; --tint-pink: #f2d6d6; --tint-magenta: #e8d6e8; --tint-green: #c8e8b0; --legend-miss: #b8d8a0; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 3px solid #081820; --line-thick: 3px solid #081820; --shadow: 4px 4px 0 rgba(8, 24, 32, .3); --shadow-sm: 3px 3px 0 rgba(8, 24, 32, .3); --blob: 8px; --blob-sm: 6px; --pill: 6px; --font-display: Consolas, 'Lucida Console', 'Courier New', monospace; --font-body: 'Segoe UI', Verdana, 'Helvetica Neue', Arial, sans-serif; --ink: #081820; --dark: #346856; --light: #88c070; --paper-green: #e0f8d0; /* the games' text-box frame: a heavy outer line, a gap, a fine inner line */ --frame: inset 0 0 0 2px var(--paper-green), inset 0 0 0 4px var(--ink); --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h1v1h-1zM14 8h1v1h-1zM1 14h1v1h-1z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h7v1h-7zM8 1h8v1h-8zM0 2h2v1h-2zM3 2h13v1h-13zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h12v1h-12zM0 4h16v1h-16zM0 5h10v1h-10zM11 5h5v1h-5zM0 6h9v1h-9zM10 6h1v1h-1zM12 6h4v1h-4zM0 7h16v1h-16zM0 8h14v1h-14zM15 8h1v1h-1zM0 9h4v1h-4zM5 9h11v1h-11zM0 10h3v1h-3zM4 10h1v1h-1zM6 10h10v1h-10zM0 11h16v1h-16zM0 12h13v1h-13zM14 12h2v1h-2zM0 13h12v1h-12zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h14v1h-14zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM10 5h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM4 9h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM13 12h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1z' fill='%23346856'/%3E%3C/svg%3E"); --route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='32' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cg id='path'%3E%3Cpath d='M0 0h16v1h-16zM0 1h16v1h-16zM0 2h11v1h-11zM12 2h4v1h-4zM0 3h16v1h-16zM0 4h3v1h-3zM4 4h12v1h-12zM0 5h16v1h-16zM0 6h16v1h-16zM0 7h16v1h-16zM0 8h16v1h-16zM0 9h16v1h-16zM0 10h6v1h-6zM7 10h9v1h-9zM0 11h16v1h-16zM0 12h1v1h-1zM2 12h14v1h-14zM0 13h13v1h-13zM14 13h2v1h-2zM0 14h16v1h-16zM0 15h16v1h-16z' fill='%23e0f8d0'/%3E%3Cpath d='M11 2h1v1h-1zM3 4h1v1h-1zM6 10h1v1h-1zM1 12h1v1h-1zM13 13h1v1h-1z' fill='%2388c070'/%3E%3C/g%3E%3Cg id='ledge'%3E%3Cpath d='M7 1h1v1h-1zM14 8h1v1h-1zM1 14h1v1h-1z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h7v1h-7zM8 1h8v1h-8zM0 2h2v1h-2zM3 2h13v1h-13zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h12v1h-12zM0 4h16v1h-16zM0 5h10v1h-10zM11 5h5v1h-5zM0 6h9v1h-9zM10 6h1v1h-1zM12 6h4v1h-4zM0 7h16v1h-16zM0 8h14v1h-14zM15 8h1v1h-1zM0 11h1v1h-1zM2 11h3v1h-3zM6 11h3v1h-3zM10 11h3v1h-3zM14 11h2v1h-2zM0 12h13v1h-13zM14 12h2v1h-2zM0 13h12v1h-12zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h14v1h-14zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM10 5h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM0 10h16v1h-16zM1 11h1v1h-1zM5 11h1v1h-1zM9 11h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M0 9h16v1h-16z' fill='%23081820'/%3E%3C/g%3E%3Cg id='flower'%3E%3Cpath d='M7 5h2v1h-2zM7 6h2v1h-2zM5 7h2v1h-2zM9 7h2v1h-2zM5 8h2v1h-2zM9 8h2v1h-2zM7 9h2v1h-2zM7 10h2v1h-2z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h16v1h-16zM0 2h13v1h-13zM14 2h2v1h-2zM0 3h12v1h-12zM13 3h1v1h-1zM15 3h1v1h-1zM0 4h16v1h-16zM0 5h7v1h-7zM9 5h7v1h-7zM0 6h7v1h-7zM9 6h7v1h-7zM0 7h5v1h-5zM11 7h5v1h-5zM0 8h5v1h-5zM11 8h5v1h-5zM0 9h7v1h-7zM9 9h7v1h-7zM0 10h7v1h-7zM9 10h7v1h-7zM0 11h16v1h-16zM0 12h16v1h-16zM0 13h2v1h-2zM3 13h13v1h-13zM0 14h1v1h-1zM2 14h1v1h-1zM4 14h12v1h-12zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M13 2h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM2 13h1v1h-1zM1 14h1v1h-1zM3 14h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M7 7h2v1h-2zM7 8h2v1h-2z' fill='%23081820'/%3E%3C/g%3E%3Cg id='ground'%3E%3Cpath d='M7 1h1v1h-1zM14 8h1v1h-1zM1 14h1v1h-1z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h7v1h-7zM8 1h8v1h-8zM0 2h2v1h-2zM3 2h13v1h-13zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h12v1h-12zM0 4h16v1h-16zM0 5h10v1h-10zM11 5h5v1h-5zM0 6h9v1h-9zM10 6h1v1h-1zM12 6h4v1h-4zM0 7h16v1h-16zM0 8h14v1h-14zM15 8h1v1h-1zM0 9h4v1h-4zM5 9h11v1h-11zM0 10h3v1h-3zM4 10h1v1h-1zM6 10h10v1h-10zM0 11h16v1h-16zM0 12h13v1h-13zM14 12h2v1h-2zM0 13h12v1h-12zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h14v1h-14zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM10 5h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM4 9h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM13 12h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1z' fill='%23346856'/%3E%3C/g%3E%3Cg id='sign'%3E%3Cpath d='M7 1h1v1h-1zM14 8h1v1h-1zM1 14h1v1h-1z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h7v1h-7zM8 1h8v1h-8zM0 2h2v1h-2zM3 2h13v1h-13zM0 3h1v1h-1zM14 3h2v1h-2zM0 4h2v1h-2zM14 4h2v1h-2zM0 5h2v1h-2zM4 5h7v1h-7zM14 5h2v1h-2zM0 6h2v1h-2zM14 6h2v1h-2zM0 7h2v1h-2zM4 7h5v1h-5zM14 7h2v1h-2zM0 8h2v1h-2zM15 8h1v1h-1zM0 9h2v1h-2zM14 9h2v1h-2zM0 10h3v1h-3zM4 10h1v1h-1zM6 10h1v1h-1zM9 10h7v1h-7zM0 11h7v1h-7zM9 11h7v1h-7zM0 12h7v1h-7zM9 12h4v1h-4zM14 12h2v1h-2zM0 13h7v1h-7zM9 13h3v1h-3zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h5v1h-5zM9 14h7v1h-7zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M2 2h1v1h-1zM1 3h1v1h-1zM3 4h10v1h-10zM3 5h1v1h-1zM11 5h2v1h-2zM3 6h10v1h-10zM3 7h1v1h-1zM9 7h4v1h-4zM3 8h10v1h-10zM3 10h1v1h-1zM5 10h1v1h-1zM13 12h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M2 3h12v1h-12zM2 4h1v1h-1zM13 4h1v1h-1zM2 5h1v1h-1zM13 5h1v1h-1zM2 6h1v1h-1zM13 6h1v1h-1zM2 7h1v1h-1zM13 7h1v1h-1zM2 8h1v1h-1zM13 8h1v1h-1zM2 9h12v1h-12zM7 10h2v1h-2zM7 11h2v1h-2zM7 12h2v1h-2zM7 13h2v1h-2zM7 14h2v1h-2z' fill='%23081820'/%3E%3C/g%3E%3Cg id='tree'%3E%3Cpath d='M0 0h5v1h-5zM11 0h5v1h-5zM0 1h3v1h-3zM13 1h3v1h-3zM0 2h2v1h-2zM5 2h1v1h-1zM9 2h1v1h-1zM14 2h2v1h-2zM0 3h2v1h-2zM4 3h2v1h-2zM8 3h2v1h-2zM14 3h2v1h-2zM0 4h1v1h-1zM4 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM3 6h2v1h-2zM7 6h2v1h-2zM11 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h2v1h-2zM6 9h2v1h-2zM10 9h1v1h-1zM14 9h2v1h-2zM0 10h2v1h-2zM14 10h2v1h-2zM0 11h3v1h-3zM13 11h3v1h-3zM0 12h5v1h-5zM11 12h5v1h-5zM0 13h6v1h-6zM10 13h6v1h-6zM0 14h6v1h-6zM10 14h6v1h-6zM0 15h6v1h-6zM10 15h6v1h-6z' fill='%2388c070'/%3E%3Cpath d='M5 1h6v1h-6zM3 2h2v1h-2zM6 2h3v1h-3zM10 2h3v1h-3zM3 3h1v1h-1zM6 3h2v1h-2zM10 3h3v1h-3zM2 4h2v1h-2zM5 4h9v1h-9zM2 5h9v1h-9zM12 5h2v1h-2zM2 6h1v1h-1zM5 6h2v1h-2zM9 6h2v1h-2zM12 6h2v1h-2zM2 7h12v1h-12zM2 8h12v1h-12zM3 9h3v1h-3zM8 9h2v1h-2zM11 9h2v1h-2zM3 10h10v1h-10zM5 11h6v1h-6zM7 12h2v1h-2zM7 13h2v1h-2zM7 14h2v1h-2z' fill='%23346856'/%3E%3Cpath d='M5 0h6v1h-6zM3 1h2v1h-2zM11 1h2v1h-2zM2 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM13 3h1v1h-1zM1 4h1v1h-1zM14 4h1v1h-1zM1 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM14 8h1v1h-1zM2 9h1v1h-1zM13 9h1v1h-1zM2 10h1v1h-1zM13 10h1v1h-1zM3 11h2v1h-2zM11 11h2v1h-2zM5 12h2v1h-2zM9 12h2v1h-2zM6 13h1v1h-1zM9 13h1v1h-1zM6 14h1v1h-1zM9 14h1v1h-1zM6 15h4v1h-4z' fill='%23081820'/%3E%3C/g%3E%3Cg id='grass'%3E%3Cpath d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM9 0h1v1h-1zM11 0h1v1h-1zM13 0h1v1h-1zM15 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM9 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM9 5h1v1h-1zM11 5h1v1h-1zM13 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM7 8h1v1h-1zM9 8h1v1h-1zM11 8h1v1h-1zM13 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM10 10h1v1h-1zM12 10h1v1h-1zM14 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h1v1h-1zM8 11h1v1h-1zM10 11h1v1h-1zM12 11h1v1h-1zM14 11h1v1h-1zM1 12h1v1h-1zM3 12h1v1h-1zM5 12h1v1h-1zM7 12h1v1h-1zM9 12h1v1h-1zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM7 13h1v1h-1zM9 13h1v1h-1zM11 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM8 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM14 14h1v1h-1zM0 15h1v1h-1zM2 15h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM14 15h1v1h-1z' fill='%2388c070'/%3E%3Cpath d='M0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM14 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM15 2h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM12 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM0 9h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM12 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h1v1h-1zM9 10h1v1h-1zM11 10h1v1h-1zM13 10h1v1h-1zM15 10h1v1h-1zM0 13h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM6 13h1v1h-1zM8 13h1v1h-1zM10 13h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1zM1 14h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM7 14h1v1h-1zM9 14h1v1h-1zM11 14h1v1h-1zM13 14h1v1h-1zM15 14h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM8 0h1v1h-1zM10 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM12 4h1v1h-1zM14 4h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM13 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1zM12 12h1v1h-1zM14 12h1v1h-1zM1 15h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM7 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1z' fill='%23081820'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23grass' x='0' y='0'/%3E%3Cuse href='%23grass' x='16' y='0'/%3E%3Cuse href='%23grass' x='32' y='0'/%3E%3Cuse href='%23ground' x='48' y='0'/%3E%3Cuse href='%23flower' x='64' y='0'/%3E%3Cuse href='%23ground' x='80' y='0'/%3E%3Cuse href='%23path' x='96' y='0'/%3E%3Cuse href='%23path' x='112' y='0'/%3E%3Cuse href='%23path' x='128' y='0'/%3E%3Cuse href='%23sign' x='144' y='0'/%3E%3Cuse href='%23ground' x='160' y='0'/%3E%3Cuse href='%23flower' x='176' y='0'/%3E%3Cuse href='%23ground' x='192' y='0'/%3E%3Cuse href='%23ledge' x='208' y='0'/%3E%3Cuse href='%23ledge' x='224' y='0'/%3E%3Cuse href='%23ledge' x='240' y='0'/%3E%3Cuse href='%23grass' x='256' y='0'/%3E%3Cuse href='%23grass' x='272' y='0'/%3E%3Cuse href='%23ground' x='288' y='0'/%3E%3Cuse href='%23flower' x='304' y='0'/%3E%3Cuse href='%23flower' x='320' y='0'/%3E%3Cuse href='%23ground' x='336' y='0'/%3E%3Cuse href='%23path' x='352' y='0'/%3E%3Cuse href='%23ground' x='368' y='0'/%3E%3Cuse href='%23tree' x='0' y='16'/%3E%3Cuse href='%23tree' x='16' y='16'/%3E%3Cuse href='%23tree' x='32' y='16'/%3E%3Cuse href='%23tree' x='48' y='16'/%3E%3Cuse href='%23tree' x='64' y='16'/%3E%3Cuse href='%23tree' x='80' y='16'/%3E%3Cuse href='%23tree' x='96' y='16'/%3E%3Cuse href='%23tree' x='112' y='16'/%3E%3Cuse href='%23tree' x='128' y='16'/%3E%3Cuse href='%23tree' x='144' y='16'/%3E%3Cuse href='%23tree' x='160' y='16'/%3E%3Cuse href='%23tree' x='176' y='16'/%3E%3Cuse href='%23tree' x='192' y='16'/%3E%3Cuse href='%23tree' x='208' y='16'/%3E%3Cuse href='%23tree' x='224' y='16'/%3E%3Cuse href='%23tree' x='240' y='16'/%3E%3Cuse href='%23tree' x='256' y='16'/%3E%3Cuse href='%23tree' x='272' y='16'/%3E%3Cuse href='%23tree' x='288' y='16'/%3E%3Cuse href='%23tree' x='304' y='16'/%3E%3Cuse href='%23tree' x='320' y='16'/%3E%3Cuse href='%23tree' x='336' y='16'/%3E%3Cuse href='%23tree' x='352' y='16'/%3E%3Cuse href='%23tree' x='368' y='16'/%3E%3C/svg%3E"); --route-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='32' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cg id='grass'%3E%3Cpath d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM9 0h1v1h-1zM11 0h1v1h-1zM13 0h1v1h-1zM15 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM9 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM9 5h1v1h-1zM11 5h1v1h-1zM13 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM7 8h1v1h-1zM9 8h1v1h-1zM11 8h1v1h-1zM13 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM10 10h1v1h-1zM12 10h1v1h-1zM14 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h1v1h-1zM8 11h1v1h-1zM10 11h1v1h-1zM12 11h1v1h-1zM14 11h1v1h-1zM1 12h1v1h-1zM3 12h1v1h-1zM5 12h1v1h-1zM7 12h1v1h-1zM9 12h1v1h-1zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM1 13h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM7 13h1v1h-1zM9 13h1v1h-1zM11 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM8 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM14 14h1v1h-1zM0 15h1v1h-1zM2 15h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM14 15h1v1h-1z' fill='%2388c070'/%3E%3Cpath d='M0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM14 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM15 2h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM12 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM0 9h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM12 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h1v1h-1zM9 10h1v1h-1zM11 10h1v1h-1zM13 10h1v1h-1zM15 10h1v1h-1zM0 13h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM6 13h1v1h-1zM8 13h1v1h-1zM10 13h1v1h-1zM12 13h1v1h-1zM14 13h1v1h-1zM1 14h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM7 14h1v1h-1zM9 14h1v1h-1zM11 14h1v1h-1zM13 14h1v1h-1zM15 14h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM8 0h1v1h-1zM10 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM12 4h1v1h-1zM14 4h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM13 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1zM12 12h1v1h-1zM14 12h1v1h-1zM1 15h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM7 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1z' fill='%23081820'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23grass' x='0' y='0'/%3E%3Cuse href='%23grass' x='16' y='0'/%3E%3Cuse href='%23grass' x='32' y='0'/%3E%3Cuse href='%23grass' x='256' y='0'/%3E%3Cuse href='%23grass' x='272' y='0'/%3E%3C/svg%3E"); --route-flowers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='32' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cg id='flower2'%3E%3Cpath d='M5 5h2v1h-2zM9 5h2v1h-2zM5 6h2v1h-2zM9 6h2v1h-2zM5 9h2v1h-2zM9 9h2v1h-2zM5 10h2v1h-2zM9 10h2v1h-2z' fill='%23e0f8d0'/%3E%3Cpath d='M0 0h16v1h-16zM0 1h16v1h-16zM0 2h13v1h-13zM14 2h2v1h-2zM0 3h12v1h-12zM13 3h1v1h-1zM15 3h1v1h-1zM0 4h16v1h-16zM0 5h5v1h-5zM7 5h2v1h-2zM11 5h5v1h-5zM0 6h5v1h-5zM7 6h2v1h-2zM11 6h5v1h-5zM0 7h7v1h-7zM9 7h7v1h-7zM0 8h7v1h-7zM9 8h7v1h-7zM0 9h5v1h-5zM7 9h2v1h-2zM11 9h5v1h-5zM0 10h5v1h-5zM7 10h2v1h-2zM11 10h5v1h-5zM0 11h16v1h-16zM0 12h16v1h-16zM0 13h2v1h-2zM3 13h13v1h-13zM0 14h1v1h-1zM2 14h1v1h-1zM4 14h12v1h-12zM0 15h16v1h-16z' fill='%2388c070'/%3E%3Cpath d='M13 2h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1zM2 13h1v1h-1zM1 14h1v1h-1zM3 14h1v1h-1z' fill='%23346856'/%3E%3Cpath d='M7 7h2v1h-2zM7 8h2v1h-2z' fill='%23081820'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23flower2' x='64' y='0'/%3E%3Cuse href='%23flower2' x='176' y='0'/%3E%3Cuse href='%23flower2' x='304' y='0'/%3E%3Cuse href='%23flower2' x='320' y='0'/%3E%3C/svg%3E"); --exclaim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h8v1h-8zM0 1h1v1h-1zM9 1h1v1h-1zM0 2h1v1h-1zM4 2h2v1h-2zM9 2h1v1h-1zM0 3h1v1h-1zM4 3h2v1h-2zM9 3h1v1h-1zM0 4h1v1h-1zM4 4h2v1h-2zM9 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM9 5h1v1h-1zM0 6h1v1h-1zM9 6h1v1h-1zM0 7h1v1h-1zM4 7h2v1h-2zM9 7h1v1h-1zM0 8h1v1h-1zM9 8h1v1h-1zM1 9h8v1h-8zM3 10h2v1h-2zM3 11h1v1h-1z' fill='%23081820'/%3E%3Cpath d='M1 1h8v1h-8zM1 2h3v1h-3zM6 2h3v1h-3zM1 3h3v1h-3zM6 3h3v1h-3zM1 4h3v1h-3zM6 4h3v1h-3zM1 5h3v1h-3zM6 5h3v1h-3zM1 6h8v1h-8zM1 7h3v1h-3zM6 7h3v1h-3zM1 8h8v1h-8z' fill='%23e0f8d0'/%3E%3C/svg%3E"); --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h3v1h-3zM0 5h2v1h-2zM0 6h1v1h-1z' fill='%23081820'/%3E%3C/svg%3E"); --hollow-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM0 5h2v1h-2zM0 6h1v1h-1z' fill='%23081820'/%3E%3C/svg%3E"); --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM1 1h5v1h-5zM2 2h3v1h-3zM3 3h1v1h-1z' fill='%23081820'/%3E%3C/svg%3E"); --line-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h-2zM0 1h4v1h-4zM0 2h6v1h-6zM0 3h4v1h-4zM0 4h2v1h-2z' fill='%23081820'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1h-1zM5 1h2v1h-2zM0 2h1v1h-1zM4 2h2v1h-2zM0 3h2v1h-2zM3 3h2v1h-2zM1 4h3v1h-3zM2 5h1v1h-1z' fill='%23081820'/%3E%3C/svg%3E"); } /* the route: grass ground everywhere, a row of trees, grass, flowers and a path along the bottom */ :root[data-theme="gen1"] body { background: var(--route) left bottom / 1152px 96px repeat-x, var(--ground) 0 0 / 48px 48px, var(--light); background-attachment: fixed; } /* the tall grass rustling now and then, and the flowers blinking between their two frames */ :root[data-theme="gen1"] body::before, :root[data-theme="gen1"] body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 96px; z-index: -1; pointer-events: none; } :root[data-theme="gen1"] body::before { background: var(--route-grass) left bottom / 1152px 96px repeat-x; animation: gen1-rustle 5s steps(1) infinite; } :root[data-theme="gen1"] body::after { background: var(--route-flowers) left bottom / 1152px 96px repeat-x; animation: gen1-blink 1.6s steps(1) infinite; } @keyframes gen1-rustle { 0%, 84% { transform: none; } 86% { transform: translateX(3px); } 88% { transform: translateX(-3px); } 90% { transform: translateX(3px); } 92% { transform: none; } } @keyframes gen1-blink { 50% { opacity: 0; } } :root[data-theme="gen1"] * { text-shadow: none !important; } :root[data-theme="gen1"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; } :root[data-theme="gen1"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: var(--ink); } :root[data-theme="gen1"] .dh-name h1 { text-transform: none; letter-spacing: .01em; } /* under each heading, the line of a battle's status box: up the left, along the bottom, a point at the end */ :root[data-theme="gen1"] :is(.panel-head h2, .stat-panel > h3) { padding: 0 14px 8px 12px; background: var(--line-tip) right 0 bottom 0 / 6px 5px no-repeat, linear-gradient(var(--ink), var(--ink)) left 0 bottom 1px / calc(100% - 5px) 2px no-repeat, linear-gradient(var(--ink), var(--ink)) left 0 bottom 1px / 2px 16px no-repeat; } :root[data-theme="gen1"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .8em; height: .96em; margin-right: .45em; vertical-align: -.12em; background: var(--exclaim) center / contain no-repeat; } :root[data-theme="gen1"] ::selection { background: var(--dark); color: var(--paper-green); } :root[data-theme="gen1"] :focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; } :root[data-theme="gen1"] a { color: #1f5aa8; } /* the Gallery's count and sort label and the Sets page's years sit out on the grass, where the tufts muddle the type, so each gets a little text box */ :root[data-theme="gen1"] :is(.result-count, .result-count .muted, .sort-caption) { color: var(--ink); } :root[data-theme="gen1"] :is(.result-count, .sort-caption, h3.year-head) { display: inline-block; width: fit-content; padding: 2px 10px; background: var(--paper-green); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 rgba(8, 24, 32, .3); } :root[data-theme="gen1"] h3.year-head { padding: 4px 14px 3px; } /* the top bar: a text box holding the menu */ :root[data-theme="gen1"] .topbar { background: var(--paper-green); border-bottom: 3px solid var(--ink); box-shadow: var(--frame), 0 4px 0 rgba(8, 24, 32, .3); } :root[data-theme="gen1"] .logo:hover :is(.logo-mark, .pupil) { transform: none; } :root[data-theme="gen1"] .logo-text .l2 { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; } :root[data-theme="gen1"] .logo-text .l2-card { color: var(--dark); } :root[data-theme="gen1"] .header-stats { color: var(--dark); font-family: var(--font-display); text-transform: uppercase; } :root[data-theme="gen1"] .header-stats b { color: var(--ink); } :root[data-theme="gen1"] .bell { background: var(--paper-green); border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--frame); } :root[data-theme="gen1"] :is(.bell, .bell.gear):hover { background: #ffffff; transform: none; } :root[data-theme="gen1"] .bell[aria-current] { background: var(--light); } /* tabs: the menu; ▶ points at the open page and ▷ at the one under the pointer */ :root[data-theme="gen1"] :is(.tabs > a, .tools-btn) { position: relative; background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: none; filter: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px 5px 24px; } :root[data-theme="gen1"] :is(.tabs > a, .tools-btn)::before { content: ''; position: absolute; left: 7px; top: 50%; width: 10px; height: 14px; margin-top: -7px; } :root[data-theme="gen1"] :is(.tabs > a, .tools-btn):hover { background: transparent; color: var(--ink); transform: none; box-shadow: none; } :root[data-theme="gen1"] :is(.tabs > a, .tools-btn):hover::before { background: var(--hollow-cursor) center / 10px 14px no-repeat; } :root[data-theme="gen1"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: transparent; color: var(--ink); } :root[data-theme="gen1"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on)::before { background: var(--cursor) center / 10px 14px no-repeat; } /* panels: text boxes */ :root[data-theme="gen1"] :is(.panel, .dialog-card, .modal-card) { background: var(--panel); border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--frame), var(--shadow); } :root[data-theme="gen1"] :is(.panel, .dialog-card) { padding: 14px 16px 16px; } :root[data-theme="gen1"] .modal-top { background: var(--panel); border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 var(--paper-green), 0 4px 0 var(--ink); } :root[data-theme="gen1"] .modal-backdrop { background: repeating-linear-gradient(rgba(8, 24, 32, .84) 0 6px, rgba(8, 24, 32, .72) 6px 12px); } /* buttons: little boxes the cursor points at; go is dark green; a chosen one is ink */ :root[data-theme="gen1"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--well); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 rgba(8, 24, 32, .3); filter: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } :root[data-theme="gen1"] :is(.btn, .page-chip) { position: relative; padding-left: 24px; } :root[data-theme="gen1"] :is(.btn, .page-chip)::before { content: ''; position: absolute; left: 8px; top: 50%; width: 8px; height: 12px; margin-top: -6px; } :root[data-theme="gen1"] :is(.btn, .page-chip):is(:hover, :focus-visible)::before { background: var(--cursor) center / 8px 12px no-repeat; } :root[data-theme="gen1"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: #ffffff; color: var(--ink); transform: none; box-shadow: 3px 3px 0 rgba(8, 24, 32, .3); filter: none; } :root[data-theme="gen1"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(8, 24, 32, .3); } :root[data-theme="gen1"] .btn.go, :root[data-theme="gen1"] .btn.go:hover { background: var(--dark); color: var(--paper-green); } :root[data-theme="gen1"] .btn.go:is(:hover, :focus-visible)::before { background: var(--cursor) center / 8px 12px no-repeat; filter: invert(1) brightness(1.6); } :root[data-theme="gen1"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: var(--ink); color: var(--paper-green); outline: 0; } :root[data-theme="gen1"] .seg { background: var(--well); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 rgba(8, 24, 32, .3); } :root[data-theme="gen1"] .seg-btn { color: var(--ink); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; } :root[data-theme="gen1"] .seg-btn:hover { background: #ffffff; } :root[data-theme="gen1"] .seg-btn + .seg-btn { border-left: 3px solid var(--ink); } /* text boxes and the rest of the form */ :root[data-theme="gen1"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: var(--well); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset 2px 2px 0 rgba(8, 24, 32, .12); } :root[data-theme="gen1"] :is(.text-input, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"])::placeholder { color: var(--faint); } :root[data-theme="gen1"] .select { background-image: var(--arrow-down); background-position: right 10px center; background-size: 14px 8px; background-repeat: no-repeat; font-family: var(--font-display); } :root[data-theme="gen1"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: var(--well); border: 3px solid var(--ink); border-radius: 3px; } :root[data-theme="gen1"] input[type="checkbox"]:checked { background: var(--check) center / 14px 12px no-repeat, var(--well); } /* the rest: framed totals and tiles, HP bars, the START menu, the bottom text box */ :root[data-theme="gen1"] .bignum { border: 3px solid var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), var(--shadow-sm); } /* the big totals size their type to their tile, which in a monospace face keeps Chrome repainting */ :root[data-theme="gen1"] .bn-value { font-family: var(--font-body); font-weight: 800; } :root[data-theme="gen1"] :is(.tile, .deck-tile) { border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow); } :root[data-theme="gen1"] .tile:is(:hover, :focus-within), :root[data-theme="gen1"] .deck-tile:hover { box-shadow: 0 0 0 3px var(--dark), var(--shadow); } :root[data-theme="gen1"] :is(.bar-track, .part-track, .cb-track, .fit-track, .progress, .stack-bar, .cast-bar) { border: 2px solid var(--ink); border-radius: 4px; background-color: var(--well); box-shadow: none; } :root[data-theme="gen1"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--panel); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--frame), var(--shadow-sm); } :root[data-theme="gen1"] .job-banner:is(.good, .bad) { border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-sm); } :root[data-theme="gen1"] .spinner { width: 54px; height: 12px; border: 2px solid var(--ink); border-radius: 4px; box-shadow: none; background: linear-gradient(#2f8f2f, #2f8f2f) left center / 100% 100% no-repeat, var(--well); animation: gen1-hp 2.4s steps(24) infinite; } @keyframes gen1-hp { 0% { background-size: 100% 100%; background-image: linear-gradient(#2f8f2f, #2f8f2f); } 49% { background-image: linear-gradient(#2f8f2f, #2f8f2f); } 50% { background-size: 50% 100%; background-image: linear-gradient(#c8a000, #c8a000); } 79% { background-image: linear-gradient(#c8a000, #c8a000); } 80% { background-size: 20% 100%; background-image: linear-gradient(#e0305a, #e0305a); } 100% { background-size: 3% 100%; background-image: linear-gradient(#e0305a, #e0305a); } } :root[data-theme="gen1"] .tools-list { background: var(--panel); border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--frame), var(--shadow); padding: 8px; gap: 0; } :root[data-theme="gen1"] .tools-list :is(a, button) { position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); padding: 5px 10px 5px 24px; } :root[data-theme="gen1"] .tools-list :is(a, button) b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; } :root[data-theme="gen1"] .tools-list :is(a, button) span { color: var(--dark); } :root[data-theme="gen1"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="gen1"] .tools-list a[aria-current="page"] { background: transparent; color: var(--ink); outline: 0; } :root[data-theme="gen1"] .tools-list :is(a, button):is(:hover, :focus-visible)::before, :root[data-theme="gen1"] .tools-list a[aria-current="page"]::before { content: ''; position: absolute; left: 7px; top: 8px; width: 10px; height: 14px; background: var(--cursor) center / 10px 14px no-repeat; } :root[data-theme="gen1"] .tools-sep { height: 0; margin: 4px 6px; border: 0; border-top: 3px dotted var(--dark); } :root[data-theme="gen1"] .toast { background: var(--panel); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--frame), var(--shadow); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 14px 36px 16px 18px; } :root[data-theme="gen1"] .toast::after { content: ''; position: absolute; right: 14px; bottom: 9px; width: 14px; height: 8px; background: var(--arrow-down) center / 14px 8px no-repeat; animation: gen1-blink 1s steps(1) infinite; } :root[data-theme="gen1"] .site-footer { background: var(--panel); color: var(--dark); border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--frame), var(--shadow-sm); } :root[data-theme="gen1"] .site-footer a { color: #1f5aa8; } /* scroll bars: an ink slider */ :root[data-theme="gen1"]::-webkit-scrollbar, :root[data-theme="gen1"] ::-webkit-scrollbar { width: 14px; height: 14px; } :root[data-theme="gen1"]::-webkit-scrollbar-track, :root[data-theme="gen1"] ::-webkit-scrollbar-track { background: var(--light); } :root[data-theme="gen1"]::-webkit-scrollbar-thumb, :root[data-theme="gen1"] ::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--light); border-radius: 3px; } /* ==== ColecoVision ================================================================================ 1982, black and brushed aluminum. A black shell cut with fine vent grooves, the controller's twelve-key pad standing faintly in the corner; the top bar is the brushed-aluminum plate with a gleam of light sliding along it and the warm orange, gold and red stripes beneath. The tabs are keypad keys, each numbered in its corner, More being the pound key; panels are black with an aluminum lip and the stripes under each heading, which a little joystick leads. Chunky black keys for buttons, the default one orange; the busy sign is the joystick, waggling. */ :root[data-theme="coleco"] { --bg: #0c0c0d; --bg-deep: #c6c6c8; --bg-blob: #0c0c0d; --panel: #1b1b1d; --panel-2: #161618; --panel-3: #2a2a2e; --well: #121214; --text: #f2f2f2; --muted: #bdbdc4; --faint: #84848c; --paper: #f2f2f2; --paper-ink: #0c0c0d; --orange: #ff8a1a; --pink: #ff5a3a; --yellow: #ffc23a; --cyan: #4a9cff; --lime: #5ad14a; --violet: #c08aff; --mint: #40d8c0; --peach: #ffae8a; --pink-text: #ff7a5c; --pink-soft: #ff967c; --flat: #2a2a2e; --zebra: #1f1f22; --grid: #29292d; --grid-2: #36363b; --drop: #202023; --hatch: #121214; --tile-uncommon: #232a3a; --tile-rare: #33301f; --tile-mythic: #3a2620; --tint-pink: #45202e; --tint-magenta: #40213d; --tint-green: #1d3a24; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid #000000; --line-thick: 3px solid #000000; --shadow: 0 5px 0 #000000; --shadow-sm: 0 3px 0 #000000; --blob: 6px; --blob-sm: 6px; --pill: 6px; --font-display: 'Segoe UI Black', 'Arial Black', 'Helvetica Neue', sans-serif; --font-body: 'Segoe UI', Arial, sans-serif; --stripes: linear-gradient(#ff8a1a 0 3px, transparent 3px 5px, #ffc23a 5px 8px, transparent 8px 10px, #ff5a3a 10px 13px); /* brushed aluminum: the face, and the fine brushing laid over it where there is room to see it */ --aluminum: linear-gradient(#e8e8ea, #bcbcc0 55%, #9e9ea4); --brushing: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px); --key: linear-gradient(#3a3a40, #222226); --joystick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cellipse cx='10' cy='18' rx='8.5' ry='3.2' fill='%239e9ea4' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M8.6 7h2.8v10.5H8.6z' fill='%232a2a2e' stroke='%23000' stroke-width='.8'/%3E%3Ccircle cx='10' cy='6' r='4.6' fill='%23ff8a1a' stroke='%23000' stroke-width='1'/%3E%3Ccircle cx='8.6' cy='4.6' r='1.3' fill='%23ffd8a8'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.7L10.2 3' fill='none' stroke='%230c0c0d' stroke-width='2.4'/%3E%3C/svg%3E"); } :root[data-theme="coleco"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='380' font-family='Segoe UI Black,Arial Black,sans-serif' font-size='34' text-anchor='middle' fill='%231d1d20'%3E %3Cg stroke='%2318181b' stroke-width='3'%3E%3Crect x='6' y='6' width='84' height='84' rx='10'/%3E%3Crect x='108' y='6' width='84' height='84' rx='10'/%3E%3Crect x='210' y='6' width='84' height='84' rx='10'/%3E %3Crect x='6' y='100' width='84' height='84' rx='10'/%3E%3Crect x='108' y='100' width='84' height='84' rx='10'/%3E%3Crect x='210' y='100' width='84' height='84' rx='10'/%3E %3Crect x='6' y='194' width='84' height='84' rx='10'/%3E%3Crect x='108' y='194' width='84' height='84' rx='10'/%3E%3Crect x='210' y='194' width='84' height='84' rx='10'/%3E %3Crect x='6' y='288' width='84' height='84' rx='10'/%3E%3Crect x='108' y='288' width='84' height='84' rx='10'/%3E%3Crect x='210' y='288' width='84' height='84' rx='10'/%3E%3C/g%3E %3Cg fill='%23232327'%3E%3Ctext x='48' y='60'%3E1%3C/text%3E%3Ctext x='150' y='60'%3E2%3C/text%3E%3Ctext x='252' y='60'%3E3%3C/text%3E%3Ctext x='48' y='154'%3E4%3C/text%3E%3Ctext x='150' y='154'%3E5%3C/text%3E%3Ctext x='252' y='154'%3E6%3C/text%3E %3Ctext x='48' y='248'%3E7%3C/text%3E%3Ctext x='150' y='248'%3E8%3C/text%3E%3Ctext x='252' y='248'%3E9%3C/text%3E%3Ctext x='48' y='342'%3E*%3C/text%3E%3Ctext x='150' y='342'%3E0%3C/text%3E%3Ctext x='252' y='342'%3E%23%3C/text%3E%3C/g%3E%3C/svg%3E") right 4vw bottom 4vh / 240px 304px no-repeat, repeating-linear-gradient(#0c0c0d 0 5px, #111113 5px 6px, #070708 6px 7px); background-attachment: fixed; } :root[data-theme="coleco"] * { text-shadow: none !important; } :root[data-theme="coleco"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; } :root[data-theme="coleco"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #ffffff; } :root[data-theme="coleco"] .dh-name h1 { text-transform: none; letter-spacing: .02em; } :root[data-theme="coleco"] :is(.panel, .dialog-card) > .panel-head { padding-bottom: 18px; background: var(--stripes) bottom / 100% 13px no-repeat; } :root[data-theme="coleco"] .stat-panel > h3 { padding-bottom: 16px; background: var(--stripes) bottom / 100% 13px no-repeat; } :root[data-theme="coleco"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .9em; height: 1em; margin-right: .45em; vertical-align: -.12em; background: var(--joystick) center / contain no-repeat; } :root[data-theme="coleco"] ::selection { background: #ff8a1a; color: #0c0c0d; } :root[data-theme="coleco"] :focus-visible { outline: 2px solid #ffc23a; outline-offset: 2px; } :root[data-theme="coleco"] a { color: #ffb066; } /* the top bar: brushed aluminum with a gleam sliding along it, the warm stripes beneath */ :root[data-theme="coleco"] .topbar { background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) -150% 0 / 60% 100% no-repeat, var(--brushing), var(--aluminum); border-bottom: 2px solid #000000; box-shadow: none; animation: coleco-gleam 9s ease-in-out infinite; } @keyframes coleco-gleam { 0%, 55% { background-position: -150% 0, 0 0, 0 0; } 100% { background-position: 250% 0, 0 0, 0 0; } } :root[data-theme="coleco"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 13px; background: var(--stripes); pointer-events: none; } :root[data-theme="coleco"] .logo-text .l2 { color: #111111; font-family: var(--font-display); font-weight: 900; letter-spacing: .04em; } :root[data-theme="coleco"] .logo-text .l2-card { color: #b8400c; } :root[data-theme="coleco"] .header-stats { color: #222222; } :root[data-theme="coleco"] .header-stats b { color: #000000; } :root[data-theme="coleco"] .bell { background: var(--key); border: 2px solid #000000; box-shadow: 0 3px 0 #000000, inset 0 1px 0 rgba(255, 255, 255, .16); } :root[data-theme="coleco"] :is(.bell, .bell.gear):hover { background: linear-gradient(#48484f, #2a2a2e); transform: none; } :root[data-theme="coleco"] main { padding-top: 32px; } /* tabs: keypad keys, each numbered in its corner; More is the pound key */ :root[data-theme="coleco"] .tabs { counter-reset: key; } :root[data-theme="coleco"] :is(.tabs > a, .tools-btn) { display: inline-flex; align-items: baseline; gap: 7px; background: var(--key); color: #f2f2f2; border: 2px solid #000000; border-radius: 6px; box-shadow: 0 3px 0 #000000, inset 0 1px 0 rgba(255, 255, 255, .16); filter: none; font-family: var(--font-display); font-weight: 900; letter-spacing: .03em; } :root[data-theme="coleco"] .tabs > a { counter-increment: key; } :root[data-theme="coleco"] .tabs > a::before { content: counter(key) / ''; font-size: .72em; color: #ffc23a; } :root[data-theme="coleco"] .tools-btn::before { content: '#' / ''; font-size: .72em; color: #ffc23a; } :root[data-theme="coleco"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(#48484f, #2a2a2e); color: #ffffff; transform: none; box-shadow: 0 3px 0 #000000, inset 0 1px 0 rgba(255, 255, 255, .16); } :root[data-theme="coleco"] :is(.tabs > a, .tools-btn):active { transform: translateY(3px); box-shadow: 0 0 0 #000000; } :root[data-theme="coleco"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: linear-gradient(#ffa040, #e06a00); color: #0c0c0d; } :root[data-theme="coleco"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on)::before { color: #3a1a00; } /* panels: black with an aluminum lip */ :root[data-theme="coleco"] :is(.panel, .dialog-card, .modal-card) { background: var(--aluminum) top / 100% 7px no-repeat, linear-gradient(#1f1f22, #18181a); border: 2px solid #000000; border-radius: 6px; box-shadow: 0 5px 0 #000000; } :root[data-theme="coleco"] :is(.panel, .dialog-card) { padding-top: 22px; } :root[data-theme="coleco"] .modal-top { background: linear-gradient(#26262a, #1b1b1d); border-bottom: 2px solid #000000; } :root[data-theme="coleco"] .modal-backdrop { background: rgba(0, 0, 0, .82); } /* buttons: chunky black keys, the default one orange */ :root[data-theme="coleco"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: var(--key); color: #f2f2f2; border: 2px solid #000000; box-shadow: 0 3px 0 #000000, inset 0 1px 0 rgba(255, 255, 255, .16); filter: none; font-family: var(--font-body); font-weight: 800; letter-spacing: .01em; } :root[data-theme="coleco"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: linear-gradient(#48484f, #2a2a2e); color: #ffffff; transform: none; box-shadow: 0 3px 0 #000000, inset 0 1px 0 rgba(255, 255, 255, .16); } :root[data-theme="coleco"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(3px); box-shadow: 0 0 0 #000000; } :root[data-theme="coleco"] .btn.go, :root[data-theme="coleco"] .btn.go:hover { background: linear-gradient(#ffa040, #e06a00); color: #0c0c0d; } :root[data-theme="coleco"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: linear-gradient(#ffa040, #e06a00); color: #0c0c0d; outline: 0; } :root[data-theme="coleco"] .seg { background: #121214; border: 2px solid #000000; box-shadow: 0 3px 0 #000000; } :root[data-theme="coleco"] .seg-btn { color: #f2f2f2; font-weight: 800; } :root[data-theme="coleco"] .seg-btn:hover { background: #2a2a2e; } :root[data-theme="coleco"] .seg-btn + .seg-btn { border-left: 2px solid #000000; } :root[data-theme="coleco"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #121214; color: #f2f2f2; border: 2px solid #000000; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6); } :root[data-theme="coleco"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: #121214; border: 2px solid #9e9ea4; border-radius: 4px; } :root[data-theme="coleco"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, #ff8a1a; border-color: #000000; } /* the rest: tiles, a keypad-card menu, a message under the stripes, the waggling joystick */ :root[data-theme="coleco"] :is(.tile, .deck-tile) { border: 2px solid #000000; border-radius: 6px; box-shadow: 0 5px 0 #000000; } :root[data-theme="coleco"] .tile:is(:hover, :focus-within), :root[data-theme="coleco"] .deck-tile:hover { box-shadow: 0 0 0 2px #ff8a1a, 0 5px 0 #000000; transform: none; } :root[data-theme="coleco"] .bignum { border: 2px solid #000000; border-radius: 6px; background-image: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%); box-shadow: 0 4px 0 #000000; } :root[data-theme="coleco"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: var(--aluminum) top / 100% 5px no-repeat, #1b1b1d; border: 2px solid #000000; box-shadow: 0 3px 0 #000000; } :root[data-theme="coleco"] .spinner { border: 0; border-radius: 0; background: var(--joystick) center / contain no-repeat; transform-origin: 50% 85%; animation: coleco-waggle .5s ease-in-out infinite alternate; } @keyframes coleco-waggle { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } } :root[data-theme="coleco"] .tools-list { background: var(--aluminum) top / 100% 6px no-repeat, #141416; border: 2px solid #9e9ea4; border-radius: 8px; box-shadow: 0 0 0 2px #000000, 0 12px 26px rgba(0, 0, 0, .7); padding-top: 12px; } :root[data-theme="coleco"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 5px; color: #f2f2f2; } :root[data-theme="coleco"] .tools-list :is(a, button) b { font-family: var(--font-display); } :root[data-theme="coleco"] .tools-list :is(a, button) span { color: #bdbdc4; } :root[data-theme="coleco"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="coleco"] .tools-list a[aria-current="page"] { background: #e06a00; color: #0c0c0d; outline: 0; } :root[data-theme="coleco"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="coleco"] .tools-list a[aria-current="page"] span { color: #2a1200; } :root[data-theme="coleco"] .tools-sep { height: 13px; border: 0; background: var(--stripes); opacity: .9; } :root[data-theme="coleco"] .toast { background: var(--stripes) top / 100% 13px no-repeat, #141416; color: #f2f2f2; border: 2px solid #000000; border-radius: 6px; box-shadow: 0 5px 0 #000000; padding-top: 20px; font-weight: 800; } :root[data-theme="coleco"] .site-footer { background: var(--aluminum) top / 100% 5px no-repeat, #141416; border: 2px solid #000000; color: #bdbdc4; } /* scroll bars: a brushed-aluminum thumb */ :root[data-theme="coleco"]::-webkit-scrollbar, :root[data-theme="coleco"] ::-webkit-scrollbar { width: 13px; height: 13px; } :root[data-theme="coleco"]::-webkit-scrollbar-track, :root[data-theme="coleco"] ::-webkit-scrollbar-track { background: #0c0c0d; } :root[data-theme="coleco"]::-webkit-scrollbar-thumb, :root[data-theme="coleco"] ::-webkit-scrollbar-thumb { background: var(--brushing), var(--aluminum); border: 2px solid #000000; border-radius: 6px; } /* ==== Cyberpunk =================================================================================== A night in the city. Megabuildings stand along the bottom of the screen, their windows lit in warning yellow, neon red and cyan, a haze glowing behind them; rain slants down over everything and faint scan lines run across the dark. The name on the top bar flickers like a failing neon sign; headings are wide capitals split into red and cyan that glitch now and then. Panels have their corners cut, a yellow edge down the left and a strip of hazard stripes at the foot; cut corners on every button and tab, cyan outlines that fill on hover, warning yellow for what is chosen and neon red for go. A message is a system line, and the busy sign a spinning frame. */ :root[data-theme="cyberpunk"] { --bg: #050508; --bg-deep: #0b0b10; --bg-blob: #050508; --panel: #0b0b10; --panel-2: #09090d; --panel-3: #1a1a24; --well: #07070a; --text: #e9f6ff; --muted: #9fb3c4; --faint: #5f7080; --paper: #e9f6ff; --paper-ink: #050508; --yellow: #fcee0a; --pink: #ff2a6d; --cyan: #00f0ff; --lime: #39ff88; --violet: #b967ff; --orange: #ff8a00; --mint: #05d9e8; --peach: #ff9e7a; --pink-text: #ff4f85; --pink-soft: #ff7aa3; --flat: #1a1a24; --zebra: #0e0e14; --grid: #16161f; --grid-2: #22222e; --drop: #101018; --hatch: #07070a; --tile-uncommon: #232a3a; --tile-rare: #33301f; --tile-mythic: #3a2620; --tint-pink: #45202e; --tint-magenta: #40213d; --tint-green: #1d3a24; --legend-miss: #4a4a54; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid rgba(252, 238, 10, .55); --line-thick: 2px solid #fcee0a; --shadow: none; --shadow-sm: none; --blob: 0; --blob-sm: 0; --pill: 0; --font-display: Bahnschrift, 'DIN Condensed', 'Arial Narrow', 'Segoe UI', sans-serif; --font-body: Bahnschrift, 'Segoe UI', Arial, sans-serif; --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); --cut-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); --hazard: repeating-linear-gradient(-45deg, #fcee0a 0 6px, #050508 6px 12px); --split: 1px 0 #ff2a6d, -1px 0 #00f0ff; --chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0h14l6 6v14H6L0 14z' fill='%23fcee0a'/%3E%3Cpath d='M5 5h7l3 3v7H8l-3-3z' fill='%23050508'/%3E%3Cpath d='M8 8h4v4H8z' fill='%2300f0ff'/%3E%3C/svg%3E"); --skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='340'%3E %3Cpath d='M0 340V150h60v-40h40v60h70V60h30v-30h20v30h40v120h60V120h90v-50h30v90h70V40h50v70h40v80h80V90h60v-60h30v60h50v110h70V130h40v-30h60v70h60V60h40v-30h30v30h50v150h60V120h70v60h50V340z' fill='%230d1024'/%3E %3Cpath d='M0 340V230h80v-60h70v80h60V180h50v-40h40v120h90V200h60v-30h40v80h70V150h60v70h80v-40h50v90h70V190h50v-50h40v110h60V210h70v50h60V170h50v90h60V340z' fill='%23060812'/%3E %3Cg fill='%23fcee0a' opacity='.55'%3E%3Crect x='95' y='200' width='4' height='6'/%3E%3Crect x='105' y='214' width='4' height='6'/%3E%3Crect x='300' y='160' width='4' height='6'/%3E%3Crect x='610' y='180' width='4' height='6'/%3E%3Crect x='620' y='194' width='4' height='6'/%3E%3Crect x='980' y='230' width='4' height='6'/%3E%3Crect x='1290' y='220' width='4' height='6'/%3E%3Crect x='1480' y='250' width='4' height='6'/%3E%3C/g%3E %3Cg fill='%2300f0ff' opacity='.5'%3E%3Crect x='180' y='240' width='4' height='6'/%3E%3Crect x='420' y='210' width='4' height='6'/%3E%3Crect x='430' y='224' width='4' height='6'/%3E%3Crect x='760' y='170' width='4' height='6'/%3E%3Crect x='1110' y='200' width='4' height='6'/%3E%3Crect x='1360' y='180' width='4' height='6'/%3E%3Crect x='1370' y='194' width='4' height='6'/%3E%3C/g%3E %3Cg fill='%23ff2a6d' opacity='.5'%3E%3Crect x='250' y='190' width='4' height='6'/%3E%3Crect x='520' y='250' width='4' height='6'/%3E%3Crect x='870' y='160' width='4' height='6'/%3E%3Crect x='1200' y='240' width='4' height='6'/%3E%3Crect x='1540' y='200' width='4' height='6'/%3E%3C/g%3E %3Crect x='352' y='130' width='5' height='60' fill='%23ff2a6d' opacity='.8'/%3E%3Crect x='1062' y='120' width='5' height='70' fill='%2300f0ff' opacity='.8'/%3E%3Crect x='705' y='150' width='34' height='5' fill='%23fcee0a' opacity='.7'/%3E%3C/svg%3E"); --rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' stroke='%23a8dcff' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M20 10l-6 22' stroke-opacity='.35'/%3E%3Cpath d='M80 60l-6 22' stroke-opacity='.25'/%3E%3Cpath d='M150 20l-6 22' stroke-opacity='.3'/%3E%3Cpath d='M210 90l-6 22' stroke-opacity='.25'/%3E %3Cpath d='M40 130l-6 22' stroke-opacity='.3'/%3E%3Cpath d='M120 160l-6 22' stroke-opacity='.35'/%3E%3Cpath d='M190 190l-6 22' stroke-opacity='.25'/%3E%3Cpath d='M60 210l-6 22' stroke-opacity='.25'/%3E%3Cpath d='M230 150l-6 22' stroke-opacity='.3'/%3E%3C/svg%3E"); } :root[data-theme="cyberpunk"] body { background: var(--skyline) 0 100% / 1600px 340px repeat-x, radial-gradient(ellipse 60% 30% at 30% 100%, rgba(255, 42, 109, .28), transparent 70%), radial-gradient(ellipse 50% 28% at 75% 100%, rgba(0, 240, 255, .2), transparent 70%), linear-gradient(#050508 40%, #0d0820); background-attachment: fixed; } /* scan lines, and the rain slanting down */ :root[data-theme="cyberpunk"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 240, 255, .03) 2px 3px); } :root[data-theme="cyberpunk"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--rain) 0 0 / 240px 240px; animation: cyber-rain .7s linear infinite; } @keyframes cyber-rain { to { background-position: -66px 240px; } } /* a failing neon sign, and a glitch now and then */ @keyframes cyber-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } } @keyframes cyber-glitch { 0%, 94%, 100% { text-shadow: var(--split); transform: none; } 95% { text-shadow: -3px 0 #ff2a6d, 3px 0 #00f0ff; transform: translateX(2px); } 97% { text-shadow: 3px 1px #ff2a6d, -2px -1px #00f0ff; transform: translateX(-2px) skewX(-8deg); } 98% { text-shadow: -1px 0 #ff2a6d, 2px 0 #00f0ff; transform: translateX(1px); } } /* plain text never shadows (the page's own outlines are for other themes); headings split in two */ :root[data-theme="cyberpunk"] * { text-shadow: none; } :root[data-theme="cyberpunk"] :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fcee0a; text-shadow: var(--split); } :root[data-theme="cyberpunk"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: #fcee0a; } :root[data-theme="cyberpunk"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title) { animation: cyber-glitch 7s steps(1) infinite; } :root[data-theme="cyberpunk"] .dash-grid .panel:nth-child(odd) .panel-head h2 { animation-delay: -3.1s; } :root[data-theme="cyberpunk"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .5em; vertical-align: -.06em; background: var(--chip) center / contain no-repeat; } :root[data-theme="cyberpunk"] .dh-name h1 { text-transform: none; letter-spacing: .03em; } :root[data-theme="cyberpunk"] ::selection { background: #ff2a6d; color: #050508; } :root[data-theme="cyberpunk"] :focus-visible { outline: 2px solid #00f0ff; outline-offset: 2px; } :root[data-theme="cyberpunk"] a { color: #00f0ff; } :root[data-theme="cyberpunk"] a:hover { color: #fcee0a; } /* the top bar: black, a neon edge, the name flickering */ :root[data-theme="cyberpunk"] .topbar { background: linear-gradient(#0b0b12, #050508); border-bottom: 1px solid #ff2a6d; box-shadow: 0 1px 14px rgba(255, 42, 109, .45); } :root[data-theme="cyberpunk"] .logo-text .l2 { color: #fcee0a; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 0 8px rgba(252, 238, 10, .6), var(--split); animation: cyber-flicker 7s steps(1) infinite; } :root[data-theme="cyberpunk"] .logo-text .l2-card { color: #00f0ff; } :root[data-theme="cyberpunk"] .header-stats { color: #9fb3c4; font-family: var(--font-display); letter-spacing: .04em; } :root[data-theme="cyberpunk"] .header-stats b { color: #fcee0a; } /* tabs and buttons: cut corners, cyan outlines that fill on hover; chosen is yellow, go is neon red */ :root[data-theme="cyberpunk"] :is(.tabs > a, .tools-btn, .btn, .icon-btn, .page-chip, .mini-chip, .bell, .shape-tile) { clip-path: var(--cut-sm); background: #12121a; color: #e9f6ff; border: 1px solid #00f0ff; border-radius: 0; box-shadow: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; filter: none; } :root[data-theme="cyberpunk"] :is(.tabs > a, .tools-btn) { letter-spacing: .04em; padding-left: 12px; padding-right: 12px; } :root[data-theme="cyberpunk"] :is(.tabs > a, .tools-btn, .btn, .icon-btn, .page-chip, .mini-chip, .bell, .shape-tile):hover { background: #00f0ff; color: #050508; transform: none; box-shadow: none; } :root[data-theme="cyberpunk"] :is(.tabs > a, .tools-btn, .btn, .icon-btn, .page-chip, .mini-chip, .bell, .shape-tile, .seg):focus-visible { outline-offset: -4px; outline-color: #fcee0a; } :root[data-theme="cyberpunk"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on, .seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: #fcee0a; color: #050508; border-color: #fcee0a; outline: 0; } :root[data-theme="cyberpunk"] .btn.go, :root[data-theme="cyberpunk"] .btn.go:hover { background: #ff2a6d; color: #050508; border-color: #ff2a6d; } :root[data-theme="cyberpunk"] .bell:hover svg { filter: brightness(.2); } :root[data-theme="cyberpunk"] .seg { clip-path: var(--cut-sm); background: #07070a; border: 1px solid #00f0ff; border-radius: 0; box-shadow: none; } :root[data-theme="cyberpunk"] .seg-btn { color: #e9f6ff; text-transform: uppercase; font-family: var(--font-display); letter-spacing: .04em; } :root[data-theme="cyberpunk"] .seg-btn:hover { background: rgba(0, 240, 255, .18); } :root[data-theme="cyberpunk"] .seg-btn + .seg-btn { border-left: 1px solid #00f0ff; } /* panels: cut corners, a yellow edge down the left, hazard stripes at the foot */ :root[data-theme="cyberpunk"] :is(.panel:not(.searchbar), .dialog-card, .bignum, .deck-tile, .toast, .tools-list) { clip-path: var(--cut); } :root[data-theme="cyberpunk"] :is(.panel, .dialog-card, .modal-card) { background: var(--hazard) right 16px bottom 0 / 72px 5px no-repeat, linear-gradient(rgba(0, 240, 255, .04), transparent 40%), #0b0b10; border: 1px solid #22222e; border-left: 3px solid #fcee0a; border-radius: 0; box-shadow: none; } :root[data-theme="cyberpunk"] .modal-top { background: #0b0b10; border-bottom: 1px solid #ff2a6d; } :root[data-theme="cyberpunk"] .modal-backdrop { background: rgba(5, 5, 8, .85); } :root[data-theme="cyberpunk"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #07070a; color: #e9f6ff; border: 1px solid #00f0ff; border-radius: 0; box-shadow: inset 3px 0 0 rgba(0, 240, 255, .35); } :root[data-theme="cyberpunk"] input[type="checkbox"] { appearance: none; width: 17px; height: 17px; flex: none; cursor: pointer; background: #07070a; border: 1px solid #00f0ff; } :root[data-theme="cyberpunk"] input[type="checkbox"]:checked { background: #fcee0a; border-color: #fcee0a; box-shadow: inset 0 0 0 3px #07070a; } /* the rest: tiles, the menu, a system line for a message, a spinning frame */ :root[data-theme="cyberpunk"] :is(.tile, .deck-tile) { border: 1px solid #22222e; border-radius: 0; box-shadow: none; } :root[data-theme="cyberpunk"] .tile:is(:hover, :focus-within) { box-shadow: 0 0 0 1px #00f0ff, 0 0 18px rgba(0, 240, 255, .35); } :root[data-theme="cyberpunk"] .deck-tile:hover { border-color: #00f0ff; transform: none; } :root[data-theme="cyberpunk"] .bignum { border: 0; border-radius: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); } :root[data-theme="cyberpunk"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: #0b0b10; border: 1px solid #22222e; border-left: 3px solid #00f0ff; border-radius: 0; box-shadow: none; } :root[data-theme="cyberpunk"] .spinner { border: 2px solid #00f0ff; border-radius: 0; background: none; clip-path: var(--cut-sm); box-shadow: inset 0 0 0 4px #050508, inset 0 0 0 7px #ff2a6d; animation: cyber-spin 1.1s steps(8) infinite; } @keyframes cyber-spin { to { transform: rotate(360deg); } } :root[data-theme="cyberpunk"] .tools-list { background: linear-gradient(rgba(0, 240, 255, .05), transparent 40%), #08080c; border: 1px solid #fcee0a; border-radius: 0; box-shadow: none; } :root[data-theme="cyberpunk"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 0; color: #e9f6ff; } :root[data-theme="cyberpunk"] .tools-list :is(a, button) b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; } :root[data-theme="cyberpunk"] .tools-list :is(a, button) span { color: #9fb3c4; } :root[data-theme="cyberpunk"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="cyberpunk"] .tools-list a[aria-current="page"] { background: #fcee0a; color: #050508; outline: 0; } :root[data-theme="cyberpunk"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="cyberpunk"] .tools-list a[aria-current="page"] span { color: #2a2600; } :root[data-theme="cyberpunk"] .tools-sep { height: 5px; border: 0; background: var(--hazard); opacity: .85; } :root[data-theme="cyberpunk"] .toast { background: #08080c; color: #e9f6ff; border: 1px solid #00f0ff; border-left: 4px solid #fcee0a; border-radius: 0; box-shadow: none; font-family: var(--font-display); letter-spacing: .04em; } :root[data-theme="cyberpunk"] .toast::before { content: 'SYS // ' / ''; color: #00f0ff; font-weight: 700; } :root[data-theme="cyberpunk"] .site-footer { background: #08080c; border: 1px solid #22222e; border-left: 3px solid #fcee0a; border-radius: 0; color: #9fb3c4; } /* scroll bars: a thin yellow rail */ :root[data-theme="cyberpunk"]::-webkit-scrollbar, :root[data-theme="cyberpunk"] ::-webkit-scrollbar { width: 9px; height: 9px; } :root[data-theme="cyberpunk"]::-webkit-scrollbar-track, :root[data-theme="cyberpunk"] ::-webkit-scrollbar-track { background: #050508; } :root[data-theme="cyberpunk"]::-webkit-scrollbar-thumb, :root[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb { background: #fcee0a; } :root[data-theme="cyberpunk"]::-webkit-scrollbar-thumb:hover, :root[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb:hover { background: #00f0ff; } /* ==== Retrofuturism =============================================================================== The future as the 1950s and '60s pictured it. A twilight sky shading to a sunset over the desert mesas, a ringed planet hanging in it and atomic starbursts twinkling; along the bottom of the screen a Googie skyline (a saucer-topped tower, a pair of arches holding a flying-saucer restaurant, a dome of porthole windows, a diner under a boomerang roof with its starburst sign, a porthole tower and a rocket on its gantry) and a monorail that glides along its beam. The top bar is turquoise enamel over a band of chrome, the name in a diner's script; tabs are chrome-ringed enamel pills, the open one lit coral. Panels are cream enamel in chrome rims with a turquoise band across the top, an atom before each heading in wide space-age capitals; buttons are enamel pills, go in turquoise; a message comes up on a dark capsule beside a starburst, and the busy sign is the atom, spinning. The phone's bars follow the turquoise top bar, so Settings counts this among the dark themes although its panels are light. */ :root[data-theme="retro"] { --bg: #13213d; --bg-deep: #1d6e78; --bg-blob: #13213d; --panel: #fdf3e1; --panel-2: #f7e8cc; --panel-3: #efd9b0; --well: #fffaf0; --text: #1f2433; --muted: #5a5348; --faint: #8a8070; --paper: #fffaf0; --paper-ink: #1f2433; --pink: #e2504a; --lime: #5a8a14; --cyan: #12899a; --violet: #8f60d6; --orange: #d2621a; --yellow: #a57a00; --mint: #0f8f7a; --peach: #cf6a4a; --pink-text: #b83a30; --pink-soft: #a03028; --flat: #efd9b0; --tile-uncommon: #e6f2f0; --tile-rare: #fbf0d6; --tile-mythic: #fbe2d8; --zebra: #f8ecd6; --grid: #efd9b0; --grid-2: #dcc496; --drop: #f7e8cc; --hatch: #e6cfa2; --tint-pink: #f9d9d2; --tint-magenta: #efdcec; --tint-green: #e0eccb; --legend-miss: #dcc496; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 2px solid #c9b48a; --line-thick: 3px solid #0e6f7d; --shadow: 8px 8px 0 rgba(10, 20, 40, .35); --shadow-sm: 4px 4px 0 rgba(10, 20, 40, .3); --blob: 26px; --blob-sm: 14px; --pill: 999px; /* this Eurostile comes only in bold, oblique and extended, so it is used only where the type is bold */ --font-display: 'Century Gothic', 'Tw Cen MT', 'Avenir Next', 'Segoe UI', sans-serif; --font-label: Eurostile, 'Microgramma', 'Century Gothic', 'Tw Cen MT', 'Avenir Next', sans-serif; --font-wide: 'Eurostile Extended', Eurostile, 'Century Gothic', 'Avenir Next', sans-serif; --font-body: 'Century Gothic', 'Tw Cen MT', 'Avenir Next', 'Segoe UI', sans-serif; --font-script: Magneto, 'Brush Script MT', 'Segoe Script', cursive; --teal: #1d6e78; --teal-deep: #0e6f7d; --coral: #c8402e; --navy: #13213d; --chrome: linear-gradient(160deg, #ffffff, #cfd6dd 30%, #8d98a5 52%, #e4e9ee 70%, #a7b2bd); --chrome-band: linear-gradient(#ffffff, #c4ccd4 40%, #7d8895 55%, #d9dfe5 80%, #9aa5b1); --chrome-ring: 0 0 0 2px #e4e9ee, 0 0 0 3px #8d98a5; --skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='320'%3E%3Cpath d='M0 300V250L60 246L90 226H190L214 248L330 252L360 232H470L500 254L640 256L700 238H820L846 258L1000 260L1030 236H1150L1180 256L1320 258L1350 240H1470L1500 254L1600 250V300Z' fill='%234a3f6b' fill-opacity='.85'/%3E%3Cpath d='M140 300L147 112H153L160 300Z' fill='%231f5a68'/%3E%3Cpath d='M128 300L147 180M172 300L153 180' stroke='%231f5a68' stroke-width='4'/%3E%3Cellipse cx='150' cy='104' rx='48' ry='10' fill='%23f3e3c3' stroke='%232f7f8f' stroke-width='3'/%3E%3Cellipse cx='150' cy='92' rx='28' ry='8' fill='%232f7f8f'/%3E%3Ccircle cx='132' cy='92' r='2.4' fill='%23ffd36b'/%3E%3Ccircle cx='144' cy='92' r='2.4' fill='%23173f4c'/%3E%3Ccircle cx='156' cy='92' r='2.4' fill='%23ffd36b'/%3E%3Ccircle cx='168' cy='92' r='2.4' fill='%23ffd36b'/%3E%3Cpath d='M150 84V44' stroke='%23c9d1d9' stroke-width='3'/%3E%3Ccircle cx='150' cy='40' r='5' fill='%23e2504a'/%3E%3Cpath d='M350 300Q430 110 510 300' fill='none' stroke='%23f3e3c3' stroke-width='8'/%3E%3Cpath d='M370 300Q430 140 490 300' fill='none' stroke='%232f7f8f' stroke-width='6'/%3E%3Cellipse cx='430' cy='196' rx='44' ry='11' fill='%23f3e3c3' stroke='%23e2504a' stroke-width='3'/%3E%3Cpath d='M400 196h60' stroke='%232f7f8f' stroke-width='3' stroke-dasharray='6 4'/%3E%3Crect x='424' y='206' width='12' height='94' fill='%231f5a68'/%3E%3Cpath d='M616 300A84 84 0 0 1 784 300Z' fill='%232f7f8f'/%3E%3Cpath d='M616 300A84 84 0 0 1 784 300' fill='none' stroke='%23f3e3c3' stroke-width='3'/%3E%3Cpath d='M640 258H760' stroke='%23f3e3c3' stroke-width='2' stroke-opacity='.6'/%3E%3Ccircle cx='656' cy='244' r='5' fill='%23173f4c'/%3E%3Ccircle cx='678' cy='244' r='5' fill='%23ffd36b'/%3E%3Ccircle cx='700' cy='244' r='5' fill='%23173f4c'/%3E%3Ccircle cx='722' cy='244' r='5' fill='%23ffd36b'/%3E%3Ccircle cx='744' cy='244' r='5' fill='%23173f4c'/%3E%3Ccircle cx='656' cy='274' r='5' fill='%23ffd36b'/%3E%3Ccircle cx='678' cy='274' r='5' fill='%23173f4c'/%3E%3Ccircle cx='700' cy='274' r='5' fill='%23ffd36b'/%3E%3Ccircle cx='722' cy='274' r='5' fill='%23173f4c'/%3E%3Ccircle cx='744' cy='274' r='5' fill='%23ffd36b'/%3E%3Cpath d='M700 216V186' stroke='%23c9d1d9' stroke-width='3'/%3E%3Ccircle cx='700' cy='182' r='4' fill='%23e9b44c'/%3E%3Crect x='890' y='252' width='170' height='48' fill='%23f3e3c3'/%3E%3Crect x='900' y='262' width='150' height='26' fill='%237fc6c9' stroke='%231f5a68' stroke-width='2'/%3E%3Cpath d='M940 262v26M980 262v26M1020 262v26' stroke='%231f5a68' stroke-width='2'/%3E%3Cpath d='M876 256L960 236L1010 250L1086 214L1076 228L1010 260L960 246L884 264Z' fill='%23e2504a'/%3E%3Crect x='1086' y='206' width='6' height='94' fill='%23c9d1d9'/%3E%3Cpath d='M1089.0 174.0L1092.5 187.5L1104.6 180.4L1097.5 192.5L1111.0 196.0L1097.5 199.5L1104.6 211.6L1092.5 204.5L1089.0 218.0L1085.5 204.5L1073.4 211.6L1080.5 199.5L1067.0 196.0L1080.5 192.5L1073.4 180.4L1085.5 187.5Z' fill='%23e9b44c'/%3E%3Ccircle cx='1089' cy='196' r='6' fill='%23e2504a'/%3E%3Crect x='1200' y='122' width='70' height='178' rx='10' fill='%231f5a68'/%3E%3Crect x='1206' y='122' width='6' height='178' fill='%232f7f8f'/%3E%3Ccircle cx='1220' cy='140' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1234' cy='140' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='140' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='140' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1220' cy='158' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1234' cy='158' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='158' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1258' cy='158' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1220' cy='176' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1234' cy='176' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1248' cy='176' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='176' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1220' cy='194' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1234' cy='194' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='194' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='194' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1220' cy='212' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1234' cy='212' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='212' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1258' cy='212' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1220' cy='230' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1234' cy='230' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1248' cy='230' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='230' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1220' cy='248' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1234' cy='248' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='248' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='248' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1220' cy='266' r='4' fill='%23ffd36b'/%3E%3Ccircle cx='1234' cy='266' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1248' cy='266' r='4' fill='%23173f4c'/%3E%3Ccircle cx='1258' cy='266' r='4' fill='%23173f4c'/%3E%3Cpath d='M1235 122V96' stroke='%23c9d1d9' stroke-width='3'/%3E%3Ccircle cx='1235' cy='88' r='9' fill='%23f3e3c3'/%3E%3Cellipse cx='1235' cy='88' rx='16' ry='4' fill='none' stroke='%23e2504a' stroke-width='2'/%3E%3Crect x='1414' y='112' width='4' height='188' fill='%238d98a5'/%3E%3Crect x='1436' y='112' width='4' height='188' fill='%238d98a5'/%3E%3Cpath d='M1416 120h22M1416 120l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 140h22M1416 140l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 160h22M1416 160l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 180h22M1416 180l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 200h22M1416 200l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 220h22M1416 220l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 240h22M1416 240l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 260h22M1416 260l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1416 280h22M1416 280l22 20' stroke='%238d98a5' stroke-width='2'/%3E%3Cpath d='M1438 286L1420 300H1444ZM1482 286L1500 300H1476Z' fill='%23e2504a'/%3E%3Cpath d='M1440 290V170Q1440 120 1460 96Q1480 120 1480 170V290Z' fill='%23f3e3c3'/%3E%3Cpath d='M1460 96Q1448 110 1444 132H1476Q1472 110 1460 96Z' fill='%23e2504a'/%3E%3Crect x='1440' y='240' width='40' height='8' fill='%23e2504a'/%3E%3Ccircle cx='1460' cy='170' r='8' fill='%237fc6c9' stroke='%23c9d1d9' stroke-width='3'/%3E%3Cpath d='M1440 290L1424 302H1496L1480 290Z' fill='%235a6472'/%3E%3Cpath d='M65 217H75V300H65Z M54 217H86L75 228H65Z' fill='%237d8895'/%3E%3Cpath d='M325 217H335V300H325Z M314 217H346L335 228H325Z' fill='%237d8895'/%3E%3Cpath d='M585 217H595V300H585Z M574 217H606L595 228H585Z' fill='%237d8895'/%3E%3Cpath d='M845 217H855V300H845Z M834 217H866L855 228H845Z' fill='%237d8895'/%3E%3Cpath d='M1105 217H1115V300H1105Z M1094 217H1126L1115 228H1105Z' fill='%237d8895'/%3E%3Cpath d='M1365 217H1375V300H1365Z M1354 217H1386L1375 228H1365Z' fill='%237d8895'/%3E%3Crect y='208' width='1600' height='10' fill='%23c9d1d9'/%3E%3Crect y='215' width='1600' height='3' fill='%237d8895'/%3E%3Crect y='300' width='1600' height='20' fill='%231d2f4a'/%3E%3Crect y='300' width='1600' height='2' fill='%23e9b44c' fill-opacity='.6'/%3E%3C/svg%3E"); --train: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='36'%3E%3Cpath d='M6 34V14Q6 6 16 6H84Q94 6 94 14V34Z' fill='%23f3e3c3' stroke='%231f5a68' stroke-width='1.5'/%3E%3Crect x='6' y='24' width='88' height='5' fill='%232f7f8f'/%3E%3Ccircle cx='20' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='35' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='50' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='65' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='80' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Cpath d='M100 34V14Q100 6 110 6H178Q188 6 188 14V34Z' fill='%23f3e3c3' stroke='%231f5a68' stroke-width='1.5'/%3E%3Crect x='100' y='24' width='88' height='5' fill='%232f7f8f'/%3E%3Ccircle cx='114' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='129' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='144' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='159' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='174' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Cpath d='M194 34V14Q194 6 204 6H264Q298 8 298 30V34Z' fill='%23f3e3c3' stroke='%231f5a68' stroke-width='1.5'/%3E%3Crect x='194' y='24' width='100' height='5' fill='%232f7f8f'/%3E%3Ccircle cx='208' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='223' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='238' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Ccircle cx='253' cy='16' r='4.5' fill='%23ffd36b' stroke='%231f5a68' stroke-width='1'/%3E%3Cpath d='M288 12Q298 14 298 30H288Z' fill='%23e2504a'/%3E%3Crect x='94' y='22' width='6' height='6' fill='%237d8895'/%3E%3Crect x='188' y='22' width='6' height='6' fill='%237d8895'/%3E%3C/svg%3E"); --planet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='110'%3E%3Cdefs%3E%3CradialGradient id='p' cx='.35' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23ffc9a8'/%3E%3Cstop offset='.6' stop-color='%23e8806a'/%3E%3Cstop offset='1' stop-color='%23a8475a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M18 66Q85 30 152 52' fill='none' stroke='%23f3e3c3' stroke-width='7' stroke-opacity='.75'/%3E%3Ccircle cx='85' cy='55' r='38' fill='url(%23p)'/%3E%3Cpath d='M20 70Q85 92 150 50' fill='none' stroke='%23f3e3c3' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); --starbursts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='420'%3E%3Cpath d='M60.0 41.0L61.8 48.2L69.0 50.0L61.8 51.8L60.0 59.0L58.2 51.8L51.0 50.0L58.2 48.2Z' fill='%23e9b44c'/%3E%3Cpath d='M210.0 114.0L211.2 118.8L216.0 120.0L211.2 121.2L210.0 126.0L208.8 121.2L204.0 120.0L208.8 118.8Z' fill='%23fdf3e1'/%3E%3Cpath d='M330.0 28.0L332.4 37.6L342.0 40.0L332.4 42.4L330.0 52.0L327.6 42.4L318.0 40.0L327.6 37.6Z' fill='%23fdf3e1'/%3E%3Cpath d='M470.0 143.0L471.4 148.6L477.0 150.0L471.4 151.4L470.0 157.0L468.6 151.4L463.0 150.0L468.6 148.6Z' fill='%23e9b44c'/%3E%3Cpath d='M590.0 60.0L592.0 68.0L600.0 70.0L592.0 72.0L590.0 80.0L588.0 72.0L580.0 70.0L588.0 68.0Z' fill='%23fdf3e1'/%3E%3Cpath d='M120.0 225.0L121.0 229.0L125.0 230.0L121.0 231.0L120.0 235.0L119.0 231.0L115.0 230.0L119.0 229.0Z' fill='%23fdf3e1'/%3E%3Cpath d='M400.0 252.0L401.6 258.4L408.0 260.0L401.6 261.6L400.0 268.0L398.4 261.6L392.0 260.0L398.4 258.4Z' fill='%23e9b44c'/%3E%3Cpath d='M650.0 214.0L651.2 218.8L656.0 220.0L651.2 221.2L650.0 226.0L648.8 221.2L644.0 220.0L648.8 218.8Z' fill='%23fdf3e1'/%3E%3Cpath d='M260.0 323.0L261.4 328.6L267.0 330.0L261.4 331.4L260.0 337.0L258.6 331.4L253.0 330.0L258.6 328.6Z' fill='%23fdf3e1'/%3E%3Cpath d='M540.0 351.0L541.8 358.2L549.0 360.0L541.8 361.8L540.0 369.0L538.2 361.8L531.0 360.0L538.2 358.2Z' fill='%23e9b44c'/%3E%3Ccircle cx='150' cy='80' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='280' cy='200' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='520' cy='30' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='620' cy='140' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='40' cy='300' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='360' cy='180' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='470' cy='300' r='1.6' fill='%23fdf3e1'/%3E%3Ccircle cx='680' cy='390' r='1.6' fill='%23fdf3e1'/%3E%3C/svg%3E"); --atom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%230e6f7d' stroke-width='1.6' transform='rotate(0 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%230e6f7d' stroke-width='1.6' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%230e6f7d' stroke-width='1.6' transform='rotate(120 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23e2504a'/%3E%3C/svg%3E"); --atom-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%23fdf3e1' stroke-width='1.6' transform='rotate(0 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%23fdf3e1' stroke-width='1.6' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%23fdf3e1' stroke-width='1.6' transform='rotate(120 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23e9b44c'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.4l2.4 2.4 4.8-5.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%230e6f7d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.0 1.0L13.8 7.7L19.8 4.2L16.3 10.2L23.0 12.0L16.3 13.8L19.8 19.8L13.8 16.3L12.0 23.0L10.2 16.3L4.2 19.8L7.7 13.8L1.0 12.0L7.7 10.2L4.2 4.2L10.2 7.7Z' fill='%23e9b44c'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23e2504a'/%3E%3C/svg%3E"); } /* the sky at twilight, the planet, and the skyline along the bottom */ :root[data-theme="retro"] body { background: var(--skyline) left bottom / 1600px 320px repeat-x, var(--planet) right 6vw top 96px / 170px 110px no-repeat, linear-gradient(#0f1a33 0%, #1b3456 32%, #2d6a83 60%, #e88a6a 85%, #f4c27a 100%); background-attachment: fixed; } /* atomic starbursts twinkling, and the monorail gliding along its beam */ :root[data-theme="retro"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--starbursts) 0 0 / 700px 420px; animation: retro-twinkle 3.6s ease-in-out infinite alternate; } :root[data-theme="retro"] body::after { content: ''; position: fixed; left: 0; bottom: 112px; width: 300px; height: 36px; z-index: -1; pointer-events: none; background: var(--train) 0 0 / 300px 36px no-repeat; animation: retro-monorail 26s linear infinite; } @keyframes retro-twinkle { from { opacity: .45; } to { opacity: 1; } } @keyframes retro-monorail { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 20px)); } } :root[data-theme="retro"] * { text-shadow: none !important; } :root[data-theme="retro"] :is(h1, h2, h3, h4) { font-family: var(--font-wide); font-weight: 700; color: #fdf3e1; letter-spacing: .03em; text-transform: uppercase; } :root[data-theme="retro"] :is(.panel, .dialog-card, .modal-card) :is(h1, h2, h3, h4) { color: #10535c; } :root[data-theme="retro"] .dh-name h1 { text-transform: none; } :root[data-theme="retro"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.16em; background: var(--atom) center / contain no-repeat; } /* headings and labels out on the sky stand on plates, since the sky runs from night to sunset */ :root[data-theme="retro"] :is(h2.area-title, h3.year-head) { display: inline-block; width: fit-content; padding: 6px 18px 5px 12px; color: #fdf3e1; background: linear-gradient(#2c8f9a, var(--teal)); border-radius: 999px; box-shadow: var(--chrome-ring), var(--shadow-sm); } :root[data-theme="retro"] :is(h2.area-title, h3.year-head)::before { background-image: var(--atom-light); } :root[data-theme="retro"] :is(.result-count, .sort-caption) { display: inline-block; padding: 3px 12px; color: #fdf3e1; background: rgba(19, 33, 61, .78); border-radius: 999px; } :root[data-theme="retro"] :is(.result-count .muted, .result-count b) { color: #fdf3e1; } :root[data-theme="retro"] ::selection { background: var(--teal-deep); color: #ffffff; } :root[data-theme="retro"] :focus-visible { outline: 3px solid #e9b44c; outline-offset: 2px; } :root[data-theme="retro"] a { color: #0e6f7d; } /* the top bar: turquoise enamel over a band of chrome, the name in a diner's script */ :root[data-theme="retro"] .topbar { background: linear-gradient(#2c8f9a, var(--teal) 60%, #175a63); border-bottom: 0; box-shadow: 0 8px 18px rgba(10, 20, 40, .45); padding-bottom: 18px; } :root[data-theme="retro"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--chrome-band); pointer-events: none; } :root[data-theme="retro"] .logo-text .l2 { font-family: var(--font-script); font-weight: 400; font-size: 1.7rem; color: #fdf3e1; letter-spacing: 0; } :root[data-theme="retro"] .logo-text .l2-card { color: #ffcf7a; } @media (max-width: 700px) { :root[data-theme="retro"] .logo-text .l2 { font-size: 1.35rem; } } :root[data-theme="retro"] .header-stats { color: #cfeceb; font-family: var(--font-label); font-weight: 700; letter-spacing: .03em; } :root[data-theme="retro"] .header-stats b { color: #ffcf7a; } :root[data-theme="retro"] .bell { background: linear-gradient(#fffaf0, #f1e2c4); border: 0; border-radius: 50%; box-shadow: var(--chrome-ring), 0 4px 0 rgba(10, 20, 40, .35); } :root[data-theme="retro"] :is(.bell, .bell.gear):hover { transform: translateY(-1px); box-shadow: var(--chrome-ring), 0 0 14px rgba(255, 207, 122, .7); } :root[data-theme="retro"] .bell[aria-current] { background: radial-gradient(circle at 40% 35%, #f07a62, var(--coral)); } /* tabs: chrome-ringed enamel pills; the open page's is lit coral */ :root[data-theme="retro"] :is(.tabs > a, .tools-btn) { background: linear-gradient(#fffaf0, #f1e2c4); color: #10535c; border: 0; border-radius: 999px; box-shadow: var(--chrome-ring), 0 3px 0 3px rgba(10, 20, 40, .3), inset 0 1px 0 #ffffff; filter: none; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 7px 16px; } :root[data-theme="retro"] :is(.tabs > a, .tools-btn):hover { background: linear-gradient(#ffffff, #f6ead2); color: #10535c; transform: translateY(-1px); box-shadow: var(--chrome-ring), 0 0 14px rgba(255, 207, 122, .6); } :root[data-theme="retro"] :is(.tabs > a[aria-current="page"], .tools-btn[aria-expanded="true"], .tools-btn.on) { background: radial-gradient(ellipse at 50% 30%, #e86a52, var(--coral) 70%); color: #ffffff; box-shadow: var(--chrome-ring), 0 0 16px rgba(226, 80, 74, .7); } /* panels: cream enamel in a chrome rim, a turquoise band across the top */ :root[data-theme="retro"] :is(.panel, .dialog-card, .modal-card) { border: 3px solid transparent; border-radius: 26px; box-shadow: var(--shadow); background: linear-gradient(#2c8f9a, var(--teal)) top / 100% 10px no-repeat padding-box, linear-gradient(var(--panel), var(--panel)) padding-box, var(--chrome) border-box; } :root[data-theme="retro"] :is(.panel, .dialog-card) { padding-top: 24px; } :root[data-theme="retro"] .modal-top { background: linear-gradient(#2c8f9a, var(--teal)); border-bottom: 0; color: #fdf3e1; box-shadow: 0 4px 0 #c4ccd4; } :root[data-theme="retro"] .modal-top .nav-count { color: #fdf3e1; } :root[data-theme="retro"] .modal-backdrop { background: rgba(10, 18, 36, .78); } /* buttons: enamel pills; go is turquoise; a chosen one is lit coral */ :root[data-theme="retro"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: linear-gradient(#fffaf0, #f1e2c4); color: #10535c; border: 0; border-radius: 999px; box-shadow: var(--chrome-ring), 0 3px 0 3px rgba(10, 20, 40, .22); filter: none; font-family: var(--font-label); font-weight: 700; letter-spacing: .04em; } :root[data-theme="retro"] .shape-tile { border-radius: 18px; } :root[data-theme="retro"] .icon-btn { border-radius: 50%; } :root[data-theme="retro"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: linear-gradient(#ffffff, #f6ead2); color: #10535c; transform: translateY(-1px); box-shadow: var(--chrome-ring), 0 0 14px rgba(255, 207, 122, .55); filter: none; } :root[data-theme="retro"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):active { transform: translateY(2px); box-shadow: var(--chrome-ring); } :root[data-theme="retro"] .btn.go, :root[data-theme="retro"] .btn.go:hover { background: linear-gradient(#1d8a98, var(--teal-deep)); color: #ffffff; } :root[data-theme="retro"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open, .icon-btn.star.on, .btn.on) { background: radial-gradient(ellipse at 50% 30%, #e86a52, var(--coral) 70%); color: #ffffff; outline: 0; } :root[data-theme="retro"] .seg { background: #fffaf0; border: 0; border-radius: 999px; box-shadow: var(--chrome-ring); padding: 2px; gap: 2px; } :root[data-theme="retro"] .seg-btn { color: #10535c; border-radius: 999px; font-family: var(--font-label); font-weight: 700; } :root[data-theme="retro"] .seg-btn:hover { background: #f6ead2; } :root[data-theme="retro"] .seg-btn + .seg-btn { border-left: 0; } :root[data-theme="retro"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]) { background-color: #fffaf0; color: var(--text); border: 0; border-radius: 14px; box-shadow: inset 0 2px 4px rgba(10, 20, 40, .12), var(--chrome-ring); } :root[data-theme="retro"] :is(.text-input, .select, .num-input, textarea, input[type="search"], input[type="text"], input[type="number"]):focus-visible { outline: 3px solid #e9b44c; outline-offset: 2px; } :root[data-theme="retro"] .select { background-image: var(--chevron); background-position: right 12px center; background-size: 12px 8px; background-repeat: no-repeat; } :root[data-theme="retro"] input[type="checkbox"] { appearance: none; width: 18px; height: 18px; flex: none; cursor: pointer; background: #fffaf0; border: 0; border-radius: 6px; box-shadow: inset 0 1px 2px rgba(10, 20, 40, .2), var(--chrome-ring); } :root[data-theme="retro"] input[type="checkbox"]:checked { background: var(--check) center / 12px 12px no-repeat, var(--teal-deep); } /* the rest: enamel totals and tiles, a control-panel menu, a capsule for messages, the spinning atom */ :root[data-theme="retro"] .bignum { border: 0; border-radius: 18px; background-image: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%); box-shadow: var(--chrome-ring), var(--shadow-sm); } :root[data-theme="retro"] :is(.tile, .deck-tile) { border: 0; border-radius: 14px; box-shadow: var(--chrome-ring), var(--shadow-sm); } :root[data-theme="retro"] .tile:is(:hover, :focus-within), :root[data-theme="retro"] .deck-tile:hover { box-shadow: var(--chrome-ring), 0 0 0 6px rgba(18, 137, 154, .5), var(--shadow-sm); } :root[data-theme="retro"] .deck-tile:hover { transform: translateY(-3px); } :root[data-theme="retro"] .ring { background: var(--well); } :root[data-theme="retro"] :is(.page-nav, .select-bar, .job-banner:not(.good, .bad)) { background: linear-gradient(#2c8f9a, var(--teal)); color: #fdf3e1; border: 0; border-radius: 999px; box-shadow: var(--chrome-ring), var(--shadow-sm); } :root[data-theme="retro"] .job-banner:not(.good, .bad) .link-btn { color: #ffcf7a; } :root[data-theme="retro"] .job-banner:is(.good, .bad) { border: 0; border-radius: 999px; box-shadow: var(--chrome-ring); } :root[data-theme="retro"] .spinner { border: 0; border-radius: 0; background: var(--atom) center / contain no-repeat; animation: retro-spin 1.4s linear infinite; } @keyframes retro-spin { to { transform: rotate(360deg); } } :root[data-theme="retro"] .tools-list { border: 3px solid transparent; border-radius: 22px; box-shadow: var(--shadow); background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--chrome) border-box; padding: 8px; gap: 2px; } :root[data-theme="retro"] .tools-list :is(a, button) { background: transparent; border: 0; border-radius: 14px; box-shadow: none; color: var(--text); } :root[data-theme="retro"] .tools-list :is(a, button) b { font-family: var(--font-label); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } :root[data-theme="retro"] .tools-list :is(a, button) span { color: var(--muted); } :root[data-theme="retro"] .tools-list :is(a, button):is(:hover, :focus-visible), :root[data-theme="retro"] .tools-list a[aria-current="page"] { background: var(--teal-deep); color: #ffffff; outline: 0; } :root[data-theme="retro"] .tools-list :is(a, button):is(:hover, :focus-visible) span, :root[data-theme="retro"] .tools-list a[aria-current="page"] span { color: #d8f0ef; } :root[data-theme="retro"] .tools-sep { height: 4px; margin: 4px 10px; border: 0; border-radius: 2px; background: var(--chrome-band); } :root[data-theme="retro"] .toast { background: var(--burst) 14px 50% / 26px 26px no-repeat, linear-gradient(#22345a, var(--navy)); color: #fdf3e1; border: 0; border-radius: 999px; box-shadow: var(--chrome-ring), var(--shadow-sm); font-family: var(--font-label); font-weight: 700; letter-spacing: .02em; padding: 11px 22px 11px 50px; } :root[data-theme="retro"] .site-footer { border: 3px solid transparent; border-radius: 22px; color: var(--muted); box-shadow: var(--shadow-sm); background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--chrome) border-box; } /* scroll bars: a chrome thumb on a night-sky track, or on cream inside panels */ :root[data-theme="retro"]::-webkit-scrollbar, :root[data-theme="retro"] ::-webkit-scrollbar { width: 13px; height: 13px; } :root[data-theme="retro"]::-webkit-scrollbar-track { background: var(--navy); } :root[data-theme="retro"] ::-webkit-scrollbar-track { background: var(--panel-2); } :root[data-theme="retro"]::-webkit-scrollbar-thumb, :root[data-theme="retro"] ::-webkit-scrollbar-thumb { background: var(--chrome); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; } /* ==== Hokkaido ==================================================================================== Winter in the north, and the theme the others were measured against. Snow falls over pale mountains under a winter sky; the top bar is an indigo field of seigaiha waves with a vermilion edge, and the tabs hang from it like noren curtains, slit up the middle, the open one vermilion. Panels are washi paper under a stroke of indigo ink; a vermilion seal stamps each heading; buttons are outlined in indigo and fill with it under the pointer, vermilion for go; headings are set in Mincho and the rest in Gothic. */ :root[data-theme="hokkaido"] { --bg: #e3ecf5; --bg-deep: #1f3a5f; --bg-blob: #e3ecf5; --panel: #fbf8f1; --panel-2: #f5f0e4; --panel-3: #ebe4d3; --well: #fffdf8; --text: #1b2a40; --muted: #4a5568; --faint: #7a8494; --paper: #fffdf8; --paper-ink: #1b2a40; --pink: #d0453a; --cyan: #3a7cc0; --violet: #8a62c8; --lime: #3a8a3a; --yellow: #9a7a00; --orange: #c85a1a; --mint: #008a7a; --peach: #c8603a; --pink-text: #b0322a; --pink-soft: #9a2a22; --flat: #e4dccb; --zebra: #f7f2e7; --grid: #e6dfcf; --grid-2: #d6cdb8; --drop: #f0eadc; --hatch: #ddd4c0; --legend-miss: #d6cdb8; --tile-uncommon: #eef3fb; --tile-rare: #fbf4e0; --tile-mythic: #fbeae0; --tint-pink: #fbdaea; --tint-magenta: #f5d7ee; --tint-green: #ddf2c9; --mana-W: #f3e27a; --mana-C: #c9c9c9; --mana-N: #d3d3d3; --r-common: #c8c8c8; --r-uncommon: #57c7e8; --r-rare: #e0b21a; --r-mythic: #ef6a0c; --glow-a: transparent; --glow-b: transparent; --bg-art: none; --line: 1px solid #c9bfa8; --line-thick: 2px solid #1f3a5f; --shadow: 0 6px 18px rgba(31, 58, 95, .12); --shadow-sm: 0 2px 6px rgba(31, 58, 95, .12); --blob: 3px; --blob-sm: 3px; --pill: 3px; --font-display: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Noto Serif JP', 'MS PMincho', Georgia, serif; --font-body: 'Yu Gothic UI', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif; --indigo: #1f3a5f; --vermilion: #c8372d; } :root[data-theme="hokkaido"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V230L180 200L330 225L470 150L600 40L730 150L860 210L1020 185L1200 225V300Z' fill='%23c3d2e2'/%3E%3Cpath d='M520 108L600 40L680 108L650 100L625 118L600 98L572 120L548 102Z' fill='%23ffffff'/%3E%3Cpath d='M0 300V262L240 240L420 262L640 236L880 258L1200 240V300Z' fill='%23aebfd3'/%3E%3C/svg%3E") bottom / 100% 32vh no-repeat, linear-gradient(#cfdcea, #e9f0f7 45%, #f4f7fb); background-attachment: fixed; } :root[data-theme="hokkaido"] body::before { content: ''; position: fixed; inset: -260px 0 0; z-index: -1; pointer-events: none; background-image: radial-gradient(4px 4px at 20px 30px, #ffffff 50%, transparent 51%), radial-gradient(3px 3px at 90px 140px, #ffffff 50%, transparent 51%), radial-gradient(5px 5px at 150px 60px, #ffffff 50%, transparent 51%), radial-gradient(3px 3px at 210px 190px, #ffffff 50%, transparent 51%), radial-gradient(4px 4px at 60px 220px, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 130px 250px, #ffffff 50%, transparent 51%), radial-gradient(3px 3px at 240px 100px, #ffffff 50%, transparent 51%); background-size: 260px 260px; opacity: .9; animation: hokkaido-snow 26s linear infinite; } @keyframes hokkaido-snow { to { transform: translateY(260px); } } :root[data-theme="hokkaido"] * { text-shadow: none !important; } :root[data-theme="hokkaido"] :is(h1, h2, h3, h4) { font-weight: 600; color: var(--indigo); letter-spacing: .04em; } :root[data-theme="hokkaido"] :is(.dash-grid .panel h2, .area-title, .shape-title, .stat-panel h3, .br-why, .dialog-card h2) { color: var(--indigo); } :root[data-theme="hokkaido"] :is(.panel-head h2, .area-title, .stat-panel > h3, .shape-title)::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .5em; vertical-align: -.08em; background: var(--vermilion); border-radius: 2px; box-shadow: inset 0 0 0 2px #fbf8f1, inset 0 0 0 3.5px var(--vermilion); } :root[data-theme="hokkaido"] ::selection { background: #c8372d; color: #fff; } :root[data-theme="hokkaido"] :focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; } :root[data-theme="hokkaido"] a { color: #24508a; } :root[data-theme="hokkaido"] a:hover { color: var(--vermilion); } :root[data-theme="hokkaido"] :is(.panel, .dialog-card) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7C40 3 90 4 150 5S300 3 398 6C340 9 250 8 160 9S50 10 2 7Z' fill='%231f3a5f'/%3E%3C/svg%3E") top / 100% 10px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23e9e2d2' stroke-width='.8' fill='none'%3E%3Cpath d='M10 20q20 6 34-2M60 70q18 10 40 2M20 96q14-8 30 0M80 30q10 8 26 4'/%3E%3C/g%3E%3C/svg%3E"), var(--panel); border: 1px solid #ddd3bf; border-top: 0; padding-top: 22px; } :root[data-theme="hokkaido"] .topbar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='%231f3a5f' stroke='%233a5f8f' stroke-width='1.6'%3E%3Ccircle cx='0' cy='12' r='15'/%3E%3Ccircle cx='0' cy='12' r='10'/%3E%3Ccircle cx='0' cy='12' r='5'/%3E%3Ccircle cx='48' cy='12' r='15'/%3E%3Ccircle cx='48' cy='12' r='10'/%3E%3Ccircle cx='48' cy='12' r='5'/%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/g%3E%3C/svg%3E"), var(--indigo); background-size: 48px 24px; border-bottom: 3px solid var(--vermilion); box-shadow: none; padding-bottom: 0; align-items: flex-start; } :root[data-theme="hokkaido"] .logo, :root[data-theme="hokkaido"] .bell, :root[data-theme="hokkaido"] .header-stats { margin-bottom: 10px; } :root[data-theme="hokkaido"] .logo-text .l2 { color: #fffdf8; font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; } :root[data-theme="hokkaido"] .logo-text .l2-card { color: #ffb3a8; } :root[data-theme="hokkaido"] .header-stats { color: #d5deea; } :root[data-theme="hokkaido"] .header-stats b { color: #fff; } :root[data-theme="hokkaido"] .tabs { align-self: flex-start; gap: 6px; margin-top: -10px; } :root[data-theme="hokkaido"] .tabs > a { font-family: var(--font-display); font-weight: 600; color: #fffdf8; padding: 18px 14px 12px; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 253, 248, .35) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) bottom / 100% 45% no-repeat, #274a76; border: 0; border-radius: 0 0 4px 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } :root[data-theme="hokkaido"] .tabs > a:hover { background-color: #2f5a8f; color: #fff; transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } :root[data-theme="hokkaido"] .tabs > a[aria-current="page"] { background-color: var(--vermilion); color: #fff; } :root[data-theme="hokkaido"] .tools-btn { font-family: var(--font-display); background: #274a76; color: #fffdf8; border: 0; box-shadow: none; } :root[data-theme="hokkaido"] .tools-btn:hover, :root[data-theme="hokkaido"] .tools-btn[aria-expanded="true"] { background: #2f5a8f; color: #fff; transform: none; box-shadow: none; } :root[data-theme="hokkaido"] .bell { background: #fbf8f1; border: 0; box-shadow: none; } :root[data-theme="hokkaido"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile) { background: #fffdf8; color: var(--indigo); border: 1.5px solid var(--indigo); box-shadow: none; font-weight: 600; filter: none; } :root[data-theme="hokkaido"] :is(.btn, .icon-btn, .page-chip, .mini-chip, .shape-tile):hover { background: var(--indigo); color: #fff; transform: none; box-shadow: none; } :root[data-theme="hokkaido"] :is(.seg-btn.on, .mini-chip[aria-pressed="true"], .shape-tile.open) { background: var(--indigo); color: #fff; } :root[data-theme="hokkaido"] .btn.go { background: var(--vermilion); border-color: var(--vermilion); color: #fff; } :root[data-theme="hokkaido"] .btn.go:hover { background: #a82a22; color: #fff; } :root[data-theme="hokkaido"] .seg { border: 1.5px solid var(--indigo); box-shadow: none; background: #fffdf8; } :root[data-theme="hokkaido"] .seg-btn { background: transparent; color: var(--indigo); border-color: var(--indigo) !important; } :root[data-theme="hokkaido"] :is(textarea, input[type="search"], input[type="text"], input[type="number"], .text-input, .select, .num-input) { background-color: #fffdf8; color: #1b2a40; border: 0; border-bottom: 2px solid var(--indigo); box-shadow: none; } :root[data-theme="hokkaido"] .tools-list { background: #fbf8f1; border: 1px solid #ddd3bf; } :root[data-theme="hokkaido"] .tools-list :is(a, button) { background: transparent; border: 0; box-shadow: none; } :root[data-theme="hokkaido"] .tools-list :is(a, button):is(:hover, :focus-visible) { background: var(--indigo); color: #fff; } :root[data-theme="hokkaido"] .tools-list :is(a, button):is(:hover, :focus-visible) span { color: #d5deea; }