.ns-note {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid #fecdd3;
border-left: 3px solid #e11d48;
border-radius: 12px;
background: #fff1f2;
color: #881337;
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; font-variant-numeric: tabular-nums; }
.field { display: grid; gap: 6px; }
.lbl { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--slate); }
.range { width: 100%; accent-color: #e11d48; }
output[data-zval] { font-weight: 800; color: #e11d48; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--slate); cursor: pointer; }
.check input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: #e11d48; }
.drop {
border: 2px dashed var(--line);
border-radius: 14px;
background: var(--soft);
transition: border-color .14s, background .14s;
}
.drop.is-over { border-color: #e11d48; background: #fff1f2; }
.drop:focus-within { border-color: #e11d48; }
.drop__label { display: grid; justify-items: center; gap: 5px; padding: 26px 16px; cursor: pointer; text-align: center; }
.drop__ico { width: 32px; height: 32px; color: #94a3b8; }
.drop__main { font-size: 15px; font-weight: 700; color: #e11d48; }
.drop__sub { font-size: 12.5px; color: #94a3b8; }
.err {
padding: 12px 14px;
border: 1px solid #fecaca;
border-radius: 12px;
background: #fef2f2;
color: #991b1b;
font-size: 14px;
line-height: 1.55;
}
.picker { display: grid; gap: 8px; border: 0; padding: 0; }
.opt {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: baseline;
gap: 4px 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: #e11d48; box-shadow: inset 0 0 0 1px #e11d48; }
.opt:has(input:focus-visible) { outline: 2px solid #e11d48; outline-offset: 2px; }
.opt__name { font-size: 14.5px; font-weight: 700; }
.opt__mm { font-size: 12.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
.opt__use { grid-column: 1 / -1; font-size: 12.5px; color: #94a3b8; }
.work { display: grid; gap: 18px; }
.stage { display: grid; justify-items: center; gap: 12px; }
.frame {
position: relative;
width: min(320px, 78vw);
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 10px;
cursor: grab;
touch-action: none;
user-select: none;
}
.frame.is-dragging { cursor: grabbing; }
.frame__img {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
max-width: none;
will-change: transform;
pointer-events: none;
}
.frame__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
text-align: center;
color: #94a3b8;
font-size: 14px;
}
.frame__guides { position: absolute; inset: 0; pointer-events: none; }
.gl { position: absolute; }
.gl--head,
.gl--chin {
left: 0;
right: 0;
height: 0;
border-top: 1px dashed rgba(225, 29, 72, .85);
}
.gl--mid {
top: 0;
bottom: 0;
left: 50%;
width: 0;
border-left: 1px dashed rgba(225, 29, 72, .4);
}
.stage__note {
max-width: 34rem;
font-size: 13.5px;
color: var(--slate);
text-align: center;
line-height: 1.6;
}
.outs { display: grid; gap: 10px; }
.out {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
}
.out__body { display: grid; gap: 3px; min-width: 0; }
.out__body b { font-size: 15px; font-weight: 800; }
.out__body span { font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; }
.out .btn { margin-left: auto; flex: none; }
.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; }
.why { padding: 36px 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; }