@font-face{font-family: "NotoSerifTC"; src: url("./NotoSerifTC-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap;}:root{--gi-green: #3C5A43; --gi-bg: #F6F7F2; --gi-border: #C7D1C2; --gi-text: #3C5A43; --gi-badge-bg: #F6F7F2; --gi-badge-border: #3C5A43; --gi-badge-text: #3C5A43; --gi-btn-bg: #3C5A43; --gi-btn-text: #fff; --gi-btn-radius: 20px; --gi-shadow: 0 2px 8px rgba(60, 90, 67, 0.08);}html, body{height: 100%; padding: 20px;}body{margin: 0; background: var(--gi-bg); color: var(--gi-text); font-family: 'Chiron GoRound TC', serif; letter-spacing: 0.01em; padding: 0px;}.wrap{max-width: 1600px; padding: 0 16px;}.grid{display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding-bottom: 20px;}.card{background: var(--gi-bg); border-radius: 28px; box-shadow: var(--gi-shadow); border: 2px solid var(--gi-border); padding: 32px;}.title{font-size: 1.2em; font-weight: 600; color: var(--gi-text); margin-bottom: 18px; font-family: 'Chiron GoRound TC', serif;}.subtitle{font-size: 1em; color: var(--gi-text); opacity: 0.7; margin-bottom: 18px;}.row{margin: 22px 0;}label{font-size: 1rem; color: var(--gi-text); margin-bottom: 10px; font-family: 'Chiron GoRound TC', serif; font-weight: 600;}input[type="range"]{-webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; position: relative;}input[type="range"]::-webkit-slider-runnable-track{height: 14px; background: var(--gi-border); border-radius: 7px; position: relative; top: 7px;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gi-green); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(60, 90, 67, 0.10); cursor: pointer; position: relative; top: -7px;}input[type="range"]:focus::-webkit-slider-thumb{background: #2E4633;}input[type="range"]::-ms-fill-lower{background: var(--gi-border); border-radius: 7px;}input[type="range"]::-ms-fill-upper{background: var(--gi-border); border-radius: 7px;}input[type="range"]::-moz-range-thumb{width: 28px; height: 28px; border-radius: 50%; background: var(--gi-green); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(60, 90, 67, 0.10); cursor: pointer;}input[type="range"]:focus::-moz-range-thumb{background: #2E4633;}input[type="range"]::-moz-range-track{height: 14px; background: var(--gi-border); border-radius: 7px;}input[type="range"]:focus{outline: none;}textarea{width: calc(100% - 32px); min-height: 120px; resize: vertical; background: var(--gi-bg); color: var(--gi-text); border: 2px solid var(--gi-border); border-radius: 10px; padding: 14px 18px; font-size: 1.1rem; font-family: 'Chiron GoRound TC', serif; box-shadow: var(--gi-shadow); margin-top: 10px;}textarea:focus{border-color: var(--gi-green); outline: none;}.stack{display: flex; gap: 12px; flex-wrap: wrap;}.btn{background: var(--gi-btn-bg); color: var(--gi-btn-text); border: none; border-radius: var(--gi-btn-radius); font-weight: 500; font-size: 0.6em; font-family: 'Chiron GoRound TC', serif; box-shadow: var(--gi-shadow); padding: 5px 12px; cursor: pointer; transition: background .2s;}.btn:hover{background: #2E4633;}.badge{background: var(--gi-badge-bg); color: var(--gi-badge-text); border: 1.5px solid var(--gi-badge-border); border-radius: 999px; font-family: 'Chiron GoRound TC', serif; font-weight: 500; padding: 2px 10px; margin-left: 6px;}.preview{background: var(--gi-bg); border-radius: 10px; box-shadow: var(--gi-shadow); border: 2px solid var(--gi-border); padding: 36px; min-height: 120px; font-family: 'Chiron GoRound TC', serif; font-size: 1.3rem; color: var(--gi-text);}.metrics{display: flex; gap: 0px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;}.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem;}.color-pickers{display: flex; gap: 0px; align-items: center; flex-wrap: wrap;}.color-pickers input[type="color"]{width: 48px; height: 36px; border: none; background: none; padding: 0; border-radius: 10px; box-shadow: var(--gi-shadow);}.divider{height: 2px; background: var(--gi-border); margin: 24px 0; border-radius: 2px;}.nav{position: fixed; bottom: 0; left: 0; width: 100%; height: 64px; background: var(--m3-nav-bg); display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -2px 8px rgba(76, 175, 80, 0.08); z-index: 10;}.nav-btn{background: none; border: none; outline: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--m3-nav-icon); font-size: 13px; font-weight: 500; border-radius: 12px; padding: 4px 12px; transition: background .2s;}.nav-btn.active{background: var(--m3-nav-active); color: var(--m3-primary);}.btn{font-family: 'Chiron GoRound TC', serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}.fab{position: fixed; right: 32px; bottom: 88px; background: var(--m3-accent); color: var(--m3-nav-icon); border: none; border-radius: 16px; box-shadow: 0 4px 16px rgba(76, 175, 80, 0.12); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 32px; cursor: pointer; transition: box-shadow .2s;}.fab:hover{box-shadow: 0 8px 24px rgba(76, 175, 80, 0.18);}.chiron-goround-tc-400{font-family: "Chiron GoRound TC", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}.chiron-sung-hk-400{font-family: "Chiron GoRound TC", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}