.ns-note {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid #fde68a;
border-left: 3px solid #b45309;
border-radius: 12px;
background: #fffbeb;
color: #78350f;
font-size: 15px;
}
.pagehead { padding: 40px 0 4px; max-width: 46rem; }
.pagehead h1 { font-size: clamp(26px, 5.4vw, 36px); font-weight: 800; letter-spacing: -.6px; }
.pagehead p { margin-top: 10px; color: var(--slate); font-size: clamp(15px, 3.6vw, 16.5px); }
.pagehead b { color: var(--ink); font-weight: 700; }
.modes {
display: inline-flex;
gap: 4px;
margin: 26px 0 20px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--soft);
}
.mode {
font: inherit;
font-size: 14.5px;
font-weight: 700;
color: var(--slate);
background: transparent;
border: 0;
border-radius: 999px;
padding: 9px 20px;
cursor: pointer;
transition: background .12s, color .12s;
}
.mode:hover { color: var(--ink); }
.mode.is-on { background: #b45309; color: #fff; }
.mode:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.work { display: grid; gap: 16px; max-width: 46rem; padding-bottom: 8px; }
.drop {
border: 2px dashed var(--line);
border-radius: 18px;
background: var(--soft);
transition: border-color .14s, background .14s;
}
.drop.is-over { border-color: #b45309; background: #fffbeb; }
.drop:focus-within { border-color: #b45309; }
.drop__label { display: grid; justify-items: center; gap: 7px; padding: 34px 20px; cursor: pointer; text-align: center; }
.drop__ico { width: 38px; height: 38px; color: #94a3b8; }
.drop__main { font-size: 15.5px; font-weight: 700; }
.drop__link { color: #b45309; text-decoration: underline; text-underline-offset: 3px; }
.drop__sub { font-size: 13px; color: #94a3b8; }
.err {
padding: 12px 14px;
border: 1px solid #fecaca;
border-radius: 12px;
background: #fef2f2;
color: #991b1b;
font-size: 14px;
line-height: 1.55;
}
.files { list-style: none; display: grid; gap: 8px; }
.row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
}
.row__no {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--soft);
color: var(--slate);
font-size: 12px;
font-weight: 800;
display: grid;
place-items: center;
}
.row__body { min-width: 0; display: grid; gap: 2px; }
.row__name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.row__meta { font-size: 12.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
.row__act { margin-left: auto; flex: none; display: flex; gap: 4px; }
.iconbtn {
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--slate);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.iconbtn:hover { border-color: #b45309; color: #b45309; }
.iconbtn:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.panel {
padding: 20px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
}
.field { display: grid; gap: 6px; }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--slate); }
.note { font-size: 13px; color: #94a3b8; line-height: 1.55; }
.ctrl {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--field);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
}
.ctrl.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ctrl:focus { outline: none; border-color: #b45309; box-shadow: 0 0 0 3px rgba(180, 83, 9, .15); }
.act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.act__note { font-size: 14.5px; color: var(--slate); font-weight: 700; }
.act .btn { margin-left: auto; }
.why { padding: 40px 0 72px; }
.why h2 { font-size: clamp(20px, 4.4vw, 25px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 20px; }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.why__item { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.why__item h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.why__item p { font-size: 14.5px; color: var(--slate); line-height: 1.6; }
.howto { padding: 36px 0 8px; max-width: 46rem; }
.howto h2 { font-size: clamp(20px, 4.4vw, 25px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 16px; }
.steps { display: grid; gap: 10px; padding-left: 1.2em; }
.steps li { color: var(--slate); font-size: 15px; line-height: 1.65; }
.steps b { color: var(--ink); font-weight: 700; }
.howto__note {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--soft);
font-size: 14.5px;
color: var(--slate);
line-height: 1.65;
}
.howto__note b { color: var(--ink); font-weight: 700; }