.ic-shell { min-height: calc(100vh - 70px); }
.ic-bar {
position: sticky; top: 71px; z-index: 20;
background: var(--nb-bg);
border-bottom: var(--nb-bd);
padding: 16px 0;
}
.ic-bar-in {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.ic-brand {
display: flex; align-items: center; flex: none;
text-decoration: none; color: inherit;
}
.ic-search { position: relative; flex: 1 1 260px; min-width: 0; }
.ic-search input {
width: 100%; display: block;
background: var(--nb-surface); color: var(--nb-surface-fg);
border: var(--nb-bd); border-radius: var(--nb-r-pill);
padding: 12px 44px 12px 46px;
font-family: var(--nb-font-body); font-size: 15px;
box-shadow: var(--nb-sh-sm);
transition: box-shadow var(--nb-fast), transform var(--nb-fast);
}
.ic-search input::placeholder { color: var(--nb-surface-fg-muted); opacity: .8; }
.ic-search input:focus {
outline: 0; transform: translate(-1px, -2px);
box-shadow: var(--nb-sh);
}
.ic-search svg {
position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; fill: var(--nb-surface-fg-muted);
pointer-events: none;
}
.ic-search-x {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; padding: 0;
display: none; place-items: center;
background: none; border: 0; cursor: pointer;
color: var(--nb-surface-fg-muted); border-radius: 50%;
}
.ic-search-x svg { position: static; transform: none; width: 13px; height: 13px; fill: currentColor; }
.ic-search-x:hover { background: var(--nb-track); color: var(--nb-surface-fg); }
.ic-search.has-q .ic-search-x { display: grid; }
.ic-bar-count {
flex: none; font-family: var(--nb-font-head); font-weight: 700;
font-size: 13px; color: var(--nb-fg-muted);
}
@media (max-width: 620px) { .ic-bar-count { display: none; } }
.ic-body {
display: grid; gap: clamp(20px, 3vw, 40px);
grid-template-columns: 210px minmax(0, 1fr);
padding: clamp(22px, 3vw, 38px) 0 clamp(50px, 6vw, 90px);
}
.ic-side { position: sticky; top: 158px; align-self: start; }
.ic-side h2 {
margin: 0 0 12px; font-family: var(--nb-font-head); font-weight: 700;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--nb-fg-muted);
}
.ic-cats { display: flex; flex-direction: column; gap: 2px; }
.ic-cat {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left; cursor: pointer;
background: none; border: 0; color: var(--nb-fg);
padding: 8px 11px; border-radius: var(--nb-r-sm);
transition: background var(--nb-fast), color var(--nb-fast);
}
.ic-cat:hover { background: var(--nb-track); }
.ic-cat-name {
font-family: var(--nb-font-head); font-weight: 700; font-size: 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-cat.is-on {
background: var(--nb-yellow); color: var(--nb-ink);
border: var(--nb-bd-thin); padding: 6px 9px;
box-shadow: var(--nb-sh-sm);
}
.ic-cat-ico {
flex: none; display: grid; place-items: center;
width: 18px; height: 18px; color: inherit;
}
.ic-cat-ico svg { width: 100%; height: 100%; display: block; }
.ic-cat-ico.is-letter {
font-family: var(--nb-font-head); font-weight: 700; font-size: 11px;
border: 2px solid currentColor; border-radius: 5px;
opacity: .45; line-height: 1;
}
.ic-cat.is-on .ic-cat-ico.is-letter { opacity: .6; }
@media (max-width: 840px) {
.ic-body { grid-template-columns: 1fr; }
.ic-side { position: static; }
.ic-side h2 { display: none; }
.ic-cats {
flex-direction: row; overflow-x: auto; gap: 8px;
padding-bottom: 6px; scrollbar-width: thin;
}
.ic-cat { width: auto; flex: none; border: var(--nb-bd-thin); padding: 6px 12px; }
.ic-cat span { display: none; }
}
.ic-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.ic-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; aspect-ratio: 1; padding: 10px;
background: var(--nb-surface); color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
cursor: pointer; text-align: center;
transition: transform var(--nb-fast), box-shadow var(--nb-fast), background var(--nb-fast);
}
.ic-tile:hover {
transform: translate(-2px, -3px); box-shadow: var(--nb-sh);
background: var(--nb-yellow); color: var(--nb-ink);
}
.ic-tile:focus-visible { outline: 3px solid var(--nb-blue); outline-offset: 3px; }
.ic-tile:active { transform: translate(1px, 1px); box-shadow: var(--nb-sh-press); }
.ic-tile svg { width: 34px; height: 34px; fill: currentColor; }
.ic-tile b {
font-family: var(--nb-font-body); font-weight: 500; font-size: 11.5px;
line-height: 1.25; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.ic-tile.is-colour:hover { background: var(--nb-surface); color: var(--nb-surface-fg); }
.ic-skel {
aspect-ratio: 1; border-radius: var(--nb-r-sm);
border: var(--nb-bd-thin); background: var(--nb-track);
opacity: .5; animation: icPulse 1.1s var(--nb-ease) infinite alternate;
}
@keyframes icPulse { to { opacity: .18; } }
.ic-empty {
grid-column: 1 / -1; padding: 54px 20px; text-align: center;
}
.ic-empty h3 { margin: 0 0 8px; font-family: var(--nb-font-head); font-size: 20px; }
.ic-empty p { margin: 0 auto; max-width: 44ch; color: var(--nb-fg-muted); font-size: 14.5px; line-height: 1.6; }
.ic-pager {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 30px;
}
.ic-pager[hidden] { display: none; }
.ic-pager-n {
font-family: var(--nb-font-head); font-weight: 700; font-size: 15px;
min-width: 76px; text-align: center;
font-variant-numeric: tabular-nums;
}
.ic-scrim {
position: fixed; inset: 0; z-index: 900;
display: grid; place-items: center; padding: 20px;
background: rgba(0, 0, 0, .62);
animation: icFade .16s var(--nb-ease);
}
.ic-scrim[hidden] { display: none; }
@keyframes icFade { from { opacity: 0; } }
.ic-card {
position: relative;
width: min(720px, 100%); max-height: min(86vh, 720px);
overflow: auto;
background: var(--nb-surface); color: var(--nb-surface-fg);
border: var(--nb-bd); border-radius: var(--nb-r-lg);
box-shadow: var(--nb-sh-lg);
animation: icPop .2s var(--nb-ease);
}
@keyframes icPop { from { transform: translate(-4px, -8px); opacity: 0; } }
.ic-card-top {
display: grid; gap: clamp(16px, 3vw, 28px); align-items: center;
grid-template-columns: 200px minmax(0, 1fr);
padding: clamp(18px, 3vw, 26px);
border-bottom: var(--nb-bd);
}
@media (max-width: 620px) { .ic-card-top { grid-template-columns: 1fr; } }
.ic-stage {
aspect-ratio: 1; display: grid; place-items: center;
border: var(--nb-bd-thin); border-radius: var(--nb-r);
background-color: var(--nb-bg);
background-image:
linear-gradient(45deg, var(--nb-track) 25%, transparent 25%),
linear-gradient(-45deg, var(--nb-track) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--nb-track) 75%),
linear-gradient(-45deg, transparent 75%, var(--nb-track) 75%);
background-size: 18px 18px;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.ic-stage svg {
width: 58%; height: 58%;
-webkit-user-drag: none; user-select: none;
pointer-events: none;
}
.ic-card-head h2 {
margin: 0; font-family: var(--nb-font-head); font-weight: 700;
font-size: clamp(21px, 3vw, 27px); letter-spacing: -.02em;
}
.ic-slug {
display: inline-block; margin: 8px 0 0;
font-family: var(--nb-font-mono); font-size: 12.5px;
color: var(--nb-surface-fg-muted);
}
.ic-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ic-colours { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ic-sw {
width: 28px; height: 28px; padding: 0; cursor: pointer;
border: var(--nb-bd-thin); border-radius: 50%;
transition: transform var(--nb-fast), box-shadow var(--nb-fast);
}
.ic-sw:hover { transform: translateY(-2px); box-shadow: var(--nb-sh-sm); }
.ic-sw.is-on { box-shadow: 0 0 0 3px var(--nb-surface), 0 0 0 6px var(--nb-line); }
.ic-sw--auto {
width: auto; border-radius: var(--nb-r-pill); padding: 0 12px; height: 28px;
background: var(--nb-surface-2); color: var(--nb-surface-fg);
font-family: var(--nb-font-head); font-weight: 700; font-size: 12px;
}
.ic-fixed {
margin: 16px 0 0; font-size: 13px; line-height: 1.55;
color: var(--nb-surface-fg-muted);
}
.ic-copy { padding: clamp(18px, 3vw, 26px); }
.ic-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ic-tab {
padding: 7px 15px; cursor: pointer;
background: none; color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r-pill);
font-family: var(--nb-font-head); font-weight: 700; font-size: 13px;
}
.ic-tab.is-on { background: var(--nb-ink); color: #FFFFFF; }
.ic-code {
position: relative;
background: var(--nb-night); color: #E6E9EF;
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
padding: 0 52px 0 0;
font-family: var(--nb-font-mono); font-size: 12.5px;
overflow: hidden;
}
.ic-code code {
display: block; padding: 15px 0 15px 15px;
white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
line-height: 1.75; max-height: 232px; overflow-y: auto;
scrollbar-width: thin;
}
.ic-code code::-webkit-scrollbar { width: 8px; }
.ic-code code::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .22); border-radius: 99px;
}
.ic-code-btn {
position: absolute; top: 9px; right: 9px;
width: 34px; height: 34px; padding: 0; cursor: pointer;
display: grid; place-items: center;
background: var(--nb-yellow); color: var(--nb-ink);
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
box-shadow: var(--nb-sh-sm);
transition: transform var(--nb-fast), box-shadow var(--nb-fast);
}
.ic-code-btn svg { width: 14px; height: 14px; fill: currentColor; }
.ic-code-btn:hover { transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--nb-ink); }
.ic-code-btn:active { transform: translate(1px, 2px); box-shadow: none; }
.ic-code-btn.is-done { background: var(--nb-green); }
.ic-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 14px 0 0;
font-size: 12.5px; color: var(--nb-surface-fg-muted);
}
.ic-card-foot span { flex: 1 1 190px; line-height: 1.5; }
.ic-licence {
margin: 14px 0 0; padding-top: 13px;
border-top: 2px dashed var(--nb-line-soft, rgba(255, 255, 255, .16));
font-size: 11.5px; line-height: 1.6; color: var(--nb-surface-fg-muted);
}
.ic-x {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
}
.ic-up { max-width: 780px; margin: 0 auto; padding: clamp(26px, 4vw, 52px) 0 90px; }
.ic-wz-head { margin-bottom: 24px; }
.ic-wz-head h1 {
margin: 0 0 10px; font-family: var(--nb-font-head); font-weight: 700;
font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em;
}
.ic-wz-head p { margin: 0; color: var(--nb-fg-muted); line-height: 1.65; max-width: 60ch; }
.ic-wz { padding: 0; overflow: hidden; }
.ic-wz-rail {
display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none;
border-bottom: var(--nb-bd-thin); border-color: var(--nb-line);
}
.ic-wz-pip {
flex: 1; display: flex; align-items: center; gap: 10px;
padding: 13px 16px; font-size: 13px; color: var(--nb-surface-fg-muted);
border-right: var(--nb-bd-thin); border-color: var(--nb-line);
cursor: default; user-select: none;
}
.ic-wz-pip:last-child { border-right: 0; }
.ic-wz-pip.is-open { cursor: pointer; }
.ic-wz-pip b {
flex: none; width: 24px; height: 24px; display: grid; place-items: center;
border: var(--nb-bd-thin); border-color: var(--nb-line); border-radius: 50%;
font-family: var(--nb-font-head); font-size: 12px;
}
.ic-wz-pip.is-on { color: var(--nb-surface-fg); }
.ic-wz-pip.is-on b { background: var(--nb-yellow); color: var(--nb-ink); border-color: var(--nb-ink); }
.ic-wz-pip.is-done b { background: var(--nb-green); color: var(--nb-ink); border-color: var(--nb-ink); }
@media (max-width: 620px) { .ic-wz-pip span { display: none; } .ic-wz-pip { flex: none; } }
.ic-wz-view {
overflow: hidden;
transition: height var(--nb-med) var(--nb-ease);
}
.ic-wz-track {
display: flex; width: 100%;
transition: transform .42s var(--nb-ease);
}
.ic-wz-step { flex: 0 0 100%; min-width: 0; }
.ic-wz-pad { padding: clamp(18px, 3vw, 28px); }
.ic-wz-foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px clamp(18px, 3vw, 28px);
border-top: var(--nb-bd-thin); border-color: var(--nb-line);
}
.ic-wz-gap { flex: 1; }
.ic-wz-foot [hidden] { display: none; }
.ic-drop {
display: block; text-align: center; cursor: pointer;
padding: 30px 22px;
border: 3px dashed var(--nb-line); border-radius: var(--nb-r);
background: var(--nb-surface-2);
transition: border-color var(--nb-fast), background var(--nb-fast);
}
.ic-drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.ic-drop:hover, .ic-drop.is-over { border-color: var(--nb-yellow); }
.ic-drop.is-over { background: var(--nb-surface); }
.ic-drop b {
display: block; font-family: var(--nb-font-head); font-weight: 700; font-size: 17px;
margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-drop span { display: block; font-size: 13px; line-height: 1.6; color: var(--nb-surface-fg-muted); max-width: 52ch; margin: 0 auto; }
.ic-drop-ico {
--ic-art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l0 64c0 8.8 7.2 16 16 16l352 0c8.8 0 16-7.2 16-16l0-64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 64c0 44.2-35.8 80-80 80L80 496c-44.2 0-80-35.8-80-80l0-64c0-17.7 14.3-32 32-32s32 14.3 32 32z'/></svg>");
display: block; width: 40px; height: 40px; margin: 0 auto 12px;
background: var(--nb-surface-fg-muted);
-webkit-mask: var(--ic-art) center / contain no-repeat;
mask: var(--ic-art) center / contain no-repeat;
}
.ic-drop.has-file .ic-drop-ico { background: var(--nb-green); }
.ic-drop.has-file { border-style: solid; border-color: var(--nb-green); }
.ic-trace { margin-top: 18px; }
.ic-trace[hidden] { display: none; }
.ic-trace-pair { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.ic-trace-pair figure { margin: 0; }
.ic-trace-pair figcaption {
margin-top: 7px; text-align: center; font-size: 12px; color: var(--nb-surface-fg-muted);
}
.ic-trace-box {
height: 156px; display: grid; place-items: center; padding: 12px;
border: var(--nb-bd-thin); border-color: var(--nb-line); border-radius: var(--nb-r-sm);
background-color: #1a1f2a;
background-image:
linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%),
linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%);
background-size: 18px 18px;
background-position: 0 0, 9px 9px;
}
.ic-trace-box svg, .ic-trace-box img {
max-width: 100%; max-height: 132px; width: auto; height: auto; display: block;
}
.ic-trace-ctl {
display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
margin-top: 16px;
}
.ic-trace-ctl .nb-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ic-trace-ctl .nb-label i {
font-style: normal; font-family: var(--nb-font-mono); font-size: 12px;
color: var(--nb-surface-fg-muted);
}
.ic-trace-flags { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; }
.ic-trace-said {
margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--nb-surface-fg-muted);
}
@media (max-width: 560px) {
.ic-trace-pair, .ic-trace-ctl { grid-template-columns: 1fr; }
}
.ic-range { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
.ic-range::-webkit-slider-runnable-track {
height: 10px; border-radius: 999px;
background: var(--nb-track); border: var(--nb-bd-thin); border-color: var(--nb-line);
}
.ic-range::-moz-range-track {
height: 10px; border-radius: 999px;
background: var(--nb-track); border: var(--nb-bd-thin); border-color: var(--nb-line);
}
.ic-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; margin-top: -8px;
border-radius: 50%; background: var(--nb-yellow);
border: var(--nb-bd-thin); border-color: var(--nb-ink);
box-shadow: var(--nb-sh-sm) var(--nb-ink);
cursor: pointer;
}
.ic-range::-moz-range-thumb {
width: 22px; height: 22px;
border-radius: 50%; background: var(--nb-yellow);
border: var(--nb-bd-thin); border-color: var(--nb-ink);
box-shadow: var(--nb-sh-sm) var(--nb-ink);
cursor: pointer;
}
.ic-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--nb-blue); outline-offset: 2px; }
.ic-ink {
margin-top: 18px; padding: 16px 17px;
background: var(--nb-surface-2);
border: var(--nb-bd-thin); border-radius: var(--nb-r);
}
.ic-ink-head b {
display: block; font-family: var(--nb-font-head); font-weight: 700; font-size: 15px;
color: var(--nb-surface-fg);
}
.ic-ink-head span {
display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.6;
color: var(--nb-surface-fg-muted);
}
.ic-ink-sw { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.ic-ink-own {
width: 28px; height: 28px; cursor: pointer; overflow: hidden;
border: var(--nb-bd-thin); border-radius: 50%;
background:
conic-gradient(#FF0033, #FFF93E, #3ECF6E, #2CAFFC, #FF77E4, #FF0033);
transition: transform var(--nb-fast), box-shadow var(--nb-fast);
}
.ic-ink-own:hover { transform: translateY(-2px); box-shadow: var(--nb-sh-sm); }
.ic-ink-own input {
width: 200%; height: 200%; margin: -50% 0 0 -50%;
padding: 0; border: 0; background: none; cursor: pointer; opacity: 0;
}
.ic-ink-weld { margin-top: 15px; }
.ic-ink-weld i {
display: block; margin-top: 3px; font-style: normal; font-size: 12px;
line-height: 1.55; color: var(--nb-surface-fg-muted);
}
.ic-raw { margin-top: 18px; }
.ic-raw summary {
cursor: pointer; font-size: 13px; font-weight: 600;
color: var(--nb-surface-fg-muted); padding: 6px 0;
}
.ic-raw summary::marker { color: var(--nb-surface-fg-muted); }
.ic-raw .nb-textarea { margin-top: 8px; }
.ic-raw .nb-hint { display: block; margin-top: 7px; }
.ic-up-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .ic-up-grid { grid-template-columns: 1fr; } }
.ic-up-full { grid-column: 1 / -1; }
.ic-tagsug { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.ic-tagsug[hidden] { display: none; }
.ic-tagsug-b {
font-size: 12px; padding: 5px 10px;
border: var(--nb-bd-thin); border-color: var(--nb-line); border-radius: 999px;
background: var(--nb-surface-2); color: var(--nb-surface-fg-muted);
cursor: pointer; transition: background var(--nb-fast), color var(--nb-fast);
}
.ic-tagsug-b:hover { background: var(--nb-yellow); color: var(--nb-ink); border-color: var(--nb-ink); }
.ic-verdict {
display: grid; gap: 14px; align-items: center;
grid-template-columns: 96px minmax(0, 1fr);
padding: 14px; margin-top: 18px;
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
background: var(--nb-surface-2);
}
.ic-verdict[hidden] { display: none; }
.ic-verdict .ic-stage { border-radius: var(--nb-r-sm); }
.ic-verdict b { display: block; font-family: var(--nb-font-head); font-size: 15px; }
.ic-verdict p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--nb-surface-fg-muted); }
.ic-verdict.is-bad { border-color: var(--nb-red); }
.ic-verdict.is-bad b { color: var(--nb-red); }
.ic-final-sizes {
display: flex; align-items: flex-end; justify-content: center; gap: 22px;
padding: 18px; margin-bottom: 20px;
border: var(--nb-bd-thin); border-color: var(--nb-line); border-radius: var(--nb-r-sm);
background: var(--nb-surface-2);
}
.ic-final-size { text-align: center; }
.ic-final-size .ic-stage { margin: 0 auto; background: transparent; border: 0; }
.ic-final-size span {
display: block; margin-top: 8px; font-family: var(--nb-font-mono);
font-size: 11px; color: var(--nb-surface-fg-muted);
}
.ic-final-facts { margin: 0 0 20px; display: grid; gap: 1px; }
.ic-final-facts > div {
display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px;
padding: 10px 0; border-bottom: 1px solid var(--nb-line);
}
.ic-final-facts dt { font-family: var(--nb-font-head); font-weight: 700; font-size: 13px; }
.ic-final-facts dd { margin: 0; font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ic-final-facts code { font-family: var(--nb-font-mono); font-size: 13px; }
@media (max-width: 520px) { .ic-final-facts > div { grid-template-columns: 1fr; gap: 3px; } }
.ic-final-pub span b { display: block; font-family: var(--nb-font-head); font-size: 14px; }
.ic-final-pub span i {
display: block; font-style: normal; margin-top: 3px;
font-size: 12.5px; line-height: 1.5; color: var(--nb-surface-fg-muted);
}
.ic-final-said {
margin-top: 18px; padding: 14px;
border: var(--nb-bd-thin); border-color: var(--nb-green); border-radius: var(--nb-r-sm);
background: var(--nb-surface-2);
}
.ic-final-said[hidden] { display: none; }
.ic-final-said.is-bad { border-color: var(--nb-red); }
.ic-final-said.is-bad b { color: var(--nb-red); }
.ic-final-said b { font-family: var(--nb-font-head); font-size: 15px; }
.ic-final-said p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--nb-surface-fg-muted); }
.nb-nav-logo.ic-brand { width: 152px; height: 23px; }
.ic-brand img { height: 23px; }
.nb-nav.is-far .nb-nav-logo.ic-brand { width: 21px; }
.ic-gate { max-width: 520px; margin: 90px auto; text-align: center; }
.ic-gate h1 { font-family: var(--nb-font-head); font-size: 28px; margin: 0 0 12px; }
.ic-gate p { color: var(--nb-fg-muted); line-height: 1.65; margin: 0 0 22px; }
@media (prefers-reduced-motion: reduce) {
.ic-tile, .ic-search input, .ic-sw, .ic-code-btn { transition: none; }
.ic-scrim, .ic-card, .ic-skel { animation: none; }
}
.ic-mg-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.ic-mg-head h1 {
margin: 0 0 8px; font-family: var(--nb-font-head); font-weight: 700;
font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em;
}
.ic-mg-head p { margin: 0; color: var(--nb-fg-muted); max-width: 52ch; line-height: 1.6; }
.ic-mg-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-cat-mg {
margin-bottom: 18px;
background: var(--nb-surface); color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r);
}
.ic-cat-mg > summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 17px; cursor: pointer; list-style: none;
}
.ic-cat-mg > summary::-webkit-details-marker { display: none; }
.ic-cat-mg > summary b { font-family: var(--nb-font-head); font-weight: 700; font-size: 15px; }
.ic-cat-mg > summary span { font-size: 12.5px; color: var(--nb-surface-fg-muted); }
.ic-cat-mg > summary::after {
content: ''; width: 9px; height: 9px; flex: none;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--nb-fast) var(--nb-ease);
}
.ic-cat-mg[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.ic-cat-body { padding: 0 17px 17px; }
.ic-cat-lead {
margin: 0 0 14px; max-width: 68ch; font-size: 12.5px; line-height: 1.6;
color: var(--nb-surface-fg-muted);
}
.ic-cat-rows { display: flex; flex-direction: column; gap: 8px; }
.ic-cat-row {
display: grid; align-items: center; gap: 10px;
grid-template-columns: 42px minmax(0, 1fr) minmax(0, 140px) 92px auto;
}
.ic-cat-mark {
display: grid; place-items: center; width: 42px; height: 42px;
background: var(--nb-surface-2); color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
cursor: pointer; transition: transform var(--nb-fast), background var(--nb-fast);
}
.ic-cat-mark:hover { background: var(--nb-yellow); color: var(--nb-ink); transform: translateY(-1px); }
.ic-cat-mark:active { transform: translateY(1px); }
.ic-cat-mark .ic-cat-ico { width: 21px; height: 21px; }
.ic-cat-mark .ic-cat-ico.is-letter { font-size: 12px; }
.ic-cat-row code {
font-family: var(--nb-font-mono); font-size: 12px;
color: var(--nb-surface-fg-muted); overflow: hidden; text-overflow: ellipsis;
}
.ic-cat-new {
display: grid; align-items: end; gap: 10px; margin-top: 16px; padding-top: 16px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px auto;
border-top: 2px dashed var(--nb-line-soft, rgba(255, 255, 255, .16));
}
.ic-cat-pos input, input.ic-cat-pos { text-align: center; }
.ic-cat-said { margin: 13px 0 0; font-size: 13px; }
.ic-cat-said.is-bad { color: var(--nb-red); }
.ic-cat-said[hidden] { display: none; }
@media (max-width: 720px) {
.ic-cat-row { grid-template-columns: 42px minmax(0, 1fr); }
.ic-cat-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ic-cat-row code { grid-column: 1 / -1; }
}
.ic-pick { width: min(560px, 100%); }
.ic-pick .nb-label { display: block; margin-bottom: 7px; }
.ic-pick #icPickQ { margin-bottom: 12px; }
.ic-pick-grid {
display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
max-height: 230px; overflow-y: auto; padding: 2px;
}
.ic-pick-i {
display: grid; place-items: center; gap: 7px; padding: 12px 6px;
background: var(--nb-surface-2); color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
cursor: pointer; transition: transform var(--nb-fast), background var(--nb-fast);
}
.ic-pick-i:hover { background: var(--nb-yellow); color: var(--nb-ink); transform: translateY(-2px); }
.ic-pick-i:active { transform: translateY(1px); }
.ic-pick-i svg { width: 24px; height: 24px; display: block; }
.ic-pick-i span {
font-size: 11px; line-height: 1.2; text-align: center;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-pick-wait { display: grid; place-items: center; padding: 30px 0; grid-column: 1 / -1; }
.ic-pick-none {
grid-column: 1 / -1; margin: 0; padding: 22px 4px;
font-size: 12.5px; line-height: 1.6; color: var(--nb-surface-fg-muted);
}
.ic-pick-or {
display: flex; align-items: center; gap: 12px; margin: 20px 0 16px;
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
font-family: var(--nb-font-head); font-weight: 700;
color: var(--nb-surface-fg-muted);
}
.ic-pick-or::before, .ic-pick-or::after {
content: ""; flex: 1; height: 2px; background: var(--nb-line-soft, rgba(255, 255, 255, .16));
}
.ic-pick-paste {
font-family: var(--nb-font-mono); font-size: 11.5px; line-height: 1.55;
resize: vertical; min-height: 68px;
}
.ic-pick .nb-note.is-bad { color: var(--nb-red); }
.ic-pick .nb-note[hidden] { display: none; }
.ic-mg-said {
padding: 12px 15px; margin-bottom: 18px;
background: var(--nb-surface-2); border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
font-size: 14px;
}
.ic-mg-said[hidden] { display: none; }
.ic-mg-list { display: flex; flex-direction: column; gap: 10px; }
.ic-mg-row {
display: grid; align-items: center; gap: 14px;
grid-template-columns: 46px minmax(0, 1fr) auto auto;
padding: 12px 14px;
background: var(--nb-surface); color: var(--nb-surface-fg);
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
}
.ic-mg-prev {
width: 46px; height: 46px; display: grid; place-items: center;
border: var(--nb-bd-thin); border-radius: var(--nb-r-sm);
background: var(--nb-bg);
}
.ic-mg-prev svg { width: 24px; height: 24px; }
.ic-mg-txt { min-width: 0; }
.ic-mg-txt b {
display: block; font-family: var(--nb-font-head); font-weight: 700; font-size: 15px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-mg-txt code {
font-family: var(--nb-font-mono); font-size: 12px;
color: var(--nb-surface-fg-muted);
}
.ic-mg-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ic-mg-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
.ic-mg-row { grid-template-columns: 46px minmax(0, 1fr); }
.ic-mg-tags, .ic-mg-act { grid-column: 1 / -1; justify-content: flex-start; }
}
.ic-up-danger { order: -1; }
.ic-up-danger[hidden] { display: none; }