.mib,
.mib * {
box-sizing: border-box;
}
.mib {
position: relative;
color: #e4ebf2;
background: #04060a;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.45;
isolation: isolate;
}
.mib h1,
.mib h2,
.mib p,
.mib ol,
.mib form {
margin: 0;
padding: 0;
}
.mib-stage {
position: relative;
display: flex;
flex-direction: column;
min-height: 780px;
background: #04060a;
}
.mib-skyband {
flex: none;
height: 168px;
background: #10243f;
}
.mib-waveband {
flex: none;
height: 148px;
background: #0b182c;
}
.mib-msgband {
position: relative;
z-index: 3;
flex: none;
background: #070e18;
padding: 36px 0 40px;
}
.mib-btnband {
position: relative;
z-index: 3;
flex: 1;
background: #04060a;
padding: 28px 0 36px;
}
.mib-msgcol {
width: min(440px, calc(100% - 32px));
margin: 0 auto;
}
.mib-stage[data-mib-screen="home"] .mib-msgcol,
.mib-stage[data-mib-screen="looking"] .mib-msgcol {
width: min(640px, calc(100% - 32px));
text-align: center;
}
.mib-sky-art,
.mib-water {
position: absolute;
z-index: 2;
pointer-events: none;
}
.mib-sky-art {
top: 0;
left: 0;
width: 100%;
height: 168px;
}
.mib-water {
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.mib-lang {
position: absolute;
top: 18px;
right: 22px;
z-index: 4;
display: flex;
align-items: center;
margin: 0;
color: #8ea0b3;
font-size: 11px;
letter-spacing: 0.08em;
}
.mib-lang-bar {
margin: 0 0.28em;
color: #6d7e90;
}
.mib button {
font: inherit;
cursor: pointer;
}
.mib-lang button {
min-width: 0;
min-height: 0;
padding: 8px 2px;
border: 0;
background: transparent;
color: #8ea0b3;
font: 400 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
letter-spacing: 0.08em;
}
.mib-lang button[aria-pressed="true"] {
color: #e4ebf2;
text-decoration: underline;
text-underline-offset: 3px;
}
.mib-hp,
.mib-live,
.mib-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mib h1.mib-title {
width: max-content;
max-width: 100%;
margin: 0 auto 10px;
color: #e4ebf2;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.35;
white-space: pre-wrap;
}
.mib p.mib-line {
width: max-content;
max-width: 100%;
margin: 0 auto;
color: #b7e3c9;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.45;
letter-spacing: 0.01em;
text-shadow: 0 0 8px rgba(120, 210, 170, 0.45);
white-space: pre-wrap;
}
.mib p.mib-status {
margin: 0;
color: #e4ebf2;
font-family: ui-serif, Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
font-size: 17px;
line-height: 1.45;
white-space: pre-wrap;
}
.mib-stage[data-mib-screen="looking"] .mib-status {
color: #b7e3c9;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 12px;
text-shadow: 0 0 8px rgba(120, 210, 170, 0.45);
}
.mib-sheet {
position: relative;
background-color: #f4e3c4;
background-image:
radial-gradient(ellipse 34% 22% at 14% 20%, rgba(92, 54, 28, 0.28), transparent 70%),
radial-gradient(ellipse 22% 18% at 82% 72%, rgba(58, 86, 104, 0.22), transparent 72%),
radial-gradient(ellipse 16% 12% at 48% 46%, rgba(110, 78, 40, 0.14), transparent 70%),
linear-gradient(165deg, rgba(255, 250, 240, 0.28), transparent 28%, transparent 70%, rgba(90, 70, 42, 0.16));
color: #2c241c;
padding: 40px 44px 36px;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
clip-path: polygon(
0% 4%,
5% 0%,
13% 2.4%,
22% 0%,
31% 1.8%,
40% 0%,
49% 2.2%,
58% 0.3%,
67% 1.8%,
76% 0%,
85% 2.2%,
93% 0%,
100% 3%,
98.2% 11%,
100% 21%,
97.8% 32%,
100% 44%,
98% 55%,
100% 67%,
97.6% 78%,
100% 89%,
96% 98%,
88% 100%,
79% 97.4%,
70% 100%,
60% 98%,
51% 100%,
42% 97.2%,
33% 100%,
23% 98.2%,
14% 100%,
6% 96.5%,
0% 92%,
2.2% 82%,
0% 71%,
1.8% 60%,
0% 49%,
2.4% 38%,
0% 27%,
1.6% 16%,
0% 7%
);
}
.mib-sheet-read {
padding: 32px 44px;
}
.mib-read .mib-form {
margin: 0;
}
.mib-paper {
display: block;
width: 100%;
min-height: 1.45em;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #2c241c;
caret-color: #2c241c;
font-family: Trattatello, "Snell Roundhand", "Segoe Script", "Bradley Hand", cursive;
font-size: 17px;
line-height: 1.45;
resize: none;
overflow: hidden;
}
.mib textarea.mib-paper,
.mib textarea.mib-paper:focus,
.mib textarea.mib-paper:-webkit-autofill {
background-color: transparent !important;
color: #2c241c !important;
caret-color: #2c241c;
-webkit-text-fill-color: #2c241c !important;
box-shadow: inset 0 0 0 1000px rgba(244, 227, 196, 0.28);
}
.mib p.mib-count {
margin: 10px 0 0;
color: #5c4d3e;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 11px;
letter-spacing: 0.04em;
text-align: right;
}
.mib p.mib-note {
margin: 0;
padding: 0;
color: #2c241c;
font-family: Trattatello, cursive;
font-size: 17px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mib-note + .mib-note,
.mib-note + .mib-paper {
margin-top: 0.2em;
}
.mib-actions {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin: 0;
}
.mib-btnband.is-center {
text-align: center;
}
.mib-btnband.is-center .mib-actions {
display: inline-flex;
}
.mib button.mib-btn {
display: inline-block;
flex: 0 0 auto;
width: auto;
min-height: 0;
margin: 0;
padding: 8px 14px;
border: 1px solid rgba(228, 235, 242, 0.28);
border-radius: 999px;
background: transparent;
color: #e4ebf2;
font: 600 15px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mib button.mib-btn-primary {
border-color: rgba(183, 227, 201, 0.55);
background: transparent;
color: #e4ebf2;
}
.mib button.mib-btn:hover {
border-color: rgba(228, 235, 242, 0.5);
}
.mib button.mib-btn-primary:hover {
border-color: rgba(183, 227, 201, 0.85);
}
.mib button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.mib p.mib-error {
margin: 0 0 12px;
color: #ffd2c8;
font-size: 14px;
line-height: 1.4;
white-space: pre-wrap;
}
.mib p.mib-noscript {
width: min(440px, calc(100% - 32px));
margin: 0 auto 16px;
color: #e4ebf2;
white-space: pre-wrap;
}
.mib :focus-visible {
outline: 2px solid #e7f6ee;
outline-offset: 3px;
}
.mib-msgcol.mib-sinking,
.mib-msgcol.mib-rising {
position: relative;
z-index: 4;
transform-origin: 50% 100%;
pointer-events: none;
animation-name: mib-sink;
animation-duration: 0.45s;
animation-timing-function: linear;
animation-fill-mode: both;
}
.mib-msgcol.mib-rising {
animation-direction: reverse;
}
@keyframes mib-sink {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
17% {
transform: translate(-29px, calc((-100% - 78px) * 0.09)) rotate(-5deg) scale(0.89);
opacity: 1;
}
33% {
transform: translate(-50px, calc((-100% - 78px) * 0.23)) rotate(-9deg) scale(0.77);
opacity: 1;
}
50% {
transform: translate(-59px, calc((-100% - 78px) * 0.39)) rotate(-14deg) scale(0.66);
opacity: 1;
}
67% {
transform: translate(-53px, calc((-100% - 78px) * 0.58)) rotate(-19deg) scale(0.55);
opacity: 1;
}
83% {
transform: translate(-35px, calc((-100% - 78px) * 0.78)) rotate(-23deg) scale(0.43);
opacity: 1;
}
100% {
transform: translate(-10px, calc(-100% - 78px)) rotate(-28deg) scale(0.32);
opacity: 0;
}
}
@media (max-width: 680px) {
.mib-sky-mark {
transform-box: fill-box;
transform-origin: center;
transform: scale(2.4);
}
}
@media (prefers-reduced-motion: reduce) {
.mib-water,
.mib-bottle,
.mib-msgcol.mib-sinking,
.mib-msgcol.mib-rising {
animation: none;
}
}
@media (forced-colors: active) {
.mib-btn,
.mib-sheet,
.mib-note {
border: 1px solid CanvasText;
}
}