:root{font-family:Inter,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;color:#20251f;background:#f6f3ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #626cf5;outline-offset:3px}h1,h2,h3,h4,h5,p{margin-top:0}
.page{max-width:1740px;margin:auto;padding:28px clamp(18px,3.5vw,54px) 34px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:14px 0 32px}.eyebrow,.section-heading p,.section-kicker,.workspace-top p,.detail-head p,.inspector-head p,.code-title,.usage article>span,.page-footer,.heading-count,.scale-caption,.token-summary>p{font-size:11px;font-weight:900;letter-spacing:.13em}.eyebrow{display:flex;align-items:center;gap:11px;color:#126550;margin:0 0 10px}.brand-mark{position:relative;display:inline-block;width:19px;height:19px;border:2px solid #0d6756;border-radius:5px}.brand-mark:after{content:"";position:absolute;width:18px;height:18px;left:6px;top:5px;border-radius:5px;background:#adf52a;z-index:-1}h1{font-size:clamp(54px,5vw,76px);line-height:1;letter-spacing:0;margin:0 0 20px;font-weight:900;white-space:nowrap}h2{font-size:clamp(20px,2vw,32px);line-height:1.2;margin:0}h3{font-size:16px;margin:0}.lead{font-size:clamp(16px,1.55vw,23px);font-weight:700;color:#656c65;margin:0}.lead strong{color:#20251f}.hero-actions{display:flex;gap:10px;flex:none}.hero-actions button{min-height:48px;padding:0 17px;border-radius:15px;border:1px solid #d0d5cd;background:#fff;font-size:12px;font-weight:800}.hero-actions button:last-child{background:#20251f;border-color:#20251f;color:#fff}.hero-actions button:hover{transform:translateY(-2px);box-shadow:0 7px 15px rgb(20 31 22 / .13)}
.builder,.usage{border:1px solid #d7d9d1;border-radius:28px;background:#fffdf8;overflow:hidden}.section-heading{display:flex;align-items:center;gap:16px;padding:22px 26px;border-bottom:1px solid #d7d9d1;background:#fff}.section-heading p{color:#116756;margin:0 0 3px}.section-number{width:53px;height:53px;display:grid;place-items:center;flex:none;border-radius:15px;background:#ff6454;color:#fff;font-size:14px;font-weight:900}.section-number.blue{background:#626cf5}.heading-count{margin-left:auto;color:#626cf5;background:#f1f3f2;padding:11px;border-radius:99px;white-space:nowrap}.builder-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 318px;align-items:stretch;min-height:790px}
.controls{border-right:1px solid #d7d9d1;background:#fffcf6}.control-section{padding:25px 22px 28px;border-bottom:1px solid #d7d9d1}.control-section:last-child{border:0}.section-kicker{color:#0d725e;margin:0 0 7px}.control-section h3{margin-bottom:17px}.preset-list{display:grid;gap:9px}.preset-list button{display:flex;align-items:center;text-align:left;gap:12px;width:100%;min-height:69px;border:1px solid #cbd2ca;border-radius:13px;background:#fff;padding:10px 12px;color:#20251f;transition:transform .17s,border-color .17s,box-shadow .17s,background .17s}.preset-list button:hover{transform:translateX(3px);border-color:#5e7061;box-shadow:0 4px 11px rgb(27 39 28 / .09)}.preset-list button[aria-pressed="true"]{background:#20251f;border-color:#20251f;color:#fff}.preset-list button span:last-child{display:grid;gap:3px}.preset-list b{font-size:13px}.preset-list small{font-size:10px;font-weight:700;opacity:.67}.preset-icon{width:43px;height:43px;border-radius:10px;background:#e5eae6;display:grid;place-items:center;flex:none}.preset-icon i{width:25px;height:25px;border-radius:5px;background:#fff;border:2px solid #222;box-shadow:0 4px 5px #777}.preset-icon.soft{background:#e9e7ff}.preset-icon.soft i{border:0;box-shadow:0 6px 14px #9999ca}.preset-icon.crisp{background:#fff0b8}.preset-icon.crisp i{box-shadow:4px 4px 0 #27251c}.color-field{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.color-field label{font-size:12px;font-weight:800}.color-field>div{display:flex;align-items:center;gap:7px}.color-field input{appearance:none;width:36px;height:36px;padding:3px;border:1px solid #bfcac0;background:#fff;border-radius:10px}.color-field input::-webkit-color-swatch-wrapper{padding:0}.color-field input::-webkit-color-swatch{border:0;border-radius:5px}.color-field output{font-size:11px;color:#616c61;font-family:ui-monospace,SFMono-Regular,monospace}.range-list{display:grid;gap:16px;margin-top:23px}.range-list label{display:grid;gap:8px}.range-list label>span{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800}.range-list output{color:#525ee7;font-family:ui-monospace,SFMono-Regular,monospace}.range-list input{width:100%;margin:0;accent-color:#6670f4}.control-help{font-size:11px;line-height:1.6;color:#657066;margin:18px 0 0}
.workspace{min-width:0;background:#e8edeb;padding:17px}.workspace-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 6px 14px}.workspace-top p{color:#0c6a58;margin:0 0 5px}.workspace-top h3{font-size:17px}.workspace-top>span{border-radius:99px;background:#0c755e;color:#fff;padding:8px 11px;font-size:10px;font-weight:900;white-space:nowrap}.preview-canvas{border:1px solid #cad4cc;border-radius:17px;background:#f3f5f2;padding:20px clamp(14px,2vw,30px) 28px;min-height:665px;transition:background .2s}.scale-caption{display:flex;justify-content:space-between;color:#727f78;margin-bottom:19px}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 21px;padding:15px 10px 28px}.level-button{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:150px;border:2px solid transparent;background:transparent;border-radius:16px;color:#20251f;transition:background .2s,transform .2s}.level-button:hover{background:rgb(255 255 255 / .54);transform:translateY(-3px)}.level-button[aria-pressed="true"]{border-color:#626cf5;background:rgb(255 255 255 / .75)}.level-chip{width:min(110px,80%);height:78px;display:grid;place-items:center;border-radius:13px;background:#fff;transition:box-shadow .25s,background .2s}.level-chip i{font-size:25px;font-style:normal;font-weight:900}.level-button strong{font-size:12px;margin-top:16px}.level-button small{font-size:10px;color:#6f7871;margin-top:3px;font-weight:700}.preview-divider{height:1px;background:#cbd5cd;margin:0 0 23px}.detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.detail-head p{color:#0d6957;margin:0 0 3px}.detail-head h4{font-size:23px;margin:0}.mode-switch{display:flex;gap:3px;background:#e4e8e4;border:1px solid #c9d1c9;border-radius:12px;padding:4px}.mode-switch button{border:0;border-radius:9px;padding:9px 10px;background:transparent;font-size:11px;font-weight:900;white-space:nowrap}.mode-switch button:hover{background:#eef2ee}.mode-switch button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px #9baa9a;color:#3845c6}
.detail-stage{display:grid;place-items:center;min-height:213px;margin-top:12px;overflow:hidden}.detail-surface{background:#fff;box-shadow:none;transition:box-shadow .25s,background .2s;min-width:260px}.detail-surface.card{width:min(100%,420px);padding:20px;border-radius:18px}.detail-surface .mini-kicker{font-size:10px;font-weight:900;color:#526b5a;letter-spacing:.12em;margin:0 0 12px}.detail-surface h5{font-size:22px;line-height:1.12;margin:0 0 9px}.detail-surface p{font-size:12px;line-height:1.55;color:#646c65;margin:0}.detail-surface .mini-row{display:flex;justify-content:space-between;margin-top:16px;border-top:1px solid #e2e7e1;padding-top:12px;font-size:10px;font-weight:800;color:#6d776f}.detail-surface.menu{width:min(100%,278px);padding:8px;border-radius:14px}.detail-surface.menu .menu-head{padding:10px 11px;font-size:10px;color:#647369;font-weight:900;letter-spacing:.12em}.detail-surface.menu .menu-row{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:12px;font-weight:800}.detail-surface.menu .menu-row.active{background:#eafecc}.detail-surface.dialog{width:min(100%,350px);padding:22px;border-radius:20px}.detail-surface.dialog .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:19px}.detail-surface.dialog .dialog-actions span{padding:8px 12px;border-radius:8px;font-size:10px;font-weight:900}.detail-surface.dialog .dialog-actions span:last-child{background:#20251f;color:#fff}.workspace-footnote{font-size:11px;color:#68766c;font-weight:700;margin:11px 5px 2px}
.inspector{min-width:0;background:#20241f;color:#f7f8f2}.inspector-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:23px 18px;border-bottom:1px solid #41483f}.inspector-head p{color:#a8b7ad;margin:0 0 5px}.inspector-head h3{font-size:18px}.inspector-head>span{font-size:10px;border-radius:99px;background:#363f34;color:#a9f637;font-weight:900;padding:8px;white-space:nowrap}.token-summary{padding:20px 18px;border-bottom:1px solid #41483f;display:grid;grid-template-columns:1fr auto;gap:6px}.token-summary>p{color:#9eaca1;margin:0;grid-column:1/-1}.token-summary code{font-size:15px;font-weight:800;color:#b1fa34}.token-summary span{font-size:10px;color:#bbc7b7;font-weight:900}.code-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 17px 0;color:#a6b5a7}.code-title button{border:0;background:#a9f72c;border-radius:10px;padding:11px 12px;font-size:11px;font-weight:900;color:#20241f;white-space:nowrap}.code-title button:hover{background:#cbff72;transform:translateY(-2px)}.code-block{overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;max-height:440px;margin:14px 11px 0;padding:17px 12px;border-radius:11px;border:1px solid #495248;background:#171b16;color:#dcf6c7;font-size:10px;line-height:1.65;tab-size:2}.inspector-tip{display:flex;gap:9px;margin:18px 17px;padding:12px 0;border-top:1px solid #41483f}.inspector-tip span{color:#aaf437}.inspector-tip p{font-size:11px;line-height:1.5;color:#bcc8bb;margin:0}.inspector-tip code{color:#eaf9d5}
.usage{margin-top:25px}.usage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:24px}.usage article{border:1px solid #d4d9d0;border-radius:16px;padding:20px;background:#fff}.usage article>span{display:block;color:#565fec;margin-bottom:20px}.usage article h3{font-size:20px;margin-bottom:9px}.usage article p{font-size:13px;color:#637067;line-height:1.65;min-height:43px}.usage article code{display:inline-block;font-size:11px;font-weight:800;padding:9px;border-radius:7px;background:#f0f3ee}.source-note{margin:23px 0;padding:19px 22px;border-left:4px solid #6873ee;background:#eeefeb;border-radius:0 13px 13px 0}.source-note h2{font-size:14px;margin:0 0 7px}.source-note p{font-size:12px;line-height:1.7;color:#4f5952;max-width:100ch;margin:0 0 8px}.source-note a{font-size:11px;font-weight:800;color:#3a45b5}.page-footer{display:flex;justify-content:space-between;padding:15px 2px;color:#536055}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,15px);background:#20251f;color:#fff;padding:10px 16px;border-radius:9px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1200px){h1{font-size:clamp(42px,5vw,64px)}.builder-grid{grid-template-columns:270px minmax(0,1fr)}.inspector{grid-column:1/-1}.code-block{max-height:300px}.inspector-tip{margin-bottom:10px}}
@media(max-width:800px){.page{padding:18px 14px}.hero{align-items:flex-start;flex-direction:column}.hero-actions{width:100%}.hero-actions button{flex:1}h1{white-space:normal}.builder-grid{display:block}.controls{border-right:0;border-bottom:1px solid #d7d9d1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.control-section{border-right:1px solid #d7d9d1}.colors-section{grid-column:1/-1}.workspace{padding:14px}.level-grid{gap:10px;padding-inline:0}.level-button{min-height:128px}.level-chip{height:65px}.usage-grid{grid-template-columns:1fr}.usage article p{min-height:0}.section-heading{padding:16px}.heading-count{display:none}}
@media(max-width:550px){h1{font-size:clamp(38px,11vw,60px)}.controls{display:block}.control-section{border-right:0}.preset-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset-list button{display:grid;justify-items:center;text-align:center;padding:10px 5px;gap:5px}.preset-list button span:last-child{min-height:33px}.preset-list b{font-size:11px}.preset-list small{font-size:10px}.section-heading h2{font-size:19px}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.level-button{min-height:112px}.level-chip{height:55px}.level-button strong{margin-top:9px}.preview-canvas{padding:15px 10px}.detail-head{align-items:flex-start;flex-direction:column}.mode-switch{width:100%}.mode-switch button{flex:1}.page-footer{font-size:10px;gap:10px}}
.detail-stage{min-height:270px;padding:18px 40px 72px;overflow:visible}
.detail-surface{min-width:0}
@media(max-width:550px){.detail-stage{padding-inline:24px}}
.preset-icon.hard{background:#d8eadf}
.preset-icon.hard i{border:0;box-shadow:3px 4px 4px rgb(38 60 55 / .5)}
@media(max-width:550px){.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.preview-canvas{background-color:var(--elevation-canvas,#f3f5f2)}
.level-chip,.detail-surface{background-color:var(--elevation-surface,#fff)}