.ns-note {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid #bbf7d0;
border-left: 3px solid #16a34a;
border-radius: 12px;
background: #f0fdf4;
color: #14532d;
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; }
.studio {
display: grid;
gap: clamp(24px, 4vw, 40px);
align-items: start;
padding: 28px 0 16px;
}
@media (min-width: 1000px) { .studio { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }
.panelbox { display: grid; gap: 20px; }
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
display: grid;
gap: 14px;
}
.panel__head { display: flex; align-items: baseline; gap: 12px; }
.panel__head h2 { font-size: 16px; font-weight: 800; }
.aside { margin-left: auto; font-size: 12.5px; color: #94a3b8; }
.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:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.range { width: 100%; accent-color: #16a34a; }
output[data-qval] { font-weight: 800; color: #16a34a; }
.picker { display: grid; gap: 8px; border: 0; padding: 0; }
.opt {
display: flex;
align-items: baseline;
gap: 10px;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 11px;
cursor: pointer;
transition: border-color .12s, box-shadow .12s;
}
.opt:hover { border-color: #cbd5e1; }
.opt:has(input:checked) { border-color: #16a34a; box-shadow: inset 0 0 0 1px #16a34a; }
.opt:has(input:focus-visible) { outline: 2px solid #16a34a; outline-offset: 2px; }
.opt__name { font-size: 14.5px; font-weight: 700; }
.opt__use { margin-left: auto; font-size: 12.5px; color: #94a3b8; }
.work { display: grid; gap: 16px; }
.drop {
border: 2px dashed var(--line);
border-radius: 18px;
background: var(--soft);
transition: border-color .14s, background .14s;
}
.drop.is-over { border-color: #16a34a; background: #f0fdf4; }
.drop:focus-within { border-color: #16a34a; }
.drop__label {
display: grid;
justify-items: center;
gap: 7px;
padding: 40px 20px;
cursor: pointer;
text-align: center;
}
.drop__ico { width: 40px; height: 40px; color: #94a3b8; }
.drop__main { font-size: 16px; font-weight: 700; }
.drop__link { color: #16a34a; 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;
}
.summary {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
}
.summary__line { font-size: 15px; font-weight: 700; }
.summary__act { margin-left: auto; display: flex; gap: 8px; }
.files { list-style: none; display: grid; gap: 10px; }
.row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
}
.row__thumb {
flex: none;
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: var(--soft);
display: grid;
place-items: center;
}
.row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row__thumb.is-bad { background: #fef2f2; color: #dc2626; font-weight: 800; font-size: 20px; }
.row__body { min-width: 0; display: grid; gap: 3px; }
.row__name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.row__meta { font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; }
.row__msg { font-size: 13px; color: #b91c1c; line-height: 1.5; }
.row__save { margin-left: auto; flex: none; }
.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; }