:root{color:#171717;background:#f4f1ec;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #171717;--muted: #6c6861;--hairline: #dedbd5;--panel: #fffdfa;--canvas: #ebe7df;--teal: #098a87;--teal-dark: #04716f;--ember: #c45f3f}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}svg{display:block}.appShell{min-height:100vh;display:grid;place-items:start center;padding:20px;background:linear-gradient(135deg,rgba(9,138,135,.08),transparent 34%),linear-gradient(315deg,rgba(196,95,63,.08),transparent 28%),#f4f1ec}.phoneFrame{width:min(100%,430px);min-height:0;overflow:hidden;display:grid;grid-template-rows:auto auto 260px auto auto;background:var(--panel);border:1px solid rgba(23,23,23,.08);border-radius:28px;box-shadow:0 28px 70px #201c182e}.phoneFrame.previewFocus{grid-template-rows:auto auto 410px auto auto}.phoneFrame.privacyOpen{grid-template-rows:auto auto auto 260px auto auto}.phoneFrame.privacyOpen.previewFocus{grid-template-rows:auto auto auto 410px auto auto}.topBar{height:72px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:10px 22px 0}.topBar h1{margin:0;text-align:center;font-size:28px;line-height:1;font-weight:750;letter-spacing:0}.iconButton,.floatingAction{display:grid;place-items:center;border:0;background:transparent;cursor:pointer}.iconButton{width:44px;height:44px;border-radius:50%}.iconButton.active{color:var(--teal);background:#098a8714}.iconButton svg,.floatingAction svg,.secondaryButton svg,.saveLink svg,.iconOnlyButton svg,.primaryButton svg,.tabBar svg,.moveTattooButton svg,.placementControls svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.privacyPanel{padding:14px 20px 16px;border-top:1px solid rgba(23,23,23,.06);border-bottom:1px solid var(--hairline);background:#fbf8f2}.privacyList{display:grid;gap:9px}.privacyItem{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px;border:1px solid rgba(23,23,23,.07);border-radius:14px;background:#ffffffad}.privacyItem svg{width:24px;height:24px;color:var(--teal);stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.privacyItem strong{display:block;margin-bottom:3px;font-size:13px;line-height:1.2}.privacyItem p{margin:0;color:var(--muted);font-size:12px;line-height:1.35}.privacyToggle{width:100%;padding:12px 0 10px}.privacyActions{display:flex;flex-wrap:wrap;gap:8px}.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 18px 18px;border-bottom:1px solid var(--hairline)}.step{display:grid;justify-items:center;gap:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1}.step span{width:28px;height:28px;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:50%;font-weight:700;color:var(--ink)}.step svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}.step.active{color:var(--teal);font-weight:700}.step.active span{color:var(--teal);border-color:var(--teal)}.previewCanvas{position:relative;overflow:hidden;min-height:220px;background:var(--canvas);touch-action:pan-y}.previewCanvas.moveMode{cursor:grab;touch-action:none}.previewCanvas.moveMode:active{cursor:grabbing}.previewCanvas img,.previewCanvas video{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;filter:saturate(.96) contrast(1.03)}.previewCanvas video{background:#171717}.previewMedia.hidden,.previewVideo.hidden{display:none}.tattooOverlay{position:absolute;left:50%;top:51%;width:44%;height:58%;pointer-events:none;mix-blend-mode:multiply;transform-origin:center;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease,transform .18s ease,opacity .18s ease}.tattooOverlay.anchored{transform-box:fill-box}.tattooOverlay.regionFinger{left:50%;top:42%;width:45%;height:55%}.tattooOverlay.regionPalm{left:50%;top:55%;width:55%;height:47%}.tattooOverlay.regionKnuckle{left:50%;top:37%;width:62%;height:30%}.tattooOverlay.regionWrist{left:50%;top:75%;width:74%;height:30%}.landmarkOverlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}.regionHull{fill:#098a8721;stroke:#098a87c7;stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}.landmarkBone{stroke:#098a879e;stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke}.landmarkPoint{fill:#fffdfa;stroke:var(--teal);stroke-width:.8;vector-effect:non-scaling-stroke}.tattooStroke{stroke:#111;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}.tattooStroke circle{fill:#111;stroke:none}.tattooStroke.blackwork{stroke-width:5}.canvasActions{position:absolute;inset:auto 20px 18px;display:flex;gap:12px;justify-content:space-between}.detectionBadge{position:absolute;top:14px;left:16px;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border:1px solid rgba(23,23,23,.08);border-radius:999px;background:#fffdfae6;color:var(--muted);box-shadow:0 10px 22px #17171714;font-size:12px;font-weight:800}.detectionBadge svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.detectionBadge.found{color:var(--teal)}.detectionBadge.error,.detectionBadge.missing{color:var(--ember)}.liveQuality{position:absolute;top:54px;left:16px;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 10px;border:1px solid rgba(23,23,23,.08);border-radius:999px;background:#fffdfae6;color:var(--muted);box-shadow:0 10px 22px #17171714;font-size:12px;font-weight:800}.liveQuality strong{color:var(--ink);font-size:11px}.liveQuality.stable{color:var(--teal)}.liveQuality.lost{color:var(--ember)}.liveQualityText{color:var(--teal)!important}.previewSizeButton{position:absolute;top:14px;right:16px;min-height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid rgba(23,23,23,.08);border-radius:999px;background:#fffdfaeb;color:var(--ink);box-shadow:0 10px 22px #17171714;cursor:pointer;font-size:12px;font-weight:800}.moveTattooButton{position:absolute;top:54px;right:16px;min-height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid rgba(23,23,23,.08);border-radius:999px;background:#fffdfaeb;color:var(--ink);box-shadow:0 10px 22px #17171714;cursor:pointer;font-size:12px;font-weight:800}.moveTattooButton.active{color:#fff;border-color:var(--teal);background:var(--teal)}.previewSizeButton svg,.moveTattooButton svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.floatingAction{width:52px;height:52px;border-radius:50%;background:#fffdfaeb;box-shadow:0 12px 24px #1717171f}.floatingAction.active,.secondaryButton.active{color:#fff;border-color:var(--teal);background:var(--teal)}.controlPanel{padding:16px 20px 18px;border-top:1px solid rgba(23,23,23,.06);background:var(--panel);scrollbar-width:none}.controlPanel::-webkit-scrollbar{display:none}.captureRow{display:grid;grid-template-columns:auto auto 1fr;gap:10px 12px;align-items:center;margin-bottom:16px}.captureRow p{grid-column:1 / -1;margin:0;color:var(--muted);font-size:13px;line-height:1.35}.captureQuality{grid-column:1 / -1;display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:center;padding:10px;border:1px solid rgba(23,23,23,.07);border-radius:14px;background:#fff}.captureQuality svg{width:22px;height:22px;color:var(--muted);stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.captureQuality strong,.captureQuality span{display:block}.captureQuality strong{margin-bottom:2px;color:var(--ink);font-size:13px;line-height:1.2}.captureQuality span{color:var(--muted);font-size:12px;line-height:1.35}.captureQuality.ready{border-color:#098a8738;background:#098a870f}.captureQuality.ready svg,.captureQuality.ready strong{color:var(--teal)}.captureQuality.help{border-color:#c45f3f33;background:#c45f3f12}.captureQuality.help svg,.captureQuality.help strong{color:var(--ember)}.fileInput{display:none}.secondaryButton{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--hairline);border-radius:999px;background:#fff;cursor:pointer;padding:0 14px;font-size:14px;font-weight:700}.secondaryButton:disabled{cursor:not-allowed;opacity:.45}.dangerButton{color:var(--ember)}.controlGroup{padding:14px 0;border-top:1px solid var(--hairline)}.groupHeader{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.groupHeader h2{margin:0;font-size:16px;line-height:1.1}.groupHeader span{color:var(--muted);font-size:12px;line-height:1.2}.styleGrid,.variantGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.promptBuilder{display:grid;gap:8px;margin-bottom:12px}.promptBuilder label{color:var(--muted);font-size:12px;font-weight:800}.promptBuilder input{width:100%;min-height:42px;border:1px solid var(--hairline);border-radius:12px;background:#fff;color:var(--ink);padding:0 12px;outline:none}.promptBuilder input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #098a8721}.promptChips{display:flex;flex-wrap:wrap;gap:7px}.promptChips button{min-height:30px;border:1px solid var(--hairline);border-radius:999px;background:#fff;color:var(--muted);cursor:pointer;padding:0 10px;font-size:12px;font-weight:800}.promptChips button:focus-visible,.promptChips button:hover{color:var(--teal);border-color:var(--teal)}.styleTile{position:relative;min-height:88px;display:grid;justify-items:center;align-content:center;gap:7px;border:1px solid var(--hairline);border-radius:14px;background:#fff;cursor:pointer;font-size:13px;font-weight:700}.variantTile{min-height:116px;display:grid;justify-items:center;align-content:center;gap:6px;border:1px solid var(--hairline);border-radius:14px;background:#fff;cursor:pointer;color:var(--ink);font-size:12px;font-weight:800}.styleTile svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.variantTile svg{width:44px;height:72px}.variantTile .tattooStroke{stroke-width:8}.variantTile .tattooStroke.blackwork{stroke-width:10}.styleTile.selected,.variantTile.selected{color:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.styleTile.selected:after{content:"";position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--panel)}.styleTile.selected:before{content:"";position:absolute;z-index:1;top:-2px;right:1px;width:7px;height:12px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.segmented button{min-height:40px;border:1px solid var(--hairline);border-radius:999px;background:#fff;cursor:pointer;font-size:14px;font-weight:700}.segmented button.selected{color:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.sliderList{display:grid;gap:12px;padding:3px 0 18px}.sliderRow{display:grid;grid-template-columns:70px 1fr 48px;align-items:center;gap:12px;font-size:14px;font-weight:750}.sliderRow input{width:100%;accent-color:var(--teal)}.sliderRow output{text-align:right;color:var(--ink)}.placementControls{display:grid;gap:10px;padding:2px 0 16px}.placementControls>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.placementControls strong{font-size:14px;line-height:1.2}.placementControls span{color:var(--muted);font-size:12px;line-height:1.2}.nudgePad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.nudgePad button,.rotationControls button{min-height:38px;border:1px solid var(--hairline);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-size:12px;font-weight:800}.nudgePad button:focus-visible,.nudgePad button:hover,.rotationControls button:focus-visible,.rotationControls button:hover{color:var(--teal);border-color:var(--teal)}.rotationControls{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.rotationControls input{width:100%;accent-color:var(--teal)}.toggleRow{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 16px;color:var(--ink);border:0;background:transparent;cursor:pointer;font-size:14px;font-weight:750}.toggleSwitch{position:relative;width:42px;height:24px;flex:0 0 auto;border-radius:999px;background:var(--hairline);transition:background .16s ease}.toggleSwitch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #1717172e;transition:transform .16s ease}.toggleRow[aria-pressed=true] .toggleSwitch{background:var(--teal)}.toggleRow[aria-pressed=true] .toggleSwitch:after{transform:translate(18px)}.exportRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 0 16px}.exportRow p{flex-basis:100%;margin:0;color:var(--muted);font-size:12px;line-height:1.35}.exportButton{min-width:150px}.saveLink{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.exportPreviewThumb{width:100%;height:112px;display:block;object-fit:contain;object-position:center;border:1px solid var(--hairline);border-radius:14px;background:#fff;margin:-4px 0 16px}.savedProjects{padding:0 0 16px;border-top:1px solid var(--hairline)}.savedProjects .groupHeader{padding-top:14px}.savedProjectList{display:grid;gap:8px}.savedProject{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:10px;min-height:72px;padding:8px;border:1px solid var(--hairline);border-radius:14px;background:#fff}.savedProject.recent{border-color:#098a8773}.savedProjectPreview{width:56px;height:56px;overflow:hidden;border:1px solid var(--hairline);border-radius:10px;background:var(--canvas);cursor:pointer;padding:0}.savedProjectPreview img{width:100%;height:100%;object-fit:cover;display:block}.savedProject h3{margin:0 0 3px;font-size:13px;line-height:1.2}.savedProject p,.emptyState{margin:0;color:var(--muted);font-size:12px;line-height:1.35}.iconOnlyButton{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:50%;background:#fff;color:var(--muted);cursor:pointer}.primaryButton{width:100%;min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;cursor:pointer;font-size:18px;line-height:1;font-weight:800;box-shadow:0 16px 34px #098a873d}.primaryButton svg{stroke-width:2}.primaryButton:disabled{cursor:wait;opacity:.72}.tabBar{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 12px 12px;border-top:1px solid var(--hairline);background:#fffdfaf5}.tabBar button{min-height:54px;display:grid;justify-items:center;align-content:center;gap:5px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:700}.tabBar button.active{color:var(--teal)}@media(max-width:520px){.appShell{min-height:100dvh;padding:0;background:var(--panel)}.phoneFrame{width:100%;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;grid-template-rows:auto auto minmax(170px,28dvh) minmax(0,1fr) auto}.phoneFrame.previewFocus{grid-template-rows:auto auto minmax(310px,52dvh) minmax(0,1fr) auto}.phoneFrame.privacyOpen{grid-template-rows:auto auto auto minmax(160px,24dvh) minmax(0,1fr) auto}.phoneFrame.privacyOpen.previewFocus{grid-template-rows:auto auto auto minmax(275px,42dvh) minmax(0,1fr) auto}.topBar{height:68px;padding-inline:18px}.previewCanvas{min-height:0}.previewCanvas img,.previewCanvas video{min-height:0}.controlPanel{padding-inline:16px;overflow-y:auto}}@media(max-width:380px){.topBar h1{font-size:24px}.stepper{padding-inline:12px;gap:4px}.styleGrid,.variantGrid{gap:7px}.styleTile{min-height:82px;font-size:12px}.variantTile{min-height:104px}.segmented{grid-template-columns:repeat(2,1fr)}.sliderRow{grid-template-columns:64px 1fr 44px;gap:8px}}