.navbar-zindex{z-index:200}.canvas-container{position:relative;width:100%;height:600px;margin:0;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-card-border-radius);overflow:hidden;background-color:#f8f8f8;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%,transparent 75%,#e0e0e0 75%,#e0e0e0),linear-gradient(45deg,#e0e0e0 25%,transparent 25%,transparent 75%,#e0e0e0 75%,#e0e0e0);background-size:20px 20px;background-position:0 0,10px 10px}#protractor-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}.button-controls-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:20px 0}.tip-container{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:8px 12px;flex-shrink:0;order:3;display:flex;justify-content:center;align-items:center}.tip-container .tip-content{color:#6c757d;font-size:13px;display:flex;align-items:center;gap:6px}.tip-container .tip-icon{font-size:14px}.button-group{display:flex;justify-content:center;flex:1;margin:0 20px;gap:15px;flex-wrap:wrap;order:2}.button-spacer{flex-shrink:0;width:200px;order:1}.button svg{margin-right:6px}#image-upload{display:none}.button-group .button,.button-group label.button{display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:10px 16px;border-radius:0;font-weight:500;font-size:15px;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.1);border:none;cursor:pointer;outline:0;position:relative;overflow:hidden;text-transform:none}.button-group #clear{background:linear-gradient(135deg,#ff7676,#f54242);color:#fff}.button-group #clear:hover{background:linear-gradient(135deg,#f54242,#e03b3b);box-shadow:0 4px 8px rgba(245,66,66,.3);transform:translateY(-1px)}.button-group label[for=image-upload]{background:linear-gradient(135deg,#74a0ff,#4287f5);color:#fff}.button-group label[for=image-upload]:hover{background:linear-gradient(135deg,#4287f5,#3b7ce0);box-shadow:0 4px 8px rgba(66,135,245,.3);transform:translateY(-1px)}.button-group #save-image{background:linear-gradient(135deg,#68d391,#38a169);color:#fff}.button-group #save-image:hover{background:linear-gradient(135deg,#38a169,#2f855a);box-shadow:0 4px 8px rgba(56,161,105,.3);transform:translateY(-1px)}.button-group button:active,.button-group label:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.1)}.file-upload-container{position:relative}@media (max-width:768px){.canvas-container{height:450px}.measurement-info,.protractor-controls,.share-container{flex-direction:column;align-items:flex-start}.button-controls-container{flex-direction:column;gap:15px;margin:15px 0}.tip-container{align-self:center;margin-top:10px;order:2;width:auto}.button-group{gap:10px;width:100%;margin:0;justify-content:center;order:1}.button-spacer{display:none}.button-group .button,.button-group label.button{min-width:0;flex:1;font-size:14px;padding:8px 12px}}.mobile-device{--mobile-line-width:1.5;--mobile-point-size:7;--mobile-arc-width:2;--mobile-font-size:12}.desktop-device{--desktop-line-width:2;--desktop-point-size:9;--desktop-arc-width:3;--desktop-font-size:16}@media (max-width:380px){.button-group .button svg,.button-group label.button svg{margin-right:0!important}.button-group .button .button-text,.button-group label.button .button-text{display:none}}.point{position:absolute;width:14px;height:14px;background-color:var(--ifm-color-primary);border-radius:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 2px #fff;cursor:grab;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.point:hover{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 3px #fff,0 0 8px 3px rgba(0,0,0,.4);background-color:var(--ifm-color-primary-darker)}.point:active{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 0 3px #fff,0 0 10px 5px rgba(0,0,0,.5);background-color:var(--ifm-color-primary-darkest);cursor:grabbing}.annotation{position:absolute;background-color:rgba(255,255,255,.8);padding:3px 6px;border-radius:3px;font-size:12px;transform:translate(-50%,-50%);z-index:3;border:1px solid var(--ifm-color-primary-light);pointer-events:none}.saved-measurements-container{border-top:1px solid var(--ifm-color-emphasis-200);padding-top:15px}.saved-measurements-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.measurement-item{display:flex;align-items:center;background-color:var(--ifm-color-emphasis-100);border-radius:var(--ifm-button-border-radius);padding:8px 12px;font-size:.875rem}.measurement-color{width:14px;height:14px;border-radius:50%;margin-right:10px}.measurement-text{margin-right:10px}.delete-measurement{border:none;background:0 0;color:var(--ifm-color-danger);cursor:pointer;padding:0 5px;font-size:16px}.empty-message{color:var(--ifm-color-emphasis-600);font-style:italic}.toast{position:fixed;top:20px;right:20px;background-color:var(--ifm-color-success-dark);color:#fff;padding:10px 15px;border-radius:var(--ifm-card-border-radius);z-index:1000;opacity:0;transform:translateY(-20px);transition:all .3s ease}.toast.show{opacity:1;transform:translateY(0)}.drag-icon{display:inline-block;animation:wiggle 2s infinite;color:var(--ifm-color-primary);cursor:pointer}@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}.measurement-text strong{color:var(--ifm-color-primary-dark);font-weight:600}.ad-container{text-align:center;margin:2px 0;overflow:hidden;clear:both;height:70px}.ad-container::before{display:block;font-size:12px;color:#777;margin-bottom:5px}.ad-sidebar{float:right;margin-left:15px;margin-bottom:15px}.layout-container{display:grid;grid-template-columns:0 1fr 0;grid-template-areas:"left-sidebar main-content right-sidebar";gap:20px;max-width:100%;margin:0 auto;transition:all .3s ease}.sidebar{display:none;width:0;overflow:hidden;transition:all .3s ease-out}.sidebar-left{grid-area:left-sidebar}.sidebar-right{grid-area:right-sidebar}.main-wrapper{grid-area:main-content;width:100%;max-width:100%;transition:all .3s ease}.sidebar-ad-container{background:rgba(255,255,255,.8);border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:5px;position:sticky;top:80px;width:165px;height:650px;overflow:hidden;margin:0 auto;transition:opacity .3s ease}.ad-close-btn{position:absolute;top:5px;right:5px;width:20px;height:20px;background:#f44336;color:#fff;border-radius:50%;text-align:center;line-height:18px;font-size:16px;cursor:pointer;z-index:101;box-shadow:0 1px 3px rgba(0,0,0,.3)}.ad-close-btn:hover{background:#d32f2f}@media screen and (min-width:1400px){.layout-container{grid-template-columns:180px minmax(0,1fr) 180px}.layout-container.left-hidden{grid-template-columns:0 minmax(0,1fr) 180px}.layout-container.right-hidden{grid-template-columns:180px minmax(0,1fr) 0}.layout-container.both-hidden{grid-template-columns:0 minmax(0,1fr) 0}.sidebar{display:block;width:180px;opacity:.95;transition:opacity .3s ease,width .3s ease}.sidebar:hover{opacity:1}.sidebar.hidden{display:none;width:0}.main-wrapper{width:100%;max-width:100%;transition:all .3s ease;margin:0 auto}}@media screen and (min-width:992px) and (max-width:1399px){.layout-container{grid-template-columns:0 minmax(0,1fr) 0}.sidebar{display:none;width:0}.main-wrapper{max-width:1200px;margin-left:auto;margin-right:auto}}@media screen and (max-width:991px){.layout-container{grid-template-columns:1fr;grid-template-areas:"main-content";gap:10px}.sidebar{display:none}.main-wrapper{max-width:100%;margin:0}}@media (min-width:1700px){.layout-container{max-width:1700px;margin-left:auto;margin-right:auto}}@media (max-width:768px){.ad-sidebar{float:none;margin:20px auto;display:block}.desktop-only-ad{display:none}}.user-cases-section{margin-top:30px;padding:25px;background:linear-gradient(135deg,#f8f9fa 0,#e9ecef 100%);border-radius:12px;border:1px solid #dee2e6;box-shadow:0 4px 15px rgba(0,0,0,.08)}.user-cases-section .text--secondary{text-align:center;color:#6c757d;font-size:1rem;line-height:1.5}.user-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:25px 0}.user-case-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;border:1px solid #e9ecef}.user-case-item:hover{transform:translateY(-4px);box-shadow:0 6px 25px rgba(0,0,0,.15)}.user-case-image{width:100%;height:250px;object-fit:cover;display:block;transition:opacity .3s ease}.user-case-image:hover{opacity:.9}.user-case-content{padding:16px}.user-case-content p{color:#6c757d;font-size:.9rem;line-height:1.5;margin:0}@media (max-width:768px){.user-cases-grid{grid-template-columns:1fr;gap:16px}.user-cases-section{padding:20px 16px;margin-top:20px}.user-case-image{height:160px}}@media (max-width:480px){.user-cases-section{padding:16px 12px}.user-case-content{padding:14px}.user-case-content p{font-size:.85rem}}.card__header h1{font-size:1.5rem;margin:0;font-weight:600;color:var(--ifm-heading-color)}.saved-measurements-container h3{font-size:1.2rem;margin:0 0 15px 0;font-weight:600;color:var(--ifm-heading-color)}.user-cases-section h3{font-size:1.4rem;margin:0 0 8px 0;font-weight:600;color:var(--ifm-heading-color);text-align:center}.user-case-content h4{font-size:1.1rem;margin:0 0 8px 0;font-weight:600;color:var(--ifm-heading-color);line-height:1.3}@media (max-width:768px){.card__header h1{font-size:1.3rem}.saved-measurements-container h3{font-size:1.1rem}.user-cases-section h3{font-size:1.3rem}.user-case-content h4{font-size:1rem}}@media (max-width:480px){.card__header h1{font-size:1.2rem}.saved-measurements-container h3{font-size:1rem}.user-cases-section h3{font-size:1.2rem}.user-case-content h4{font-size:.95rem}}