{"id":21,"date":"2026-05-05T16:39:31","date_gmt":"2026-05-05T16:39:31","guid":{"rendered":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21"},"modified":"2026-05-12T17:54:34","modified_gmt":"2026-05-12T17:54:34","slug":"design-studio","status":"publish","type":"page","link":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21","title":{"rendered":"Design Studio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d07f10b e-flex e-con-boxed e-con e-parent\" data-id=\"d07f10b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7ac4d6 elementor-widget elementor-widget-html\" data-id=\"a7ac4d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Nailor Design Studio - Elementor HTML Widget Version -->\r\n<div class=\"nailor-studio\" id=\"nailorStudio\">\r\n  <div class=\"studio-container\">\r\n    <div class=\"studio-header\">\r\n      <p class=\"studio-label\">NAILOR DESIGN STUDIO<\/p>\r\n      <h1 class=\"studio-title\">Create Your Own Nail Design<\/h1>\r\n      <p class=\"studio-subtitle\">Choose a finger, customize the shape, extension, pattern, color, drawing, and decoration.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"studio-content\">\r\n      <div class=\"preview-section\" id=\"saveArea\">\r\n        <div class=\"save-card-top\">\r\n          <span>NAILOR CUSTOM SET<\/span>\r\n          <span>\u2661<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"hand-display\">\r\n          <div class=\"finger-wrap\">\r\n            <div class=\"nail-slot selected\" id=\"nail0\">\r\n              <div class=\"nail-shape\">\r\n                <svg class=\"draw-layer\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><\/svg>\r\n                <div class=\"decor-layer\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"nail-label\">Thumb<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"finger-wrap\">\r\n            <div class=\"nail-slot\" id=\"nail1\">\r\n              <div class=\"nail-shape\">\r\n                <svg class=\"draw-layer\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><\/svg>\r\n                <div class=\"decor-layer\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"nail-label\">Index<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"finger-wrap\">\r\n            <div class=\"nail-slot\" id=\"nail2\">\r\n              <div class=\"nail-shape\">\r\n                <svg class=\"draw-layer\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><\/svg>\r\n                <div class=\"decor-layer\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"nail-label\">Middle<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"finger-wrap\">\r\n            <div class=\"nail-slot\" id=\"nail3\">\r\n              <div class=\"nail-shape\">\r\n                <svg class=\"draw-layer\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><\/svg>\r\n                <div class=\"decor-layer\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"nail-label\">Ring<\/div>\r\n          <\/div>\r\n\r\n          <div class=\"finger-wrap\">\r\n            <div class=\"nail-slot\" id=\"nail4\">\r\n              <div class=\"nail-shape\">\r\n                <svg class=\"draw-layer\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><\/svg>\r\n                <div class=\"decor-layer\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"nail-label\">Pinky<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"save-card-footer\">\r\n          <strong>My Nail Mood<\/strong>\r\n          <span>Designed by NAILOR<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"control-section\">\r\n        <div class=\"finger-tabs\">\r\n          <button class=\"finger-tab active\" data-finger=\"0\">Thumb<\/button>\r\n          <button class=\"finger-tab\" data-finger=\"1\">Index<\/button>\r\n          <button class=\"finger-tab\" data-finger=\"2\">Middle<\/button>\r\n          <button class=\"finger-tab\" data-finger=\"3\">Ring<\/button>\r\n          <button class=\"finger-tab\" data-finger=\"4\">Pinky<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"accordion-list\">\r\n          <div class=\"accordion-item is-open\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Nail Shape<\/span>\r\n              <span class=\"accordion-status\" data-summary=\"shape\">Round<\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"option-grid\">\r\n                <button class=\"option-btn shape-btn active\" data-shape=\"round\">Round<\/button>\r\n                <button class=\"option-btn shape-btn\" data-shape=\"oval\">Oval<\/button>\r\n                <button class=\"option-btn shape-btn\" data-shape=\"square\">Square<\/button>\r\n                <button class=\"option-btn shape-btn\" data-shape=\"stiletto\">Stiletto<\/button>\r\n                <button class=\"option-btn shape-btn\" data-shape=\"coffin\">Coffin<\/button>\r\n                <button class=\"option-btn shape-btn\" data-shape=\"almond\">Almond<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Extension<\/span>\r\n              <span class=\"accordion-status\" data-summary=\"extension\">None<\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"option-grid\">\r\n                <button class=\"option-btn extension-btn active\" data-extension=\"none\">None<\/button>\r\n                <button class=\"option-btn extension-btn\" data-extension=\"short\">Short<\/button>\r\n                <button class=\"option-btn extension-btn\" data-extension=\"medium\">Medium<\/button>\r\n                <button class=\"option-btn extension-btn\" data-extension=\"long\">Long<\/button>\r\n                <button class=\"option-btn extension-btn\" data-extension=\"extra-long\">Extra Long<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Pattern<\/span>\r\n              <span class=\"accordion-status\" data-summary=\"pattern\">Solid<\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"option-grid\">\r\n                <button class=\"option-btn pattern-btn active\" data-pattern=\"solid\">Solid<\/button>\r\n                <button class=\"option-btn pattern-btn\" data-pattern=\"glitter\">Glitter<\/button>\r\n                <button class=\"option-btn pattern-btn\" data-pattern=\"stripe\">Stripe<\/button>\r\n                <button class=\"option-btn pattern-btn\" data-pattern=\"gradient\">Gradient<\/button>\r\n                <button class=\"option-btn pattern-btn\" data-pattern=\"french\">French<\/button>\r\n              <\/div>\r\n\r\n              <div class=\"gradient-options\" id=\"gradientOptions\">\r\n                <span class=\"mini-label\">Gradient Style<\/span>\r\n                <div class=\"option-grid\">\r\n                  <button class=\"option-btn gradient-btn active\" data-gradient=\"center\">Center Glow<\/button>\r\n                  <button class=\"option-btn gradient-btn\" data-gradient=\"root-tip\">Root to Tip<\/button>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Base Color<\/span>\r\n              <span class=\"accordion-status color-summary\" data-summary=\"baseColor\"><\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"color-grid\">\r\n                <button class=\"color-btn active\" data-color=\"#FF8FB7\" style=\"background:#FF8FB7\" title=\"Nailor Pink\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#E83C91\" style=\"background:#E83C91\" title=\"Deep Pink\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#FFC1DA\" style=\"background:#FFC1DA\" title=\"Soft Pink\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#FBF4EC\" style=\"background:#FBF4EC\" title=\"Cream\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#8ACCD5\" style=\"background:#8ACCD5\" title=\"Sky Blue\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#FBFBE1\" style=\"background:#FBFBE1\" title=\"Soft Yellow\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#FFFFFF\" style=\"background:#FFFFFF\" title=\"White\"><\/button>\r\n                <button class=\"color-btn\" data-color=\"#43334C\" style=\"background:#43334C\" title=\"Dark Plum\"><\/button>\r\n                <button class=\"color-btn transparent-swatch\" data-color=\"transparent\" title=\"Transparent\"><\/button>\r\n              <\/div>\r\n\r\n              <div class=\"custom-color-row\">\r\n                <span>Custom base color<\/span>\r\n                <input type=\"color\" id=\"customColorPicker\" value=\"#ff8fb7\" aria-label=\"Choose custom base color\">\r\n                <button class=\"apply-color-btn\" id=\"applyCustomColor\">Apply<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Pattern Color<\/span>\r\n              <span class=\"accordion-status color-summary\" data-summary=\"patternColor\"><\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"pattern-color-grid\">\r\n                <button class=\"pattern-color-btn active\" data-pattern-color=\"#FFFFFF\" style=\"background:#FFFFFF\" title=\"White\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#FF8FB7\" style=\"background:#FF8FB7\" title=\"Nailor Pink\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#E83C91\" style=\"background:#E83C91\" title=\"Deep Pink\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#FFC1DA\" style=\"background:#FFC1DA\" title=\"Soft Pink\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#FBF4EC\" style=\"background:#FBF4EC\" title=\"Cream\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#8ACCD5\" style=\"background:#8ACCD5\" title=\"Sky Blue\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#FBFBE1\" style=\"background:#FBFBE1\" title=\"Soft Yellow\"><\/button>\r\n                <button class=\"pattern-color-btn\" data-pattern-color=\"#43334C\" style=\"background:#43334C\" title=\"Dark Plum\"><\/button>\r\n                <button class=\"pattern-color-btn transparent-swatch\" data-pattern-color=\"transparent\" title=\"Transparent\"><\/button>\r\n              <\/div>\r\n\r\n              <div class=\"custom-color-row\">\r\n                <span>Custom pattern color<\/span>\r\n                <input type=\"color\" id=\"customPatternColorPicker\" value=\"#ffffff\" aria-label=\"Choose custom pattern color\">\r\n                <button class=\"apply-color-btn\" id=\"applyCustomPatternColor\">Apply<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Drawing Pen<\/span>\r\n              <span class=\"accordion-status\" data-summary=\"drawing\">Off<\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"option-grid drawing-mode-grid\">\r\n                <button class=\"option-btn drawing-mode-btn\" data-drawing-mode=\"pen\">Pen<\/button>\r\n                <button class=\"option-btn drawing-mode-btn\" data-drawing-mode=\"eraser\">Eraser<\/button>\r\n                <button class=\"option-btn drawing-mode-btn active\" data-drawing-mode=\"off\">Drawing Off<\/button>\r\n              <\/div>\r\n\r\n              <div class=\"drawing-subgroup\">\r\n                <span class=\"mini-label\">Pen Color<\/span>\r\n                <div class=\"drawing-color-grid\">\r\n                  <button class=\"drawing-color-btn active\" data-drawing-color=\"#FFFFFF\" style=\"background:#FFFFFF\" title=\"White\"><\/button>\r\n                  <button class=\"drawing-color-btn\" data-drawing-color=\"#FF8FB7\" style=\"background:#FF8FB7\" title=\"Pink\"><\/button>\r\n                  <button class=\"drawing-color-btn\" data-drawing-color=\"#E83C91\" style=\"background:#E83C91\" title=\"Deep Pink\"><\/button>\r\n                  <button class=\"drawing-color-btn\" data-drawing-color=\"#8ACCD5\" style=\"background:#8ACCD5\" title=\"Blue\"><\/button>\r\n                  <button class=\"drawing-color-btn\" data-drawing-color=\"#FBFBE1\" style=\"background:#FBFBE1\" title=\"Yellow\"><\/button>\r\n                  <button class=\"drawing-color-btn\" data-drawing-color=\"#43334C\" style=\"background:#43334C\" title=\"Plum\"><\/button>\r\n                <\/div>\r\n\r\n                <div class=\"custom-color-row\">\r\n                  <span>Custom pen color<\/span>\r\n                  <input type=\"color\" id=\"customDrawingColorPicker\" value=\"#ffffff\" aria-label=\"Choose custom pen color\">\r\n                  <button class=\"apply-color-btn\" id=\"applyCustomDrawingColor\">Apply<\/button>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"drawing-subgroup\">\r\n                <div class=\"range-label-row\">\r\n                  <span class=\"mini-label\">Pen Thickness<\/span>\r\n                  <strong><span id=\"penSizeValue\">1.5<\/span><\/strong>\r\n                <\/div>\r\n                <input class=\"pen-thickness-slider\" type=\"range\" id=\"penThicknessRange\" min=\"1\" max=\"8\" step=\"0.5\" value=\"1.5\">\r\n              <\/div>\r\n\r\n              <button class=\"clear-drawing-btn\" id=\"clearDrawingBtn\">Clear Drawing<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"accordion-item\">\r\n            <button class=\"accordion-trigger\" type=\"button\">\r\n              <span>Decoration<\/span>\r\n              <span class=\"accordion-status\" data-summary=\"decor\">None<\/span>\r\n            <\/button>\r\n            <div class=\"accordion-content\">\r\n              <div class=\"decor-grid\">\r\n                <button class=\"decor-btn active\" data-decor=\"none\">\r\n                  <span class=\"decor-preview none-preview\"><\/span>\r\n                  None\r\n                <\/button>\r\n                <button class=\"decor-btn\" data-decor=\"pearl\">\r\n                  <span class=\"decor-preview pearl-preview\"><\/span>\r\n                  Pearl\r\n                <\/button>\r\n                <button class=\"decor-btn\" data-decor=\"round-cubic\">\r\n                  <span class=\"decor-preview round-cubic-preview\"><\/span>\r\n                  Round Cubic\r\n                <\/button>\r\n                <button class=\"decor-btn\" data-decor=\"square-cubic\">\r\n                  <span class=\"decor-preview square-cubic-preview\"><\/span>\r\n                  Square Cubic\r\n                <\/button>\r\n              <\/div>\r\n\r\n              <div class=\"decor-size-row\">\r\n                <span class=\"mini-label\">Size<\/span>\r\n                <div class=\"decor-size-options\">\r\n                  <button class=\"size-btn active\" data-size=\"4\">4mm<\/button>\r\n                  <button class=\"size-btn\" data-size=\"5\">5mm<\/button>\r\n                  <button class=\"size-btn\" data-size=\"6\">6mm<\/button>\r\n                  <button class=\"size-btn\" data-size=\"8\">8mm<\/button>\r\n                  <button class=\"size-btn\" data-size=\"10\">10mm<\/button>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <button class=\"clear-decor-btn\" id=\"clearDecorBtn\">Clear Decorations<\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"action-buttons\">\r\n          <button class=\"action-btn secondary\" id=\"resetBtn\">Reset Finger<\/button>\r\n          <button class=\"action-btn primary\" id=\"saveBtn\">Save as Image<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap');\r\n\r\n  .nailor-studio {\r\n    --primary: #FF8FB7;\r\n    --secondary: #E83C91;\r\n    --text: #43334C;\r\n    --accent: #8ACCD5;\r\n    --border: rgba(67, 51, 76, 0.12);\r\n    font-family: 'Poppins', sans-serif;\r\n    padding: 40px 20px;\r\n    background: #fff;\r\n  }\r\n\r\n  .nailor-studio * { box-sizing: border-box; }\r\n\r\n  .studio-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: rgba(255, 255, 255, 0.96);\r\n    border: 1px solid var(--border);\r\n    border-radius: 28px;\r\n    padding: 42px;\r\n    box-shadow: none;\r\n  }\r\n\r\n  .studio-header { text-align: center; margin-bottom: 38px; }\r\n\r\n  .studio-label {\r\n    margin: 0 0 10px;\r\n    color: var(--secondary);\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n  }\r\n\r\n  .studio-title {\r\n    margin: 0 0 12px;\r\n    color: var(--text);\r\n    font-size: 40px;\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .studio-subtitle {\r\n    margin: 0;\r\n    color: rgba(67, 51, 76, 0.72);\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .studio-content {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 34px;\r\n    align-items: start;\r\n  }\r\n\r\n  .preview-section {\r\n    min-height: 500px;\r\n    border-radius: 34px;\r\n    padding: 32px;\r\n    background: linear-gradient(135deg, #ffe4ef 0%, #fff7fb 52%, #eefcff 100%);\r\n    border: 1px solid rgba(232, 60, 145, 0.18);\r\n    box-shadow: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n    position: sticky;\r\n    top: 24px;\r\n  }\r\n\r\n  .save-card-top {\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    color: var(--secondary);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n    margin-bottom: 18px;\r\n  }\r\n\r\n  .hand-display {\r\n    width: 100%;\r\n    min-height: 290px;\r\n    display: grid;\r\n    grid-template-columns: repeat(5, minmax(62px, 1fr));\r\n    gap: 14px;\r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 2;\r\n    padding: 26px 8px 18px;\r\n  }\r\n\r\n  .finger-wrap {\r\n    text-align: center;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .nail-slot {\r\n    position: relative;\r\n    height: 150px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 999px;\r\n    padding: 0;\r\n    background: rgba(255, 255, 255, 0.38) !important;\r\n    transform: none !important;\r\n    transition: background 0.25s ease, outline 0.25s ease;\r\n  }\r\n\r\n  .nail-slot::before {\r\n    content: none;\r\n  }\r\n\r\n  .nail-slot.selected {\r\n    outline: 2px solid rgba(232, 60, 145, 0.28);\r\n    outline-offset: 5px;\r\n    background: rgba(255, 255, 255, 0.58) !important;\r\n  }\r\n\r\n  .nail-shape {\r\n    --extension-scale: 1;\r\n    width: 62px;\r\n    height: 96px;\r\n    position: relative;\r\n    z-index: 2;\r\n    overflow: hidden;\r\n    background: var(--primary);\r\n    border: 2px solid rgba(255, 255, 255, 0.96);\r\n    box-shadow: none;\r\n    transition: all 0.25s ease;\r\n    touch-action: none;\r\n    transform: scaleY(var(--extension-scale));\r\n    transform-origin: center center;\r\n  }\r\n\r\n  .nail-shape::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 8px 10px auto auto;\r\n    width: 16px;\r\n    height: 34px;\r\n    border-radius: 999px;\r\n    background: rgba(255, 255, 255, 0.45);\r\n    filter: blur(1px);\r\n    pointer-events: none;\r\n    z-index: 4;\r\n  }\r\n\r\n  .nail-shape.is-drawing,\r\n  .nail-shape.is-erasing {\r\n    cursor: crosshair;\r\n  }\r\n\r\n  .nail-label {\r\n    display: none;\r\n  }\r\n\r\n  .save-card-footer {\r\n    width: 100%;\r\n    margin-top: 22px;\r\n    padding-top: 18px;\r\n    border-top: 1px solid rgba(232, 60, 145, 0.16);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    color: var(--text);\r\n  }\r\n\r\n  .save-card-footer strong {\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .save-card-footer span {\r\n    font-size: 12px;\r\n    color: rgba(67, 51, 76, 0.58);\r\n    font-weight: 600;\r\n  }\r\n\r\n  .shape-round { border-radius: 26px 26px 20px 20px; }\r\n  .shape-oval { width: 54px; height: 100px; border-radius: 50% 50% 32px 32px; }\r\n  .shape-square { width: 62px; height: 88px; border-radius: 10px; }\r\n  .shape-stiletto { height: 105px; clip-path: polygon(50% 0%, 95% 38%, 82% 100%, 18% 100%, 5% 38%); border-radius: 0; }\r\n  .shape-coffin { height: 98px; clip-path: polygon(28% 0%, 72% 0%, 94% 28%, 82% 100%, 18% 100%, 6% 28%); border-radius: 0; }\r\n  .shape-almond { height: 102px; clip-path: ellipse(46% 50% at 50% 50%); border-radius: 50%; }\r\n\r\n  .extension-none { --extension-scale: 1; }\r\n  .extension-short { --extension-scale: 1.08; }\r\n  .extension-medium { --extension-scale: 1.18; }\r\n  .extension-long { --extension-scale: 1.32; }\r\n  .extension-extra-long { --extension-scale: 1.48; }\r\n\r\n  .control-section {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 18px;\r\n  }\r\n\r\n  .finger-tabs {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    gap: 8px;\r\n  }\r\n\r\n  .finger-tab,\r\n  .accordion-trigger,\r\n  .option-btn,\r\n  .decor-btn,\r\n  .size-btn,\r\n  .clear-decor-btn,\r\n  .clear-drawing-btn,\r\n  .apply-color-btn,\r\n  .action-btn {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .finger-tab {\r\n    padding: 10px 8px;\r\n    border: 1px solid var(--border);\r\n    border-radius: 999px;\r\n    background: #fff;\r\n    color: var(--text);\r\n    cursor: pointer;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .finger-tab:hover,\r\n  .finger-tab.active {\r\n    border-color: var(--secondary);\r\n    background: var(--secondary);\r\n    color: #fff;\r\n  }\r\n\r\n  .accordion-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n\r\n  .accordion-item {\r\n    border: 1px solid var(--border);\r\n    border-radius: 18px;\r\n    background: rgba(251, 244, 236, 0.65);\r\n    overflow: hidden;\r\n    transition: background 0.2s ease, border-color 0.2s ease;\r\n  }\r\n\r\n  .accordion-item:hover {\r\n    border-color: rgba(232, 60, 145, 0.35);\r\n    background: rgba(255, 143, 183, 0.12);\r\n  }\r\n\r\n  .accordion-trigger {\r\n    width: 100%;\r\n    min-height: 54px;\r\n    padding: 14px 16px;\r\n    border: none;\r\n    border-bottom: 1px solid transparent;\r\n    background: transparent;\r\n    color: var(--text);\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    text-align: left;\r\n  }\r\n\r\n  .accordion-item.is-open .accordion-trigger {\r\n    border-bottom-color: rgba(67, 51, 76, 0.08);\r\n  }\r\n\r\n  .accordion-trigger::after {\r\n    content: '+';\r\n    flex: 0 0 auto;\r\n    width: 22px;\r\n    height: 22px;\r\n    border-radius: 50%;\r\n    background: #fff;\r\n    color: var(--secondary);\r\n    display: grid;\r\n    place-items: center;\r\n    font-size: 16px;\r\n    line-height: 1;\r\n  }\r\n\r\n  .accordion-item.is-open .accordion-trigger::after {\r\n    content: '-';\r\n  }\r\n\r\n  .accordion-status {\r\n    margin-left: auto;\r\n    color: rgba(67, 51, 76, 0.58);\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .color-summary {\r\n    width: 18px;\r\n    height: 18px;\r\n    border-radius: 50%;\r\n    border: 2px solid #fff;\r\n    box-shadow: 0 0 0 1px rgba(67, 51, 76, 0.18);\r\n  }\r\n\r\n  .accordion-content {\r\n    display: none;\r\n    padding: 12px 16px 16px;\r\n  }\r\n\r\n  .accordion-item.is-open .accordion-content {\r\n    display: block;\r\n  }\r\n\r\n  .mini-label {\r\n    display: block;\r\n    color: var(--text);\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    margin: 14px 0 8px;\r\n  }\r\n\r\n  .option-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 8px;\r\n  }\r\n\r\n  .option-btn {\r\n    padding: 10px 8px;\r\n    border: 1px solid var(--border);\r\n    background: #fff;\r\n    color: var(--text);\r\n    border-radius: 12px;\r\n    cursor: pointer;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .option-btn:hover,\r\n  .option-btn.active {\r\n    background: var(--secondary);\r\n    color: #fff;\r\n    border-color: var(--secondary);\r\n  }\r\n\r\n  .gradient-options {\r\n    display: none;\r\n  }\r\n\r\n  .gradient-options.is-visible {\r\n    display: block;\r\n  }\r\n\r\n  .color-grid,\r\n  .pattern-color-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(9, 1fr);\r\n    gap: 10px;\r\n  }\r\n\r\n  .drawing-color-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(6, 38px);\r\n    gap: 10px;\r\n  }\r\n\r\n  .color-btn,\r\n  .pattern-color-btn,\r\n  .drawing-color-btn {\r\n    width: 38px;\r\n    height: 38px;\r\n    border: 2px solid rgba(255, 255, 255, 0.95);\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    box-shadow: 0 4px 12px rgba(67, 51, 76, 0.12);\r\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n  }\r\n\r\n  .transparent-swatch {\r\n    background:\r\n      linear-gradient(45deg, #ddd 25%, transparent 25%),\r\n      linear-gradient(-45deg, #ddd 25%, transparent 25%),\r\n      linear-gradient(45deg, transparent 75%, #ddd 75%),\r\n      linear-gradient(-45deg, transparent 75%, #ddd 75%);\r\n    background-color: #fff;\r\n    background-size: 12px 12px;\r\n    background-position: 0 0, 0 6px, 6px -6px, -6px 0;\r\n  }\r\n\r\n  .color-btn:hover,\r\n  .pattern-color-btn:hover,\r\n  .drawing-color-btn:hover { transform: scale(1.08); }\r\n\r\n  .color-btn.active,\r\n  .pattern-color-btn.active,\r\n  .drawing-color-btn.active {\r\n    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--secondary);\r\n  }\r\n\r\n  .custom-color-row {\r\n    margin-top: 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: rgba(67, 51, 76, 0.75);\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n  }\r\n\r\n  #customColorPicker,\r\n  #customPatternColorPicker,\r\n  #customDrawingColorPicker {\r\n    width: 44px;\r\n    height: 34px;\r\n    border: none;\r\n    background: transparent;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .apply-color-btn {\r\n    padding: 8px 14px;\r\n    border: none;\r\n    border-radius: 999px;\r\n    background: var(--accent);\r\n    color: #fff;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .range-label-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 10px;\r\n  }\r\n\r\n  .pen-thickness-slider {\r\n    width: 100%;\r\n    accent-color: var(--secondary);\r\n  }\r\n\r\n  .decor-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 10px;\r\n  }\r\n\r\n  .decor-btn {\r\n    min-height: 76px;\r\n    border: 1px solid var(--border);\r\n    border-radius: 16px;\r\n    background: #fff;\r\n    color: var(--text);\r\n    cursor: pointer;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .decor-btn:hover,\r\n  .decor-btn.active {\r\n    border-color: var(--secondary);\r\n    background: rgba(255, 143, 183, 0.16);\r\n  }\r\n\r\n  .decor-preview {\r\n    width: 22px;\r\n    height: 22px;\r\n    display: inline-block;\r\n  }\r\n\r\n  .none-preview {\r\n    border-radius: 50%;\r\n    border: 2px dashed rgba(67, 51, 76, 0.35);\r\n  }\r\n\r\n  .pearl-preview {\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle at 30% 30%, #fff, #f8edf2 42%, #d9c3cc 100%);\r\n    box-shadow: 0 3px 8px rgba(67, 51, 76, 0.18);\r\n  }\r\n\r\n  .round-cubic-preview {\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle at 30% 30%, #fff, #d9f7ff 38%, #8ACCD5 100%);\r\n    box-shadow: 0 3px 8px rgba(67, 51, 76, 0.18);\r\n  }\r\n\r\n  .square-cubic-preview {\r\n    border-radius: 5px;\r\n    background: linear-gradient(135deg, #fff, #ffd7ec, #E83C91);\r\n    box-shadow: 0 3px 8px rgba(67, 51, 76, 0.18);\r\n  }\r\n\r\n  .decor-size-row {\r\n    margin-top: 14px;\r\n    color: rgba(67, 51, 76, 0.78);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .decor-size-options {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    gap: 8px;\r\n  }\r\n\r\n  .size-btn {\r\n    padding: 9px 6px;\r\n    border: 1px solid var(--border);\r\n    border-radius: 999px;\r\n    background: #fff;\r\n    color: var(--text);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .size-btn:hover,\r\n  .size-btn.active {\r\n    background: var(--secondary);\r\n    border-color: var(--secondary);\r\n    color: #fff;\r\n  }\r\n\r\n  .clear-decor-btn,\r\n  .clear-drawing-btn {\r\n    margin-top: 12px;\r\n    width: 100%;\r\n    padding: 10px 14px;\r\n    border: 1px solid rgba(232, 60, 145, 0.45);\r\n    border-radius: 999px;\r\n    background: #fff;\r\n    color: var(--secondary);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .clear-decor-btn:hover,\r\n  .clear-drawing-btn:hover {\r\n    background: rgba(255, 143, 183, 0.12);\r\n  }\r\n\r\n  .draw-layer,\r\n  .decor-layer {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .draw-layer { z-index: 2; }\r\n  .decor-layer { z-index: 3; }\r\n\r\n  .decor-piece {\r\n    position: absolute;\r\n    width: var(--decor-size, 9px);\r\n    height: var(--decor-size, 9px);\r\n    left: var(--decor-x, 50%);\r\n    top: var(--decor-y, 50%);\r\n    transform: translate(-50%, -50%);\r\n    box-shadow: 0 2px 5px rgba(67, 51, 76, 0.22);\r\n  }\r\n\r\n  .decor-piece.pearl {\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle at 30% 30%, #fff, #f8edf2 45%, #d9c3cc 100%);\r\n  }\r\n\r\n  .decor-piece.round-cubic {\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle at 30% 30%, #fff, #d9f7ff 40%, #8ACCD5 100%);\r\n  }\r\n\r\n  .decor-piece.square-cubic {\r\n    border-radius: 2px;\r\n    background: linear-gradient(135deg, #fff, #ffc1da, #E83C91);\r\n    transform: translate(-50%, -50%) rotate(45deg);\r\n  }\r\n\r\n  .action-buttons {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 12px;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 14px 16px;\r\n    border-radius: 999px;\r\n    cursor: pointer;\r\n    font-weight: 800;\r\n    font-size: 14px;\r\n    transition: all 0.25s ease;\r\n  }\r\n\r\n  .action-btn.primary {\r\n    background: var(--secondary);\r\n    color: #fff;\r\n    border: 2px solid var(--secondary);\r\n  }\r\n\r\n  .action-btn.secondary {\r\n    background: #fff;\r\n    color: var(--secondary);\r\n    border: 2px solid rgba(232, 60, 145, 0.55);\r\n  }\r\n\r\n  .action-btn:hover { transform: none; }\r\n\r\n  @media (max-width: 900px) {\r\n    .studio-container { padding: 26px; }\r\n    .studio-content { grid-template-columns: 1fr; }\r\n    .preview-section { position: static; }\r\n    .color-grid,\r\n    .pattern-color-grid { grid-template-columns: repeat(5, 1fr); }\r\n    .decor-grid { grid-template-columns: repeat(2, 1fr); }\r\n    .studio-title { font-size: 30px; }\r\n  }\r\n\r\n  @media (max-width: 560px) {\r\n    .nailor-studio { padding: 24px 12px; }\r\n    .studio-container { padding: 22px 16px; }\r\n    .hand-display { grid-template-columns: repeat(5, 1fr); gap: 4px; }\r\n    .nail-shape { width: 42px; height: 76px; }\r\n    .nail-slot { height: 118px; padding: 0; }\r\n    .nail-slot::before { content: none; }\r\n    .finger-tabs { grid-template-columns: repeat(2, 1fr); }\r\n    .decor-size-options { grid-template-columns: repeat(3, 1fr); }\r\n    .drawing-color-grid { grid-template-columns: repeat(6, 1fr); }\r\n    .action-buttons { grid-template-columns: 1fr; }\r\n    .save-card-footer { align-items: flex-start; flex-direction: column; gap: 4px; }\r\n  }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.querySelector('#nailorStudio');\r\n  if (!root) return;\r\n\r\n  let currentFinger = 0;\r\n  let selectedDecor = 'none';\r\n  let selectedDecorSize = 4;\r\n  let drawingMode = 'off';\r\n  let drawingColor = '#FFFFFF';\r\n  let drawingSize = 1.5;\r\n  let activeStroke = null;\r\n  let isErasing = false;\r\n\r\n  const labelMap = {\r\n    round: 'Round',\r\n    oval: 'Oval',\r\n    square: 'Square',\r\n    stiletto: 'Stiletto',\r\n    coffin: 'Coffin',\r\n    almond: 'Almond',\r\n    none: 'None',\r\n    short: 'Short',\r\n    medium: 'Medium',\r\n    long: 'Long',\r\n    'extra-long': 'Extra Long',\r\n    solid: 'Solid',\r\n    glitter: 'Glitter',\r\n    stripe: 'Stripe',\r\n    gradient: 'Gradient',\r\n    french: 'French',\r\n    center: 'Center Glow',\r\n    'root-tip': 'Root to Tip',\r\n    pearl: 'Pearl',\r\n    'round-cubic': 'Round Cubic',\r\n    'square-cubic': 'Square Cubic',\r\n    off: 'Off',\r\n    pen: 'Pen',\r\n    eraser: 'Eraser'\r\n  };\r\n\r\n  const defaultNails = [\r\n    { color: '#FF8FB7', patternColor: '#FFFFFF', shape: 'round', extension: 'none', pattern: 'solid', gradient: 'center', decorations: [], drawings: [] },\r\n    { color: '#FFC1DA', patternColor: '#FFFFFF', shape: 'round', extension: 'none', pattern: 'solid', gradient: 'center', decorations: [], drawings: [] },\r\n    { color: '#FBF4EC', patternColor: '#E83C91', shape: 'round', extension: 'none', pattern: 'solid', gradient: 'center', decorations: [], drawings: [] },\r\n    { color: '#FF8FB7', patternColor: '#FFFFFF', shape: 'round', extension: 'none', pattern: 'solid', gradient: 'center', decorations: [], drawings: [] },\r\n    { color: '#FFC1DA', patternColor: '#FFFFFF', shape: 'round', extension: 'none', pattern: 'solid', gradient: 'center', decorations: [], drawings: [] }\r\n  ];\r\n\r\n  const nails = defaultNails.map(nail => ({ ...nail, decorations: [], drawings: [] }));\r\n\r\n  function isTransparent(color) {\r\n    return color === 'transparent';\r\n  }\r\n\r\n  function softColor(color) {\r\n    return isTransparent(color) ? 'rgba(255,255,255,0)' : color;\r\n  }\r\n\r\n  function getPatternBackground(nail) {\r\n    const base = softColor(nail.color);\r\n    const pattern = softColor(nail.patternColor);\r\n\r\n    if (nail.pattern === 'glitter') {\r\n      return `\r\n        radial-gradient(circle at 20% 25%, ${pattern} 0 2px, transparent 3px),\r\n        radial-gradient(circle at 70% 35%, rgba(255,215,0,0.95) 0 2px, transparent 3px),\r\n        radial-gradient(circle at 45% 65%, ${pattern} 0 1.8px, transparent 3px),\r\n        linear-gradient(135deg, ${base}, ${base})\r\n      `;\r\n    }\r\n\r\n    if (nail.pattern === 'stripe') {\r\n      return `repeating-linear-gradient(90deg, ${base} 0 10px, ${pattern} 10px 16px)`;\r\n    }\r\n\r\n    if (nail.pattern === 'gradient' && nail.gradient === 'root-tip') {\r\n      return `linear-gradient(to bottom, ${pattern} 0%, ${base} 42%, ${base} 100%)`;\r\n    }\r\n\r\n    if (nail.pattern === 'gradient') {\r\n      return `radial-gradient(circle at 50% 52%, ${pattern} 0%, ${pattern} 18%, ${base} 64%, ${base} 100%)`;\r\n    }\r\n\r\n    if (nail.pattern === 'french') {\r\n      return `linear-gradient(to bottom, ${pattern} 0 24%, ${base} 24% 100%)`;\r\n    }\r\n\r\n    return base;\r\n  }\r\n\r\n  function decorSizeToPx(size) {\r\n    const sizeMap = { 4: 7, 5: 9, 6: 11, 8: 14, 10: 18 };\r\n    return sizeMap[size] || 9;\r\n  }\r\n\r\n  function getPoint(event, shape) {\r\n    const rect = shape.getBoundingClientRect();\r\n    return {\r\n      x: Math.max(0, Math.min(100, ((event.clientX - rect.left) \/ rect.width) * 100)),\r\n      y: Math.max(0, Math.min(100, ((event.clientY - rect.top) \/ rect.height) * 100))\r\n    };\r\n  }\r\n\r\n  function distanceToSegment(point, start, end) {\r\n    const dx = end.x - start.x;\r\n    const dy = end.y - start.y;\r\n\r\n    if (dx === 0 && dy === 0) {\r\n      return Math.hypot(point.x - start.x, point.y - start.y);\r\n    }\r\n\r\n    const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) \/ (dx * dx + dy * dy)));\r\n    const projected = { x: start.x + t * dx, y: start.y + t * dy };\r\n    return Math.hypot(point.x - projected.x, point.y - projected.y);\r\n  }\r\n\r\n  function eraseNearPoint(nail, point) {\r\n    const threshold = Math.max(4, drawingSize * 1.6);\r\n\r\n    nail.drawings = nail.drawings.filter(stroke => {\r\n      for (let i = 1; i < stroke.points.length; i++) {\r\n        if (distanceToSegment(point, stroke.points[i - 1], stroke.points[i]) <= threshold) {\r\n          return false;\r\n        }\r\n      }\r\n\r\n      return true;\r\n    });\r\n  }\r\n\r\n  function renderDrawing(svg, drawings) {\r\n    svg.innerHTML = '';\r\n\r\n    drawings.forEach(stroke => {\r\n      if (!stroke.points.length) return;\r\n\r\n      const polyline = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'polyline');\r\n      polyline.setAttribute('points', stroke.points.map(point => `${point.x},${point.y}`).join(' '));\r\n      polyline.setAttribute('fill', 'none');\r\n      polyline.setAttribute('stroke', stroke.color);\r\n      polyline.setAttribute('stroke-width', stroke.size);\r\n      polyline.setAttribute('stroke-linecap', 'round');\r\n      polyline.setAttribute('stroke-linejoin', 'round');\r\n      svg.appendChild(polyline);\r\n    });\r\n  }\r\n\r\n  function renderDecor(layer, decorations) {\r\n    layer.innerHTML = '';\r\n\r\n    decorations.forEach(item => {\r\n      const piece = document.createElement('span');\r\n      piece.className = `decor-piece ${item.type}`;\r\n      piece.style.setProperty('--decor-x', `${item.x}%`);\r\n      piece.style.setProperty('--decor-y', `${item.y}%`);\r\n      piece.style.setProperty('--decor-size', `${decorSizeToPx(item.size)}px`);\r\n      layer.appendChild(piece);\r\n    });\r\n  }\r\n\r\n  function renderNail(index) {\r\n    const nail = nails[index];\r\n    const slot = root.querySelector(`#nail${index}`);\r\n    const shape = slot.querySelector('.nail-shape');\r\n    const drawLayer = slot.querySelector('.draw-layer');\r\n    const decorLayer = slot.querySelector('.decor-layer');\r\n\r\n    shape.className = `nail-shape shape-${nail.shape} extension-${nail.extension}`;\r\n    shape.classList.toggle('is-drawing', drawingMode === 'pen');\r\n    shape.classList.toggle('is-erasing', drawingMode === 'eraser');\r\n    shape.style.background = getPatternBackground(nail);\r\n\r\n    renderDrawing(drawLayer, nail.drawings);\r\n    renderDecor(decorLayer, nail.decorations);\r\n\r\n    slot.classList.toggle('selected', index === currentFinger);\r\n  }\r\n\r\n  function setColorSummary(selector, color) {\r\n    const summary = root.querySelector(selector);\r\n    if (!summary) return;\r\n\r\n    if (isTransparent(color)) {\r\n      summary.classList.add('transparent-swatch');\r\n      summary.style.backgroundColor = '';\r\n      return;\r\n    }\r\n\r\n    summary.classList.remove('transparent-swatch');\r\n    summary.style.background = color;\r\n  }\r\n\r\n  function updateSummaries(selected) {\r\n    root.querySelector('[data-summary=\"shape\"]').textContent = labelMap[selected.shape];\r\n    root.querySelector('[data-summary=\"extension\"]').textContent = labelMap[selected.extension];\r\n    root.querySelector('[data-summary=\"pattern\"]').textContent =\r\n      selected.pattern === 'gradient' ? `${labelMap[selected.pattern]} \/ ${labelMap[selected.gradient]}` : labelMap[selected.pattern];\r\n    root.querySelector('[data-summary=\"drawing\"]').textContent = labelMap[drawingMode];\r\n    root.querySelector('[data-summary=\"decor\"]').textContent =\r\n      selectedDecor === 'none' ? 'None' : `${labelMap[selectedDecor]} \/ ${selectedDecorSize}mm`;\r\n\r\n    setColorSummary('[data-summary=\"baseColor\"]', selected.color);\r\n    setColorSummary('[data-summary=\"patternColor\"]', selected.patternColor);\r\n  }\r\n\r\n  function renderAll() {\r\n    nails.forEach((_, index) => renderNail(index));\r\n    updateActiveControls();\r\n  }\r\n\r\n  function updateActiveControls() {\r\n    const selected = nails[currentFinger];\r\n\r\n    root.querySelectorAll('.finger-tab').forEach(btn => {\r\n      btn.classList.toggle('active', Number(btn.dataset.finger) === currentFinger);\r\n    });\r\n\r\n    root.querySelectorAll('.shape-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.shape === selected.shape);\r\n    });\r\n\r\n    root.querySelectorAll('.extension-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.extension === selected.extension);\r\n    });\r\n\r\n    root.querySelectorAll('.pattern-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.pattern === selected.pattern);\r\n    });\r\n\r\n    root.querySelectorAll('.gradient-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.gradient === selected.gradient);\r\n    });\r\n\r\n    root.querySelectorAll('.color-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.color.toLowerCase() === selected.color.toLowerCase());\r\n    });\r\n\r\n    root.querySelectorAll('.pattern-color-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.patternColor.toLowerCase() === selected.patternColor.toLowerCase());\r\n    });\r\n\r\n    root.querySelectorAll('.drawing-mode-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.drawingMode === drawingMode);\r\n    });\r\n\r\n    root.querySelectorAll('.drawing-color-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.drawingColor.toLowerCase() === drawingColor.toLowerCase());\r\n    });\r\n\r\n    root.querySelectorAll('.decor-btn').forEach(btn => {\r\n      btn.classList.toggle('active', btn.dataset.decor === selectedDecor);\r\n    });\r\n\r\n    root.querySelectorAll('.size-btn').forEach(btn => {\r\n      btn.classList.toggle('active', Number(btn.dataset.size) === selectedDecorSize);\r\n    });\r\n\r\n    root.querySelector('#gradientOptions').classList.toggle('is-visible', selected.pattern === 'gradient');\r\n    root.querySelector('#penThicknessRange').value = drawingSize;\r\n    root.querySelector('#penSizeValue').textContent = drawingSize;\r\n\r\n    if (!isTransparent(selected.color)) root.querySelector('#customColorPicker').value = selected.color;\r\n    if (!isTransparent(selected.patternColor)) root.querySelector('#customPatternColorPicker').value = selected.patternColor;\r\n    root.querySelector('#customDrawingColorPicker').value = drawingColor;\r\n\r\n    updateSummaries(selected);\r\n  }\r\n\r\n  root.querySelectorAll('.accordion-trigger').forEach(trigger => {\r\n    trigger.addEventListener('click', () => {\r\n      trigger.closest('.accordion-item').classList.toggle('is-open');\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.finger-tab').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      currentFinger = Number(btn.dataset.finger);\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.nail-slot').forEach(slot => {\r\n    slot.addEventListener('click', () => {\r\n      currentFinger = Number(slot.id.replace('nail', ''));\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.nail-shape').forEach((shape, index) => {\r\n    shape.addEventListener('pointerdown', event => {\r\n      currentFinger = index;\r\n\r\n      if (drawingMode === 'pen') {\r\n        event.preventDefault();\r\n        shape.setPointerCapture(event.pointerId);\r\n\r\n        activeStroke = {\r\n          color: drawingColor,\r\n          size: drawingSize,\r\n          points: [getPoint(event, shape)]\r\n        };\r\n\r\n        nails[currentFinger].drawings.push(activeStroke);\r\n        renderAll();\r\n        return;\r\n      }\r\n\r\n      if (drawingMode === 'eraser') {\r\n        event.preventDefault();\r\n        shape.setPointerCapture(event.pointerId);\r\n        isErasing = true;\r\n        eraseNearPoint(nails[currentFinger], getPoint(event, shape));\r\n        renderAll();\r\n        return;\r\n      }\r\n\r\n      renderAll();\r\n    });\r\n\r\n    shape.addEventListener('pointermove', event => {\r\n      if (drawingMode === 'pen' && activeStroke && currentFinger === index) {\r\n        event.preventDefault();\r\n        activeStroke.points.push(getPoint(event, shape));\r\n        renderNail(currentFinger);\r\n        return;\r\n      }\r\n\r\n      if (drawingMode === 'eraser' && isErasing && currentFinger === index) {\r\n        event.preventDefault();\r\n        eraseNearPoint(nails[currentFinger], getPoint(event, shape));\r\n        renderNail(currentFinger);\r\n      }\r\n    });\r\n\r\n    shape.addEventListener('pointerup', () => {\r\n      activeStroke = null;\r\n      isErasing = false;\r\n    });\r\n\r\n    shape.addEventListener('pointercancel', () => {\r\n      activeStroke = null;\r\n      isErasing = false;\r\n    });\r\n\r\n    shape.addEventListener('click', event => {\r\n      if (drawingMode === 'pen' || drawingMode === 'eraser') return;\r\n\r\n      event.stopPropagation();\r\n      currentFinger = index;\r\n\r\n      if (selectedDecor === 'none') {\r\n        renderAll();\r\n        return;\r\n      }\r\n\r\n      const point = getPoint(event, shape);\r\n\r\n      nails[currentFinger].decorations.push({\r\n        type: selectedDecor,\r\n        size: selectedDecorSize,\r\n        x: point.x,\r\n        y: point.y\r\n      });\r\n\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.shape-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].shape = btn.dataset.shape;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.extension-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].extension = btn.dataset.extension;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.pattern-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].pattern = btn.dataset.pattern;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.gradient-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].gradient = btn.dataset.gradient;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.color-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].color = btn.dataset.color;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.pattern-color-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      nails[currentFinger].patternColor = btn.dataset.patternColor;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelector('#applyCustomColor').addEventListener('click', () => {\r\n    nails[currentFinger].color = root.querySelector('#customColorPicker').value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#customColorPicker').addEventListener('input', e => {\r\n    nails[currentFinger].color = e.target.value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#applyCustomPatternColor').addEventListener('click', () => {\r\n    nails[currentFinger].patternColor = root.querySelector('#customPatternColorPicker').value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#customPatternColorPicker').addEventListener('input', e => {\r\n    nails[currentFinger].patternColor = e.target.value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelectorAll('.drawing-mode-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      drawingMode = btn.dataset.drawingMode;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.drawing-color-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      drawingColor = btn.dataset.drawingColor;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelector('#applyCustomDrawingColor').addEventListener('click', () => {\r\n    drawingColor = root.querySelector('#customDrawingColorPicker').value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#customDrawingColorPicker').addEventListener('input', e => {\r\n    drawingColor = e.target.value;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#penThicknessRange').addEventListener('input', e => {\r\n    drawingSize = Number(e.target.value);\r\n    root.querySelector('#penSizeValue').textContent = drawingSize;\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelectorAll('.decor-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      selectedDecor = btn.dataset.decor;\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelectorAll('.size-btn').forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      selectedDecorSize = Number(btn.dataset.size);\r\n      renderAll();\r\n    });\r\n  });\r\n\r\n  root.querySelector('#clearDrawingBtn').addEventListener('click', () => {\r\n    nails[currentFinger].drawings = [];\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#clearDecorBtn').addEventListener('click', () => {\r\n    nails[currentFinger].decorations = [];\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#resetBtn').addEventListener('click', () => {\r\n    const freshDefault = defaultNails[currentFinger];\r\n    nails[currentFinger] = { ...freshDefault, decorations: [], drawings: [] };\r\n    renderAll();\r\n  });\r\n\r\n  root.querySelector('#saveBtn').addEventListener('click', async () => {\r\n    localStorage.setItem('nailorDesign', JSON.stringify(nails));\r\n\r\n    const saveArea = root.querySelector('#saveArea');\r\n\r\n    if (!window.html2canvas) {\r\n      alert('Image save library is not loaded.');\r\n      return;\r\n    }\r\n\r\n    const canvas = await html2canvas(saveArea, {\r\n      backgroundColor: null,\r\n      scale: 2,\r\n      useCORS: true\r\n    });\r\n\r\n    const link = document.createElement('a');\r\n    link.download = `nailor-design-${new Date().toISOString().slice(0, 10)}.png`;\r\n    link.href = canvas.toDataURL('image\/png');\r\n    link.click();\r\n  });\r\n\r\n  renderAll();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NAILOR DESIGN STUDIO Create Your Own Nail Design Choose a finger, customize the shape, extension, pattern, color, drawing, and decoration. NAILOR CUSTOM SET \u2661 Thumb Index Middle Ring Pinky My Nail Mood Designed by NAILOR Thumb Index Middle Ring Pinky Nail Shape Round Round Oval Square Stiletto Coffin Almond Extension None None Short Medium Long [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Design Studio - Nailor<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Studio - Nailor\" \/>\n<meta property=\"og:description\" content=\"NAILOR DESIGN STUDIO Create Your Own Nail Design Choose a finger, customize the shape, extension, pattern, color, drawing, and decoration. NAILOR CUSTOM SET \u2661 Thumb Index Middle Ring Pinky My Nail Mood Designed by NAILOR Thumb Index Middle Ring Pinky Nail Shape Round Round Oval Square Stiletto Coffin Almond Extension None None Short Medium Long [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21\" \/>\n<meta property=\"og:site_name\" content=\"Nailor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T17:54:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?page_id=21\",\"url\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?page_id=21\",\"name\":\"Design Studio - Nailor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#website\"},\"datePublished\":\"2026-05-05T16:39:31+00:00\",\"dateModified\":\"2026-05-12T17:54:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?page_id=21#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?page_id=21\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?page_id=21#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Studio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#website\",\"url\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/\",\"name\":\"Nailor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#organization\",\"name\":\"Nailor\",\"url\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/cropped-Artboard-2.png\",\"contentUrl\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/cropped-Artboard-2.png\",\"width\":215,\"height\":61,\"caption\":\"Nailor\"},\"image\":{\"@id\":\"https:\\\/\\\/sumin-m1-0426.wordifysites.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design Studio - Nailor","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21","og_locale":"en_US","og_type":"article","og_title":"Design Studio - Nailor","og_description":"NAILOR DESIGN STUDIO Create Your Own Nail Design Choose a finger, customize the shape, extension, pattern, color, drawing, and decoration. NAILOR CUSTOM SET \u2661 Thumb Index Middle Ring Pinky My Nail Mood Designed by NAILOR Thumb Index Middle Ring Pinky Nail Shape Round Round Oval Square Stiletto Coffin Almond Extension None None Short Medium Long [&hellip;]","og_url":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21","og_site_name":"Nailor","article_modified_time":"2026-05-12T17:54:34+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21","url":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21","name":"Design Studio - Nailor","isPartOf":{"@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#website"},"datePublished":"2026-05-05T16:39:31+00:00","dateModified":"2026-05-12T17:54:34+00:00","breadcrumb":{"@id":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sumin-m1-0426.wordifysites.com\/?page_id=21#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sumin-m1-0426.wordifysites.com\/"},{"@type":"ListItem","position":2,"name":"Design Studio"}]},{"@type":"WebSite","@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#website","url":"https:\/\/sumin-m1-0426.wordifysites.com\/","name":"Nailor","description":"","publisher":{"@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sumin-m1-0426.wordifysites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#organization","name":"Nailor","url":"https:\/\/sumin-m1-0426.wordifysites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#\/schema\/logo\/image\/","url":"https:\/\/sumin-m1-0426.wordifysites.com\/wp-content\/uploads\/2026\/05\/cropped-Artboard-2.png","contentUrl":"https:\/\/sumin-m1-0426.wordifysites.com\/wp-content\/uploads\/2026\/05\/cropped-Artboard-2.png","width":215,"height":61,"caption":"Nailor"},"image":{"@id":"https:\/\/sumin-m1-0426.wordifysites.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":37,"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":511,"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/511"}],"wp:attachment":[{"href":"https:\/\/sumin-m1-0426.wordifysites.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}