.crop-panel{padding:1rem}@media(min-width:768px){.crop-panel{padding:1.2rem}}.crop-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--stack);align-items:flex-end;margin-bottom:var(--block-gap)}.crop-head h2{margin:.35rem 0 0;font-size:clamp(1.25rem,2.5vw,1.75rem)}.crop-target{margin:0;color:var(--text-muted);font-size:.85rem;font-weight:500}.crop-toolbar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:stretch;margin-bottom:var(--block-gap)}.crop-toolbar .btn{flex:0 0 auto}.preset-field{display:flex;align-items:stretch;min-width:0;flex:1 1 14rem;max-width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden}.preset-field__label{display:flex;align-items:center;flex:0 0 auto;padding:0 .75rem;font-size:.72rem;font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-muted);border-right:1px solid var(--line);user-select:none}.preset-field__select{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--text);font-size:.88rem;padding:.55rem 1.8rem .55rem .75rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6560' d='M1.2 1.2L6 6l4.8-4.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}.preset-field__select:focus{outline:none}.preset-field:focus-within{border-color:var(--text);box-shadow:0 0 0 2px #1c191714}.zoom-field{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden}.zoom-btn{width:2.4rem;border:0;background:var(--bg-muted);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;font-family:var(--mono)}.zoom-btn:hover:not(:disabled){background:var(--accent-soft)}.zoom-btn:disabled{opacity:.35;cursor:not-allowed}.zoom-btn+.zoom-value{border-left:1px solid var(--line)}.zoom-value{display:flex;align-items:center;justify-content:center;min-width:3.4rem;padding:0 .35rem;font-size:.82rem;color:var(--text-muted);border-left:1px solid var(--line);border-right:1px solid var(--line)}.stage-frame{display:flex;justify-content:center;width:100%}.stage{position:relative;width:min(100%,calc(min(70vh,520px) * var(--ar-w, 1) / var(--ar-h, 1)));max-width:100%;min-height:140px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background-color:#ddd6cb;background-image:linear-gradient(45deg,#cfc6b8 25%,transparent 25%),linear-gradient(-45deg,#cfc6b8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfc6b8 75%),linear-gradient(-45deg,transparent 75%,#cfc6b8 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:hidden;user-select:none;touch-action:none}@media(min-width:768px){.stage{width:min(100%,calc(min(75vh,640px) * var(--ar-w, 1) / var(--ar-h, 1)))}}.stage.is-empty{cursor:pointer;border-style:dashed}.stage.is-empty:hover{border-color:var(--text);background-color:#d5cdc0}.stage.has-image{cursor:grab;box-shadow:inset 0 0 0 1px #1c19170f}.stage.is-dragging{cursor:grabbing}.stage-empty{display:grid;place-content:center;gap:.35rem;min-height:160px;height:100%;padding:1.25rem;text-align:center;background:var(--bg-muted);pointer-events:none}.stage-empty__title{margin:0;font-weight:700;font-size:1.05rem;color:var(--text)}.stage-empty p{margin:0;max-width:22rem;font-size:.92rem}.stage-image{position:absolute;left:0;top:0;max-width:none;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}.safe-zone{position:absolute;border:1.5px dashed;border-radius:2px;pointer-events:none;z-index:2}.safe-zone span{position:absolute;left:4px;top:4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:.12rem .35rem;border-radius:3px;background:#1c1917d1;color:#fffcf7;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:767px){.safe-zone span{display:none}.crop-toolbar{display:grid;grid-template-columns:1fr 1fr}.crop-toolbar .btn-primary{grid-column:1}.crop-toolbar .btn-ghost{grid-column:2}.preset-field{grid-column:1 / -1;flex:1 1 auto;max-width:none}.zoom-field{grid-column:1 / -1;justify-content:stretch}.zoom-btn{flex:1}.zoom-value{flex:1.2}}.crop-hint{margin:.75rem 0 0;font-size:.85rem}.crop-steps{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.45rem}@media(min-width:720px){.crop-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}}.crop-steps li{display:flex;align-items:flex-start;gap:.55rem;margin:0;padding:.65rem .75rem;border-radius:var(--radius-xs);background:var(--bg-muted);border:1px solid var(--line);font-size:.86rem;color:var(--text-muted);line-height:1.35}.crop-steps__n{display:inline-grid;place-content:center;width:1.35rem;height:1.35rem;border-radius:4px;background:var(--crop-soft);color:var(--crop);font-size:.72rem;font-weight:600;flex:0 0 auto}.device-compare-note{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.88rem;max-width:36rem}.legend{list-style:none;margin:.65rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 1rem;font-size:.85rem;color:var(--text-muted)}.legend .swatch{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-right:.35rem;vertical-align:-.05rem}.device-compare{margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid var(--line)}.device-compare__head{margin-bottom:.95rem;max-width:var(--prose-max)}.device-compare__eyebrow{margin:0 0 .25rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crop)}.device-compare__title{margin:0 0 .35rem;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}.device-compare__sub{margin:0;font-size:.9rem}.device-compare__grid{display:grid;gap:1rem;align-items:start}@media(min-width:720px){.device-compare__grid{grid-template-columns:1.45fr minmax(11rem,.7fr);gap:1.25rem}}.device-frame{margin:0}.device-frame__cap{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}.device-frame__label{font-weight:650;font-size:.92rem;color:var(--text)}.device-frame__size{font-size:.72rem;color:var(--text-faint);letter-spacing:.02em}.device-frame__chrome{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg-elevated);box-shadow:var(--shadow-sm);overflow:hidden}.device-frame__cover{position:relative;width:100%;aspect-ratio:820 / 312;background:#d5cdc0;overflow:hidden}.device-frame__cover--mobile{aspect-ratio:640 / 360}.device-frame__canvas{display:block;width:100%;height:100%;object-fit:cover}.device-frame__placeholder{position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 48% 70%,rgba(58,52,46,.55) 0%,transparent 55%),linear-gradient(165deg,#e4dcd0,#b8a994 42%,#7d6e5d);pointer-events:none}.device-frame__placeholder--tall{background:radial-gradient(ellipse 70% 55% at 50% 58%,rgba(58,52,46,.5) 0%,transparent 58%),linear-gradient(175deg,#ddd4c6,#a89884,#6f6153)}.device-frame__mobile-guide{position:absolute;inset:0 16.2%;border:1.5px dashed color-mix(in srgb,var(--crop) 85%,#fff);box-shadow:0 0 0 999px #1c191738;pointer-events:none;z-index:1}.device-frame__body{position:relative;padding:1.55rem .85rem .85rem;display:grid;gap:.4rem;background:var(--bg-elevated)}.device-frame__body--mobile{padding:1.45rem .65rem .75rem;border-radius:0 0 .35rem .35rem}.device-frame__avatar{position:absolute;left:.85rem;top:-1.15rem;width:2.75rem;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#3a342e,#1c1917);border:3px solid var(--bg-elevated);box-shadow:0 2px 8px #1c19172e;z-index:2;pointer-events:none}.device-frame__avatar--mobile{left:.55rem;top:-1rem;width:2.35rem;border-width:2.5px}.device-frame__skel{height:.45rem;border-radius:99px;background:var(--bg-muted)}.device-frame__skel--wide{width:42%}.device-frame__skel--short{width:28%;opacity:.7}.device-frame__phone{position:relative;border-radius:1.15rem;border:1px solid var(--line-strong);background:#1c1917;padding:.45rem .4rem .55rem;box-shadow:var(--shadow-sm);max-width:16.5rem}.device-frame__notch{width:28%;height:.28rem;margin:0 auto .35rem;border-radius:99px;background:#3f3a36}.device-frame__phone .device-frame__cover{border-radius:.35rem .35rem 0 0}