:root{color-scheme:light;--ink:#302b2a;--rose:#aa594e;--line:#dfd3c9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f7f2ec;font:16px/1.65 system-ui,sans-serif}header{padding:22px max(5vw,20px);display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}a{color:inherit}header>a:first-child{text-decoration:none;font:26px Georgia,serif}small{display:block;font:10px system-ui;letter-spacing:2px}main{max-width:1100px;padding:35px 24px;margin:auto}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--rose);font-weight:700}h1{font:clamp(42px,7vw,74px)/1.06 Georgia,serif;margin:18px 0}h1 em{color:var(--rose)}h2{font:29px Georgia,serif}.lead{font-size:19px;max-width:570px}.notice{border-left:3px solid var(--rose);padding:15px 20px;background:#eee3d7;margin:28px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}section{margin:22px 0 36px}article{background:#eee6dd;padding:16px 22px;border-radius:12px}label{display:block;margin:13px 0}input:not([type=checkbox]),select,textarea{width:100%;font:inherit;border:1px solid var(--line);padding:11px;background:#fffdfa;border-radius:8px;color:var(--ink)}button,.button{font:inherit;background:var(--ink);color:white;border:0;border-radius:8px;padding:10px 17px;cursor:pointer;text-decoration:none;display:inline-block}button:disabled{opacity:.4;cursor:default}.plain{background:transparent;color:var(--ink);border:1px solid var(--line)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.camera{background:#e9dfd3;aspect-ratio:4/3;border-radius:120px 120px 15px 15px;overflow:hidden;display:grid;place-items:center;text-align:center}.camera video,.camera img{width:100%;height:100%;object-fit:contain}.camera span{font-size:12px}input[type=file]{font-size:13px}.check{display:flex;gap:10px;align-items:center}.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.journal img{width:100%;border-radius:10px}.journal p{white-space:pre-wrap;overflow-wrap:anywhere}footer{border-top:1px solid var(--line);padding-top:20px;font-size:13px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--rose);outline-offset:3px}[hidden]{display:none!important}@media(max-width:700px){.grid,.journal{grid-template-columns:1fr}header{font-size:13px}main{padding:24px 18px}.camera{max-height:380px}h1{font-size:48px}}
/* Dancheong atelier — jade, vermilion and antique gold */
:root{--ink:#492b20;--rose:#994533;--line:#c5b486;--jade:#b5532b;--gold:#b59652}
body{background-color:#b5532b;background-image:linear-gradient(90deg,rgba(3,53,49,.48),rgba(5,92,82,.14),rgba(3,53,49,.48)),url('/assets/dancheong-pattern.svg?v=hongiwa-20261103');background-size:auto,240px 120px;background-attachment:fixed}
header{position:relative;background:#74351f;color:#faf0d9;border-bottom:1px solid #c9ac69;padding-top:24px;padding-bottom:24px}header:after{content:'';position:absolute;bottom:-9px;left:0;right:0;height:8px;background:linear-gradient(90deg,#9f4734 0 12%,#c6a15a 12% 14%,#7b3c17 14% 48%,#c6a15a 48% 50%,#9f4734 50% 62%,#c6a15a 62% 64%,#7b3c17 64% 98%,#c6a15a 98%);background-size:220px 8px}header>a:first-child{font-size:30px}header small{color:#d9c48b;line-height:2.2}header>a:last-child{align-self:center;text-decoration:none;border-bottom:1px solid #b59652}
main{position:relative;max-width:1160px;background:#fff7ec;margin:40px auto 60px;padding:48px 44px;border:1px solid #ceb77b;box-shadow:0 24px 90px #40211470;border-radius:5px}
main:before{content:'';display:block;height:32px;background:url('/assets/dancheong-pattern.svg?v=hongiwa-20261103') center/160px 80px;opacity:.7;border-top:1px solid #c6af74;border-bottom:1px solid #c6af74;margin:-24px 0 30px}
.eyebrow{color:#92502b;letter-spacing:3px}h1{color:#68321e;font-size:clamp(46px,7vw,80px);letter-spacing:-2px}h1 em{color:#a34835}h2{color:#91401f}h3{color:#743c26}.lead{color:#605047}.notice{background:#eee9d9;color:#4a5144;border-left:3px solid #ad8546;border-radius:0 10px 10px 0;font-size:14px}
main>.grid{gap:26px;align-items:stretch}main>.grid>section{background:#fffdf8;border:1px solid #d9ccb0;border-top:4px solid #7f4a2c;padding:24px;border-radius:12px;box-shadow:0 7px 24px #58331d08;margin-top:8px}main>.grid>section:nth-child(2){border-top-color:#aa513c}main>.grid>section>p{font-size:14px;color:#796355}section{margin-bottom:32px}#guide{background:#f9ebdb;border:1px solid #cabc96;padding:26px;border-radius:12px}article{background:#fffdf8;border:1px solid #ddd0b2;border-radius:10px}
input:not([type=checkbox]),select,textarea{background:#fffef9;border-color:#cbbf9d;border-radius:6px;padding:12px}label{font-size:14px;font-weight:500}button,.button{background:#a44724;color:#fff9e9;border:1px solid #6d4128;border-radius:6px;font-size:14px;letter-spacing:.2px;min-height:44px;transition:background .15s,box-shadow .15s}button:hover:not(:disabled),.button:hover{background:#7c341d;box-shadow:0 3px 12px #4b261025}#checkin>button,#save{background:#984733;border-color:#984733}#checkin>button:hover,#save:hover{background:#7e3929}.plain{background:#fcf8ed;color:#78462f;border-color:#c8b88f}.plain:hover:not(:disabled){background:#e9eee4;color:#68321e}.camera{position:relative;background:radial-gradient(ellipse at 50% 35%,#7d4626,#4d240c 75%);color:#f2e9cf;border:2px solid #bba063;outline:5px solid #fae7ce;border-radius:110px 110px 12px 12px;margin:18px 5px 22px}.camera #placeholder{padding:36px 24px;font:24px/1.6 Georgia,serif}.camera #placeholder:before{content:'✧';display:block;color:#d5bb78;font-size:42px;margin-bottom:10px}.camera span{display:block;font:12px/2 system-ui;letter-spacing:1px;color:#e4dcd8}.upload{padding-top:12px;border-top:1px solid #ddd0b2}.journal article{border-top:3px solid #b59652}.journal h3{font:22px Georgia,serif}footer{border-top:1px solid #c0ac72;color:#635c58;margin-top:30px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#b86937}
@media(max-width:700px){body{background-size:auto,160px 80px;background-attachment:scroll}header{padding:18px 20px}header>a:first-child{font-size:25px}main{margin:26px 12px;padding:28px 16px;border-radius:8px}main:before{margin:-10px 0 22px;height:24px}h1{font-size:49px;letter-spacing:-1px}.lead{font-size:17px}main>.grid>section{padding:19px}.grid{gap:10px}#guide{padding:20px}.notice{padding:13px 16px}.camera{border-radius:90px 90px 12px 12px}.actions{gap:8px}.actions>button{flex:1;padding:10px 12px}header small{font-size:9px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}}
html{scroll-behavior:smooth;scroll-padding-top:24px}body{padding-bottom:90px}.studio-nav{position:fixed;z-index:20;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:8px;background:#74351f;box-shadow:0 5px 28px #3e1e1266;border:1px solid #b59652;border-radius:14px;width:min(92%,520px)}.studio-nav a{flex:1;text-align:center;color:#fff7e3;text-decoration:none;padding:12px 5px;font-size:14px;min-height:44px;border-radius:8px}.studio-nav a:hover{background:#63351b}.routine-card,.compare-tools{background:#eeeee0;padding:22px;border:1px solid #d4c79f;border-radius:12px}.routine-card input{accent-color:#a44724;width:20px;height:20px}.compare-tools{margin:20px 0}.compare-stage{position:relative;aspect-ratio:4/3;background:#4e2b17;border-radius:12px;overflow:hidden}.compare-stage>img,.compare-stage>div,.compare-stage>div>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#after-layer{clip-path:inset(0 50% 0 0);background:#4e2b17}input[type=range]{padding:0;width:100%;accent-color:#984733}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.product-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.product-controls label{margin:0}.studio-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.studio-products article{padding:18px;min-width:0}.studio-products h3{font:20px/1.4 Georgia,serif;overflow-wrap:anywhere}.studio-products img{width:100%;height:180px;object-fit:contain;background:#fff;border-radius:8px}.studio-products small{color:#726a65}.studio-products .button,.studio-products button{display:block;width:100%;margin-top:10px}.capture-help{border:1px solid #d8c69b;background:#f6f1df;padding:12px;border-radius:8px;font-size:14px}.capture-help summary{cursor:pointer;font-weight:600}#shelf-add{display:flex;gap:12px;align-items:end}#shelf-add label{flex:1}#shelf-add button{margin-bottom:13px}.studio-nav{width:min(95%,600px)}.studio-nav a{font-size:13px}@media(max-width:700px){.product-controls{grid-template-columns:1fr 1fr}.studio-products{grid-template-columns:1fr 1fr;gap:10px}.studio-products article{padding:12px}.studio-products h3{font-size:17px}.studio-products img{height:130px}#shelf-add{display:block}.studio-nav a{font-size:11px;padding:12px 2px}}@media(max-width:380px){.studio-products,.product-controls{grid-template-columns:1fr}}

/* Soft ivory and warm grey backgrounds. */
body{background:#efeee9}main{background:#fbfaf7;border-color:#d8d7d1;box-shadow:0 18px 64px #302f291c}main>.grid>section,article{background:#fff;border-color:#deddd7}#guide,.routine-card,.compare-tools{background:#f1f0ec;border-color:#d8d7d1}
body{background:#f7f6f2 url('/assets/geometric-reference-tile.jpg') repeat;background-size:157px 138px}

/* Reference palette across Skin Studio. */
:root{--ink:#3d211c;--rose:#9a260f;--line:#d8c9c1;--jade:#a52a11;--gold:#ed6b24}
header{background:linear-gradient(110deg,#6e180d,#a52a11 65%,#be390f);color:#fff8f2;border-color:#c9c5c2}header:after{background:linear-gradient(90deg,#9c220d,#f26722 40%,#ff9b54 70%,#b52d0e)}header small{color:#ffe3d6}
main{background:#fffaf5;border-color:#d0c9c5}h1,h2,h3{color:#741a0d}h1 em,.eyebrow{color:#a3290e}.notice,#guide,.routine-card,.compare-tools{background:#f9e3d8;border-color:#d8c9c1;color:#3d211c}main>.grid>section,article{background:#fffdfb;border-color:#d8c9c1}button,.button,#checkin>button,#save{background:#98240e;color:#fffaf5;border-color:#bb5e40}button:hover:not(:disabled),.button:hover{background:#6e180d}.plain{background:#fff8f2;color:#741a0d}.studio-nav{background:#741a0d;border-color:#e77b47}
/* Smooth silver framing with no patterned background. */
body{background:linear-gradient(135deg,#dedddb,#f4f3f1 48%,#d2d2d0);background-attachment:fixed}main{border-color:#b9b9b8}main:before{background:linear-gradient(90deg,#aaa,#f5f5f4,#c4c4c3,#ececeb);opacity:1;border-color:#c7c7c6}main>.grid>section,article{border-color:#c8c8c7}@media(max-width:700px){body{background-attachment:scroll}}