@charset "UTF-8";
:root{--paper:#faf9f6;--white:#fff;--ink:#222a30;--muted:#66716f;--border:#e3e5df;--accent:#b84d29;--accent-soft:#fff2e9;--green:#42705a;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}h1,h2,h3,p{margin:0}svg{display:block;width:22px;height:22px;flex-shrink:0}.container{max-width:1160px;margin:0 auto;padding:0 28px}.site-header{border-bottom:1px solid var(--border);background:var(--paper)}.header-inner{max-width:1312px;padding:23px 40px;display:flex;align-items:center;gap:52px;margin:auto}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:750;letter-spacing:-.7px;white-space:nowrap}.brand-mark{display:flex;gap:2px;align-items:center;justify-content:center;width:35px;height:35px;background:var(--accent);color:white;font-size:21px;border-radius:8px;font-family:var(--mono)}.brand-mark i{font-style:normal;font-size:16px}.brand-light{font-weight:400;color:var(--muted)}nav{display:flex;align-items:center;gap:28px}.site-header nav a{color:var(--muted);font-size:14px;position:relative;padding:5px 0;white-space:nowrap}.site-header nav a[aria-current]{color:var(--ink);font-weight:650}.site-header nav a[aria-current]:after{content:"";width:5px;height:5px;background:var(--accent);border-radius:100%;position:absolute;bottom:-10px;left:calc(50% - 2px)}a:hover,button.text-button:hover{color:var(--accent)}.header-local{margin-left:auto;font:10px var(--mono);letter-spacing:1px;display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--green)}.eyebrow{font:11px var(--mono);letter-spacing:1.5px;color:var(--accent);display:flex;gap:10px;align-items:center}.home-hero{padding:76px 0 68px;position:relative}.home-hero h1{font-size:44px;line-height:1.4;letter-spacing:-2px;margin:22px 0 20px;font-weight:720}.home-hero h1>span{color:var(--muted);font-weight:450}.home-hero>p{font-size:16px;color:var(--muted);line-height:1.9}.hero-note{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:26px;color:var(--green)}.hero-note svg{width:17px;height:17px}.hero-decoration{position:absolute;right:32px;top:105px;transform:rotate(-7deg);text-align:center;color:#c3beb2}.hero-decoration .code-mark{font:100px var(--mono);letter-spacing:-15px;color:#d6d3c9;line-height:1.2}.code-mark span{font-size:68px;color:#c16949}.hero-decoration>span{font:8px var(--mono);letter-spacing:2px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.section-heading h2{font-size:18px;font-weight:650}.section-heading h2 span{font:11px var(--mono);color:var(--accent);vertical-align:super;margin-left:8px}.section-heading>span{font-size:12px;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tool-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:13px;padding:27px 30px 0;transition:border-color .15s,transform .15s,box-shadow .15s}.tool-card:hover{color:var(--ink);border-color:#c5a08c;transform:translateY(-3px);box-shadow:0 8px 20px #30261507}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.icon-tile{height:54px;width:54px;background:var(--accent-soft);border-radius:12px;display:grid;place-items:center;color:var(--accent)}.tool-card:nth-child(2) .icon-tile{background:#edf2eb;color:var(--green)}.icon-tile svg{width:38px;height:38px}.tool-symbol{font:22px var(--mono)}.tool-symbol span{font-size:15px}.card-number{font:12px var(--mono);color:#91988d}.tool-card .eyebrow{font-size:9px;color:var(--muted);letter-spacing:1.3px}.tool-card h2{margin:9px 0 12px;font-size:23px;letter-spacing:-1px;display:flex;justify-content:space-between}.tool-card h2>span{font-weight:400;color:var(--muted)}.tool-card p{font-size:14px;color:var(--muted);line-height:1.8}.card-bottom{margin-top:25px;border-top:1px solid var(--border);padding:17px 0;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.card-bottom i{font-style:normal;margin:0 6px;color:#acb0a7}.round-arrow{border:1px solid var(--border);border-radius:50%;width:26px;height:26px;display:grid;place-items:center}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:54px 0 66px;padding-top:32px;border-top:1px solid var(--border)}.principles>div>span{font:9px var(--mono);color:var(--muted);letter-spacing:1px}.principles h3{font-size:15px;margin:12px 0 7px;font-weight:600}.principles p{font-size:12px;color:var(--muted)}.breadcrumb{display:flex;gap:12px;padding-top:28px;font-size:12px;color:var(--muted)}.breadcrumb>span:last-child{color:var(--ink)}.tool-heading{padding:34px 0 30px;position:relative}.tool-heading h1{font-size:36px;line-height:1.4;letter-spacing:-1.6px;margin:13px 0 10px;font-weight:720}.tool-heading h1>span{font-weight:500}.tool-heading>p{font-size:14px;color:var(--muted)}.guide-link{position:absolute;bottom:33px;right:0;font-size:12px;color:var(--muted);display:flex;gap:12px}.workspace{border:1px solid var(--border);background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 3px 8px #222a3003}.workspace-toolbar{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);gap:16px}.segmented{background:#f1f2ee;border:1px solid #e9eae5;border-radius:7px;display:flex;padding:4px;gap:4px}.segmented button{border-radius:4px;font-size:13px;color:var(--muted);background:transparent;padding:8px 22px;min-height:39px;display:flex;gap:22px;align-items:center}.segmented button.active{color:var(--accent);background:white;box-shadow:0 1px 4px #172d1712;font-weight:650}.checkbox{font-size:12px;display:flex;align-items:center;gap:7px;cursor:pointer;min-height:40px}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.help-badge{border:1px solid #c9cec7;color:var(--muted);border-radius:50%;width:15px;height:15px;font:10px var(--mono);display:grid;place-items:center}.editor-grid{display:grid;grid-template-columns:1fr 1fr}.editor-panel{min-width:0;display:flex;flex-direction:column}.editor-panel+.editor-panel{border-left:1px solid var(--border)}.editor-heading{height:63px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:8px}.editor-heading>label{font-size:13px;font-weight:650}.editor-heading label>span{font-size:10px;margin-left:9px;font-weight:400;color:var(--muted)}.text-button{font-size:11px;background:none;padding:9px 7px;color:var(--ink);border-radius:4px;min-height:35px}.text-button.muted{color:var(--muted)}textarea{width:100%;padding:2px 22px 20px;border:0;resize:vertical;min-height:250px;height:272px;background:transparent;color:var(--ink);font:13px/1.85 var(--mono);border-radius:0}textarea::placeholder{color:#88918a;opacity:1}.output-panel{background:#fbfcf9}.output-badge{font:10px var(--mono);background:#eff1eb;color:var(--muted);border:1px solid #e6e9e1;padding:2px 7px;border-radius:4px;white-space:nowrap}.output-badge.done{color:var(--green);background:#edf3e9}.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;min-height:55px;gap:10px;margin-top:auto;font:10px var(--mono);color:var(--muted)}.file-button{font-family:inherit;color:var(--muted);font-size:11px;padding:7px 9px;border:1px solid var(--border);border-radius:5px;background:white;cursor:pointer;position:relative}.file-button:focus-within{outline:3px solid var(--accent);outline-offset:3px}.file-info{font-size:11px;padding:0 22px 12px;color:var(--accent);overflow-wrap:anywhere}.result-actions{display:flex;gap:7px}.action-bar{border-top:1px solid var(--border);padding:17px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.action-bar>p{font-size:10px;color:var(--muted)}.action-bar>div{display:flex;align-items:center;gap:12px}.primary-button{padding:11px 24px;min-height:44px;color:white;background:var(--accent);font-size:13px;font-weight:600;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:28px}.primary-button:hover{background:#9d3e20;color:white}.secondary-button{border:1px solid var(--border);background:white;color:var(--muted);font-size:11px;padding:10px 12px;border-radius:6px;min-height:40px}.local-note{display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 0;color:var(--muted);font-size:11px}.local-note svg{width:15px;height:15px}.local-note strong{font-weight:500;color:var(--green)}.local-dot{font-size:9px;padding-left:14px;margin-left:6px;border-left:1px solid var(--border);color:var(--green)}.guide-section{display:grid;grid-template-columns:1fr 1fr;gap:76px;border-top:1px solid var(--border);padding:43px 0;margin-top:24px}.guide-section h2{font-size:24px;letter-spacing:-.8px;margin:13px 0 13px;font-weight:600}.guide-section>div>p{font-size:13px;color:var(--muted);line-height:1.9;max-width:380px}.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}.steps li{display:flex;gap:17px;align-items:flex-start}.steps li>span{font:10px var(--mono);color:var(--accent);background:#f4eee6;border-radius:50%;padding:8px}.steps h3{font-size:13px;font-weight:600;margin-bottom:4px}.steps p{font-size:12px;color:var(--muted);line-height:1.8}.reference-section{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:64px;border-top:1px solid var(--border);padding-top:30px}.example-card{padding:24px;background:#f1f0e9;border-radius:8px;align-self:start}.example-card .eyebrow{font-size:9px;color:var(--muted)}.example-card h2{font-size:16px;margin:12px 0}.example-card code{font:12px/2 var(--mono);overflow-wrap:anywhere;display:block;color:#6c4c37}.example-card code>span{margin:0 8px}.example-card p{font-size:11px;color:var(--muted);margin-top:13px}.faq-list>h2{font-size:16px;margin:0 0 8px}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{cursor:pointer;font-size:12px;list-style:none;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{color:var(--muted)}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details p{font-size:12px;color:var(--muted);padding:0 20px 14px 0;line-height:1.9}.shift-toolbar{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;gap:38px;align-items:center}.field-label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}.field-label>span{margin-left:6px;font-size:10px;color:var(--muted);font-weight:400}.offset-controls{display:flex;max-width:240px;border:1px solid var(--border);border-radius:6px;overflow:hidden;height:42px}.offset-controls button{padding:0 13px;background:#f7f8f4;color:var(--muted);font-size:18px}.offset-controls input{border:0;background:white;min-width:0;width:126px;text-align:center;font:15px var(--mono);appearance:textfield;-moz-appearance:textfield}.offset-controls input::-webkit-inner-spin-button{appearance:none}.shift-toolbar p{font-size:10px;color:var(--muted);margin-top:7px}.shift-toolbar p>span{padding:0 10px}select{max-width:100%;padding:10px 30px 10px 12px;border:1px solid var(--border);border-radius:6px;background:white;color:var(--ink);font-size:12px;height:42px}.format-label{margin-left:auto;text-align:right}.format-pill{font:10px var(--mono);border:1px solid var(--border);color:var(--muted);padding:4px 7px;border-radius:4px;margin-left:4px}.message{margin:0;padding:13px 22px;background:#eef4e9;border-top:1px solid var(--border);color:#376044;font-size:12px;overflow-wrap:anywhere}.message.error{color:#a12f22;background:#fff0eb}.site-footer{border-top:1px solid var(--border)}.footer-inner{max-width:1160px;padding:29px 28px 35px;margin:auto;display:flex;align-items:center;gap:50px}.footer-brand{font-size:13px;font-weight:600;letter-spacing:-.3px}.footer-inner p{font-size:10px;color:var(--muted);margin-top:3px}.footer-inner nav{margin-left:auto;font-size:11px;gap:22px;color:var(--muted)}.copyright{font:10px var(--mono);color:var(--muted)}.prose{max-width:720px;margin:64px auto 80px}.prose h1{font-size:36px;letter-spacing:-1px;line-height:1.4;margin:17px 0 25px}.prose .lead{font-size:19px;color:var(--muted)}.prose h2{font-size:21px;margin:35px 0 12px}.prose p{font-size:15px;line-height:1.9;margin:12px 0;color:var(--muted)}.prose a{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}.prose .updated{font-size:12px}.not-found{padding:100px 0 140px;text-align:center}.not-found .eyebrow{justify-content:center}.not-found h1{font-size:36px;margin:24px 0 14px}.not-found p{color:var(--muted);margin-bottom:30px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-80px;left:20px;background:var(--ink);color:white;padding:10px 20px;z-index:10}.skip-link:focus{top:12px}.noscript{background:var(--accent-soft);padding:16px;color:var(--accent);margin-top:20px}
@media(min-width:1500px){.home-hero{padding-top:96px;padding-bottom:86px}.home-hero h1{font-size:48px}.hero-decoration{top:125px}}
@media(max-width:1000px){.header-inner{gap:32px;padding:20px 28px}.header-local{display:none}.site-header nav{margin-left:auto}.hero-decoration{right:0;opacity:.6}.home-hero h1{font-size:38px}.hero-decoration .code-mark{font-size:76px}.code-mark span{font-size:50px}.hero-decoration>span{font-size:6px}.guide-section{gap:38px}.shift-toolbar{gap:25px}}
@media(max-width:720px){.container{padding:0 20px}.header-inner{padding:17px 20px;flex-wrap:wrap;gap:18px}.brand{font-size:18px}.brand-mark{width:30px;height:30px}.site-header nav{gap:23px}.site-header nav a{font-size:12px}.site-header nav a[aria-current]:after{bottom:-5px}.home-hero{padding:45px 0 38px}.home-hero h1{font-size:32px;letter-spacing:-1.4px}.home-hero>p{font-size:14px}.hero-decoration{display:none}.tool-grid{grid-template-columns:1fr;gap:16px}.tool-card{padding:23px 24px 0}.card-top{margin-bottom:20px}.tool-card h2{font-size:23px}.principles{grid-template-columns:1fr;gap:25px;margin:34px 0 40px;padding-top:26px}.principles h3{margin-top:6px}.section-heading>span{font-size:10px}.breadcrumb{padding-top:22px}.tool-heading{padding-top:27px;padding-bottom:26px}.tool-heading h1{font-size:29px;letter-spacing:-1.3px}.tool-heading>p{font-size:12px}.tool-heading .eyebrow{font-size:9px}.guide-link{position:static;display:inline-flex;margin-top:16px;font-size:11px}.workspace-toolbar{padding:13px 14px;gap:7px}.segmented button{padding:7px 13px;font-size:12px;gap:13px}.checkbox{font-size:11px;gap:4px}.help-badge{display:none}.editor-grid{grid-template-columns:1fr}.editor-panel+.editor-panel{border-left:0;border-top:1px solid var(--border)}.editor-heading{height:54px;padding:0 16px}.editor-heading>label{font-size:12px}textarea{height:205px;min-height:180px;padding:2px 16px 12px;font-size:12px}.editor-footer{padding:8px 16px}.file-info{padding-left:16px;padding-right:16px}.action-bar{padding:15px 16px;flex-direction:column;align-items:stretch;gap:12px}.action-bar>p{text-align:center;font-size:10px}.action-bar>div{justify-content:space-between;gap:8px}.action-bar .primary-button{flex:1;padding:11px 15px;gap:14px}.secondary-button{font-size:10px;padding:10px}.local-note{font-size:10px;gap:5px;padding:17px 0;align-items:center}.local-note svg{width:14px}.local-dot{display:none}.guide-section{grid-template-columns:1fr;gap:25px;padding:30px 0;margin-top:16px}.guide-section h2{font-size:23px}.guide-section>div>p{max-width:100%}.reference-section{grid-template-columns:1fr;gap:28px;margin-bottom:40px}.shift-toolbar{padding:17px 16px;display:grid;grid-template-columns:1fr;gap:18px}.negative-field select{width:100%}.offset-controls{max-width:none}.offset-controls input{width:100%;flex:1}.offset-controls button{min-width:45px}.format-label{display:none}.footer-inner{padding:25px 20px;flex-wrap:wrap;gap:20px}.footer-inner nav{gap:15px;font-size:10px}.copyright{width:100%;font-size:9px}.prose{margin:40px auto 55px}.prose h1{font-size:29px}.prose .lead{font-size:17px}.prose h2{font-size:19px}.prose p{font-size:14px}.not-found h1{font-size:27px}}
@media(max-width:420px){.header-inner{gap:15px}.site-header nav{width:100%;margin:0;justify-content:space-between}.container{padding:0 16px}.home-hero h1{font-size:28px}.tool-heading h1{font-size:26px}.tool-card h2{font-size:21px}.workspace-toolbar{align-items:center}.segmented button{padding:7px 10px;gap:8px}.editor-heading label>span{font-size:9px;margin-left:5px}.footer-inner nav{width:100%;margin:0}.local-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* GreatJIN signature and additional utilities */
.brand-mark img{display:block;width:100%;height:100%;border-radius:inherit}.icon-tile{position:relative;padding-bottom:9px;height:62px;width:62px}.icon-tile .tool-symbol{font-size:23px}.icon-tile .html-symbol{font-size:19px}.icon-tile svg{width:35px;height:35px}.icon-watermark{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:7px/1 var(--mono);letter-spacing:.2px;opacity:.66}.icon-watermark b{font-weight:800}.tool-card:nth-child(3) .icon-tile{background:#edf0f6;color:#536384}.tool-card:nth-child(4) .icon-tile{background:#f4eddf;color:#8b6932}.tool-card:nth-child(5) .icon-tile{background:#eeeaf4;color:#795e93}.tool-card:nth-child(6) .icon-tile{background:#e9f2f1;color:#367b76}.header-inner{gap:32px}.header-inner nav{gap:22px}.format-nav{display:flex;gap:8px;margin:0 0 19px}.format-nav a{padding:7px 14px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);background:var(--white)}.format-nav a[aria-current]{border-color:#d2ab95;color:var(--accent);background:var(--accent-soft)}.format-nav a span{font-size:10px;margin-left:3px}.indent-field{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted)}.indent-field select{height:37px;font-size:11px;padding-top:7px;padding-bottom:7px}.formatter-label{font:14px var(--mono);color:var(--accent)}.formatter-label span{font-size:9px;margin-left:12px;color:var(--muted);letter-spacing:1px}.code-editor{tab-size:2;white-space:pre;overflow:auto;overflow-wrap:normal;height:330px}.timestamp-workspace textarea{height:118px;min-height:100px;font-size:15px;padding-top:9px}.timestamp-workspace .editor-heading{height:auto;min-height:62px;flex-wrap:wrap;padding-top:12px;padding-bottom:8px}.timestamp-workspace .editor-heading label{font-size:12px}.timestamp-workspace .segmented button{gap:0}.timestamp-details{padding:24px;border-top:1px solid var(--border);background:#f7f9f4;display:grid;gap:18px}.timestamp-details[hidden]{display:none}.timestamp-details>div{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center}.timestamp-details span{font:10px var(--mono);color:var(--muted);letter-spacing:.5px}.timestamp-details code{font:13px/1.7 var(--mono);overflow-wrap:anywhere}.timestamp-workspace .message.error,.code-workspace .message.error{white-space:pre-wrap;font-family:var(--mono);max-height:260px;overflow:auto}.timestamp-workspace .editor-footer{gap:7px}
@media(max-width:1100px){.header-local{display:none}.header-inner nav{margin-left:auto}}@media(max-width:720px){.header-inner{gap:16px}.site-header nav{width:100%;margin:0;justify-content:space-between;gap:12px}.site-header nav a{font-size:11px}.timestamp-workspace .workspace-toolbar{flex-direction:column;align-items:stretch;gap:14px}.timestamp-workspace .segmented button{flex:1;justify-content:center;padding:8px}.timestamp-workspace .indent-field{justify-content:space-between}.timestamp-workspace .indent-field select{flex:1}.timestamp-details{padding:20px 16px}.timestamp-details>div{grid-template-columns:1fr;gap:5px}.timestamp-details code{font-size:12px}.code-editor{height:260px;min-height:210px}.code-workspace .workspace-toolbar{padding:12px}.code-workspace .indent-field{gap:6px}.code-workspace .indent-field select{padding-right:23px}.timestamp-workspace textarea{font-size:13px}.timestamp-workspace .action-bar>p{font-size:9px}}@media(max-width:360px){.header-inner nav{gap:7px}.site-header nav a{font-size:10px}.code-workspace .workspace-toolbar{flex-wrap:wrap}.format-nav{gap:6px}.format-nav a{padding:7px 10px}.format-nav a span{font-size:9px}.timestamp-workspace .editor-heading{padding:12px 12px 5px}.timestamp-workspace .editor-heading label{font-size:11px}}
@media(max-width:720px){.code-workspace .workspace-toolbar{flex-wrap:wrap;justify-content:flex-start;gap:12px 16px}.code-workspace .workspace-toolbar>div:first-child{flex-basis:100%}.code-workspace .formatter-label{white-space:nowrap}.code-workspace .indent-field{white-space:nowrap;flex:1 1 160px;justify-content:space-between}.code-workspace .indent-field select{flex:1;min-width:0;max-width:240px}}

/* Navigation and identity for the color tool */
.tool-card:nth-child(7) .icon-tile{background:#f6ebeb;color:#a45877}.site-header nav{flex-wrap:wrap}
@media(max-width:720px){.site-header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:10px 15px}.site-header nav a{padding:5px 0}}

/* Image tool */
.tool-card:nth-child(8) .icon-tile{background:#e8ecdf;color:#627149}
@media(min-width:721px) and (max-width:1300px){.header-local{display:none}.site-header nav{margin-left:auto}}
@media(max-width:720px){.site-header nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}.site-header nav a{font-size:10px}}