.ns-note {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid #e9d5ff;
border-left: 3px solid #9333ea;
border-radius: 12px;
background: #faf5ff;
color: #581c87;
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 72px;
}
@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; font-variant-numeric: tabular-nums; }
.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: 14.5px;
color: var(--ink);
background: var(--field);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
}
.ctrl:focus { outline: none; border-color: #9333ea; box-shadow: 0 0 0 3px rgba(147, 51, 234, .15); }
.range { width: 100%; accent-color: #9333ea; }
output[data-gapval] { font-weight: 800; color: #9333ea; }
.picker { display: grid; gap: 8px; border: 0; padding: 0; }
.picker.two { grid-template-columns: 1fr 1fr; }
.opt {
display: grid;
gap: 3px;
padding: 12px 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: #9333ea; box-shadow: inset 0 0 0 1px #9333ea; }
.opt:has(input:focus-visible) { outline: 2px solid #9333ea; outline-offset: 2px; }
.opt__name { font-size: 14.5px; font-weight: 700; }
.opt__use { font-size: 12.5px; color: #94a3b8; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, .14);
cursor: pointer;
padding: 0;
}
.swatch.is-clear {
background:
linear-gradient(45deg, #cbd5e1 25%, transparent 25%, transparent 75%, #cbd5e1 75%) 0 0/12px 12px,
linear-gradient(45deg, #cbd5e1 25%, #fff 25%, #fff 75%, #cbd5e1 75%) 6px 6px/12px 12px;
}
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.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: #9333ea; background: #faf5ff; }
.drop:focus-within { border-color: #9333ea; }
.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: #9333ea; 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: 10px 12px;
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__thumb {
flex: none;
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
background: var(--soft);
display: grid;
place-items: center;
}
.row__thumb canvas { display: block; max-width: 100%; max-height: 100%; }
.row__body { min-width: 0; display: grid; gap: 2px; }
.row__name { font-size: 14px; 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: #9333ea; color: #9333ea; }
.iconbtn:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; }
.preview { display: grid; gap: 10px; }
.preview__head { display: flex; align-items: baseline; gap: 12px; }
.preview__head b { font-size: 15px; font-weight: 800; }
.preview__box {
padding: 16px;
border: 1px solid var(--line);
border-radius: 14px;
background:
linear-gradient(45deg, #eef2f7 25%, transparent 25%, transparent 75%, #eef2f7 75%) 0 0/16px 16px,
linear-gradient(45deg, #eef2f7 25%, #fff 25%, #fff 75%, #eef2f7 75%) 8px 8px/16px 16px;
display: grid;
justify-items: center;
max-height: 70vh;
overflow: auto;
}
.preview__box canvas {
display: block;
max-width: 100%;
box-shadow: 0 8px 26px rgba(15, 23, 42, .12);
}
.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; }