.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .studio-page .breadcrumbs { margin:8px 0 14px; } .workspace-heading { margin-bottom:22px; } .workspace-heading h1 { font-size:clamp(34px,3.5vw,42px); line-height:1.3; margin-bottom:10px; } .workspace-heading > p { color:var(--muted); font-size:15px; line-height:1.9; } .editor-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); align-items:start; gap:42px; } .editor-preview { position:sticky; top:96px; min-width:0; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); } .preview-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; font-size:12px; color:var(--muted); } .preview-topline span:first-child { color:var(--accent-text); font-weight:650; } .diy-stage { --stage-height:clamp(240px,calc(100dvh - 410px),480px); position:relative; display:grid; place-items:center; width:100%; height:var(--stage-height); overflow:hidden; border-radius:10px; background:#f1f3f4; } .diy-art { position:relative; width:min(100%,calc(var(--stage-height) * .8)); aspect-ratio:4/5; min-width:0; min-height:0; transform-origin:center; transition:transform .3s var(--ease); } .diy-art.is-mirrored { transform:scaleX(-1); } .diy-ear { display:block; width:100%; height:100%; object-fit:contain; } .diy-pieces { position:absolute; inset:0; transition:opacity .15s; } .diy-pieces.is-hidden { opacity:0; pointer-events:none; } .diy-piece { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:calc(var(--piece-width) * 1%); padding:0; border:0; background:transparent; cursor:grab; touch-action:none; transform:translate(calc(-50% + var(--drag-x,0px)),calc(-50% + var(--drag-y,0px))) rotate(var(--angle)); } .diy-piece::after { content:""; position:absolute; width:max(44px,125%); height:max(44px,125%); top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid transparent; border-radius:7px; } .diy-piece:hover::after,.diy-piece.is-selected::after,.diy-piece:focus-visible::after { border-color:#9f2945; box-shadow:0 0 0 2px #ffffffaa; } .diy-piece.is-selected { z-index:2; } .diy-piece.is-dragging { cursor:grabbing; z-index:3; } .diy-piece img { width:100%; height:auto; max-width:none; pointer-events:none; filter:drop-shadow(1px 2px 1px #332d3538); } .diy-piece:focus-visible { outline:0; } .diy-empty { position:absolute; inset:20% 10% auto; padding:18px; border:1px solid #d7d3d6; border-radius:9px; background:#fdfbfce8; color:#51494d; text-align:center; font-size:14px; pointer-events:none; } .diy-view-tools { position:absolute; right:12px; bottom:12px; display:flex; gap:6px; } .diy-view-tools .tool-button { width:44px; height:44px; } .diy-image-error { position:absolute; inset:20px; display:grid; place-items:center; padding:25px; background:#f1f3f4; color:#51494d; text-align:center; font-size:14px; pointer-events:none; } .editor-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .editor-actions .button { min-height:47px; padding-inline:18px; font-size:13px; gap:12px; } .button-secondary { border:1px solid var(--line); color:var(--text); background:var(--surface); box-shadow:none; } .button-secondary:hover { background:var(--surface-soft); box-shadow:none; } .editor-status { min-height:44px; margin-top:16px; color:var(--accent-text); font-size:12px; line-height:1.85; overflow-wrap:anywhere; } .editor-note { color:var(--muted); font-size:11px; line-height:1.9; } .share-result { margin:0 0 16px; } .share-result label { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; } .share-result input { width:100%; min-width:0; height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--text); font:12px system-ui,sans-serif; } .editor-controls { min-width:0; } .control-section { padding-block:23px; border-bottom:1px solid var(--line); } .control-section:first-child { padding-top:0; } .control-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:13px; } .control-section h2 { font-size:16px; font-weight:700; line-height:1.55; } .control-title > span { color:var(--subtle); font-size:11px; } .control-help { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.85; } .quiet-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:4px 0; border:0; background:transparent; color:var(--accent-text); font-size:12px; font-weight:600; transition:color .2s; } .quiet-button:hover { color:var(--brand-hover); } .editor-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .editor-presets button { min-height:45px; padding:8px 5px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; transition:background-color .2s,border-color .2s,color .2s; } .editor-presets button[aria-pressed="true"] { border-color:var(--brand); color:var(--accent-text); background:var(--surface-accent); } .jewelry-library { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .library-item { display:grid; place-items:center; align-content:center; gap:8px; min-height:99px; padding:11px 4px 8px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface); font-size:11px; transition:background-color .2s,border-color .2s,transform .2s; } .library-item img { width:42px; height:42px; object-fit:contain; } .library-item:hover { background:var(--surface-soft); border-color:var(--brand); } .library-item:active { transform:scale(.97); } .diy-picker { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:19px; } .diy-picker button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface); font-size:13px; font-weight:650; } .diy-picker button[aria-pressed="true"] { border-color:var(--brand); color:var(--accent-text); background:var(--surface-accent); } .selected-controls fieldset { min-width:0; margin:0; padding:0; border:0; } .selected-controls fieldset label { display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:12px; } .selected-controls output { color:var(--accent-text); font-variant-numeric:tabular-nums; } .selected-controls input[type="range"] { display:block; width:100%; height:34px; margin:4px 0 14px; accent-color:#9f2945; cursor:pointer; } .position-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; } .position-controls > span { font-size:12px; color:var(--muted); } .nudge-buttons { display:flex; gap:7px; } .nudge-buttons button { width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:19px; } .nudge-buttons button:active { background:var(--surface-accent); } .edit-history { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:17px; } .edit-history .button { min-height:44px; padding-inline:20px; font-size:12px; } .selection-empty { color:var(--muted); font-size:13px; margin-bottom:10px; } .personal-materials > summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; cursor:pointer; font-size:16px; font-weight:700; } .personal-materials > summary::-webkit-details-marker { display:none; } .personal-materials > summary .icon { width:18px; height:18px; } .personal-materials[open] > summary .icon { transform:rotate(180deg); } .file-label { display:block; margin:20px 0 9px; font-size:13px; font-weight:650; } .file-input { display:block; max-width:100%; width:100%; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:12px; line-height:2; } .file-input::file-selector-button { min-height:36px; margin-right:8px; padding:5px 11px; border:0; border-radius:5px; background:var(--surface-soft); color:var(--text); font:inherit; cursor:pointer; } .draft-actions { display:flex; flex-wrap:wrap; gap:9px; margin:15px 0 3px; } .draft-actions .button { min-height:45px; padding-inline:15px; font-size:12px; gap:7px; } .editor-controls button:disabled,.editor-controls fieldset:disabled,.editor-actions button:disabled { opacity:.5; cursor:default; } .studio-next { margin:70px 0 80px; padding-top:35px; border-top:1px solid var(--line); } .studio-next h2 { font-size:25px; line-height:1.5; margin-bottom:13px; } .studio-next p { color:var(--muted); font-size:14px; margin-bottom:15px; } .studio-next .text-link { margin-right:28px; } .export-dialog { width:min(560px,calc(100% - 30px)); padding:35px 24px 23px; } .export-dialog h2 { font-size:23px; margin-inline:20px; } .export-preview { margin:20px 0; min-height:120px; display:grid; place-items:center; } .export-preview > img { width:auto; max-width:100%; max-height:calc(100dvh - 260px); border-radius:8px; } .export-preview > p { color:var(--muted); font-size:14px; line-height:1.8; } .export-dialog > p { color:var(--muted); font-size:11px; margin-top:16px; } @media (max-width:1080px) { .editor-layout { gap:28px; grid-template-columns:minmax(0,1.15fr) minmax(290px,1fr); } .editor-preview { padding:17px; } .editor-actions .button { padding-inline:13px; gap:8px; font-size:12px; } } @media (max-width:740px) { .workspace-heading { margin-bottom:24px; } .workspace-heading h1 { font-size:34px; } .workspace-heading > p { font-size:14px; } .editor-layout { display:block; } .editor-preview { position:static; padding:15px; } .diy-stage { --stage-height:480px; height:auto; aspect-ratio:4/5; max-height:480px; } .editor-actions { gap:8px; } .editor-actions .button { flex:1; min-height:46px; padding-inline:9px; font-size:12px; gap:7px; } .editor-actions .icon { width:16px; height:16px; } .editor-status { min-height:44px; font-size:12px; } .editor-controls { margin-top:32px; } .control-section { padding-block:24px; } .control-section h2,.personal-materials > summary { font-size:17px; } .library-item { min-height:100px; font-size:12px; } .library-item img { width:45px; height:45px; } .control-help { font-size:12px; } .studio-next { margin:50px 0 60px; } .studio-next h2 { font-size:23px; } } @media (prefers-reduced-motion:reduce) { .diy-art,.diy-pieces,.library-item { transition:none; } }