:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light}html{-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{min-height:100svh;overflow-x:hidden;display:flex;align-items:center;justify-content:center;background:none;color:#0b0b0bde}body:before{content:"";position:fixed;inset:0;background-image:url(/Fargevelger/background2.png);background-size:cover;background-repeat:no-repeat;background-position:bottom;opacity:.7;z-index:-1}.app{width:100%;max-width:100%;padding:1rem}h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.2;font-family:Georgia,serif;color:#3d312e;text-shadow:1px 1px 2px rgba(0,0,0,.05);margin-bottom:1.5rem;text-align:center}.part{font-weight:500;font-size:clamp(1.3rem,3vw,2rem);font-family:Georgia,serif;color:#3d312e;text-shadow:1px 1px 2px rgba(0,0,0,.05);margin-bottom:1.5rem;text-align:center}.selected-part{font-weight:800;font-family:Georgia,serif;text-shadow:1px 1px 2px rgba(0,0,0,.05);font-size:clamp(1rem,2.5vw,1.5rem);color:#203a28;text-transform:capitalize;text-decoration:underline;padding:.2rem .4rem;border-radius:6px}.part-select{width:100%;max-width:100%;padding:.5rem .8rem;font-size:1rem;border-radius:10px;border:2px solid #4b7358;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg fill='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem}.part-select:focus-visible,.part-select:hover,.part-select:focus{outline:3px solid #4b7358;outline-offset:3px}.part-select option{padding:.5rem;background-color:#e1eae6;color:#222}.color-options{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:3rem;margin-bottom:3rem;justify-content:center}.color-button{display:inline-block;width:50px;height:50px;background-color:inherit;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 0 5px #0000000d;border-radius:6px;cursor:pointer;transition:transform .1s ease-in-out}.color-button:active{transform:scale(.95)}.color-button:focus-visible,.color-button:hover,.color-button:focus{outline:3px solid #4b7358;outline-offset:3px}.active-color{outline:4px solid #4b7358;outline-offset:4px;transform:scale(1.1);z-index:2}.action-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem;margin-bottom:3rem;max-width:300px;margin-left:auto;margin-right:auto}.primary-button,.secondary-button{flex:1;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;border-radius:10px;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap}.primary-button{background-color:#3d312e;color:#fff;border:2px solid #3D312E}.secondary-button{background-color:#fff;color:#3d312e;border:2px solid white}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a;opacity:.9}.primary-button:active,.secondary-button:active{transform:translateY(0)}svg{filter:drop-shadow(0 5px 15px rgba(0,0,0,1));display:block;margin:0 auto}path{transition:opacity .2s ease,filter .2s ease!important}path:hover{opacity:.7!important;filter:brightness(1.2)!important;cursor:pointer}@media(max-width:768px){.app{max-width:560px;padding:1rem}}@media(max-width:480px){body{display:block;min-height:auto;padding:1rem}.app{max-width:100%;padding:0 1rem}body:before{background-size:cover;background-position:top center}.color-button{width:44px;height:44px}}