@font-face {
font-family: "Bricolage Grotesque";
src: url("/assets/fonts/bricolage-grotesque-v9-opsz-wght-latin.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/assets/fonts/jetbrains-mono-v24-wght-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Brico Text";
src: local("Arial"), local("Liberation Sans"), local("Arimo");
font-weight: 100 599;
size-adjust: 104.02%;
ascent-override: 89.4%;
descent-override: 25.96%;
line-gap-override: 0%;
}
@font-face {
font-family: "Brico Text";
src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 600 900;
size-adjust: 100.6%;
ascent-override: 92.44%;
descent-override: 26.84%;
line-gap-override: 0%;
}
@font-face {
font-family: "Brico Head";
src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 100 900;
size-adjust: 99.39%;
ascent-override: 93.57%;
descent-override: 27.17%;
line-gap-override: 0%;
}
@font-face {
font-family: "Brico Display";
src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 100 900;
size-adjust: 92.38%;
ascent-override: 100.67%;
descent-override: 29.23%;
line-gap-override: 0%;
}
@font-face {
font-family: "Mono Fallback";
src: local("Courier New"), local("Liberation Mono"), local("Cousine");
font-weight: 100 599;
size-adjust: 99.984%;
ascent-override: 102.02%;
descent-override: 30%;
line-gap-override: 0%;
}
@font-face {
font-family: "Mono Fallback";
src: local("Courier New Bold"), local("Liberation Mono Bold"), local("Cousine Bold");
font-weight: 600 900;
size-adjust: 99.984%;
ascent-override: 102.02%;
descent-override: 30%;
line-gap-override: 0%;
}
:root {
--paper: #f5f1e8;
--paper-2: #ebe4d4;
--card: #fffcf5;
--ink: #111111;
--ink-soft: #46433c;
--blue: #2f7bff;
--blue-text: #1f5fd1;
--lime: #b8f34a;
--marigold: #ffb627;
--navy: #0f1c2a;
--line: 2px solid var(--ink);
--f-text: "Bricolage Grotesque", "Brico Text", Arial, sans-serif;
--f-head: "Bricolage Grotesque", "Brico Head", Arial, sans-serif;
--f-disp: "Bricolage Grotesque", "Brico Display", Arial, sans-serif;
--f-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
--v-text: "opsz" 18;
--v-head: "opsz" 28;
--v-disp: "opsz" 96;
--gut: 20px;
--max: 1320px;
--nav-h: 62px;
--h2: clamp(38px, 10.4vw, 88px);
}
@media (min-width: 700px) {
:root { --gut: 32px; }
}
@media (min-width: 1000px) {
:root { --nav-h: 70px; }
}
@media (min-width: 1200px) {
:root { --gut: 48px; }
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--nav-h) + 14px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 17px/1.55 var(--f-text);
font-variation-settings: var(--v-text);
-webkit-font-smoothing: antialiased;
}
main,
.foot { overflow-x: clip; }
img,
svg { display: block; }
img { max-width: 100%; height: auto; }
p,
h1, h2, h3, h4,
figure,
dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
code,
kbd,
pre { font-family: var(--f-mono); }
code {
font-size: 0.88em;
font-weight: 500;
}
::selection { background: var(--lime); color: var(--ink); }
:focus-visible {
outline: 3px solid var(--blue-text);
outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: 0; }
.on-dark :focus-visible { outline-color: var(--lime); }
.on-blue :focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }
.sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.skip {
position: absolute;
left: 12px;
top: -80px;
z-index: 60;
background: var(--lime);
border: var(--line);
padding: 10px 14px;
font-weight: 700;
}
.skip:focus { top: 12px; }
.wrap {
width: min(100% - 2 * var(--gut), var(--max));
margin-inline: auto;
}
.i {
width: 18px;
height: 18px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.no-js .js-only { display: none !important; }
.ul-link,
.prose a {
text-decoration: underline;
text-decoration-color: var(--blue);
text-decoration-thickness: 3px;
text-underline-offset: 4px;
}
.ul-link {
font: 700 17px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.ul-link:hover,
.prose a:hover { background: var(--lime); }
.on-dark .prose a { text-decoration-color: var(--lime); }
.on-dark .prose a:hover { color: var(--ink); }
.key,
.card,
.ticket {
position: relative;
isolation: isolate;
}
.key {
display: inline-block;
border-radius: 10px;
color: var(--ink);
text-decoration: none;
}
button.key {
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
}
.key::before,
.card::before,
.ticket::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--ink);
}
.key::before { translate: 0 5px; }
.card::before,
.ticket::before { translate: 6px 6px; }
.key-face {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: var(--line);
border-radius: inherit;
background: var(--card);
box-shadow: inset 0 -3px 0 rgb(17 17 17 / 0.14);
font: 700 16px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
padding: 12px 16px 13px;
transition: translate 0.12s ease-out;
}
.key-lg .key-face,
.key-sm .key-face,
.key-go .key-face { background: var(--lime); }
.key-lg .key-face {
font-size: 18px;
padding: 16px 24px 17px;
}
.key-sm::before { translate: 0 4px; }
.key-sm .key-face {
font-size: 15px;
padding: 8px 13px 9px;
}
@media (hover: hover) {
.key:hover .key-face { translate: 0 2px; }
.card:hover .card-face,
.ticket:hover .ticket-face { translate: 3px 3px; }
}
.key:active .key-face { translate: 0 5px; }
button.key:disabled { cursor: progress; }
button.key:disabled .key-face {
translate: 0 3px;
background: var(--paper-2);
}
@media (min-width: 1000px) {
.key-sm .key-face { font-size: 16px; padding: 10px 16px 11px; }
}
kbd {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border: var(--line);
border-bottom-width: 4px;
border-radius: 6px;
background: var(--card);
color: var(--ink);
font: 600 12px/1 var(--f-mono);
}
.keys {
display: inline-flex;
gap: 4px;
}
.k-cmd { display: none; }
[data-mac] .k-ctrl { display: none; }
[data-mac] .k-cmd { display: inline-grid; }
.st {
display: inline-block;
padding: 9px 13px 10px;
border: var(--line);
border-radius: 8px;
box-shadow: 0 0 0 4px var(--card), 5px 5px 0 4px var(--ink);
font: 700 15px/1.1 var(--f-head);
font-variation-settings: var(--v-head);
white-space: nowrap;
}
.st-round {
display: inline-grid;
place-items: center;
width: 98px;
height: 98px;
padding: 0;
border-radius: 50%;
font-size: 17px;
line-height: 1.05;
text-align: center;
white-space: normal;
}
.st-lime { background: var(--lime); }
.st-paper { background: var(--card); }
.st-blue { background: var(--blue); }
.pill {
display: inline-block;
padding: 0 8px 1px;
border: var(--line);
border-radius: 999px;
background: var(--marigold);
color: var(--ink);
font-size: 13px;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
}
.pill-ok { background: var(--lime); }
.sec-head {
display: grid;
gap: 18px;
margin-bottom: 32px;
border-top: calc(var(--h2) * 0.1) solid var(--ink);
}
.hang {
font: 800 var(--h2)/0.95 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.032em;
}
.hang > span {
display: block;
margin-top: -0.15em;
}
.sec-lede {
max-width: 34em;
font-size: 18px;
line-height: 1.5;
}
.small {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.55;
}
.small a { color: var(--ink); }
@media (min-width: 1100px) {
.sec-head {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: end;
column-gap: 48px;
margin-bottom: 56px;
}
.sec-lede { font-size: 20px; padding-bottom: 4px; }
}
.card { border-radius: 14px; }
.card-face {
position: relative;
display: grid;
align-content: start;
gap: 12px;
height: 100%;
padding: 24px 20px;
border: var(--line);
border-radius: inherit;
background: var(--card);
font-size: 16px;
transition: translate 0.14s ease-out;
}
.card h3 {
max-width: 15em;
padding-right: 44px;
font: 700 23px/1.12 var(--f-head);
font-variation-settings: var(--v-head);
letter-spacing: -0.01em;
}
.num {
position: absolute;
top: -2px;
right: 20px;
min-width: 34px;
padding: 9px 8px 8px;
border-radius: 0 0 7px 7px;
background: var(--ink);
color: var(--paper);
font: 800 16px/1 var(--f-head);
font-variation-settings: var(--v-head);
text-align: center;
}
@media (min-width: 1100px) {
.card-face { padding: 30px 28px; font-size: 17px; }
.card h3 { font-size: 26px; }
}
.nav {
position: sticky;
top: 0;
z-index: 30;
background: var(--paper);
border-bottom: var(--line);
}
.nav-in {
display: flex;
align-items: center;
gap: 10px;
height: var(--nav-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
margin-right: auto;
text-decoration: none;
}
.brand-mark {
width: 34px;
height: 34px;
}
.brand-word {
font: 800 20px/1 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.02em;
white-space: nowrap;
}
@media (max-width: 359px) {
.brand { gap: 7px; }
.brand-mark { width: 30px; height: 30px; }
.brand-word { font-size: 18px; }
.nav .key-sm .key-face { font-size: 14px; padding: 7px 10px 8px; }
}
.bw-setu { display: inline-block; width: 1.967em; }
.bw-ssh { color: var(--blue); }
.nav-links,
.kbar { display: none; }
.menu { position: relative; }
.menu summary {
display: grid;
place-items: center;
width: 44px;
height: 42px;
border: var(--line);
border-radius: 8px;
background: var(--card);
cursor: pointer;
list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before {
content: "";
width: 18px;
height: 12px;
border-block: 2px solid var(--ink);
background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat;
}
.menu[open] summary { background: var(--lime); }
.menu-list {
position: absolute;
right: -56px;
top: calc(100% + 12px);
display: grid;
width: max-content;
min-width: 240px;
max-height: calc(100vh - var(--nav-h) - 24px);
overflow-y: auto;
padding: 6px;
background: var(--card);
border: var(--line);
border-radius: 10px;
box-shadow: 6px 6px 0 var(--ink);
}
.menu-list a,
.menu-pal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 14px;
border: 0;
border-radius: 6px;
background: none;
color: var(--ink);
font: 700 17px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.menu-pal {
margin-top: 6px;
border-top: 2px dashed var(--ink);
border-radius: 0 0 6px 6px;
padding-top: 14px;
}
.menu-list a:hover,
.menu-pal:hover { background: var(--lime); }
@media (min-width: 380px) {
.brand-word { font-size: 22px; }
}
@media (min-width: 1000px) {
.nav-in { gap: 8px; }
.menu { display: none; }
.nav-links {
display: flex;
gap: 2px;
margin-right: 6px;
}
.nav-links a {
padding: 8px 12px;
border-radius: 8px;
font: 600 16px/1.2 var(--f-text);
font-variation-settings: var(--v-text);
text-decoration: none;
}
.nav-links a:hover { background: var(--lime); }
.js .kbar {
display: inline-flex;
align-items: center;
gap: 9px;
height: 44px;
margin-right: 8px;
padding: 0 8px 0 12px;
border: var(--line);
border-radius: 10px;
background: var(--card);
color: var(--ink);
font: 600 15px/1 var(--f-text);
font-variation-settings: var(--v-text);
cursor: pointer;
}
.kbar:hover { background: var(--lime); }
.kbar kbd { height: 26px; }
}
.field {
display: grid;
gap: 7px;
align-content: start;
}
.field-label {
font: 700 16px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.field-opt {
margin-left: 6px;
color: var(--ink-soft);
font: 500 14px/1 var(--f-text);
font-variation-settings: var(--v-text);
}
.input {
width: 100%;
min-height: 50px;
padding: 12px 14px;
border: var(--line);
border-radius: 8px;
background: var(--card);
color: var(--ink);
font: 400 17px/1.3 var(--f-text);
font-variation-settings: var(--v-text);
box-shadow: inset 0 3px 0 rgb(17 17 17 / 0.06);
}
.input::placeholder { color: #6d685d; opacity: 1; }
.input:focus-visible {
outline: 3px solid var(--blue-text);
outline-offset: 2px;
background: #fff;
}
.input[aria-invalid="true"] {
border-color: #b3261e;
box-shadow: 4px 4px 0 var(--marigold);
}
select.input {
appearance: none;
padding-right: 44px;
background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
cursor: pointer;
}
textarea.input {
min-height: 112px;
resize: vertical;
}
.form-err {
color: #8f1d17;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
}
.form-err:not(:empty) {
padding: 10px 14px 11px;
border: var(--line);
border-radius: 8px;
background: #ffe8c2;
}
.code {
min-width: 0;
overflow: hidden;
border: var(--line);
border-radius: 12px;
background: var(--navy);
box-shadow: 6px 6px 0 var(--ink);
color: #e6ebf2;
}
.code-bar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 46px;
padding: 0 8px 0 16px;
border-bottom: 2px solid #2a3d52;
color: #a9b8ca;
font: 500 12px/1 var(--f-mono);
}
.copy {
min-width: 82px;
padding: 7px 11px 8px;
border: var(--line);
border-radius: 7px;
background: var(--lime);
color: var(--ink);
font: 700 14px/1 var(--f-head);
font-variation-settings: var(--v-head);
cursor: pointer;
}
.copy:hover { background: #fff; }
.code pre {
margin: 0;
padding: 16px 18px 18px;
overflow-x: auto;
font: 400 13px/1.65 var(--f-mono);
}
.code code { font-size: inherit; font-weight: 400; }
@media (min-width: 1100px) {
.code pre { font-size: 14px; }
}
.pal {
width: min(640px, 100vw - 20px);
max-width: none;
max-height: min(560px, 100vh - 40px);
margin: max(10px, 11vh) auto auto;
padding: 0;
overflow: hidden;
border: var(--line);
border-radius: 14px;
background: var(--paper);
box-shadow: 10px 10px 0 var(--ink);
color: var(--ink);
}
.pal[open] {
display: flex;
flex-direction: column;
}
.pal::backdrop { background: rgb(17 17 17 / 0.48); }
.pal-top {
display: flex;
align-items: center;
gap: 12px;
padding: 0 12px 0 18px;
border-bottom: var(--line);
background: var(--card);
}
.pal-q {
flex: 1;
min-width: 0;
height: 60px;
border: 0;
background: none;
color: var(--ink);
font: 500 18px/1 var(--f-text);
font-variation-settings: var(--v-text);
outline: 0;
}
.pal-q::placeholder { color: #6d685d; opacity: 1; }
.pal-x {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.pal-list {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 6px 8px 10px;
}
.pal-g {
padding: 14px 10px 6px;
color: var(--ink-soft);
font: 600 12px/1 var(--f-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pal-o {
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
padding: 0 12px;
border: 2px solid transparent;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.pal-o small {
margin-left: auto;
color: var(--ink-soft);
font: 500 12px/1 var(--f-mono);
white-space: nowrap;
}
.pal-o[aria-selected="true"] {
border-color: var(--ink);
background: var(--lime);
box-shadow: 3px 3px 0 var(--ink);
}
.pal-o[aria-selected="true"] small { color: var(--ink); }
.pal-none {
padding: 28px 18px;
color: var(--ink-soft);
text-align: center;
}
.pal-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
padding: 10px 16px;
border-top: var(--line);
background: var(--paper-2);
color: var(--ink-soft);
font-size: 14px;
}
.pal-foot > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pal-foot kbd { height: 22px; min-width: 22px; font-size: 11px; }
.pal-app { margin-left: auto; }
@media (max-width: 560px) {
.pal { margin-top: 10px; }
.pal-foot > span:not(.pal-app) { display: none; }
.pal-app { margin-left: 0; }
}
.toast {
position: fixed;
left: 50%;
bottom: 22px;
z-index: 70;
max-width: calc(100vw - 32px);
padding: 12px 16px;
border: var(--line);
border-radius: 10px;
background: var(--lime);
box-shadow: 5px 5px 0 var(--ink);
font-weight: 700;
opacity: 0;
translate: -50% 12px;
pointer-events: none;
transition: opacity 0.2s ease-out, translate 0.2s ease-out;
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.foot {
padding: 64px 0 34px;
background: var(--ink);
color: var(--paper);
}
.foot-word {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4%;
margin-bottom: 52px;
border-top: calc(min(21vw, 300px) * 0.1) solid var(--lime);
color: var(--lime);
font: 800 min(21vw, 300px)/0.95 var(--f-disp);
font-variation-settings: var(--v-disp);
letter-spacing: -0.05em;
}
.fw-text {
display: block;
margin-top: -0.15em;
}
.fw-setu { display: inline-block; width: 1.847em; }
.fw-ssh {
color: transparent;
-webkit-text-stroke: 0.024em var(--lime);
}
.fw-mark {
flex: none;
width: 0.36em;
height: 0.36em;
margin-top: 0.12em;
}
.foot-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 20px;
padding-bottom: 40px;
}
.foot-talk { grid-column: 1 / -1; order: 3; }
.foot-h {
margin-bottom: 12px;
color: var(--lime);
font: 700 16px/1.2 var(--f-head);
font-variation-settings: var(--v-head);
}
.foot ul {
display: grid;
gap: 8px;
list-style: none;
}
.foot li span { display: block; color: #bdb6a8; font-size: 15px; }
.foot a {
text-decoration: underline;
text-decoration-color: var(--blue);
text-decoration-thickness: 3px;
text-underline-offset: 4px;
}
.foot a:hover { color: var(--lime); }
.foot-base {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
padding-top: 22px;
border-top: 2px solid #3a3833;
color: #bdb6a8;
font-size: 15px;
}
.foot-ver {
display: inline-block;
min-width: 19ch;
font: 500 14px/1.6 var(--f-mono);
}
@media (min-width: 760px) {
.foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-talk { grid-column: auto; order: 0; }
}
.is-off *,
.is-off,
.is-paused *,
.is-hidden [data-motion] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
.pal[open] { animation: pal-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
.key-face,
.card-face,
.ticket-face,
.toast { transition: none; }
}
@keyframes pal-in {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}