:root{--paper:#f3efe6;--ink:#2c382e;--muted:#657067;--line:#d9d9cb;--cream:#e7e3d6;--olive:#586952;--terracotta:#bc8068;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}::selection{background:#b78b75;color:#fff}:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#b7b8a9;border:3px solid var(--paper);border-radius:10px}.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.29;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.77' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:multiply}.page-shell{max-width:1600px;margin:auto;padding:0 5.8%}.site-header{height:106px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:75px}.wordmark{font-family:var(--serif);font-weight:600;letter-spacing:-.045em;font-size:34px;line-height:1}.wordmark-dot{color:var(--terracotta)}.top-nav{display:flex;align-items:center;gap:39px;font-size:13px;font-weight:600}.top-nav a{transition:color .2s}.top-nav a:hover,.site-footer a:hover{color:#a46852}.top-nav span{display:inline-grid;place-items:center;background:#e0e2d5;border-radius:50%;width:20px;height:20px;font-size:10px;margin-left:5px}.header-note{margin-left:auto;color:#7b8074;font-size:12px;letter-spacing:.01em}.intro{min-height:630px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;position:relative}.intro-copy{padding:0 0 30px 4.5%;position:relative;z-index:2}.little-rule{width:56px;height:2px;background:var(--terracotta);margin-bottom:34px}.intro h1{font:400 clamp(54px,5.4vw,86px)/1.12 var(--serif);letter-spacing:-.035em;margin:0 0 28px}.intro h1 em{font-weight:400;color:#a37059}.intro p{max-width:390px;color:#606c62;font-size:15px;line-height:1.8;margin:0 0 27px}.text-link{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid currentColor;padding-bottom:8px;font-weight:700;font-size:13px}.text-link span{font-size:18px;font-weight:400;transition:transform .25s}.text-link:hover span{transform:translate(3px,-3px)}.hero-art{height:600px;position:relative;display:flex;justify-content:center;align-items:center}.hero-art:before{content:"";position:absolute;width:min(520px,100%);height:500px;border-radius:47% 53% 43% 57%;background:#d6d5bf;filter:blur(80px);opacity:.55}.hero-art-paper{width:min(73%,390px);height:490px;transform:rotate(7deg);padding:13px 13px 42px;background:#f9f6ed;box-shadow:13px 27px 42px #3f47312c,2px 3px 8px #3f473118;animation:float-in .8s cubic-bezier(.16,1,.3,1) both}.hero-art-photo{width:100%;height:100%;overflow:hidden}.hero-art-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.16,1,.3,1)}.hero-art-paper:hover .hero-art-photo img{transform:translateY(-3px) scale(1.03)}.floating-chip{position:absolute;background:#f7f4e9e8;backdrop-filter:blur(12px);padding:10px 15px;display:flex;align-items:center;gap:10px;box-shadow:4px 8px 20px #2835221a;font-family:var(--serif);font-size:13px;white-space:nowrap;animation:chip-in .8s cubic-bezier(.16,1,.3,1) both}.floating-chip span{width:18px;height:18px;border-radius:50%}.chip-one{left:8%;top:21%;transform:rotate(-8deg);animation-delay:.15s}.chip-two{right:1%;top:33%;transform:rotate(5deg);animation-delay:.27s}.chip-three{left:4%;bottom:24%;transform:rotate(4deg);animation-delay:.39s}@keyframes float-in{from{opacity:.4;transform:translateY(25px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(7deg)}}@keyframes chip-in{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}.studio{padding:63px 0 75px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:31px}.section-heading>div{display:flex;align-items:center;gap:13px}.section-heading h2{font:400 38px/1.2 var(--serif);letter-spacing:-.025em;margin:0}.section-mark{color:#b87c63;font-size:27px}.section-heading p{margin:0 1px 5px;color:#6c766a;font-size:13px}.workspace{display:grid;grid-template-columns:42% 1fr;gap:4%;background:#eae8dc;padding:24px}.source-column{min-width:0}.image-stage{height:440px;position:relative;overflow:hidden;background:#d5c8a9;cursor:pointer}.image-stage>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s}.image-stage:hover>img{transform:scale(1.035)}.image-stage.dragging>img{opacity:.3}.stage-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eff1e3d9;color:var(--ink);font-weight:700;gap:12px;opacity:0;transition:opacity .2s;pointer-events:none}.dragging .stage-overlay{opacity:1}.upload-icon{font-size:32px;font-weight:400}.image-caption{position:absolute;bottom:16px;left:17px;background:#f4f1e9e6;padding:9px 12px;font:12px var(--serif);letter-spacing:.025em}.source-actions{display:flex;align-items:center;gap:17px;margin-top:21px}.button-dark{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:13px 17px;font-weight:700;font-size:12px;transition:background .2s,transform .2s;white-space:nowrap}.button-dark:hover{background:#526351;transform:translateY(-2px)}.button-dark span{font-size:20px;line-height:0;vertical-align:-2px;font-weight:400;margin-right:5px}.source-actions>span{color:#737c70;font-size:11px;white-space:nowrap}.source-actions kbd{font:11px var(--sans);border:1px solid #c9cbbd;border-radius:3px;padding:3px 5px;margin-left:3px}.url-form{margin-top:26px}.url-form label{display:block;font-size:12px;font-weight:700;margin-bottom:9px}.url-control{display:flex;height:43px;border-bottom:1px solid #aeb5a8}.url-control input{width:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:12px}.url-control input::placeholder{color:#8c9388}.url-control button{background:transparent;border:0;color:var(--ink);font-size:21px;width:38px}.source-hint{font-size:11px;color:#737e72;margin:13px 0 0}.palette-column{display:flex;flex-direction:column;min-width:0}.palette-topline{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;margin:3px 0 16px}.palette-topline label{display:flex;align-items:center;gap:8px}.palette-topline select{border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;font-size:12px;padding:3px;cursor:pointer}.palette-strip{height:104px;display:flex;overflow:hidden;background:#d8d5c8}.palette-strip span{min-width:0;position:relative}.palette-strip span:after{content:attr(data-share);position:absolute;bottom:10px;left:10px;color:#fff;font-size:11px;text-shadow:0 1px 4px #0007}.color-list{margin-top:17px}.color-row{display:grid;grid-template-columns:31px 1fr auto 21px;align-items:center;gap:14px;border-bottom:1px solid #ccd0c4;padding:9px 2px;min-height:48px;width:100%;background:none;color:var(--ink);text-align:left;border-left:0;border-right:0;border-top:0}.color-row .swatch{width:30px;height:30px}.color-row .name{font:14px var(--serif)}.color-row .hex{font-size:11px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}.color-row .arrow{font-size:17px;font-weight:400;text-align:right}.palette-footer{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:18px;padding-top:19px}.palette-footer p{font-size:11px;line-height:1.5;color:#6d776a;max-width:240px;margin:0}.button-outline{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:12px 13px;font-size:11px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}.button-outline:hover{background:var(--ink);color:#fff}.button-outline span{font-size:17px;font-weight:400;margin-left:8px;vertical-align:-1px}.library{padding:65px 0 90px;border-top:1px solid var(--line)}.library-grid{display:block}.library-period+.library-period{margin-top:44px}.library-period-heading{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}.library-period-heading h3{font:400 24px var(--serif);margin:0}.library-period-heading span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.library-period-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.library-card{min-width:0;position:relative;background:#e8e5d9;padding:17px 17px 19px;box-shadow:4px 8px 16px #393c2a0e;transition:transform .25s,box-shadow .25s}.library-card:before,.library-card:after{content:"";position:absolute;left:6px;right:6px;bottom:-5px;height:5px;background:#dcdacd;z-index:-1}.library-card:after{left:13px;right:13px;bottom:-9px;background:#d0d0c4}.library-card:hover{transform:translateY(-5px);box-shadow:8px 16px 25px #393c2a19}.library-card .preview{height:175px;display:flex;gap:3px;position:relative;overflow:hidden}.library-card .preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.library-card .preview .mini-colors{position:absolute;bottom:0;left:0;right:0;height:32px;display:flex}.library-card .preview .mini-colors span{flex:1}.library-card .preview.simple{height:175px}.library-card .preview.simple .mini-colors{height:100%}.library-card .card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:16px;align-items:start}.library-card h4{font:16px var(--serif);margin:0 0 6px}.library-card p{font-size:11px;color:#777f73;margin:0}.library-card button{border:0;background:transparent;color:#6e776e;padding:0 3px;font-size:18px}.library-card button:hover{color:#9c5e4e}.empty-library{grid-column:1/-1;min-height:190px;border:1px dashed #b7bdad;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#6e786d}.empty-library strong{font:21px var(--serif);color:var(--ink);margin-bottom:8px}.empty-library p{margin:0;font-size:12px}.site-footer{border-top:1px solid var(--line);min-height:115px;display:flex;align-items:center;gap:38px;color:#777e72;font-size:12px}.site-footer .wordmark{color:var(--ink);font-size:27px}.site-footer a{margin-left:auto}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:12px 18px;background:var(--ink);color:#fff;opacity:0;pointer-events:none;z-index:30;font-size:12px;transition:opacity .25s,transform .25s;box-shadow:5px 8px 20px #0002}.toast.visible{opacity:1;transform:translate(-50%,0)}.color-dialog{border:0;padding:0;width:min(440px,calc(100% - 28px));background:#f3efe6;color:var(--ink);box-shadow:15px 22px 55px #1a261b55}.color-dialog::backdrop{background:#1d281ed1;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:14px;border:0;background:#f3efe6c9;color:var(--ink);width:29px;height:29px;font-size:24px;z-index:2}.dialog-swatch{height:170px;position:relative;overflow:hidden}.dialog-ral-preview{position:absolute;inset:0 0 0 50%;border-left:1px solid #fff9;opacity:0;pointer-events:none;transition:opacity .22s ease}.show-ral-preview .dialog-ral-preview{opacity:1}.dialog-body{padding:25px 28px 30px}.dialog-body h3{font:28px var(--serif);margin:0 0 4px}.dialog-body>p{font-size:12px;color:#69766a;margin:0 0 22px}.code-line{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #d1d4c8;background:none;color:var(--ink);text-align:left;border-left:0;border-right:0;border-top:0}.code-line span{color:#687268;font-size:12px}.code-line strong{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}.code-line:disabled{cursor:default}.code-line:disabled strong{color:#687268;font-weight:400}.code-line.copy-success strong{color:#4f7055}.code-line.copy-error strong{color:#a35c4b}.dialog-note{font-size:11px;line-height:1.6;color:#70796e;margin-top:20px}.dialog-note a{text-decoration:underline;text-underline-offset:3px}.icon-arrow{display:inline-flex;align-items:center;justify-content:center;line-height:0}.icon-arrow svg,.section-mark svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.section-mark{display:inline-flex;align-items:center;justify-content:center;line-height:0}.section-mark svg{stroke-width:1.25}@media(max-width:1000px){.page-shell{padding:0 4%}.site-header{gap:40px}.intro{min-height:590px}.intro h1{font-size:clamp(50px,6vw,68px)}.workspace{grid-template-columns:43% 1fr;gap:3%;padding:18px}.source-actions{flex-wrap:wrap;gap:10px}.image-stage{height:400px}.palette-footer{align-items:start;flex-direction:column}.palette-strip{height:86px}.color-row{min-height:44px;padding:6px 2px}}@media(max-width:700px){.page-shell{padding:0 20px}.site-header{height:74px;gap:24px}.wordmark{font-size:30px}.top-nav{gap:16px;margin-left:auto;font-size:11px}.top-nav a:first-child{display:none}.header-note{display:none}.intro{display:flex;flex-direction:column;min-height:0;padding:55px 0 25px;align-items:stretch}.intro-copy{padding:0}.little-rule{margin-bottom:25px}.intro h1{font-size:clamp(49px,11vw,68px)}.intro p{font-size:14px;margin-bottom:18px}.hero-art{height:390px;margin-top:5px}.hero-art-paper{width:55%;height:320px;padding:9px 9px 27px}.floating-chip{padding:8px 10px;font-size:11px}.chip-one{left:1%;top:19%}.chip-two{right:0;top:31%}.chip-three{left:1%;bottom:20%}.studio{padding:47px 0 55px}.section-heading{align-items:start;gap:10px;margin-bottom:23px}.section-heading h2{font-size:30px}.section-heading p{display:none}.workspace{display:block;padding:13px}.image-stage{height:350px}.source-actions{margin-top:15px}.source-actions>span{font-size:10px}.url-form{margin-top:20px}.palette-column{margin-top:36px}.palette-strip{height:86px}.palette-footer{margin-top:7px}.library{padding:47px 0 65px}.library-period-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.library-card{padding:10px}.library-card .preview,.library-card .preview.simple{height:120px}.library-card h4{font-size:14px}.site-footer{min-height:90px;gap:18px}.site-footer span:nth-child(2){display:none}}@media(max-width:460px){.library-period-grid{grid-template-columns:1fr}.library-card .preview,.library-card .preview.simple{height:175px}.image-stage{height:300px}.intro h1{font-size:49px}.hero-art{height:345px}.hero-art-paper{height:285px;width:58%}.floating-chip{font-size:10px}.palette-footer{align-items:stretch}.button-outline{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.hero-art-paper:hover .hero-art-photo img{transform:none}}

/* Reference count and paired image composer */
.source-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mode-switch{display:flex;gap:3px;background:#dcded1;padding:3px;letter-spacing:0;text-transform:none}
.mode-switch button{border:0;background:transparent;color:#5e6a5d;padding:8px 10px;font-size:11px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.mode-switch button[aria-pressed="true"]{background:#f8f5ec;color:var(--ink);box-shadow:2px 3px 8px #29352916}
.source-frames.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.source-frames.two .image-stage{height:340px}
.image-stage.active{outline:2px solid var(--olive);outline-offset:-2px}
.image-stage.empty{background:#dfe3d6;outline:1px dashed #9dab9a;outline-offset:-1px}
.image-stage.empty img{visibility:hidden}
.image-stage.empty .stage-overlay{opacity:1;background:transparent;padding:15px;text-align:center;font-size:12px;line-height:1.5}
.image-stage.empty .image-caption{display:none}
.image-stage[hidden]{display:none!important}
.button-outline:disabled{opacity:.5;cursor:not-allowed;background:transparent;color:var(--ink)}
.library-card .preview.dual img{width:50%}
.library-card .preview.dual img:nth-child(2){left:50%}
@media(max-width:1000px){.source-frames.two{grid-template-columns:1fr;gap:10px}.source-frames.two .image-stage{height:205px}}
@media(max-width:700px){.source-mode{flex-wrap:wrap;gap:9px}.source-frames.two .image-stage{height:190px}}
.waiting-palette{min-height:255px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px 24px;border:1px dashed #bac2b5;color:#667366;line-height:1.6}
.waiting-palette strong{font:21px var(--serif);color:var(--ink);font-weight:400;margin-bottom:8px}
.waiting-palette span{max-width:270px;font-size:12px}
.target-switch{display:flex;align-items:center;gap:5px;margin-top:14px;color:#657064;font-size:11px}
.target-switch[hidden]{display:none}
.target-switch span{margin-right:7px}
.target-switch button{border:1px solid #c5cabc;background:transparent;color:var(--ink);padding:5px 9px;font-size:11px}
.target-switch button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:#fff}
.palette-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.palette-actions .button-outline{padding:12px 11px}
.card-actions{display:flex;align-items:center;gap:10px}
.card-actions button{width:25px;height:25px;display:grid;place-items:center}
.card-actions button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:1000px){.palette-actions{justify-content:flex-start}}
@media(max-width:460px){.palette-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.palette-actions .button-outline{width:auto;white-space:normal;line-height:1.2}}
.share-dialog{border:0;padding:0;width:min(500px,calc(100% - 28px));background:#f3efe6;color:var(--ink);box-shadow:15px 22px 55px #1a261b55}.share-dialog::backdrop{background:#1d281ed1;backdrop-filter:blur(5px)}.share-dialog-body{padding:35px 30px 30px}.share-dialog-body h3{font:400 29px var(--serif);margin:0 32px 10px 0}.share-dialog-body p{font-size:12px;line-height:1.6;color:#69766a;margin:0 0 25px}.share-dialog-body label{display:block;font-size:11px;font-weight:700;margin-bottom:9px}.share-link-row{display:flex;gap:8px}.share-link-row input{min-width:0;flex:1;border:1px solid #b9c0b2;background:#fbf9f2;color:var(--ink);padding:11px;font-size:12px}.share-link-row button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:11px 14px;font-size:11px;font-weight:700}.share-link-row button:hover{background:#435346}.share-link-row input:focus{outline:2px solid var(--terracotta);outline-offset:2px}@media(max-width:460px){.palette-actions #save-button{grid-column:1/-1}.share-link-row{flex-direction:column}}

/* Color codes and manual accents */
.eyedropper-toggle{display:flex;align-items:center;gap:9px;width:100%;margin-top:20px;padding:13px 15px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;text-align:left;cursor:pointer}
.eyedropper-toggle span{margin-left:auto;color:#687366;font-size:11px;font-weight:400}
.eyedropper-toggle[aria-pressed="true"]{background:var(--ink);color:#fff}
.eyedropper-toggle[aria-pressed="true"] span{color:#e5eade}
.image-stage.picking,.image-stage.picking *{cursor:crosshair}
.image-stage.picking:hover>img{transform:none}
.color-row{display:flex;gap:12px;padding:7px 2px}
.color-row .swatch{flex:none}
.color-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.color-kind{min-width:0;font:14px var(--serif);overflow-wrap:anywhere}
.color-rgb{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.color-open .arrow{flex:none}
.accent-remove{flex:none;width:26px;height:26px;border:1px solid #c8cfc4;background:transparent;color:var(--ink);font-size:18px;cursor:pointer}
.ncs-editor{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid #ccd0c4;font-size:12px}
.ncs-editor input{min-width:0;border:1px solid #bfc7b8;background:#fffdf8;color:var(--ink);padding:9px 10px;text-transform:uppercase}
.ncs-editor small{grid-column:1/-1;color:#6a7469;line-height:1.5}
@media(max-width:460px){.eyedropper-toggle{flex-wrap:wrap}.eyedropper-toggle span{margin-left:0}.color-row{gap:8px}.color-open{gap:7px}.color-rgb{font-size:10px}.color-kind{font-size:12px}}

/* Personal scene analysis */
.scene-action{margin-top:16px;padding:17px 16px;border:1px solid #c8cfc1;background:#f4f2e9a6}
.scene-action-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.scene-action p{margin:9px 0 15px;color:#687367;font-size:12px;line-height:1.5}
.scene-action-controls{display:flex;gap:7px}
.scene-action-controls input{min-width:0;flex:1;padding:10px 9px;border:1px solid #bfc7b8;background:#fffdf8;color:var(--ink);font-size:11px}
.scene-action-controls button{flex:none;padding:10px 11px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:11px;font-weight:700}
.scene-action-controls button:disabled{opacity:.6;cursor:wait}
.scene-action small{display:block;margin-top:9px;color:#7b8478;font-size:10px}
@media(max-width:460px){.scene-action-controls{flex-direction:column}.scene-action-controls button{width:100%}}

.workflow-switch{display:flex;gap:3px;margin-bottom:17px;padding:3px;background:#dcded1}
.workflow-switch button{flex:1;min-width:0;padding:10px 8px;border:0;background:transparent;color:#586558;font-size:11px;font-weight:700}
.workflow-switch button[aria-pressed="true"]{background:#f8f5ec;color:var(--ink);box-shadow:2px 3px 8px #29352916}
.eyedropper-toggle[hidden],.scene-action[hidden]{display:none}

/* Side-by-side catalog comparisons */
.color-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
.dialog-swatch-labels{position:absolute;inset:auto 14px 12px;z-index:1;display:flex;justify-content:space-between;gap:12px;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 3px #263126aa;pointer-events:none}
.dialog-swatch-labels .comparison-label{opacity:0;transition:opacity .2s}
.show-ral-preview .dialog-swatch-labels .comparison-label{opacity:1}
.code-group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-bottom:5px;font-size:11px;font-weight:700;letter-spacing:.04em}
.code-group-heading small{color:#7b8379;font-size:10px;font-weight:400;letter-spacing:0;text-align:right}
.compare-line{padding:10px 0}
.compare-line:hover,.compare-line:focus-visible{background:#e8e9df88}
.ncs-preview-control{display:flex;align-items:center;gap:8px;min-width:0}
.ncs-preview-control input{flex:none;width:39px;height:33px;padding:2px;cursor:pointer}
.ncs-preview-control input:disabled{opacity:.35;cursor:not-allowed}
.ncs-preview-control span{color:#687268;font-size:11px}
.ncs-editor small{margin-top:2px}

/* Full-palette RGB, RAL and NCS comparison */
.palette-comparison{display:grid;gap:12px}
.palette-band{min-width:0}
.palette-band-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.palette-band-heading small{color:#778175;font-size:9px;font-weight:400;letter-spacing:0;text-transform:none}
.catalog-strip{height:43px}
.palette-segment{display:block;min-width:0;height:100%;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer}
.palette-segment:focus-visible{position:relative;z-index:1;outline:2px solid var(--ink);outline-offset:-2px}
@media(max-width:700px){.palette-comparison{gap:10px}.catalog-strip{height:36px}}

/* Design pass: exact swatches, readable codes, shorter path to the studio */
:root{--mono:'DM Mono',ui-monospace,Menlo,monospace}
/* The paper grain multiplies over the page; photos and swatches sit above it so colors on screen stay exact. */
.image-stage,.palette-strip,.color-row .swatch,.library-card{z-index:11}
.palette-strip,.color-row .swatch{position:relative}
/* DM Sans draws 0 and O alike, which confuses codes mixing both, such as S 1510-Y20R or #E8E0C9. */
.color-codes,.code-line strong,.metric,.ncs-editor input[type="text"]{font-family:var(--mono);font-weight:500;letter-spacing:0}
.palette-strip span.on-light:after{color:var(--ink);text-shadow:none}
.dialog-swatch-labels span{padding:4px 7px;background:#f4f1e9e6;color:var(--ink);text-shadow:none}
.color-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.color-codes{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intro{min-height:520px}
.hero-art{height:500px}
.hero-art-paper{height:410px}
.hero-cta{display:inline-flex;align-items:center;gap:12px}
.hero-cta .icon-arrow{font-size:15px}
.eyedropper-toggle{margin:12px 0 4px}
.tool-icon{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.palette-footer{flex-direction:column;align-items:stretch;gap:14px}
.palette-footer p{max-width:none}
.palette-actions{justify-content:flex-end}
.palette-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;font-size:11px;line-height:1}
.palette-actions button span{margin:0;font-size:15px;line-height:0;vertical-align:0}
.button-dark:disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--ink)}
@media(max-width:1000px){.palette-actions{justify-content:flex-start}}
@media(max-width:700px){.top-nav a:first-child{display:inline}.intro{padding:40px 0 10px}.hero-art{height:300px}.hero-art-paper{height:240px;width:50%}}
@media(max-width:460px){.hero-art{height:270px}.hero-art-paper{height:215px;width:52%}#save-button{grid-column:1/-1;order:-1}}

/* Library safety: backup, restore and sync */
.library-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-12px 0 26px;padding:14px 16px;background:#eae8dc}
.library-storage{margin:0;max-width:520px;font-size:12px;line-height:1.5;color:var(--muted)}
.library-storage.warning{color:#8a5a45}
.library-tool-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.library-tool-buttons button{display:inline-flex;align-items:center;gap:8px;padding:11px 12px;font-size:11px;line-height:1}
.library-tool-buttons button span{margin:0;font-size:15px;line-height:0;vertical-align:0}
.library-tool-buttons button.active{background:var(--olive);border-color:var(--olive);color:#fff}
.sync-dialog .share-dialog-body>p{margin-bottom:14px}
.sync-dialog .sync-primary{width:100%;margin:6px 0 24px;padding:14px}
.sync-dialog .share-link-row{margin-bottom:14px}
.sync-dialog .sync-status{color:var(--ink)}
.sync-dialog .sync-warning{padding:11px 12px;background:#efe2d6;color:#6e4b3c}
.sync-actions{display:flex;flex-wrap:wrap;gap:8px}
.sync-actions button{flex:1;min-width:160px}
.share-link-row input#sync-link{font-family:var(--mono);font-size:11px}
@media(max-width:700px){.library-tools{flex-direction:column;align-items:stretch;margin-top:-6px}.library-tool-buttons{justify-content:flex-start}}
@media(max-width:460px){.library-tool-buttons{display:grid;grid-template-columns:1fr 1fr}.library-tool-buttons #sync-button{grid-column:1/-1}.library-tool-buttons button{justify-content:center}}